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

.bar {
    @include font.mono;

    font-size: lib.s(14);

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

        background-color: scheme.$base;
    }

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

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

        color: scheme.$yellow;
        font-size: lib.s(14);
    }

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

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

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

    .power {
        @include lib.border(scheme.$red);
        @include lib.element-decel;
        @include font.icon;

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

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

        @include lib.spacing(10);

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

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

            @include lib.spacing;
        }

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

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

        @include lib.spacing(10, true);

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

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

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