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

@mixin notification($accent) {
    .separator {
        background-color: $accent;
    }

    .image {
        @include lib.border($accent, 0.05);
    }
}

@mixin button {
    @include lib.element-decel;

    background-color: color.change(scheme.$surface1, $alpha: 0.5);

    &:hover,
    &:focus {
        background-color: color.change(scheme.$surface2, $alpha: 0.5);
    }

    &:active {
        background-color: color.change(scheme.$overlay0, $alpha: 0.5);
    }

    &:disabled {
        color: scheme.$subtext0;
    }
}

@mixin button-active {
    @include lib.element-decel;

    background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 50%), $alpha: 0.5);

    &:hover,
    &:focus {
        background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 30%), $alpha: 0.5);
    }

    &:active {
        background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 20%), $alpha: 0.5);
    }
}

@mixin media-button {
    @include lib.element-decel;

    &:disabled {
        color: color.change(scheme.$overlay2, $alpha: 1);
    }

    &:hover,
    &:focus {
        color: color.mix(scheme.$subtext1, scheme.$subtext0, 50%);
    }

    &:active {
        color: scheme.$subtext0;
    }
}

.sidebar {
    @include font.mono;

    background-color: scheme.$base;
    color: scheme.$text;
    padding: lib.s(18) lib.s(20);
    min-width: lib.s(380);

    .pane {
        @include lib.spacing(20, true);
    }

    .separator {
        background-color: if(scheme.$light, scheme.$surface1, scheme.$overlay0);
        margin: 0 lib.s(10);
    }

    .header-bar {
        margin-bottom: lib.s(10);

        @include lib.spacing;

        & > :not(button) {
            font-weight: bold;
            font-size: lib.s(16);
        }

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

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

            &:disabled {
                color: color.change(scheme.$overlay0, $alpha: 1);
            }

            &:hover,
            &:focus {
                color: scheme.$subtext0;
            }

            &:active {
                color: color.change(scheme.$overlay2, $alpha: 1);
            }

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

                background-color: scheme.$primary;
                color: $-base;

                &:hover,
                &:focus {
                    background-color: color.mix(scheme.$primary, $-base, 80%);
                }

                &:active {
                    background-color: color.mix(scheme.$primary, $-base, 70%);
                }
            }
        }
    }

    .empty {
        color: scheme.$subtext0;
        font-size: lib.s(18);

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

    .user {
        @include lib.spacing(15);

        .face {
            @include lib.rounded(10);

            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            min-width: lib.s(96);
            min-height: lib.s(96);
            font-size: lib.s(48);
            font-weight: bold;
            background-color: scheme.$base;
        }

        .details {
            font-size: lib.s(14);

            @include lib.spacing(8, true);

            .name {
                font-size: lib.s(18);
                color: scheme.$text;
                margin-bottom: lib.s(10);
            }

            $-colours: scheme.$yellow, scheme.$blue;
            @for $i from 1 through list.length($-colours) {
                :nth-child(#{$i + 1}) {
                    color: list.nth($-colours, $i);
                }
            }
        }
    }

    .media {
        @include lib.spacing(15);

        .cover-art {
            @include lib.rounded(10);
            @include lib.element-decel;

            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            min-width: lib.s(128);
            min-height: lib.s(128);
            font-size: lib.s(64);
            font-weight: bold;
            background-color: scheme.$base;
            color: scheme.$subtext0;
        }

        .details {
            font-size: lib.s(14);

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

            .artist {
                color: scheme.$green;
            }

            .controls {
                margin-top: lib.s(20);
                margin-bottom: lib.s(5);
                font-size: lib.s(24);

                & > button {
                    @include media-button;
                }
            }

            .slider {
                @include lib.rounded(5);
                @include lib.fluent-decel(1000ms);

                min-height: lib.s(8);
                background-color: scheme.$overlay0;
                color: scheme.$subtext1;
            }

            .time {
                margin-top: lib.s(5);
                font-size: lib.s(13);
                color: scheme.$subtext0;
            }
        }
    }

    .notification {
        .wrapper {
            padding-bottom: lib.s(10);
        }

        .inner {
            @include lib.rounded(20);

            background-color: color.change(scheme.$surface1, $alpha: 0.4);

            &.low {
                @include notification(if(scheme.$light, scheme.$surface1, scheme.$overlay0));

                @if not scheme.$borders {
                    background-color: color.change(scheme.$surface0, $alpha: 0.4);
                }
            }

            &.normal {
                @include lib.border(scheme.$primary, if(scheme.$light, 0.5, 0.3));
                @include notification(scheme.$primary);
            }

            &.critical {
                @include lib.border(scheme.$error, 0.8);
                @include notification(scheme.$error);

                @if not scheme.$borders {
                    background-color: color.change(color.mix(scheme.$surface1, scheme.$error, 80%), $alpha: 0.4);
                }
            }
        }

        .actions {
            @include lib.spacing;

            & > button {
                @include button;
                @include lib.rounded(10);

                padding: lib.s(5) lib.s(10);
            }
        }
    }

    .upcoming {
        .list {
            min-height: lib.s(300);
        }

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

            &:not(:first-child) {
                margin-top: lib.s(20);
            }

            .date {
                margin-left: lib.s(10);
            }

            .sublabel {
                font-size: lib.s(14);
                color: scheme.$subtext0;
            }

            .events {
                @include lib.rounded(20);

                background-color: color.change(scheme.$surface1, $alpha: 0.4);
                padding: lib.s(10) lib.s(15);

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

            .event {
                @include lib.spacing(8);
            }

            .calendar-indicator {
                @include lib.rounded(5);

                min-width: lib.s(1);

                $-colours: scheme.$red, scheme.$sapphire, scheme.$flamingo, scheme.$maroon, scheme.$pink, scheme.$sky,
                    scheme.$peach, scheme.$yellow, scheme.$green, scheme.$rosewater, scheme.$mauve, scheme.$teal,
                    scheme.$blue;
                @for $i from 1 through list.length($-colours) {
                    &.calendar-#{$i} {
                        background-color: list.nth($-colours, $i);
                    }
                }
            }
        }
    }

    .players {
        .player {
            @include lib.spacing(40, true);

            .cover-art {
                @include lib.rounded(10);
                @include lib.element-decel;
                @include lib.shadow(scheme.$mantle, $blur: 5, $spread: 2);

                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                min-width: lib.s(256);
                min-height: lib.s(256);
                font-size: lib.s(96);
                font-weight: bold;
                background-color: scheme.$base;
                color: scheme.$subtext0;
                margin-top: lib.s(20);
            }

            .progress {
                margin: 0 lib.s(40);

                .slider {
                    @include lib.rounded(8);
                    @include lib.fluent-decel(1000ms);

                    min-height: lib.s(15);
                    background-color: scheme.$overlay0;
                    color: scheme.$subtext1;
                }

                .time {
                    margin-top: lib.s(5);
                    font-size: lib.s(13);
                    color: scheme.$subtext1;
                }
            }

            .details {
                font-size: lib.s(14);
                margin-top: lib.s(20);

                @include lib.spacing(3, true);

                .title {
                    font-size: lib.s(18);
                    color: scheme.$text;
                    font-weight: bold;
                }

                .artist {
                    color: scheme.$green;
                }

                .album {
                    color: scheme.$subtext0;
                }
            }

            .controls {
                margin-top: lib.s(-20);
                margin-bottom: lib.s(5);

                button {
                    @include media-button;

                    // Cause some nerd font icons don't have the correct width
                    &.needs-adjustment {
                        padding-right: lib.s(5);
                    }
                }

                .playback {
                    font-size: lib.s(32);

                    @include lib.spacing(40);
                }

                .options {
                    margin: 0 lib.s(40);
                    margin-top: lib.s(-10);
                    font-size: lib.s(20);

                    @include lib.spacing(20);
                }
            }
        }

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

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

                min-width: lib.s(10);
                min-height: lib.s(10);

                background-color: color.change(scheme.$overlay0, $alpha: 0.5);

                &:hover,
                &:focus {
                    background-color: color.change(scheme.$overlay1, $alpha: 0.5);
                }

                &:active {
                    background-color: color.change(scheme.$overlay2, $alpha: 0.5);
                }

                &.active {
                    background-color: color.change(scheme.$primary, $alpha: 0.9);

                    &:hover,
                    &:focus {
                        background-color: color.change(scheme.$primary, $alpha: 0.7);
                    }

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

    .no-wp-prompt {
        font-size: lib.s(16);
        color: scheme.$error;
        margin-top: lib.s(8);
    }

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

        .stream {
            @include lib.rounded(20);
            @include lib.element-decel;

            background-color: color.change(scheme.$surface1, $alpha: 0.4);
            padding: lib.s(10) lib.s(15);

            @include lib.spacing(5);

            &.playing {
                background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 50%), $alpha: 0.4);
            }

            .icon {
                font-size: lib.s(28);
                margin-right: lib.s(12);
            }

            .sublabel {
                font-size: lib.s(14);
                color: scheme.$subtext0;
            }

            trough {
                @include lib.rounded(10);

                min-width: lib.s(100);
                min-height: lib.s(10);
                background-color: color.change(scheme.$error, $alpha: 0.3);

                fill {
                    @include lib.rounded(10);

                    background-color: color.change(scheme.$overlay0, $alpha: 1);
                }

                highlight {
                    @include lib.rounded(10);

                    background-color: scheme.$subtext1;
                }
            }

            & > button {
                @include media-button;

                font-size: lib.s(18);
                min-width: lib.s(20);
                min-height: lib.s(20);
            }
        }
    }

    .device-selector {
        @include lib.spacing(10, true);

        .selector {
            @include lib.rounded(20);

            background-color: color.change(scheme.$surface1, $alpha: 0.4);
            padding: lib.s(10) lib.s(15);

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

            .separator {
                margin-bottom: lib.s(8);
                margin-top: lib.s(5);
                background-color: if(scheme.$light, scheme.$overlay1, scheme.$overlay0);
            }

            .list {
                color: scheme.$subtext0;

                @include lib.spacing(3, true);
            }

            .device {
                @include lib.spacing;
            }

            .selected {
                color: scheme.$text;

                @include lib.spacing(10);

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

                .sublabel {
                    color: scheme.$subtext0;
                }
            }

            button {
                @include lib.element-decel;

                &:hover,
                &:focus {
                    color: scheme.$subtext1;
                }

                &:active {
                    color: scheme.$text;
                }
            }
        }

        .stream {
            @include lib.rounded(20);
            @include lib.element-decel;

            background-color: color.change(scheme.$surface1, $alpha: 0.4);
            padding: lib.s(10) lib.s(15);

            @include lib.spacing(5);

            &.playing {
                background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 50%), $alpha: 0.4);
            }

            .icon {
                font-size: lib.s(28);
                margin-right: lib.s(12);
            }

            .sublabel {
                font-size: lib.s(14);
                color: scheme.$subtext0;
            }

            trough {
                @include lib.rounded(10);

                min-width: lib.s(100);
                min-height: lib.s(10);
                background-color: color.change(scheme.$error, $alpha: 0.3);

                fill {
                    @include lib.rounded(10);

                    background-color: color.change(scheme.$overlay0, $alpha: 1);
                }

                highlight {
                    @include lib.rounded(10);

                    background-color: scheme.$subtext1;
                }
            }

            & > button {
                @include media-button;

                font-size: lib.s(18);
                min-width: lib.s(20);
                min-height: lib.s(20);
            }
        }
    }

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

        .network {
            @include lib.rounded(20);
            @include lib.element-decel;

            background-color: color.change(scheme.$surface1, $alpha: 0.4);
            padding: lib.s(10) lib.s(15);

            @include lib.spacing(5);

            &.connected {
                background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 50%), $alpha: 0.4);

                & > button {
                    @include button-active;
                }
            }

            .icon {
                font-size: lib.s(28);
                margin-right: lib.s(12);
            }

            .sublabel {
                font-size: lib.s(14);
                color: scheme.$subtext0;
            }

            & > button {
                @include button;
                @include lib.rounded(1000);
                @include font.icon;

                font-size: lib.s(18);
                min-width: lib.s(30);
                min-height: lib.s(30);
            }
        }
    }

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

        .device {
            @include lib.rounded(20);
            @include lib.element-decel;

            background-color: color.change(scheme.$surface1, $alpha: 0.4);
            padding: lib.s(10) lib.s(15);

            @include lib.spacing(5);

            &.connected {
                background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 50%), $alpha: 0.4);

                & > button {
                    @include button-active;
                }
            }

            .icon {
                font-size: lib.s(28);
                margin-right: lib.s(12);
            }

            .sublabel {
                font-size: lib.s(14);
                color: scheme.$subtext0;
            }

            & > button {
                @include button;
                @include lib.rounded(1000);
                @include font.icon;

                font-size: lib.s(18);
                min-width: lib.s(30);
                min-height: lib.s(30);
            }
        }
    }

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

        .repo {
            @include lib.rounded(20);
            @include lib.element-decel;

            background-color: color.change(scheme.$surface1, $alpha: 0.4);
            padding: lib.s(10) lib.s(15);

            @include lib.spacing(5);

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

                &:not(:last-child) {
                    margin-right: lib.s(12);
                }
            }

            .sublabel {
                font-size: lib.s(14);
                color: scheme.$subtext0;
            }

            .body {
                margin-top: lib.s(10);
                font-size: lib.s(14);
            }
        }
    }

    .news {
        min-height: lib.s(200);

        .empty {
            margin-top: lib.s(40);
        }

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

        .article {
            @include lib.rounded(20);
            @include lib.element-decel;

            background-color: color.change(scheme.$surface1, $alpha: 0.4);
            padding: lib.s(10) lib.s(15);

            @include lib.spacing(5);

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

                &:not(:last-child) {
                    margin-right: lib.s(12);
                }
            }

            .sublabel {
                font-size: lib.s(14);
                color: scheme.$subtext0;
            }

            .body {
                margin-top: lib.s(10);
                font-size: lib.s(14);
            }
        }
    }

    .headlines {
        min-height: lib.s(200);

        .empty {
            margin-top: lib.s(40);
        }

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

        .category {
            @include lib.rounded(20);
            @include lib.element-decel;

            background-color: color.change(scheme.$surface0, $alpha: 0.5);
            padding: lib.s(10) lib.s(15);

            @include lib.spacing(5);

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

                &:not(:last-child) {
                    margin-right: lib.s(12);
                }
            }

            .sublabel {
                font-size: lib.s(14);
                color: scheme.$subtext0;
            }

            .body {
                margin-top: lib.s(10);
                font-size: lib.s(14);

                @include lib.spacing(8, true);
            }
        }

        .article {
            @include lib.rounded(20);
            @include lib.element-decel;

            background-color: color.change(scheme.$surface1, $alpha: 0.3);
            padding: lib.s(10) lib.s(15);

            .article-body {
                @include font.reading;
                @include lib.element-decel;

                font-size: lib.s(15);
                margin-top: lib.s(10);
                color: scheme.$subtext1;

                & > :last-child {
                    margin-top: lib.s(8);
                }

                .title {
                    @include font.title;

                    font-size: lib.s(18);
                    font-weight: 500;
                    margin-bottom: lib.s(3);
                }
            }

            button:hover .article-body,
            button:focus .article-body {
                color: color.mix(scheme.$subtext0, scheme.$blue, 60%);
            }
        }
    }

    .time-date {
        padding: lib.s(12) lib.s(8);
        font-size: lib.s(48);
        font-weight: bold;
        color: scheme.$primary;

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

        .ampm {
            font-size: lib.s(24);
            font-weight: normal;
            margin-top: lib.s(18);
            color: scheme.$secondary;
        }

        .date {
            font-size: lib.s(20);
            color: scheme.$tertiary;
        }
    }

    .calendar {
        @include lib.rounded(20);

        background-color: color.change(scheme.$surface1, $alpha: 0.4);
        padding: lib.s(15);

        .calendar-view {
            @include lib.spacing(10, true);

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

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

                    background-color: color.change(scheme.$surface2, $alpha: 0.4);
                    min-width: lib.s(28);
                    min-height: lib.s(28);
                    font-size: lib.s(18);

                    &:first-child {
                        padding: 0 lib.s(10);
                    }

                    &:hover,
                    &:focus {
                        background-color: color.change(scheme.$surface2, $alpha: 0.6);
                    }

                    &:active {
                        background-color: color.change(scheme.$surface2, $alpha: 0.8);
                    }
                }
            }

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

                & > label {
                    min-width: lib.s(40);
                    font-weight: bold;
                    color: scheme.$subtext1;
                }
            }

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

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

            .day {
                @include lib.rounded(1000);
                @include lib.element-decel;

                min-width: lib.s(40);
                min-height: lib.s(40);

                &.dim {
                    color: scheme.$subtext0;
                }

                &.today:not(.dim) {
                    background-color: scheme.$primary;
                    color: color.change(scheme.$base, $alpha: 1);
                }

                &:hover,
                &:focus {
                    color: scheme.$subtext0;
                }

                &:active {
                    color: color.change(scheme.$overlay2, $alpha: 1);
                }

                &.dim {
                    color: scheme.$subtext0;

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

                    &:active {
                        color: color.change(scheme.$overlay1, $alpha: 1);
                    }
                }

                &.today:not(.dim) {
                    background-color: scheme.$primary;
                    color: color.change(scheme.$base, $alpha: 1);

                    &:hover,
                    &:focus {
                        background-color: color.mix(scheme.$primary, scheme.$base, 80%);
                    }

                    &:active {
                        background-color: color.mix(scheme.$primary, scheme.$base, 70%);
                    }
                }

                label {
                    margin-top: lib.s(8);
                }

                .indicator {
                    @include lib.rounded(10);
                    @include lib.element-decel;

                    min-height: lib.s(3);
                    margin: 0 lib.s(8);
                }

                $-max: 5;
                @for $i from 1 through $-max {
                    &.events-#{$i} {
                        $-colour: color.mix(scheme.$red, scheme.$green, calc(100% / $-max) * $i);

                        .indicator {
                            background-color: $-colour;
                        }

                        &:hover .indicator,
                        &:focus .indicator {
                            background-color: color.mix($-colour, scheme.$base, 80%);
                        }

                        &:active .indicator {
                            background-color: color.mix($-colour, scheme.$base, 70%);
                        }

                        &.dim .indicator {
                            background-color: color.mix($-colour, scheme.$base, 60%);
                        }

                        &.today:not(.dim) {
                            $-colour: color.mix($-colour, color.complement(scheme.$primary), 50%);

                            .indicator {
                                background-color: $-colour;
                            }

                            &:hover .indicator,
                            &:focus .indicator {
                                background-color: color.mix($-colour, scheme.$base, 80%);
                            }

                            &:active .indicator {
                                background-color: color.mix($-colour, scheme.$base, 70%);
                            }
                        }
                    }
                }
            }
        }

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

            .header {
                font-weight: bold;

                @include lib.spacing(10);

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

                    min-width: lib.s(24);
                    min-height: lib.s(24);

                    &:hover,
                    &:focus {
                        color: scheme.$subtext0;
                    }

                    &:active {
                        color: color.change(scheme.$overlay2, $alpha: 1);
                    }
                }
            }

            scrollable {
                min-height: lib.s(315);
            }

            .date {
                margin-left: lib.s(10);
            }

            .sublabel {
                font-size: lib.s(14);
                color: scheme.$subtext0;
            }

            .list {
                padding: lib.s(5);

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

            .event {
                @include lib.spacing(8);
            }

            .calendar-indicator {
                @include lib.rounded(5);

                min-width: lib.s(1);

                $-colours: scheme.$red, scheme.$sapphire, scheme.$flamingo, scheme.$maroon, scheme.$pink, scheme.$sky,
                    scheme.$peach, scheme.$yellow, scheme.$green, scheme.$rosewater, scheme.$mauve, scheme.$teal,
                    scheme.$blue;
                @for $i from 1 through list.length($-colours) {
                    &.calendar-#{$i} {
                        background-color: list.nth($-colours, $i);
                    }
                }
            }
        }
    }
}