/* ==========================================================================
   Structures - Videolink
   ========================================================================== */

/* General
   ========================================================================== */
.videolink {
    position: relative;
    z-index: 0;
}

.videolink__video-link {
    position: relative;
    z-index: 2;

    display: block;

    opacity: 1;

    line-height: 0;

    transition: all .3s cubic-bezier(0, 0, .58, 1);

    &--hidden {
        opacity: 0;

        pointer-events: none;
    }
}

.videolink__video-link__image {
    position: relative;
    z-index: 0;

    display: block;
    width: 100%;
    max-width: none;
}

.videolink__video-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    width: 100%;
    height: 100%;

    background: $grey;
}

.videolink__video-link__icon {
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;

    background: rgba($white, .9);

    border-radius: 50%;

    color: $brand-primary;
    font-size: 66px;
    line-height: 100px;
    text-align: center;

    &:before {
        content: '';

        position: relative;
        top: 3px;
        left: 5px;

        display: inline-block;

        border-style: solid;
        border-width: 25px 0 25px 40px;
        border-color: transparent transparent transparent currentColor;
    }
}