@use "sass:string" as str;

@media (prefers-color-scheme: light) {
    :root {
        --red: #f57f82;
        --orange: #f7a182;
        --yellow: #f5d098;
        --green: #cae0a7;
        --aqua: #addeb9;
        --skye: #ace0d4;
        --blue: #b2cfed;
        --purple: #d0bbf0;
        --pink: #f3c0e5;
        --text: #f8f9e8;
        --subtext1: #adc9bc;
        --subtext0: #96b4aa;
        --overlay2: #839e9a;
        --overlay1: #6f8788;
        --overlay0: #58686d;
        --surface2: #4a585c;
        --surface1: #3d494d;
        --surface0: #2d393d;
        --base: #1d2428;
        --mantle: #191e21;
        --crust: #171c1f;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --red: #c0696b;
        --orange: #ca8c70;
        --yellow: #cbae75;
        --green: #a9be88;
        --aqua: #91bb9c;
        --skye: #8fbab5;
        --blue: #8ca4bb;
        --purple: #b19ac6;
        --pink: #d0a3c3;
        --text: #171c1f;
        --subtext1: #415055;
        --subtext0: #526469;
        --overlay2: #63787d;
        --overlay1: #758a90;
        --overlay0: #879da4;
        --surface2: #9cb2b8;
        --surface1: #b4c6cc;
        --surface0: #ced9e0;
        --base: #e9ebf0;
        --mantle: #e1e5ed;
        --crust: #d6dbe9;
    }
}

/** gtkcss shims */
@function lighter($colour) {
    @return str.unquote("lighter(#{$colour})");
}
@function darker($colour) {
    @return str.unquote("darker(#{$colour})");
}
@function shade($colour, $lightness) {
    @return str.unquote("shade(#{$colour}, #{$lightness})");
}
@function alpha($colour, $opacity) {
    @return str.unquote("alpha(#{$colour}, #{$opacity})");
}
@function mix($colour1, $colour2, $opacity) {
    @return str.unquote("mix(#{$colour1}, #{$colour2}, #{$opacity})");
}

* {
    all: unset;
    font-family: "Maple Mono NF", monospace;
    font-size: 14px;
    line-height: 1;
}

label,
.icon-box {
    color: var(--fg, var(--text));
    font-size: inherit;
}

#bar {
    background-color: transparent;
    padding-bottom: 0;
}

.widget:not(.workspaces),
.workspaces .item,
.popup-music .controls button {
    --bg: var(--crust);
    --fg: var(--text);
    margin: 0 2px;
    padding: 3px 1.25rem;
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: var(--bg);
    border-bottom: 3px solid shade(var(--subtext0), 0.4);

    &:hover {
        background-color: shade(var(--bg), 1.2);
        border-color: shade(var(--subtext0), 0.5);
    }

    &:active {
        background-color: shade(var(--bg), 0.9);
        border-color: alpha(shade(var(--bg), 1.2), 0);
        padding-bottom: 3px;
        margin-top: 3px;
    }
}

.workspaces {
    background-color: transparent;

    .item {
        margin: 0;
        --fg: var(--text);

        &.visible {
            --bg: var(--skye);
            --fg: var(--base);
        }

        &.focused {
            --bg: var(--purple);
            --fg: var(--base);
        }

        &.urgent {
            --bg: var(--red);
            --fg: var(--base);
        }
    }
}

popover {
    padding: 0.5rem;
    background-color: var(--crust);
    margin: 0.5rem;
    border: 2px solid var(--overlay0);

    button {
        padding: 0.2rem 0.5rem;
    }
}

.calendar {
    border: 2px solid var(--surface0);
    padding: 0;

    &-clock {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
    }

    header {
        background-color: var(--surface0);
    }

    grid {
        background-color: var(--base);
    }

    .day-name {
        color: var(--text);
        font-weight: bold;
        background-color: alpha(var(--surface0), 0.5);
        padding: 0.5rem 0.75rem;
    }

    .day-number {
        color: var(--subtext0);

        &:hover {
            background-color: alpha(var(--purple), 0.2);
        }
    }

    .today {
        background-color: var(--purple);
        color: var(--base);
    }
}

scale > trough {
    background-color: var(--overlay0);
    border-radius: 1rem;

    > highlight {
        border-style: solid;
        border-color: var(--text);
        border-width: 0.25rem;
        border-radius: 1rem;
    }

    > slider {
        background-color: var(--color-white);
    }
}

.popup-music {
    .progress {
        .slider {
            min-width: 256px;
        }

        .label {
            margin-left: 0.5rem;
            color: var(--text);
        }
    }

    > .horizontal {
        min-width: 256px;

        &:first-child > * {
            margin-top: 0;
            margin-bottom: -0.5rem;
        }
    }

    .volume {
        min-width: 0.8em;
    }

    .title {
        font-size: 1.2rem;
        font-weight: bold;
        color: var(--text);
    }

    .artist,
    .album {
        --fg: var(--subtext0);
        font-size: 0.8rem;
    }

    .controls button {
        --bg: var(--base);
        margin-left: 0;
    }
}