// Variables
@import '../../assets/scss/theme/variables/block-index';

// Image section
.videos-section {
    .small-videos {
        max-height: 340px;
        overflow-y: auto;
        .small-video {
            cursor: pointer;
            transition: background-color ease-in-out 280ms;
            &:not(:last-child) {
                border-bottom: 1px solid var(--gray-400);
            }
            &.active {
                background-color: var(--border);
                .icon {
                    color: var(--first);
                    [fill="currentColor"] {
                        fill: url(#gradient);
                    }
                }
            }
            &:hover {
                background-color: var(--border);
            }
            .video-thumbnail {
                width: 45px;
                margin-right: 20px;
            }
            .label {
                width: calc(100% - 45px - 28px - 40px);
                text-align: left;
            }
            .icon {
                width: 20px;
                margin-right: 20px;
                color: var(--gray-400);
            }
        }
    }

    .video-container {
        position: relative;
        @media only screen and (max-width: $md) {
            padding-bottom: 20px;
        }
        .image {
            z-index: 2;
        }
        .video-background {
            cursor: pointer;
            width: 100%;
            height: calc(100% - 18px);
            @media only screen and (min-width: $md) {
                height: 100%;
            }
            position: absolute;
            z-index: 3;
            background-color: #00000033;
            left: 0;
            top: 0;
            &:hover {
                background-color: #00000066;
                .icon {
                    opacity: 1;
                }
            }
            .icon {
                font-size: 48px;
                color: var(--white);
                opacity: .85;
            }
        }
    }
}

.video-frame {
    position: relative; 
    display: block; 
    height: 0; 
    padding: 0; 
    overflow: hidden;
    padding-bottom: 56.25%;
    iframe {
        position: absolute; 
        top: 0; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        border: 0;
    }
}