nosignal-shell/scss/bar.scss

@use "sass:color";
@use "lib";
@use "scheme";
@use "font";

@mixin bar-spacing($vertical: false) {
    @include lib.spacing(10, $vertical);

    & > * {
        @include lib.spacing(10, $vertical);
    }
}

.bar {
    @include font.mono;

    font-size: lib.s(14);

    label.icon {
        font-size: lib.s(18);
    }

    .screen-corner {
        background-color: transparent;
    }

    .os-icon {
        color: scheme.$yellow;
    }

    .active-window {
        color: scheme.$pink;
    }

    .media-playing {
        color: scheme.$lavender;

        icon {
            font-size: lib.s(16);
        }
    }

    .workspaces {
        & > button {
            @include lib.rounded(100);
            @include lib.element-decel;

            font-size: lib.s(13);
            font-weight: bold;

            &.focused {
                background-color: scheme.$mauve;
            }
        }

        &:not(.labels-shown) > button {
            min-width: lib.s(8);
            min-height: lib.s(8);
            background-color: scheme.$surface1;

            &.occupied {
                background-color: scheme.$overlay1;
            }

            &.focused {
                background-color: scheme.$mauve;
            }
        }

        &.labels-shown > button {
            color: color.change(scheme.$overlay1, $alpha: 1);

            .icon {
                font-size: lib.s(13);
                color: color.change(scheme.$subtext0, $alpha: 1);
            }

            &.occupied {
                color: color.mix(scheme.$text, scheme.$mauve, 50%);
            }

            &.focused {
                color: color.change(scheme.$base, $alpha: 1);

                .icon {
                    color: color.change(scheme.$surface0, $alpha: 1);
                }
            }
        }
    }

    .tray {
        font-size: lib.s(15);
        color: scheme.$text;
    }

    .status-icons {
        color: scheme.$rosewater;
    }

    .pkg-updates {
        color: scheme.$blue;
    }

    .notif-count {
        color: scheme.$mauve;
    }

    .battery {
        color: scheme.$teal;

        &.charging {
            color: scheme.$success;
        }

        &.low {
            color: scheme.$error;
        }
    }

    .date-time {
        color: scheme.$peach;
    }

    .power {
        @include lib.element-decel;
        @include font.icon;

        color: scheme.$red;
        font-weight: bold;
        font-size: lib.s(16);

        &:hover,
        &:focus {
            color: color.change(scheme.$red, $alpha: 0.8);
        }

        &:active {
            color: color.change(scheme.$red, $alpha: 0.6);
        }
    }

    &.horizontal {
        margin: 10px 10px 0 10px;

        .module {
            padding: lib.s(5) lib.s(10);

            @include lib.spacing;
        }

        .os-icon {
            padding-right: lib.s(14);
        }

        .media-playing {
            @include lib.spacing(8);
        }

        .workspaces {
            @include lib.spacing(10);

            & > .focused {
                min-width: lib.s(30);
            }

            &.labels-shown > button {
                padding: lib.s(3) lib.s(8);

                &.focused {
                    min-width: 0;
                    padding-left: lib.s(20);
                    padding-right: lib.s(20);
                }

                .icon {
                    margin-left: lib.s(5);

                    &:nth-child(2) {
                        margin-left: lib.s(12);
                    }
                }
            }
        }

        .tray {
            @include lib.spacing(10);
        }

        .status-icons .bluetooth {
            @include lib.spacing(10);

            // The spacing doesn't look right for some reason so this
            & > :first-child:not(:last-child) {
                margin-right: lib.s(5);
            }
        }
    }

    &.vertical {
        margin: 10px 0 10px 10px;

        .module {
            padding: lib.s(8);

            @include lib.spacing($vertical: true);
        }

        .os-icon > * {
            margin-left: lib.s(-5);
        }

        .media-playing {
            @include lib.spacing(8, true);
        }

        .workspaces {
            @include lib.spacing(10, true);

            & > .focused {
                min-height: lib.s(30);
            }

            &.labels-shown > button {
                padding: lib.s(3) lib.s(8);

                &.focused {
                    min-height: 0;
                    padding-top: lib.s(15);
                    padding-bottom: lib.s(15);
                }

                .icon {
                    margin-top: lib.s(2);

                    &:nth-child(2) {
                        margin-top: lib.s(3);
                    }
                }
            }
        }

        .tray {
            @include lib.spacing(10, true);
        }

        .status-icons .bluetooth {
            @include lib.spacing(10, true);
        }
    }

    &.gaps {
        padding-right: lib.s(3);

        .module {
            @include lib.rounded(8);

            background-color: scheme.$base;
        }

        .screen-corner {
            background-color: transparent;
        }

        .os-icon {
            @include lib.border(scheme.$yellow);

            @if not scheme.$borders {
                @include lib.shadow;

                background-color: scheme.$yellow;
                color: scheme.$base;
            }
        }

        .power {
            @include lib.border(scheme.$red);

            @if not scheme.$borders {
                @include lib.shadow;

                background-color: scheme.$red;
                color: scheme.$base;
            }
        }

        &.horizontal {
            @include bar-spacing;

            .workspaces {
                padding: lib.s(6) lib.s(15);
            }
        }

        &.vertical {
            @include bar-spacing(true);

            .workspaces {
                padding: lib.s(15) lib.s(6);
            }
        }
    }

    &.panel {
        @include lib.rounded(20);
        @include lib.border(scheme.$primary, 0.5, 2);

        background-color: scheme.$base;

        .os-icon {
            font-size: lib.s(16);
        }

        &.horizontal {
            padding: lib.s(5) lib.s(10);
        }

        &.vertical {
            padding: lib.s(10) lib.s(5);

            .os-icon > * {
                margin-left: lib.s(-7);
            }
        }
    }

    &.embedded {
        $-rounding: 23;

        margin: 0;

        .module {
            background-color: scheme.$base;
        }

        .screen-corner {
            @include lib.rounded($-rounding);

            background-color: scheme.$base;
        }

        &.horizontal {
            .module {
                padding: lib.s(10) lib.s(10);
                padding-left: lib.s(15);
            }

            .before-spacer {
                border-bottom-right-radius: lib.s($-rounding);
                padding-right: lib.s(15);
            }

            .after-spacer {
                border-bottom-left-radius: lib.s($-rounding);
            }

            .workspaces.odd {
                margin-right: -1px;
            }

            .last {
                padding-right: lib.s(12);
            }
        }

        &.vertical {
            .module {
                padding: lib.s(8) lib.s(10);
            }

            .before-spacer {
                border-bottom-right-radius: lib.s($-rounding);
                padding-bottom: lib.s(15);
            }

            .after-spacer {
                border-top-right-radius: lib.s($-rounding);
                padding-top: lib.s(15);
            }

            .workspaces.odd {
                margin-bottom: -1px;
            }

            .first {
                padding-top: lib.s(12);
            }

            .last {
                padding-bottom: lib.s(12);
            }
        }
    }
}