/* Desktop-only experience. This file is loaded from 1181px and wider. */

.mobile-tabbar {
    display: none;
}

.video-watch-layout {
    max-width: 1680px;
    margin-inline: auto;
}

.video-recommendations {
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(168, 85, 247, .55) transparent;
    scrollbar-width: thin;
}

.recommendation-card {
    position: relative;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 16px;
    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.recommendation-card:hover {
    transform: translateX(3px);
    border-color: rgba(168, 85, 247, .34);
    background: rgba(168, 85, 247, .1);
}

.recommendation-card__thumb {
    display: block;
    height: auto;
}

.recommendation-card__body {
    justify-content: center;
}

.recommendation-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 5px 8px;
    border-radius: 999px;
    color: #fff;
    background: rgba(5, 8, 22, .86);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .3);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}