/* MOVIE-PREVIEW GENERAL =================================== */

.movie-main {
    flex-shrink: 0;
    margin-right: 5px;
}

/* MOVIE-PREVIEW DEFAULT ====================================== */

.movie-preview-default {
    height: 168px;
    width: 300px;

    overflow: hidden;
}

.movie-preview-default:hover {
    animation: 1000ms ease 0s 1 normal both running zoom;
}

@keyframes zoom {
    from {
        height: 168px;
        width: 300px;
    }

    to {
        height: 280px;
        width: 500px;
        /* height: 130%;
        width: auto; */
    }
}

.thumbnail {
    position: absolute;

    height: 168px;
    width: 300px;
    visibility: visible;
    cursor: pointer;

    z-index: 10;
}

.playing .thumbnail {
    transition: 1000ms ease all;
    height: 280px;
    width: 500px;
    opacity: 0;
    visibility: hidden;

    transition: height 1s, width 1s, opacity .5s, visibility 0s;
    transition-property: height, width, opacity, visibility;
    transition-delay: 0s, 0s, 750ms, 1.25s;
}

.trailer-container {
    height: 100%;
    width: 100%;
}

.trailer {
    position: absolute;
    height: 168px;
    width: 300px;

    /* height: 130%;
    width: auto; */
    
    /* height: 200px;
    width: 357px; */
}

.playing .trailer-container .trailer {
    transition: 1000ms ease all;
    height: 280px;
    width: 500px;

}

.trailer-info {
    height: 100%;
    width: 100%;

    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;

}

.trigger-fade .trailer-info {
    cursor: none;

    opacity: 0;
    transition: 2000ms ease;
    transition-property: opacity;
}

.preview-details-container {
    height: 85%;
    width: 100%;
    display: flex;
}

.preview-details {
    height: 100%;
    width: 80%;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-left: 30px;
}

.fa-play-circle {
    width: 48px;
}

.fa-play-circle:hover {
    opacity: 0.8;
}

.preview-title {
    font-size: 24px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 10px;
}

.preview-details-box {
    display: flex;
    align-items: center;
}

.preview-rating {
    font-size: 16px;
    border: 1px solid white;
    padding: 2px 5px 2px 5px;
    margin-right: 12px;
}

.preview-duration {
    font-size: 16px;
}

.preview-buttons {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.gap {
    height: 6px;
    width: 100%;
}

.add-btn {
    background-image: image-url("add-unhovered");
    background-size: cover;
    height: 36px;
    width: 36px;
}

.add-btn:hover {
    background-image: image-url("add-hovered");
}

.remove-movie-btn {
    background-image: image-url("movie-add-unhov");
    background-size: cover;
    height: 36px;
    width: 36px;
}

.remove-movie-btn:hover {
    background-image: image-url("movie-add-hov");
}

.sound-btn-off {
    background-image: image-url("sound-off-unhovered");
    background-size: cover;
    height: 36px;
    width: 36px;
}

.sound-btn-off:hover {
    background-image: image-url("sound-off-hovered");
}

.sound-btn-on {
    background-image: image-url("sound-on-unhovered");
    background-size: cover;
    height: 36px;
    width: 36px;
}

.sound-btn-on:hover {
    background-image: image-url("sound-on-hovered");
}

.preview-show-link {
    width: 100%;
    height: 15%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-chev-down {
    background-image: image-url("chev-down-white");
    background-size: cover;
    height: 16px;
    width: 55px;
}

.preview-show-link:hover .preview-chev-down {
    background-image: image-url("chev-down-red");
}

.thumbnail-active {
    position: absolute;
    height: 162px;
    width: 294px;
    filter: brightness(75%);
}

.thumbnail-inactive {
    height: 168px;
    width: 300px;
    filter: brightness(75%);
}

/* MOVIE-PREVIEW ACTIVE =================================== */


.movie-preview-active {
    height: 162px;
    width: 294px;
    border: 3px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    position: relative;
}

.play-container {
    position: absolute;
    height: inherit;
    width: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.preview-play-button {
    background-image: image-url("play-icon");
    background-size: cover;

    opacity: 0.9;
    visibility: hidden;
    height: 96px;
    width: 96px;
    text-decoration: none;
}

.preview-play-button:hover {
    opacity: 0.7;
}

.preview-play-small {
    background-image: image-url("play-icon");
    background-size: cover;

    height: 48px;
    width: 48px;
    text-decoration: none;
}

.preview-play-small:hover {
    opacity: 0.7;
}

.chev-down {
    background-image: image-url("chev-down-white");
    background-size: cover;
    position: absolute;
    height: 16px;
    width: 55px;

    visibility: hidden;
    opacity: 0;
    margin-top: 80px;
}

/* MOVIE-PREVIEW INACTIVE ===================================== */

.movie-preview-inactive:hover .chev-down {
    transition: 500ms ease all;
    transform: translate(0, 20px);
    opacity: 1;
}

.movie-preview-inactive {
    height: 168px;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.playing .hov-button {
    visibility: visible;
}