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

.mediadisplay {
    @include font.mono;

    background-color: scheme.$base;
    color: scheme.$text;
    padding: lib.s(20);
    min-height: lib.s(200);

    .visualiser {
        background-color: scheme.$primary; // Visualiser colour
        margin-right: lib.s(5); // Gaps between bars
        min-width: lib.s(10); // Bar width
        color: scheme.$error;
        font-size: lib.s(24);
        font-weight: bold;
    }

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

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

    .details {
        @include font.title;

        font-size: lib.s(14);
        margin-top: lib.s(5);
        margin-left: lib.s(15);

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

        .artist {
            font-size: lib.s(18);
            color: scheme.$secondary;
        }

        .controls {
            @include lib.rounded(1000);
            @include font.icon;

            margin-top: lib.s(10);
            background-color: color.change(scheme.$overlay0, $alpha: 0.4);
            font-size: lib.s(28);
            padding: lib.s(3) lib.s(8);

            @include lib.spacing(10);

            & > button {
                @include lib.element-decel;

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

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

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

    .center-module {
        @include lib.rounded(20);
        margin: 0 lib.s(40);
        background-color: color.change(scheme.$surface1, $alpha: 0.4);
    }

    .selector {
        @include lib.rounded(15);
        @include lib.element-decel;

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

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

        button {
            @include lib.element-decel;

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

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

        .list > button {
            margin-top: lib.s(5);
            color: scheme.$subtext1;

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

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

    .time {
        @include lib.rounded(1000);

        font-size: lib.s(16);
        background-color: color.change(scheme.$overlay0, $alpha: 0.4);
        padding: lib.s(5) lib.s(10);
        margin-bottom: lib.s(10);
    }
}