@use "palette" as *;

* {
    all: unset;
    font-family: $font-family;
    font-size: $font-size;
}

.Bar,
.popup-window {
    background: transparent;
}

.bar {
    background: $base01;
    border-radius: 10px;
    margin: 8px;
    padding: 4px 12px;
    color: $base05;
}

.ws {
    min-width: 20px;
    border-radius: 6px;
    margin: 0 2px;
    padding: 0 6px;
}

.ws.active {
    background: $base0D;
    color: $base00;
}

.clock {
    font-weight: bold;
    margin: 0 8px;
}

.volume {
    border-radius: 6px;
    margin: 0 2px;
    padding: 0 6px;
}

.ws:hover,
.volume:hover,
.wifi:hover,
.battery:hover {
    background: transparentize($base05, 0.88);
}

.volume icon,
.mute icon,
.wifi icon,
.wifi-header icon,
.battery icon {
    font-size: 16px;
}

.dropdown {
    background: $base01;
    border-radius: 10px;
    padding: 8px 12px;
    color: $base05;
}

.mute {
    margin-right: 8px;
    padding: 0 6px;
    border-radius: 6px;
}

.vol-slider {
    trough {
        background: $base03;
        border-radius: 999px;
        min-height: 12px;

        highlight {
            background: $base0D;
            border-radius: 999px;
        }

        slider {
            min-width: 16px;
            min-height: 16px;
            background: $base05;
            border-radius: 999px;
        }
    }
}

.wifi-header {
    label {
        font-weight: bold;
        margin: 0 2px;
    }

    .wifi-rescan {
        padding: 0 2px;
        margin-right: 6px;
    }

    switch {
        background: $base03;
        border-radius: 999px;
        min-width: 34px;
        min-height: 16px;
        margin: 1px 0;

        slider {
            background: $base05;
            border-radius: 999px;
            min-width: 12px;
            min-height: 12px;
            margin: 2px;
        }
    }

    switch:checked {
        background: $base0D;

        slider {
            background: $base00;
        }
    }
}

.wifi-status,
.wifi-empty {
    font-size: 0.85em;
    opacity: 0.7;
    margin: 2px 0;
}

.wifi-password {
    margin: 4px 0;
    padding: 4px 8px;
    border-radius: 6px;
    background: $base02;
    color: $base05;
}

.wifi-row {
    padding: 4px 6px;
    border-radius: 6px;
    margin: 1px 0;

    icon {
        font-size: 16px;
    }

    .wifi-row-ssid {
        margin: 0 6px;
    }
}

.wifi-row:hover {
    background: transparentize($base05, 0.88);
}

.battery-percent {
    font-size: 1.6em;
    font-weight: bold;
}

.battery-level {
    font-size: 0.85em;
    margin-left: 3px;
}

.battery-status {
    font-size: 0.85em;
    opacity: 0.7;
}