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);
    }

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

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

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

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

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

        min-width: lib.s(8);
        min-height: lib.s(8);
        background-color: scheme.$surface1;

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

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

    .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 {
            padding: lib.s(3) lib.s(18);

            @include lib.spacing(10);

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

        .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 {
            padding: lib.s(18) lib.s(3);

            @include lib.spacing(10, true);

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

        .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;
        }

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

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

        background-color: scheme.$mantle;

        .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.$mantle;
        }

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

        &.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);
            }
        }
    }
}