/* Modal mixins and animations -------- */

$white90: rgba($white, 0.9);
$dark-overlay: rgba($gray8, 0.6);
$modal-open-timing-function: cubic-bezier(0.48, 0.55, 0.455, 1);
$modal-open-duration-mobile: 500ms;
$modal-open-duration-desktop: 500ms;
$modal-dismiss-duration: 333ms;
$modal-max-viewport-width: 87vw;

// modal animations
@keyframes modalMove {
    from {
        top: 4vh;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}
@keyframes modalMove2 {
    from {
        top: 52%;
        opacity: 0;
    }
    to {
        top: 50%;
        opacity: 1;
    }
}
@keyframes modalMoveAlternate {
    from {
        top: 52vh;
        opacity: 0;
    }
    to {
        top: 50vh;
        opacity: 1;
    }
}
@keyframes overlayShow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes dismissTransition {
    from {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    to {
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    }
}

@mixin modalAnimationDetails {
    @include sd-viewport($sd-mobile) {
        animation: modalMove $modal-open-duration-mobile;
    }
    @include sd-viewport($sd-tablet-plus) {
        animation: modalMove2 $modal-open-duration-desktop;
    }
    animation-timing-function: $modal-open-timing-function;
    animation-fill-mode: forwards;
}

@mixin modalMoveInsetModal {
    @include sd-viewport($sd-mobile) {
        animation: modalMoveAlternate $modal-open-duration-mobile;
        animation-timing-function: $modal-open-timing-function;
        animation-fill-mode: forwards;
    }
}

@mixin overlayAnimationDetails {
    @include sd-viewport($sd-mobile) {
        animation: overlayShow $modal-open-duration-mobile;
    }
    @include sd-viewport($sd-tablet-plus) {
        animation: overlayShow $modal-open-duration-desktop;
    }
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

// "inset" mobile style for modals (not full-screen)
@mixin mobileInsetModalStyle {
    left: 50%;
    top: 50%;
    height: auto;
    max-height: 90vh;
    transform: translate(-50%, -50%);
    border-radius: $sd-corner-radius;
}

@mixin whiteDismissButton {
    // add the @include to a sibling class of `.sd-modal`
    .sd-modal-dismiss-top {
        background: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="m9.293 10.707a1 1 0 0 1 1.414-1.414l12.003 12.002a1 1 0 1 1 -1.414 1.414z"/><path d="m10.707 22.709a1 1 0 1 1 -1.414-1.414l12.002-12.002a1 1 0 0 1 1.414 1.414l-12.002 12.003z"/></svg>');
        transition: background $modal-dismiss-duration;
        &.mod-scrolled {
            background: url('data:image/svg+xml;utf8,<svg fill="%236b6b6b" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="m9.293 10.707a1 1 0 0 1 1.414-1.414l12.003 12.002a1 1 0 1 1 -1.414 1.414z"/><path d="m10.707 22.709a1 1 0 1 1 -1.414-1.414l12.002-12.002a1 1 0 0 1 1.414 1.414l-12.002 12.003z"/></svg>');
            background-color: $white90;
        }
    }
}
// modal sizes
@mixin modalSizeBaseStyles {
    @include modalMoveInsetModal;
    @include mobileInsetModalStyle;
    max-width: $modal-max-viewport-width;
}
@mixin modalSizeLarge {
    @include modalSizeBaseStyles;
    width: 976px; // ~ 8 columns wide for a desktop screen
}
@mixin modalSizeMedium {
    @include modalSizeBaseStyles;
    width: 726px; // ~ 6 columns wide for a desktop screen
}
@mixin modalSizeSmall {
    @include modalSizeBaseStyles;
    width: 476px; // ~ 4 columns wide for a desktop screen
}