
[data-modal-open],
[data-modal-close],
[data-modal-submit],
[data-modal-reset] {
    &:not(.disabled):not([disabled]) { cursor: pointer; }
}



.modal-wrapper {

    --modal-container-padding: 30px;
    --modal-max-width: calc( 100% - ( 2 * var(--modal-container-padding) ) );
    --modal-max-height: calc( 100% - ( 2 * var(--modal-container-padding) ) );
    --modal-background-color: var(--theme-white, #fff);

    --modal-border-line: 1px solid var(--modal-border-color, transparent);
    --modal-border-color: var(--theme-grayish);
    --modal-border-radius: 8px;
    --modal-padding-y: 20px;
    --modal-padding-x: 20px;


    display: flex;
    position: fixed;
    flex-direction: row;
    max-height: 100vh;
    z-index: 5001;
    inset: 0;
    background-color: rgba(0,0,0,0.9);

    &:not(.active) {
        display: none;
    }

    &.active {
        display: flex;
    }


    &.is-top {
        align-items: start;
    }

    &.is-bottom {
        align-items: end;
    }

    &:not(.is-top):not(.is-bottom) {
        align-items: center;
    }

    &.is-left {
        justify-content: start;
    }

    &.is-right {
        justify-content: end;
    }

    &:not(.is-left):not(.is-right) {
        justify-content: center;
    }







    --modal-container-size: auto;
    &.size-xxs { --modal-container-size: 320px; }
    &.size-xs { --modal-container-size: 460px; }
    &.size-sm { --modal-container-size: var(--container-size-sm); }
    &.size-md { --modal-container-size: var(--container-size-md); }
    &.size-lg { --modal-container-size: var(--container-size-lg); }
    &.size-xl { --modal-container-size: var(--container-size-xl); }
    &.size-xxl { --modal-container-size: var(--container-size-xxl); }
    &:not([class*="size-"]) { --modal-container-size: var(--container-size); }









    .modal-wrap {
        display: flex;
        position: relative;
        flex-direction: column;
        overflow: visible;
        max-width: 100%;
        max-height: 100%;
        min-width: 200px;
        min-height: 200px;
        z-index: 15;

        width: var(--modal-container-size);
        background: var(--modal-background-color);
        box-shadow: 0 4px 10px #0000001a;

        .modal-header,
        .modal-footer {
            &:not([class*="flex-"]) {
                flex-direction: column;
            }
        }

        .modal-header,
        .modal-footer,
        .modal-screen {
            display: flex;
            flex-wrap: wrap;
            padding: var(--modal-padding-y) var(--modal-padding-x);

            &.flex-row {
                flex-direction: row;
            }

            &.flex-column {
                flex-direction: column;
            }

            .modal-wrapper.centered & {
                align-items: center;
            }

        }

        .modal-header {
            border-bottom: var(--modal-border-line);
        }

        .modal-footer {
            border-top: var(--modal-border-line);
        }

        .modal-screen {
            flex: 1 1;
            overflow: auto;

            .modal-content {
                width: 100%;
            }
        }

        .modal-buttons {
            position: absolute;
            padding: var(--modal-padding-y) var(--modal-padding-x);

            @media all and (max-width: 575px) {

                .modal-wrapper & {
                    right: 0;
                }

            }
            @media all and (min-width: 576px) {

                .modal-wrapper.is-right & {
                    transform: translateX(-100%);
                    color: var(--theme-white);
                    left: 0;
                }

                .modal-wrapper.is-left & {
                    transform: translateX(100%);
                    color: var(--theme-white);
                    right: 0;
                }

                .modal-wrapper:not(.is-left):not(.is-right) & {
                    right: 0;
                }

            }

        }

        .space-between {
            justify-content: space-between;
            flex: 1 1;
        }

    }


    &:not(.no-stretch) {

        &.is-top .modal-wrap,
        &.is-bottom .modal-wrap {
            width: 100%;
        }

        &.is-left .modal-wrap,
        &.is-right .modal-wrap {
            height: 100%;
        }

    }


    &:not(.is-left):not(.is-right):not(.is-top):not(.is-bottom) {

        .modal-wrap {
            max-width: var(--modal-max-width);
            max-height: var(--modal-max-height);
            border-radius: var(--modal-border-radius);
        }

    }


}
