nixos-config/modules/user/packages/drvs/ags/style.scss

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

$radius: 10px;

%item {
    all: unset;
    background: $bg;
    border-radius: $radius;
    padding: 4px;

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

    label { margin: 0 8px; }
}

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 {
            all: unset;

            &: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 {
        all: unset;
        padding: 8px;
        border-radius: inherit;

        &:hover {
            background: $surface0;
        }
    }

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

    .Battery label {
        padding-left: 0;
        margin-left: 0;
    }

    .Time { padding: 0 8px; }

    .AudioSlider icon { margin-left: 8px; }

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