@import '../../helpers/_selectors.scss';
@import '../../helpers/_size.scss';
@import '../core/theme.scss';

/* The base of the modal dialog, which is an overlay of the webpage */
.modal {
    position: fixed; /* Scrolls with the user */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0; /* Initially hidden */
    padding: 1rem;
    display: none; /* Doesn't block the elements underneath */
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; /* Vertical centering */
    pointer-events: none; /* Prevent any pointer events made to modal while hidden */

    /* When the modal dialog is visible */
    &:target,
    &.shown {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        opacity: 1;
        z-index: 999;
        pointer-events: auto; /* Re-enable pointer events */

        /* The div in the modal dialpog used to create the translucent background */
        .modal-overlay {
            position: absolute; /* Absolute inside of the modal container */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: block;
            background-color: transparentize($color: $cirrus-dark, $amount: 0.5);
        }

        .modal-container,
        .modal-container {
            -webkit-animation: slide-down var(--animation-duration) ease 1;
            animation: slide-down var(--animation-duration) ease 1;
            z-index: 1;
        }
    }

    /* Different size modals */
    &.modal-small .modal-content {
        max-width: 20rem; /* 320px */
    }

    &.modal-large .modal-content {
        max-width: 60rem; /* 960px */
    }

    /* The modal dialog body with the text itself */
    .modal-content {
        background-color: var(--cirrus-bg);
        padding: 0;
        display: block;
        border-radius: 3px;
        box-shadow: 0 0.4rem 1rem transparentize($color: $cirrus-dark, $amount: 0.7);
        z-index: 1;
        color: var(--cirrus-fg);
        max-width: 40rem; /* 640px */

        /* Restrict width  */
        &.small {
            max-width: 32rem;
        }

        #{$header-selectors} {
            color: var(--cirrus-fg);
        }

        .modal-header {
            padding: 1rem 2.5rem;
        }

        .modal-header .modal-title {
            font-weight: bolder;
            font-size: 1.4rem;
        }

        .modal-body {
            padding: 1rem 2.5rem;
            overflow-y: auto;
            max-height: 50vh; /* Max height is 50% of viewport height which prevents dialog from extetnding past screen */
            position: relative;
        }

        .modal-footer {
            padding: 1rem 2.5rem;
        }

        @include screen-below('sm') {
            max-width: 90%;
        }
    }

    /* MODAL ANIMATIONS */
    &.modal-animated--dropdown {
        -webkit-animation: slide-down var(--animation-duration) ease 1;
        animation: slide-down var(--animation-duration) ease 1;
    }

    /* Visible state */
    &.modal-animated--zoom-in,
    &.modal-animated--zoom-out {
        display: -webkit-box; /* Force dialog to appear in the center */
        display: -ms-flexbox;
        display: flex;
        opacity: 0;
        transition: 300ms all ease;
    }

    &:target.modal-animated--zoom-in,
    &:target.modal-animated--zoom-out {
        opacity: 1;
        transition: 300ms all ease;
    }

    &.modal-animated--zoom-in .modal-content {
        transform: scale(0.8);
        transition: 300ms all ease;
    }

    &:target.modal-animated--zoom-in .modal-content,
    &:target.modal-animated--zoom-out .modal-content {
        transform: scale(1);
        transition: 300ms all ease;
    }

    &.modal-animated--zoom-out .modal-content {
        transform: scale(1.2);
        transition: 300ms all ease;
    }
}

/* Keyframes for slide down animation */
@-webkit-keyframes slide-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-3rem);
        transform: translateY(-3rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes slide-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-3rem);
        transform: translateY(-3rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@include screen-below('sm') {
    .modal-content {
        max-width: 90%;
    }
}