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

$-accent: scheme.$lavender;
$-accent2: scheme.$pink;

.media {
    @include lib.rounded(8);
    @include lib.border($-accent, 0.4, 2);
    @include lib.shadow;
    @include font.mono;

    background-color: scheme.$mantle;
    color: $-accent;
    padding: lib.s(12);
    font-size: lib.s(14);
    min-width: lib.s(500);
    min-height: lib.s(220);

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

    .overlay {
        @include lib.rounded(5);

        background-color: color.change(scheme.$mantle, $alpha: 0.8);
    }

    .background {
        @include lib.rounded(5);

        transition: background 300ms ease-in-out;
        background-color: scheme.$surface0;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .player {
        padding: lib.s(35) lib.s(12);
        font-weight: bold;

        @include lib.spacing(10, true);

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

        .artist {
            color: scheme.$green;
        }

        .album {
            color: $-accent2;
        }

        .controls {
            margin-top: lib.s(3);

            @include lib.spacing(10);

            button {
                @include lib.rounded(4);
                @include lib.element-decel;
                @include lib.border(scheme.$base, 0.7);

                padding: lib.s(5) lib.s(12);
                font-size: lib.s(18);
                background-color: $-accent;
                color: scheme.$base;

                &:disabled {
                    background-color: scheme.$overlay2;
                }

                &:hover,
                &:focus {
                    background-color: color.change($-accent, $alpha: 0.8);
                }

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

        // Progress bar
        trough {
            @include lib.rounded(3);

            margin-top: lib.s(10);
            background-color: scheme.$surface0;

            highlight {
                @include lib.rounded(3);

                background-color: $-accent2;
                padding: lib.s(3) 0;
            }

            slider {
                @include lib.rounded(3);

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