.clip-play-page {
    @media screen and (min-width: 768px) and (max-width: 991px) {
        h1.page-h1 {
            margin-bottom: 0;
        }
    }

    @media screen and (max-width: 991px) {
        .footer {
            display: none;
        }
    }

    @media screen and (max-width: 767px) {
        .header-banner,
        .site-promo-title {
            display: none;
        }
    }

    .video-info-playing {
        .video-info-sub {
            font-size: var(--font-size-secondary);
            line-height: var(--line-height-secondary);
        }
    }

    .video-info-sub {
        margin-top: var(--space-xxs);
    }

    .clips-play {
        .clips-feed-wrapper {
            height: 598px;
            position: relative;
            contain: layout style paint;

            .plyr__video-wrapper {
                background: none;
            }

            .clips-feed {
                display: flex;
                flex-wrap: nowrap;
                gap: 62px;
                width: 100%;
                height: var(--clips-feed-height);
                overflow: hidden;

                &.prev-gap {
                    &::before {
                        content: "";
                        flex: 0 0 var(--clip-prev-gap);
                        pointer-events: none;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding-bottom: var(--clip-bottom-indent);
                    }

                    &.prev-loading::before {
                        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cstyle%3E@keyframes spin{to{transform:rotate(360deg)}}%3C/style%3E%3Cg style='animation:spin 1s linear infinite;transform-origin:center'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23f90' stroke-width='2' stroke-dasharray='31.4 31.4' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
                    }
                }

                &.next-gap {
                    &::after {
                        content: "";
                        flex: 0 0 var(--clip-next-gap);
                        pointer-events: none;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding-bottom: var(--clip-bottom-indent);
                    }

                    &.next-loading::after {
                        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cstyle%3E@keyframes spin{to{transform:rotate(360deg)}}%3C/style%3E%3Cg style='animation:spin 1s linear infinite;transform-origin:center'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23f90' stroke-width='2' stroke-dasharray='31.4 31.4' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
                    }
                }

                .clip {
                    display: inline-block;
                    margin: auto;
                    position: relative;
                    will-change: transform;

                    &:not(.active) #plyr_container,
                    .video-control-hidden #plyr_container,
                    #plyr_container .plyr--stopped {
                        .plyr__control--overlaid,
                        .plyr__controls {
                            display: none !important;
                        }
                    }

                    #plyr_container {
                        display: none;

                        .video-loader {
                            z-index: 999;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            margin-left: -24px;
                            margin-top: -24px;
                        }
                    }

                    .clip-nav {
                        display: none;
                    }

                    &.active {
                        z-index: 1;

                        &.is-loaded {
                            z-index: 200;
                        }

                        .video-content-wrapper {
                            width: 518px;
                            aspect-ratio: 1;
                            position: relative;

                            .clip-sent-stub {
                                position: absolute;
                                inset: 0;
                                aspect-ratio: unset;
                                z-index: 100;
                                border-radius: 6px;

                                @media (max-width: 575px) {
                                    border-radius: 0;
                                }
                            }
                        }

                        #plyr_container {
                            display: block;
                            height: 518px;
                            z-index: 11;
                        }
                    }

                    &:not(.active) {
                        bottom: calc(var(--clip-bottom-indent) / 2);
                        z-index: 0;

                        &.is-loaded {
                            z-index: 100;
                        }

                        &.prev,
                        &.next {
                            cursor: pointer;

                            .clip-nav {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                position: absolute;
                                inset: 0;
                                border-radius: var(--space-xs);
                                z-index: 101;

                                &::before {
                                    content: '';
                                    display: block;
                                    position: absolute;
                                    inset: 0;
                                    z-index: -1;
                                }

                                .clip-nav-text {
                                    display: inline-block;
                                    width: var(--clip-nav-width);
                                    text-align: center;
                                    color: var(--main-color);
                                    font-family: var(--font-inter);
                                    font-size: var(--font-size-secondary);
                                    line-height: var(--line-height-secondary);
                                    font-weight: 400;
                                    white-space: nowrap;
                                    user-select: none;

                                    .spinner {
                                        display: none;
                                        font-size: var(--font-size-display);
                                    }

                                    .text {
                                        display: none;
                                    }
                                }
                            }

                            &.is-loaded {
                                .video-content-wrapper {
                                    &::before {
                                        display: none;
                                    }
                                }
                            }
                        }

                        &.prev {
                            .clip-nav {
                                justify-content: flex-end;

                                &::before {
                                    background: linear-gradient(270deg, rgba(0, 0, 0, 0.4) 0%, #000 70%);
                                }

                                .clip-nav-text .prev-text {
                                    display: inline;
                                }
                            }
                        }

                        &.next {
                            .clip-nav {
                                justify-content: flex-start;

                                &::before {
                                    background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, #000 70%);
                                }

                                .clip-nav-text .next-text {
                                    display: inline;
                                }
                            }
                        }

                        &:not(.prev):not(.next) {
                            .clip-nav {
                                display: block;
                                position: absolute;
                                inset: 0;
                                background: var(--color-black);
                                z-index: 101;

                                .clip-nav-text {
                                    display: none;
                                }
                            }
                        }

                        .video-info,
                        .clip-controls {
                            display: none;
                        }

                        .video-content-wrapper {
                            width: 334px;
                            height: 334px;
                            margin: 0;
                        }

                        .video-unavailable {
                            width: 334px;

                            span {
                                font-size: var(--font-size-regular);
                                opacity: 0.5;

                                &::before {
                                    width: 56px;
                                    height: 56px;
                                }
                            }
                        }
                    }

                    &.clip-deleted {
                        .video-content-wrapper {
                            display: none;
                        }
                    }

                    .clip-not-ready-stub {
                        margin-bottom: var(--space-sm);
                    }

                    .video-play-button {
                        display: none;
                    }
                }
            }

            &.full-width {
                place-items: center;

                .clips-feed {
                    height: auto !important;
                    width: var(--clip-feed-width);
                    gap: 50px;

                    .clip {
                        &.active {
                            width: var(--clip-width);
                            height: auto;
                            aspect-ratio: 1;

                            .video-content-wrapper {
                                width: var(--clip-width);
                                height: auto;
                                aspect-ratio: 1;

                                #plyr_container {
                                    width: var(--clip-width);
                                    height: auto;
                                    aspect-ratio: 1;
                                }
                            }
                        }
                    }

                    .video-info {
                        width: 100%;
                        max-width: 100%;
                    }
                }
            }
        }

        .video-unavailable {
            width: 518px;
            aspect-ratio: 1;
        }

        .video-splash-big {
            position: absolute;
            z-index: 10;
            transition: opacity 0.5s ease-in-out;

            &.is-fading {
                opacity: 0;
                pointer-events: none;
            }

            img {
                opacity: 1;
                background-size: 300%;
                height: auto;
                aspect-ratio: 1;
            }
        }

        .spinner-border {
            width: 48px;
            height: 48px;
            border: var(--space-xs) solid var(--main-color);
            border-right-color: transparent;
        }

        .extra-badge {
            margin-bottom: var(--space-xxs);
        }

        .video-info {
            min-height: 96px;
            max-width: 518px;
            margin: 0 auto;

            .title {
                height: 24px;
            }

            .see-full-line {
                text-align: right;
            }

            .video-info-sub {
                span.video-reclip-counter.reclip-active,
                span.video-bookmark-counter.bookmark-active,
                i.fa-bookmark.bookmark-active {
                    color: var(--color-grey-semi-light);
                }
            }

            .clipped-by {
                display: inline-flex;
                gap: 4px;

                a {
                    display: inline-block;
                    max-width: 200px;
                }
            }

            .tags {
                overflow: hidden;
                max-height: 24px;
                flex-wrap: nowrap;
                margin: var(--space-xxs) 0 var(--space-xs);

                @media screen and (max-width: 1199px) {
                    max-width: 100%;
                }
            }
        }

        .clip-controls {
            display: flex;
            flex-direction: column;
            gap: 8px 0;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate(100%, -50%);
            z-index: 3;

            .like,
            .dislike,
            .reclip-clip-link,
            .unreclip-clip-link,
            .clip-reclip-button,
            .clip-bookmark-button,
            .clip-bookmark-signin {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4px 0;
            }

            .clip-bookmark-button.bookmark-active,
            .clip-bookmark-button.bookmark-active i.fa-bookmark.bookmark-active{
                font-weight: 700;

                span {
                    font-weight: normal;
                }
            }

            .player-reclip-icon {
                display: block;
                width: 16px;
                height: 16px;
                background: url('../i/reclip-sprite.svg') no-repeat 0 center / 400% auto;
            }

            a {
                text-decoration: none;

                &.btn {
                    color: var(--main-color);
                    border: none;
                }

                &.active {
                    i {
                        &::before {
                            font-weight: 700;
                        }
                    }

                }

                &.reclip-active {
                    i {
                        &::before {
                            font-weight: 700;
                        }
                    }

                    .player-reclip-icon {
                        background-position: 33.333% center;
                    }
                }
            }

            i {
                margin: 0;

                &::before {
                    color: var(--main-color);
                    font-size: var(--font-size-regular);
                }
            }

            span {
                font-size: var(--font-size-secondary);

                &.video-reclip-counter,
                &.video-bookmark-counter {
                    display: inline-block;
                }
            }

            .reclip-button {
                position: relative;

                .clip-reclip-unavailable {
                    display: none;

                    &.show {
                        display: inline-flex;
                        position: absolute;
                        top: 25%;
                        right: 0;
                        transform: translate(100%, -50%);
                        background-color: var(--color-grey-dark);
                        color: var(--color-white);
                        font-size: var(--font-size-secondary);
                        line-height: var(--line-height-secondary);
                        padding: var(--space-sm) 9px;
                        border-radius: var(--space-xs);
                        border: 1px solid var(--color-grey-semi-dark);
                        white-space: nowrap;
                        z-index: 99999;
                    }
                }
            }

            .clip-share-wrapper {
                position: relative;

                .clip-share-button {
                    border: none;
                }

                .clip-share-dropdown {
                    position: absolute;
                    top: 50%;
                    left: 100%;
                    z-index: 999991;
                    transform: translate(-5px, -50%);
                    background-color: var(--color-grey-dark);
                    border: 1px solid var(--color-grey-semi-dark);
                    border-radius: var(--space-xs);
                    display: flex;
                    flex-direction: column;
                    min-width: 152px;
                    padding: 7px 0;

                    &.open-left {
                        left: auto;
                        right: 100%;
                    }

                    button,
                    a {
                        display: block;
                        padding: 8px 20px;
                        text-decoration: none;
                        background: none;
                        border: none;
                        text-align: left;
                        width: 100%;

                        color: var(--main-color);
                        font-size: var(--font-size-secondary);
                        line-height: var(--line-height-small);

                        white-space: nowrap;

                        @media (hover: hover) {
                            cursor: pointer;

                            &:hover {
                                background-color: var(--color-grey-medium-dark);
                            }
                        }

                        &:focus,
                        &:focus-visible {
                            background-color: var(--color-grey-medium-dark);
                            outline: none;
                        }
                    }
                }


                .clip-share-success {
                    display: none;
                    pointer-events: none;

                    &.show {
                        display: inline-flex;
                        position: absolute;
                        left: 100%;
                        top: 50%;
                        transform: translateY(-50%);
                        background-color: var(--color-grey-dark);
                        color: var(--color-white);
                        font-size: var(--font-size-secondary);
                        line-height: var(--line-height-secondary);
                        padding: var(--space-sm) 9px;
                        border-radius: var(--space-xs);
                        border: 1px solid var(--color-grey-semi-dark);
                        white-space: nowrap;
                        z-index: 99999;
                    }
                }
            }
        }

        .recordings-placeholder.clips-placeholder {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 62px;
            position: absolute;
            inset: 0;
            background: var(--color-black);
            z-index: 100;

            .video-splash {
                &:before {
                    display: none;
                }
            }

            .main-placeholder {
                position: relative;
                width: 518px;

                .placeholder-video-wrapper {
                    margin-bottom: 8px;
                }

                .placeholder-video,
                .placeholder-video-wrapper {
                    width: 518px;
                    height: 518px;
                }
            }

            .swipe-help {
                display: none;
            }

            .prev-placeholder,
            .next-placeholder {
                position: relative;
                width: 234px;
                padding-bottom: 54px;

                .placeholder-video,
                .placeholder-video-wrapper {
                    width: 234px;
                    height: 334px;
                }
            }

            .main-placeholder,
            .prev-placeholder,
            .next-placeholder {
                &.is-hidden {
                    opacity: 0;
                    visibility: hidden;
                }
            }

            .prev-placeholder {
                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(270deg, rgba(0, 0, 0, 0.4) 0%, #000 100%);
                }

                .placeholder-video,
                .placeholder-video-wrapper {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                    border-top-right-radius: 6px;
                    border-bottom-right-radius: 6px;
                }
            }

            .next-placeholder {
                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, #000 100%);
                }

                .placeholder-video,
                .placeholder-video-wrapper {
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                    border-top-left-radius: 6px;
                    border-bottom-left-radius: 6px;
                }
            }

            @media screen and (max-width: 1199px) {
                gap: 56px;

                .prev-placeholder,
                .next-placeholder {
                    width: 150px;

                    .placeholder-video,
                    .placeholder-video-wrapper {
                        width: 150px;
                    }
                }

                .video-splash {
                    &:before {
                        display: none;
                    }
                }
            }

            @media screen and (max-width: 991px) {
                display: grid;
                grid-template:
            "prev" auto
            "active" auto
            "next" auto;
                justify-content: center;
                gap: var(--space-lg);
                background: transparent;
                z-index: 1000;

                &.active-clip-loaded {
                    z-index: 100;
                }

                .main-placeholder {
                    grid-area: active;
                    margin: -1px auto;
                    background: var(--color-black);

                    .placeholder-thumbnail {
                        width: 300%;
                        height: 300%;
                        object-fit: cover;
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 1;
                    }

                    .placeholder-video {
                        position: relative;
                        overflow: hidden;
                    }

                    .videos-placeholder {
                        position: relative;
                    }

                    .placeholder-video,
                    .placeholder-video-wrapper {
                        position: relative;
                        width: 100vw;
                        max-width: 518px;
                        aspect-ratio: 1;
                    }

                    .placeholder-video-wrapper:has(.placeholder-thumbnail) {
                        animation: none;
                        background: var(--color-black);

                        .placeholder-video {
                            border-radius: 0;
                            overflow: hidden;
                        }
                    }
                }

                .prev-placeholder,
                .next-placeholder {
                    width: 334px;
                    height: calc((100dvh - var(--mobile-header-default-height) - (100vw + 53px) - 24px) / 2);
                    padding-bottom: 0;

                    .placeholder-video,
                    .videos-placeholder,
                    .placeholder-video-wrapper {
                        width: 334px;
                        height: 100%;
                    }
                }

                .prev-placeholder {
                    grid-area: prev;
                    margin: 0 auto auto auto;

                    .placeholder-video,
                    .placeholder-video-wrapper {
                        border-radius: 0 0 6px 6px;
                    }
                }

                .next-placeholder {
                    grid-area: next;
                    margin: auto auto 0 auto;

                    .placeholder-video,
                    .placeholder-video-wrapper {
                        border-radius: 6px 6px 0 0;
                    }
                }
            }

            @media screen and (max-width: 767px) {
                .main-placeholder {
                    width: 510px;

                    .placeholder-video,
                    .placeholder-video-wrapper {
                        width: 510px;
                        height: 510px;
                    }
                }
            }

            @media screen and (max-width: 576px) {
                gap: 12px;

                .main-placeholder {
                    width: 100vw;

                    .placeholder-video,
                    .placeholder-video-wrapper {
                        width: 100vw;
                        height: 100vw;
                    }

                    .placeholder-video-wrapper {
                        margin-bottom: 12px;
                        border-radius: 0;
                    }
                }
            }
        }
    }

    @media screen and (max-width: 991px) {
        .clips-play {
            .clips-feed-wrapper {
                height: calc(100dvh - var(--mobile-header-default-height));
                overflow: hidden;

                .clips-feed {
                    flex-direction: column;
                    white-space: normal;
                    gap: 16px;
                    height: calc(100dvh - var(--mobile-header-default-height));
                    margin: 0 auto;
                    will-change: scroll-position;

                    .clip {
                        will-change: transform;
                        transform: translateZ(0);
                        backface-visibility: hidden;

                        .clip-nav {
                            display: none;
                        }

                        &.active {
                            z-index: 220;

                            .video-content-wrapper {
                                touch-action: none;

                                & > .clip-controls {
                                    display: none;
                                }
                            }

                            &.swipe-help-loading {
                                .video-loader {
                                    display: none !important;
                                }
                            }
                        }

                        .clip-controls-clone {
                            z-index: 230;
                        }

                        .plyr__controls--mobile {
                            z-index: 231;
                        }

                        &:not(.active) {
                            bottom: 0;

                            &.prev,
                            &.next {
                                .clip-nav {
                                    .clip-nav-text {
                                        display: none;
                                    }
                                }
                            }

                            &.prev {
                                .clip-nav {
                                    &::before {
                                        background: linear-gradient(360deg, rgba(0, 0, 0, 0.4) 0%, #000 50%);
                                    }
                                }
                            }

                            &.next {
                                .clip-nav {
                                    &::before {
                                        background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, #000 50%);
                                    }
                                }
                            }

                            &.is-entering {
                                animation: clip-mobile-swipe-enter 0.272s cubic-bezier(0.22, 1, 0.36, 1) forwards;
                            }

                            &.is-entering-next {
                                animation: clip-mobile-swipe-enter-next 0.272s cubic-bezier(0.22, 1, 0.36, 1) forwards;
                            }

                            &.is-entering-prev {
                                animation: clip-mobile-swipe-enter-prev 0.272s cubic-bezier(0.22, 1, 0.36, 1) forwards;
                            }
                        }
                    }
                }
            }

            & .video-info {
                &.video-info-playing {
                    .tags {
                        max-height: 24px;
                        overflow: hidden;
                        margin-top: 4px;
                        margin-bottom: 6px;
                    }
                }
            }

            .clip-controls {
                justify-content: center;
                right: 0;
                top: 0;
                bottom: 0;
                padding-right: 10px;
                transform: none;
                background: linear-gradient(270deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.00) 100%);

                .player-reclip-icon {
                    background-position: 66.667% center;
                }

                a {

                    &.btn {
                        color: var(--color-white);
                    }

                    &.reclip-active {
                        .player-reclip-icon {
                            background-position: 100% center;
                        }
                    }
                }

                i {
                    &::before {
                        color: var(--color-white);
                    }
                }

                .reclip-button {
                    .video-reclip-counter {
                        color: var(--color-white);
                    }

                    .clip-reclip-unavailable {
                        display: none;

                        &.show {
                            left: 0;
                            right: auto;
                            transform: translate(-100%, -50%);
                        }
                    }

                    &:focus,
                    &:active,
                    &:hover {
                        position: relative;

                        .clip-reclip-unavailable {
                            left: 0;
                            right: auto;
                            transform: translate(-100%, -50%);
                        }
                    }
                }

                .clip-share-wrapper {
                    .clip-share-dropdown {
                        left: auto;
                        right: 100%;
                        transform: translate(5px, -50%);

                        &.open-left {
                            left: 100%;
                            right: auto;
                        }
                    }

                    .clip-share-success {
                        &.show {
                            left: auto;
                            right: 100%;
                            transform: translateY(-50%);
                        }
                    }
                }
            }

        }

        .clips-feed .recordings-placeholder.clips-placeholder .swipe-help {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: absolute;
            inset: 0;
            gap: var(--space-lg);
            background: rgba(0, 0, 0, 0.7);
            z-index: 500;

            img {
                width: 36px;
                height: 66px;
            }

            span {
                font-size: var(--font-size-title);
                line-height: var(--line-height-secondary);
                font-weight: 700;
                color: var(--color-white);
                text-align: center;
            }
        }
    }

    @media screen and (max-width: 767px) {
        .clips-play {
            .clips-feed-wrapper {
                .clips-feed {
                    .clip {
                        &.active {
                            .video-content-wrapper {
                                width: 510px;
                            }

                            #plyr_container {
                                height: 510px;
                            }
                        }
                    }
                }
            }

            .video-unavailable {
                width: 510px;
            }
        }
    }

    @media screen and (max-width: 576px) {
        .clips-play {
            .clips-feed-wrapper {
                width: calc(100% + 30px);
                margin-right: -15px;
                margin-left: -15px;

                .clips-feed {
                    gap: 12px;
                    width: 100%;

                    .clip {
                        &.active {
                            width: 100%;

                            .video-content-wrapper {
                                width: 100vw;
                                height: 100vw;
                                margin-bottom: 12px;

                                .plyr {
                                    border-radius: 0;
                                }

                                .video-splash-big {
                                    img {
                                        border-radius: 0;
                                    }
                                }
                            }

                            #plyr_container {
                                width: 100vw;
                                height: 100vw;
                            }
                        }
                    }
                }
            }

            .video-unavailable {
                width: 100%;
            }

            .video-info {
                max-width: 100%;
                padding: 0 15px;
                min-height: 0;

                .first-line {
                    .video-views {
                        font-size: var(--font-size-small);
                        line-height: var(--line-height-small);
                        color: var(--color-grey-medium-light);
                        font-weight: 700;
                    }
                }

                .see-full-line {
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);

                    .btn-see-full {
                        white-space: nowrap;
                    }
                }

                .tags {
                    display: none;
                }

                .video-info-sub {
                    & > i,
                    & > span:not(.clipped-by) {
                        display: none;
                    }
                }

                .clipped-by {
                    a {
                        max-width: 220px;
                    }
                }
            }

            .recordings-placeholder.clips-placeholder  .swipe-help {
                margin-left: -15px;
                margin-right: -15px;
            }
        }
    }

    @media screen and (max-width: 450px) {
        .clips-play {
            .video-info {
                .clipped-by {
                    a {
                        max-width: 180px;
                    }
                }
            }
        }
    }
}