$gap: 16px;
$button-height: 40px;
$container-width: 688px;

$modal-width: 760px;
$modal-aside-width: 320px;
$modal-aside-width-medium: 50vw;
$modal-aside-width-large: 75vw;

.aw-modal {
    @apply z-100 fixed inset-0;
    overflow: auto;
    padding: 0 !important;
    margin: 0;
    max-width: 100%;

    &__container {
        @apply relative flex w-full justify-center items-start p-0;
        min-height: 100vh;
        min-height: 100dvh;
        height: max-content;
    }

    &__dialog {
        @apply relative max-w-full mx-auto;

        background-color: var(--c-surface);
        color: var(--c-on-surface);
        border-top-left-radius: 0.9375rem;
        border-top-right-radius: 0.9375rem;
    }

    &__header {
        @apply flex items-center justify-between;
        padding-top: var(--header-padding-top);
        padding-left: var(--header-padding-horizontal);
        padding-right: var(--header-padding-horizontal);
        min-height: var(--header-height);

        &:focus {
            outline: none;
        }
    }

    &__content {
        @apply mx-auto px-6 pt-6;
        max-width: 100%;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
    }

    &__content &__unwrap {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        width: calc(100% + 3rem);
    }

    &.is-fullscreen &__content,
    &.is-bottom &__content {
        max-width: var(--ui-container-width, $container-width);
    }

    &__content--buttons {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 11.5rem);
    }

    &__close {
        width: 3rem;
        height: 3rem;
    }

    &__title {
        @apply my-0 ml-0 pr-6 text-left leading-tight font-heading truncate;

        font-size: 1.25rem;
        line-height: 1.5rem;
        font-weight: 700;
        margin-right: auto;
    }

    &__subtitle {
        @apply px-6 text-sm truncate font-body text-mono-300;
    }

    &__buttons {
        @apply fixed w-full bg-surface;

        bottom: 0;
        border-top: 1px solid rgba(var(--c-on-surface-rgb), 0.1);
        padding: 1.25rem 1.5rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
        z-index: 19;

        & > .aw-button {
            flex-grow: 1;
        }
    }

    /**
     * Modifiers
     */

    &.is-default &__dialog {
        @apply p-0 w-screen min-h-screen;
    }

    &.is-default &__back {
        @apply hidden;
    }

    &.is-default &__header {
        @apply pb-0;
    }

    &.is-fullscreen &__container,
    &[class*='is-aside'] &__container {
        @apply p-0 overflow-hidden;
    }

    &.is-fullscreen,
    &.is-aside {
         overflow: hidden;
     }

    &.is-fullscreen &,
    &[class*='is-aside'] & {
        &__dialog {
            @apply flex flex-col w-full max-w-full p-0 h-full overflow-hidden;

            min-height: 100dvh;
            max-height: 100dvh;
        }

        &__header {
            flex: none;
        }

        &__subtitle {
            flex: none;
        }

        &__body {
            overflow: auto;
            flex: 1;
        }
    }

    &[class*='is-aside'] & {
        &__dialog {
            border-radius: 0;
        }
    }

    &[class*='is-aside'] {
        left: auto;
        min-width: $modal-aside-width;
        width: $modal-aside-width;
        max-width: 100vw;
        z-index: 99;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    &[class*='is-aside'] &__back {
        @apply hidden;
    }

    &.is-aside-medium {
        width: $modal-aside-width-medium;
    }

    &.is-aside-large {
        width: $modal-aside-width-large;
    }

    &[class*='is-overlay-aside'] &__container {
        align-items: stretch;
    }

    &[class*='is-overlay-aside'] &__dialog {
        width: 100%;
    }

    &.is-bottom {
        @apply overflow-hidden;
    }

    /* &.is-bottom &__header {
        @apply py-1 pr-1;
        z-index: 1;
    } */

    &.is-bottom &__dialog {
        @apply absolute left-0 w-full flex flex-col overflow-hidden;
        bottom: env(safe-area-inset-bottom, 0);
        top: 50%;
    }

    &.is-bottom &__subtitle {
        flex-shrink: 0;
    }

    &.is-bottom &__back {
        @apply hidden;
    }

    &.is-bottom &__body {
        @apply overflow-auto;
    }
}

@media (max-width: theme('screens.sm')) {
    .aw-modal {
        &.is-fullscreen &__title {
            text-align: center;
        }

        &[class*='is-aside'] &__back {
            display: none;
        }
    }
}

@screen md {
    .aw-modal {
        &.is-default {
            flex-direction: column;

            &:before {
                content: '';
                display: block;
                flex-basis: 8rem;
                flex-shrink: 1;
                min-height: 2rem;
            }
        }

        &.is-default &__container {
            padding-top: 0;
            flex-basis: 100vh;
            min-height: inherit;
        }

        &__header {
            padding-top: 1.5rem;
            min-height: auto;
        }

        &__close {
            width: 2.5rem;
            height: 2.5rem;
        }

        &__buttons {
            padding-left: 2rem;
            padding-right: 2rem;
            border-bottom-left-radius: 1rem;
            border-bottom-right-radius: 1rem;

            & > .aw-button {
                flex-grow: 0;
                /* margin-right: 1rem;
              margin-bottom: 1rem; */
            }
        }

        &__content &__unwrap {
            margin-left: -2rem;
            margin-right: -2rem;
            width: calc(100% + 4rem);
        }

        &[class*='is-fullscreen'] &,
        &[class*='is-overlay-aside'] & {
            &__dialog {
                border-radius: 0;
            }
        }

        &:not(.is-aside):not([class*='is-overlay-aside']) &__header {
            @apply items-center justify-center px-8;
        }

        &__container {
            @apply px-16 pt-32 pb-8;
        }

        &:not(.is-aside):not([class*='is-overlay-aside']) &__title {
            @apply font-normal pr-0 text-3xl mt-3;
        }

        &:not(.is-aside):not([class*='is-overlay-aside']) &__title,
        &:not(.is-aside):not([class*='is-overlay-aside']) &__subtitle {
            @apply text-center mx-auto;
        }

        &:not(.is-aside):not([class*='is-overlay-aside']) &__subtitle {
            @apply px-8;
        }

        &:not(.is-aside):not([class*='is-overlay-aside']) &__content,
        &__content--buttons {
            @apply p-8;
        }

        /* &[class*='is-overlay-aside'] &__content--buttons {
            padding-bottom: 7rem;
        } */

        &__buttons {
            @apply static;
        }

        &.is-default {
            @apply flex pt-16 px-16;
            background: rgba(var(--c-overlay-rgb), var(--bg-opacity, 0.8));
        }

        &[class*='is-overlay-aside'] {
            @apply overflow-hidden;
            background: rgba(var(--c-overlay-rgb), var(--bg-opacity, 0.8));
        }

        &[class*='is-overlay-aside'] &__dialog {
            display: flex;
            flex-direction: column;
            margin-right: 0;
            overflow: auto;
            max-height: var(--viewport-height, 100vh);
        }

        &[class*='is-overlay-aside'] &__body {
            flex-grow: 1;
        }

        &[class*='is-overlay-aside'] &__content--buttons {
            padding-bottom: theme('spacing.16', 4rem);
        }

        &[class*='is-overlay-aside'] &__buttons {
            margin-top: auto;
            position: sticky;
            bottom: 0;
            z-index: 1;

            & > .aw-button {
                flex-grow: 1;
            }
        }

        &[class*='is-overlay-aside'] &__dialog {
            max-height: var(--viewport-height, 100vh);
        }

        &[class*='is-overlay-aside'] &__container {
            align-items: stretch;
            justify-content: flex-end;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;

            position: fixed;
            left: 0;
            right: 0;
            top: env(safe-area-inset-top, 0);
            bottom: env(safe-area-inset-bottom, 0);
        }

        &[class*='is-overlay-aside'] &__title {
            font-size: 1rem;
            line-height: 1.125;
            font-weight: 700;
        }

        &[class*='is-overlay-aside'] &__header {
            padding-top: 1.5rem;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }

        &[class*='is-overlay-aside'] &__close {
            top: 0;
            right: 0;
        }

        &.is-overlay-aside &__dialog {
            width: 385px;
        }

        &.is-overlay-aside-medium &__dialog {
            width: $modal-aside-width-medium;
        }

        &.is-overlay-aside-large &__dialog {
            width: $modal-aside-width-large;
        }

        &.is-default &__back,
        &.is-bottom &__back {
            @apply block h-0 invisible overflow-hidden;
        }

        &.is-bottom &__content {
            @apply px-0;
        }

        &.is-default &__dialog {
            @apply h-auto min-h-0;
            width: $modal-width;
            border-radius: 1rem;
            max-width: 580px;
        }

        &.is-fullscreen &__dialog,
        &.is-overlay-aside &__dialog {
            border-radius: 0;
        }

        &.is-fullscreen &__header {
            @apply pt-16;
        }

        &.is-fullscreen &__close {
            @apply absolute;
            top: theme('spacing.16');
            right: theme('spacing.16');
        }

        &:not(.is-aside):not([class*='is-overlay-aside']):not(.is-fullscreen)
            &__header {
            justify-content: space-between;
        }

        &:not(.is-aside):not([class*='is-overlay-aside']):not(.is-fullscreen)
            &__title {
            margin-top: 0;
            font-size: 1.25rem;
            line-height: 1.5rem;
            font-weight: 700;
        }

        &:not(.is-aside):not([class*='is-overlay-aside']) &__content {
            padding-top: 1rem;
            padding-bottom: 2rem;
        }

        &.is-default &__close {
            opacity: 1;
        }

        &--md.is-default {
            .aw-modal__dialog {
                max-width: 53.375rem;
                width: 100%;
            }
        }
    }
}

/**
 * Transitions
 */

$modal-t-dur: 200ms;

@media (max-width: calc(theme('screens.md') - 1px)) {
    .modal-transition-default,
    .modal-transition-aside,
    .modal-transition-aside-medium,
    .modal-transition-aside-large,
    .modal-transition-overlay-aside,
    .modal-transition-overlay-aside-medium,
    .modal-transition-overlay-aside-large,
    .modal-transition-fullscreen {
        &-enter,
        &-leave-to {
            opacity: 0;
            transform: translateY(100%);
        }

        &-leave,
        &-enter-to {
            opacity: 1;
            transform: translateY(0);
        }

        &-enter-active,
        &-leave-active {
            pointer-events: none;
        }

        &-enter-active {
            transition: calc($modal-t-dur * 0.5) opacity, $modal-t-dur transform;
        }

        &-leave-active {
            transition: calc($modal-t-dur * 0.8) opacity,
                calc($modal-t-dur * 0.8) transform;
        }
    }
}

@screen md {
    .modal-transition-default {
        &-enter,
        &-leave-to {
            .aw-modal__dialog {
                opacity: 0;
                transform: translateY(calc(-2 * $gap));
            }
        }

        &-enter-active {
            transition: calc($modal-t-dur * 1.5) opacity;

            .aw-modal__dialog {
                transition: $modal-t-dur transform calc($modal-t-dur * 0.5),
                    calc($modal-t-dur * 0.5) opacity calc($modal-t-dur * 0.5);
            }
        }

        &-leave-active {
            transition: $modal-t-dur opacity calc($modal-t-dur * 0.5);

            .aw-modal__dialog {
                transition: $modal-t-dur transform, $modal-t-dur opacity;
            }
        }
    }

    /* fullscreen */
    .modal-transition-fullscreen {
        &-enter,
        &-leave-to {
            transform: scale(1.1);
            opacity: 0;
        }

        &-enter-active {
            transition: $modal-t-dur transform, $modal-t-dur opacity;
        }

        &-leave-active {
            transition: $modal-t-dur transform,
                calc($modal-t-dur * 0.67) opacity calc($modal-t-dur * 0.33);
        }
    }

    /* aside */
    .modal-transition-aside-medium,
    .modal-transition-aside-large {
        &-enter {
            transition-duration: calc($modal-t-dur * 2);
        }

        &-leave-to {
            transition-duration: calc($modal-t-dur * 1.5);
        }
    }

    .modal-transition-overlay-aside,
    .modal-transition-overlay-aside-medium,
    .modal-transition-overlay-aside-large {
        &-enter,
        &-leave-to {
            opacity: 0;
            transform: none;

            .aw-modal__dialog {
                transform: translateX(80%);
            }
        }

        &-enter-active {
            transition: $modal-t-dur opacity;

            .aw-modal__dialog {
                transition: $modal-t-dur transform;
            }
        }

        &-leave-active {
            transition: $modal-t-dur opacity;

            .aw-modal__dialog {
                transition: $modal-t-dur transform;
            }
        }
    }

    /* bottom */
    .modal-transition-bottom {
        &-enter,
        &-leave-to {
            opacity: 0;

            .aw-modal__dialog {
                transform: translateY(100%);
            }
        }

        &-enter-active {
            transition: $modal-t-dur opacity;

            .aw-modal__dialog {
                transition: $modal-t-dur transform;
            }
        }

        &-leave-active {
            transition: $modal-t-dur opacity;

            .aw-modal__dialog {
                transition: $modal-t-dur transform;
            }
        }
    }
}