@import "../colors";
@import '../../variables';

.menu-items.network {
    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-network-background-color);
    border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-network-border-color);
}

.menu-items-container.network {
    font-size: 1.3em;
    .menu-items-section {
        padding-bottom: 1.5em;
    }
    .menu-label {
        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-network-label-color);
    }

    .network-icon {
        font-size: 1.3em;
        min-width: 1em;
        min-height: 1em;
        color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-network-icons-passive);

        &.active {
            color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-network-icons-active);
        }
    }

    .menu-icon-button.network {
        margin: 1em;
    }

    .connection-container {
        margin-left: 1em;
    }
    .connection-status.dim {
        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
        opacity: 0.5;
        font-size: 0.9em;
    }
    .menu-section-container.wifi {
        margin-top: 0.65em;
        .menu-items-section {
            min-height: 12em;
        }
    }

    .network-element-item {
        &:not(:last-child) {
            margin-bottom: 0.5em;
        }

        &.staging {
            margin-bottom: 0.5em;
        }

        &:hover {
            .network-icon {
                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-network-icons-active);
                opacity: 1;
            }
            .active-connection {
                color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
            }
        }

        .active-connection {
            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
        }
        .active-connection.dim {
            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
            opacity: 0.5;
        }
    }

    .spinner.wap {
        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
    }

    .network-password-input-container {
        background: darken(if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-network-card-color), 5%);
        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
        border-radius: 0.4em;
        margin: 0em 2em;
        margin-top: 0.75em;
        padding: 0.5em;
    }

    .close-network-password-input-button {
        padding: 0em 0.5em;
        &:hover image { 
            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
            opacity: 0.5;
        }
    }

    .menu-icon-button.network.search {
        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-network-iconbuttons-passive);

        &:hover { 
            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
        }
    }
    
    .menu-icon-button.network.disconnect {
        margin: 0em;
        margin-top: -0.2em;
        margin-left: 1em;
        label {
            font-size: 1.4em;
        }
        &:hover { 
            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
        }
    }

    .waps-not-found.dim {
        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
        opacity: 0.5;
    }
    .menu-label-container {
        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-network-card-color);
    }


    .menu-items-section {
        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-network-card-color);
    }
}