/*------------------------------------*\
  #FLYOUT BLOCK
\*------------------------------------*/
.has-flyout [data-flyout].is-activated {
    display: none;
}

.has-flyout [data-flyout].is-activated.is-open {
    z-index: z( 'modal' );
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    transform: translateX(0);
}



.has-flyout [data-flyout-content] {
    position: relative;
    height: 100%;
    background-color: $flyout-background-color;
}
.has-flyout [data-flyout].is-activated [data-flyout-content] {
    overflow-x: hidden;
    overflow-y: auto;
}



body.has-flyout--open {
    overflow: hidden;
}



.has-flyout .flyout-overlay {
    display: none;
}
.has-flyout .flyout-overlay {
    z-index: z( 'offside-element' ) - 1;
    display: block;
    will-change: background-color;
    background-color: transparent;
    transition: background-color linear $flyout-overlay-animation-duration;
}
.has-flyout--open .flyout-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: $flyout-overlay-color;
}





/*------------------------------------*\
  #FLYOUT BLOCK -- MODAL
\*------------------------------------*/
.has-flyout [data-flyout][data-flyout-modal].is-activated [data-flyout-content] {
    position: relative;
    
    @media (#{$bp-larger-than-tablet}) {
        margin: 10vh auto;
        max-height: 80vh;
        max-width: 80%;
        height: auto;
    }

    @media (#{$bp-larger-than-desktop}) {
        max-width: 60%;
    }
}