@import "../colors";

.menu-items-container.network {
    font-size: 1.3em;
    .menu-items-section {
        padding-bottom: 1.5em;
    }
    .menu-label {
        color: $mauve;
    }

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

        &:hover {
            color: $mauve;
        }
    }

    .network-icon {
        font-size: 1.3em;
        min-width: 1em;
        min-height: 1em;
        
        color: $overlay1;

        &.active {
            color: $mauve;
        }
    }

    .connection-container {
        margin-left: 1em;
    }
    .connection-status {
        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 {
            color: $mauve;
        }
    }

    .spinner.wap {
        color: $mauve;
    }

    .network-password-input-container {
        background: $mantle;
        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: $mauve;
        }
    }

    .menu-icon-button.network.disconnect {
        margin-bottom: 0.4em;
        label {
            font-size: 1.3em;
        }
        &:hover { 
            color: $mauve;
        }
    }
}