#sd-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
}

.sd-modal {
    @include modalAnimationDetails;
    position: absolute;
    z-index: 2002;
    display: flex;
    flex-direction: column;
    outline: none;
    background-color: $white;
    overflow: hidden;
    @include sd-viewport($sd-mobile) {
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        border-radius: 0;
        &-overlay {
            background-color: $white;
        }
        &-wrapper {
            padding: 52px 24px 32px;
        }
    }

    @include sd-viewport($sd-tablet-plus) {
        left: 50%;
        top: 50%;
        width: 600px;
        max-height: 90vh;
        transform: translate(-50%, -50%);
        border-radius: $sd-corner-radius;
        &-overlay {
            background-color: $dark-overlay;
        }
        &-wrapper {
            padding: 52px 32px 40px;
        }
    }

    @include sd-viewport($sd-tablet) {
        width: $modal-max-viewport-width;
        max-width: 600px;
    }

    &-wrapper {
        height: 100%;
        padding: 52px 32px 40px;
        overflow-y: auto;
    }

    &-body {
        overflow: hidden;
    }
    &-overlay {
        @include overlayAnimationDetails;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2001;
        &.mod-overlay-dark {
            background-color: $dark-overlay;
        }
    }
    &-dismiss-top {
        position: absolute;
        z-index: 1;
        top: 16px;
        right: 16px;
        height: 32px;
        width: 32px;
        border: 0;
        border-radius: 50%;
        // This close/clear icon is from StyleDot, icon name: ic_close in 32px size
        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-size: 100%;
        &.mod-scrolled {
            background-color: $white90;
            animation: dismissTransition $modal-dismiss-duration;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
        }
    }
    &-dismiss-cta {
        margin-top: 20px;
        &-container {
            display: flex;
            justify-content: center;
            &.dismiss-cta-left {
                justify-content: flex-start;
            }
            &.dismiss-cta-right {
                justify-content: flex-end;
            }
        }
    }
}

// modal sizes
.sd-modal {
    // prop: modalSize="large"
    &.mod-modal-large {
        @include modalSizeLarge;
    }
    // prop: modalSize="medium"
    &.mod-modal-medium {
        @include modalSizeMedium;
    }
    // prop: modalSize="small"
    &.mod-modal-small {
        @include modalSizeSmall;
    }
}

// prop: alternateModal="promo"
.sd-modal.sd-modal-promo {
    .sd-modal-wrapper {
        padding: 0;
    }
    &.mod-modal-white-dismiss {
        @include whiteDismissButton;
    }
}

// prop: alternateModal="interstitial"
.sd-modal.sd-modal-interstitial {
    @include modalMoveInsetModal;
    @include sd-viewport($sd-mobile) {
        @include mobileInsetModalStyle;
        width: $modal-max-viewport-width;
    }
}

// prop: alternateModal="interstitial-promo"
.sd-modal.sd-modal-interstitial-promo {
    .sd-modal-wrapper {
        padding: 0;
    }
    @include modalMoveInsetModal;
    @include sd-viewport($sd-mobile) {
        @include mobileInsetModalStyle;
        width: $modal-max-viewport-width;
    }
    &.mod-modal-white-dismiss {
        @include whiteDismissButton;
    }
}