@use 'sass:math';
@import './var.scss';

:root {
    --modal-width: #{$modal-width};
    --modal-small-screen-width: #{$modal-small-screen-width};
    --modal-font-size: #{$modal-font-size};
    --modal-transition: #{$modal-transition};
    --modal-border-radius: #{$modal-border-radius};
    --modal-bg: #{$modal-bg};
    --modal-header-font-weight: #{$modal-header-font-weight};
    --modal-header-line-height: #{$modal-header-line-height};
    --modal-header-padding-top: #{$modal-header-padding-top};
    --modal-header-padding-bottom: #{$modal-header-padding-bottom};
    --modal-header-isolated-padding: #{$modal-header-isolated-padding};
    --modal-message-padding: #{$modal-message-padding};
    --modal-message-font-size: #{$modal-message-font-size};
    --modal-message-line-height: #{$modal-message-line-height};
    --modal-message-max-height: #{$modal-message-max-height};
    --modal-has-title-message-text-color: #{$modal-has-title-message-text-color};
    --modal-has-title-message-padding-top: #{$modal-has-title-message-padding-top};
    --modal-button-height: #{$modal-button-height};
    --modal-confirm-button-text-color: #{$modal-confirm-button-text-color};
}

.jing-modal {
    top: 45%;
    left: 50%;
    width: var(--modal-width);
    overflow: hidden;
    font-size: var(--modal-font-size);
    background-color: var(--modal-bg);
    border-radius: var(--modal-border-radius);
    backface-visibility: hidden;
    transition: var(--modal-transition);
    transition-property: transform, opacity;

    @media (max-width: 321px) {
        width: var(--modal-small-screen-width);
    }

    &__header {
        padding-top: var(--modal-header-padding-top);
        padding-bottom: var(--modal-header-padding-bottom);
        font-weight: var(--modal-header-font-weight);
        line-height: var(--modal-header-line-height);
        text-align: center;

        &-isolated {
            padding: var(--modal-header-isolated-padding);
        }
    }

    &__content {
        &-isolated {
            display: flex;
            align-items: center;
            min-height: 104px;
        }
    }

    &__message {
        flex: 1;
        max-height: var(--modal-message-max-height);
        padding: 26px var(--modal-message-padding);
        overflow-y: auto;
        font-size: var(--modal-message-font-size);
        line-height: var(--modal-message-line-height);
        white-space: pre-wrap;
        text-align: center;
        word-wrap: pre-wrap;
        word-wrap: break-word;
        text-align: center;
        --webkit-overflow-scrolling: touch;

        &-has-title {
            padding-top: var(--modal-has-title-message-padding-top);
            color: var(--modal-has-title-message-text-color);
        }

        &-left {
            text-align: left;
        }

        &-right {
            text-align: right;
        }
    }

    &__footer {
        display: flex;
        overflow: hidden;
        user-select: none;
    }

    &__confirm,
    &__cancel {
        flex: 1;
        height: var(--modal-button-height);
        margin: 0;
        border: 0;
    }

    &__confirm {
        &,
        &:active {
            color: var(--modal-confirm-button-text-color);
        }
    }
}