@use "sass:color";
@use "colors.scss" as *;

$radius: 10px;

* {
    all: unset;
}

%item {
    background: $bg;
    border-radius: $radius;
    padding: 6px 8px;

    & + &, .item + &, & + .item  { margin-left: 4px; }

    icon + label { margin-left: 4px; }
}

.item + .item { margin-left: 4px; }


window.Bar {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: $fg;
    font-size: 1.1em;
    font-weight: bold;
    
    .Container {
        margin: 10px 10px 0;
    }

    .Workspaces  {
        button {
            &:hover label {
                background: $surface0;
                color: $accent;
            }

            &:active label {
                background: $surface0;
                color: $accent;
            }
        }

        label {
            transition: 200ms;
            padding: 0 6px;
            margin: 2px;
            border-radius: $radius;
            border: 1pt solid transparent;
        }

        .focused label {
            background: $accent;
            color: $bg;
            border-color: $accent;
        }
    }

    .Layout.en { color: $accent; }

    .SysTray button {
        padding: 4px;
        border-radius: inherit;

        &:hover {
            background: $surface0;
            border-radius: 4px;
        }
    }

    .Media {
        &.playing {
            border: 2pt solid $accent;
        }
        
        .Cover {
            min-height: 1.2em;
            min-width: 1.2em;
            border-radius: $radius;
            background-position: center;
            background-size: contain;
        }
    }

    .Workspaces, .Wifi, .Layout, .Media, .SysTray, .AudioSlider, .Battery, .Time {
        @extend %item;
    }

    .Wifi, .AudioSlider {
        &, button {
            &:hover { background-color: $surface0; }
            &:active {
                background-color: $accent;
                color: $bg;
            }
        }
    }
}