@import "./var.less";

.kc.modal {
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(~"var(--kc-overlay-z-index) - 1");
    width: 100%;
    height: 100vh;
    overflow: hidden;
    //background-color: transparent;
    //color: var(--kc-key-color);
    > .dialog {
        position: relative;
        top: calc(~"var(--kc-modal-max-height) * -1 - 1px"); // - 1px for a fraction
        left: 0;
        background-color: var(--kc-base-color);
        > .content,
        > .kc.form > .content {
            max-height: calc(~"var(--kc-modal-max-height) - var(--kc-button-height)");
            //overflow: auto;
            overflow: hidden;
            // it seems IMPOSSIBLE to avoid iOS Safari crappy scrolling; just don't let the content overflow!
            // tried this; didn't work
            // @see https://stackoverflow.com/questions/35469227/overflow-y-not-working-in-safari-inside-a-modal
            //overflow-y: scroll;
            //-webkit-overflow-scrolling: touch;
            padding: 1rem;
            //background-color: #eef;
        }
        > .action,
        > .kc.form > .action {
            //background-color: #dcc;
            display: flex;
            flex-flow: row nowrap;
            width: 100%;
        }
    }
}
.kc.modal.opened {
    pointer-events: auto;
    //background-color: var(--kc-overlay-background-color);
    background-color: var(--kc-backdrop-background);
}

.kc.modal.with-animation {
    will-change: background-color;
    transition: background-color var(--kc-animation-duration) var(--kc-animation-easing);
    //transition: background-color 1s linear;
    > .dialog {
        will-change: transform;
        transition: transform var(--kc-animation-duration) var(--kc-animation-easing);
        //transition: transform 1s linear;
    }
}

@media (min-width: @responsive-breakpoint-medium) {
    .kc.modal {
        > .dialog {
            width: @responsive-breakpoint-medium;
        }
    }
}