@use "sass:color";
@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: scheme.$overlay2;
    }

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

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

.sidebar {
    @include font.mono;

    background-color: scheme.$mantle;
    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: scheme.$overlay0;
            }

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

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

            &.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);
            color: scheme.$yellow;

            @include lib.spacing(8, true);

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

            .uptime {
                color: scheme.$blue;
            }
        }
    }

    .dashboard .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.$surface0;
                color: scheme.$overlay0;
            }

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

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

        .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 length($-colours) {
                    &.c#{$i} {
                        background-color: nth($-colours, $i);
                    }
                }
            }
        }
    }

    .audio .media {
        @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);
            }
        }
    }

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

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

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

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