trezor-wallet/src/styles/topNavigation.less

nav {
    display: flex;
    width: 100%;
    max-width: 1170px;
    height: 64px;
    margin: 0 auto;
    margin-top: 32px;
    z-index: 1;
    background: @color_white;
    border-radius: 4px 4px 0px 0px;
    border-bottom: 1px solid @color_divider;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);

    @media screen and (max-width: 1170px) {
        border-radius: 0px;
        margin-top: 0px;
    }

    // .layout-wrapper {
    //     height: 100%;
    //     background: @color_white;
    //     border-radius: 4px 4px 0px 0px;
    //     border-bottom: 1px solid rgba(218, 218, 218, 0.5);
    //     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
    // }

    // override styles for react-select
    .device-select {
        width: 320px;
        height: 64px;
        // display: inline-block;
        // vertical-align: middle;
        box-shadow: none;

        &.is-focused:not(.is-open) > .Select-control {
            border-color: @color_divider;
            box-shadow: none;
        }

        .Select-control {
            height: 63px;
            border: 0px;
            border-radius: 4px 0px 0px 0px;
            border-right: 1px solid @color_divider;
            cursor: pointer;
            transition: color 0.2s ease-in-out;
    
            .Select-input {
                background: transparent;
                position: absolute;
                top: 0;
                //display: none !important;
            }
    
            &:hover {
                background: transparent;
                // border: 0px;
                border-right: 1px solid @color_divider;
                box-shadow: none;

                .Select-arrow {
                    &:after {
                        color: @color_text_primary;
                    }
                }
            }
        }

        .Select-arrow-zone {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto 0;
            padding: 0px;
            width: 24px;
            height: 24px;
            right: 24px;

            .Select-arrow {
                top: 0px;
                border: 0px;
                width: 24px;

                &:after {
                    .icomoon-arrow-down;
                    transition: transform 0.3s;
                    color: @color_text_secondary;
                    transform-origin: 50% 50%;
                    font-size: 24px;
                }
            }
        }
    
        

        .Select-option {
            &:hover {
                background: red;
            }
    
            &.is-selected { 
                background: yellow;
            }
        }
    
        &.is-open {
            .Select-control {
                border-color: @color_divider;
            }

            .Select-arrow {
                top: 0px !important;
                border: 0px;
                
                
                &:after {
                    // .icomoon-arrow-up;
                    transform: rotate(180deg);

                }
            }
        }

        &.is-disabled {

            .Select-control {
                background: transparent;
                cursor: default;
            }

            .Select-arrow {
                visibility: hidden;
                &:after {
                    content: ''
                }
            }

            .device {
                .device-menu {
                    padding-right: 24px;
                }
            }
        }

        .Select-menu-outer {
            border-radius: 0px;
            border: 1px solid @color_divider;
            box-shadow: none;
            visibility: hidden;
        }
    }

    .device {
        height: 63px;
        width: 319px;
        display: flex;
        align-items: center;
        padding-left: 80px;

        &:before {
            content: '';
            position: absolute;
            display: block;
            width: 13px;
            height: 25px;
            z-index: 2;
            left: 33px;
            top: 17px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 13px 25px;
            background-image: url('../images/icontrezor.png');
        }

        .label-container {
            flex: 1;
            overflow: hidden;
            span {
                display: block;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
    
                &.label {
                    font-weight: 500;
                    font-size: 14px;
                    color: @color_text_primary;
                }
    
                &.status {
                    font-size: 12px;
                    color: @color_text_secondary;
                }
            }
        }

        .device-menu {
            display: flex;
            justify-content: flex-end;
            padding-right: 48px;
            padding-left: 4px;

            div {
                display: inline-block;
            }

            .forget,
            .settings,
            .acquire {
                cursor: pointer;

                &:before {
                    .icomoon-refresh;
                    color: @color_text_secondary;
                    position: relative;
                    font-size: 24px;
                    .hover();
                }
                
                &:hover {
                    &:before {
                        color: @color_text_primary;
                    }
                }
            }

            .forget {
                &:before {
                    .icomoon-eject;
                }
            }

            .settings {
                &:before {
                    .icomoon-settings;
                }
            }
        }

    }

    
}