@use '../../style/colors';

.media-player {
    margin-top: 9px;
    min-width: 100px;
    min-height: 100px;

    * {
        all: unset;
    }

    .arrow {
        transition: -gtk-icon-transform 0.3s ease-in-out;
        margin-bottom: 12px;
    }

    .player {
        padding: 10px;
        min-width: 400px;
        min-height: 200px;
        border-radius: 30px;
        border-top: 2px solid colors.$accent_color;
        border-bottom: 2px solid colors.$accent_color;
        transition: background 250ms;

        .top {
            font-size: 23px;
        }

        .metadata {
            .title {
                font-weight: 500;
                transition: text 250ms;
            }

            .artist {
                font-weight: 400;
                font-size: 15px;
                transition: text 250ms;
            }
        }

        .bottom {
            font-size: 30px;
        }

        .pausebutton {
            transition: background-color ease .2s, color ease .2s;
            font-size: 18px;
        }

        .playing {
            transition: background-color ease .2s, color ease .2s;
            border-radius: 15px;
        }

        .stopped,
        .paused {
            transition: background-color ease .2s, color ease .2s;
            border-radius: 26px;
            padding: 4px 6px;
        }

        button label {
            min-width: 35px;
        }
    }

    .player-icon, .position-indicator {
        min-width: 18px;
        margin: 7px;
    }

    .position-indicator {
        background-color: rgba(255, 255, 255, 0.7);
        box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.3);
        border-radius: 100%;
    }

    .previous,
    .next,
    .shuffle,
    .loop {
        border-radius: 100%;
        transition: color 200ms;

        &:hover {
            border-radius: 100%;
            background-color: rgba(127, 132, 156, 0.4);
            transition: color 200ms;
        }
    }

    .loop {
        label {
            padding-right: 8px;
        }
    }

    .position-slider {
        min-height: 20px;

        highlight {
            margin: 0;
            border-radius: 2em;
        }

        trough {
            margin: 0 8px;
            border-radius: 2em;
        }

        slider {
            margin: -8px;
            min-height: 20px;
            border-radius: 10px;
            transition: background-color 0.5s ease-in-out;
        }

        slider:hover {
            transition: background-color 0.5s ease-in-out;
        }
    }
}