@keyframes fullscreen-animation {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.video {
    --rocket-ui-video-controls-color: var(--rocket-color-white-base);
    --rocket-ui-video-progress-bar-bg-color: var(--rocket-color-white-a-300);
    --rocket-ui-video-progress-bar-value-color: var(--rocket-color-white-base);
    --rocket-ui-video-settings-color: var(--rocket-color-black-base);
    --rocket-ui-video-playback-wrapper-bg-color: var(--rocket-color-black-a-200);

    $this: &;

    position: relative;
    width: fit-content;
    color: var(--rocket-ui-video-controls-color);

    &__controls {
        @include transition;

        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.31) 51.56%, rgba(0, 0, 0, 0.70) 100%);
        opacity: 0;
        pointer-events: none;
        row-gap: $rocket-spacing-size-1;
        padding-inline: $rocket-spacing-size-2;
    }

    &__left-actions,
    &__right-actions,
    &__actions {
        display: flex;
        align-items: center;
    }

    &__actions {
        justify-content: space-between;
    }

    &__left-actions {
        column-gap: $rocket-spacing-size-2;
    }

    &__settings-icon {
        svg {
            @include size(1.5rem);

            fill: currentColor;
        }
    }

    &__playback-icon-pause,
    &__playback-icon-play {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--rocket-ui-video-controls-color);

        svg {
            @include size(2rem);

            fill: currentColor;
        }
    }

    &__play-button,
    &__volume-button,
    &__fullscreen-button,
    &__settings-button {
        @include size(2.5rem);

        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--rocket-ui-video-controls-color);
        background: none;
        border: none;
        outline: none;
        cursor: pointer;

        span {
            display: flex;
            align-items: center;
            justify-content: center;

            svg {
                @include size(1.75rem);

                fill: currentColor;
            }
        }
    }

    &__time-display {
        @extend %base-styles-text-sm;
    }

    &__timeline {
        @include size(100%, 0.75rem);

        position: relative;
        max-width: calc(100% - 1.5rem);
        margin-bottom: 1rem;
        margin-inline: auto;
    }

    &__progress-bar {
        @include size(100%, 0.25rem);

        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        appearance: none;

        &::-webkit-progress-bar {
            background-color: var(--rocket-ui-video-progress-bar-bg-color);
            border-radius: 0.25rem;
        }

        &::-webkit-progress-value {
            background-color: var(--rocket-ui-video-progress-bar-value-color);
            border-radius: 0.25rem;
        }

        &::-moz-progress-bar {
            background-color: var(--rocket-ui-video-progress-bar-value-color);
            border: 1px solid var(--rocket-ui-video-progress-bar-value-color);
        }
    }

    &__seek-tooltip {
        @extend %base-styles-text-xs;

        position: absolute;
        top: -2.5rem;
        display: none;
        margin-left: -1.75rem;
        padding: 3px;
        font-weight: 600;
        background-color: rgba(0, 0, 0, 0.6);
    }

    &__seek {
        top: 0;
        margin: 0;
        background: transparent;
    }

    &__volume-range {
        top: 50%;
        left: 0;
        background-color: var(--rocket-ui-video-progress-bar-bg-color);
        transform: translateY(-50%);
    }

    &__seek,
    &__volume-range {
        @include size(100%, 0.25rem);

        position: absolute;
        left: 0;
        border-radius: 0.25rem;
        cursor: pointer;
        appearance: none;

        &::-webkit-slider-thumb {
            @include size(0.75rem);

            margin-left: -1px;
            background-color: var(--rocket-ui-video-progress-bar-value-color);
            border-radius: 50%;
            appearance: none;
        }

        &::-webkit-slider-runnable-track {
            @include transition;

            width: 100%;
            border-radius: 0.25rem;
            cursor: pointer;
            appearance: none;
        }

        &:focus {
            outline: none;

            &::-webkit-slider-runnable-track {
                background-color: transparent;
            }
        }
    }

    &__volume-slider {
        @include size(0, 1rem);
        @include transition;

        position: relative;
        opacity: 0;
        pointer-events: none;
    }

    &__volume-area {
        @include transition;

        display: flex;
        align-items: center;
        padding-left: 1rem;
        background-color: transparent;
        border-radius: 2.25rem;

        &:focus-within,
        &:hover {
            background-color: var(--rocket-color-black-a-300);

            #{$this}__volume-slider {
                width: 3.25rem;
                opacity: 1;
                pointer-events: auto;
            }
        }
    }

    &__volume-button {
        color: var(--rocket-ui-video-controls-color);

        #{$this}__volume-mute-icon,
        #{$this}__volume-down-icon {
            display: none;
        }

        &--down {
            #{$this}__volume-down-icon {
                display: block;
            }

            #{$this}__volume-up-icon {
                display: none;
            }
        }

        &--muted {
            #{$this}__volume-up-icon,
            #{$this}__volume-down-icon {
                display: none;
            }

            #{$this}__volume-mute-icon {
                display: block;
            }
        }
    }

    &__fullscreen-button {
        #{$this}__fullscreen-exit-icon {
            display: none;
        }

        &:active,
        &:hover {
            animation: fullscreen-animation 500ms linear forwards;
            animation-iteration-count: 1;
        }
    }

    &__settings {
        position: relative;
        z-index: 2;
    }

    &__settings-list,
    &__speed-modes {
        margin: 0;
        padding: 0;
    }

    &__settings-dropdown,
    &__speed-modes-dropdown {
        top: 0;
        right: 0;
        left: initial;
        transform: translateY(-100%);

        li::marker {
            content: none;
        }
    }

    &__settings-option,
    &__speed-mode-option {
        @include size(100%);

        display: flex;
        align-items: center;
        padding: 0.5rem 1rem;
        color: var(--rocket-ui-video-settings-color);
        text-decoration: none;
        column-gap: $rocket-spacing-size-2;
        border: none;
        outline: none;
        cursor: pointer;
    }

    &__timeline:hover {
        #{$this}__seek-tooltip {
            display: block;
        }
    }

    &__playback-icons-wrapper {
        @include size(4rem);

        position: absolute;
        top: 50%;
        left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--rocket-ui-video-playback-wrapper-bg-color);
        border-radius: 100rem;
        transform: translate(-50%, -50%);
        transform-origin: center;
        opacity: 0;
        pointer-events: none;
    }

    &__playback-icon-pause {
        display: none;
    }

    &--paused,
    &:hover {
        #{$this}__controls {
            opacity: 1;
            pointer-events: auto;
        }
    }

    &--paused {
        #{$this}__playback-icon-play {
            display: none;
        }

        #{$this}__playback-icon-pause {
            display: inline-block;
        }
    }

    &--fullscreen {
        display: flex;
        align-items: center;
        justify-content: center;

        #{$this}__fullscreen-exit-icon {
            display: block;
        }

        #{$this}__fullscreen-icon {
            display: none;
        }

        #{$this}__element {
            width: 100%;
        }
    }
}