@use '../core/styles/common/tokens' as *;
@use './modal-confirm';
@use './modal-animation';
@use './modal-theme' as *;

.kbq-modal-container {
    box-sizing: border-box;

    position: relative;

    top: var(--kbq-size-5xl);

    border-radius: var(--kbq-modal-size-border-radius);

    width: auto;

    margin: 0 auto;

    list-style: none;

    // DEPRECATED: Unused. Will be removed in next major release.
    /* stylelint-disable */
    &.zoom-enter,
    &.zoom-appear {
        /* stylelint-enable */
        animation-duration: 0.3s;
        // reset scale avoid mousePosition bug
        transform: none;
        opacity: 0;
    }

    &.kbq-modal_small {
        width: var(--kbq-modal-size-small-width);
    }

    &.kbq-modal_medium {
        width: var(--kbq-modal-size-medium-width);
    }

    &.kbq-modal_large {
        width: var(--kbq-modal-size-large-width);
    }

    // todo реализуем когда будем делать 2.0, пока нет возможности отслеживать наличие/отсутствие футера
    //&.kbq-modal_no-footer .kbq-modal-body {
    //    padding-bottom: var(
    //        --kbq-modal-size-content-padding-bottom-without-footer,
    //        map.get($tokens, modal-size-content-padding-bottom-without-footer)
    //    );
    //}

    & .kbq-modal-close {
        position: absolute;

        top: var(--kbq-size-l);
        right: var(--kbq-size-l);
    }
}

.kbq-modal-wrap {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    overflow: auto;
    -webkit-overflow-scrolling: touch;

    outline: 0;
}

.kbq-modal-content {
    position: relative;

    border-radius: var(--kbq-modal-size-border-radius);

    background-clip: padding-box;
}

.kbq-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-right)
        var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-left);

    & + .kbq-modal-body {
        padding-top: var(--kbq-modal-size-content-padding-top);
    }
}

.kbq-modal-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    padding-top: var(--kbq-size-3xs);
    padding-bottom: var(--kbq-size-3xs);
}

.kbq-modal-body {
    display: block;
    overflow-y: auto;

    max-height: calc(100vh - 260px);

    padding: var(--kbq-modal-size-content-padding-top-without-header) var(--kbq-modal-size-content-padding-horizontal)
        var(--kbq-modal-size-content-padding-bottom) var(--kbq-modal-size-content-padding-horizontal);

    overflow-wrap: break-word;

    & > * {
        position: relative;
    }
}

.kbq-modal-footer,
.kbq-confirm-footer {
    display: flex;
    align-items: center;

    padding: var(--kbq-modal-size-footer-padding-vertical) var(--kbq-modal-size-footer-padding-horizontal);

    gap: var(--kbq-modal-size-footer-content-gap-horizontal);
}

.kbq-modal-mask {
    position: fixed;

    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

    height: 100%;

    &.kbq-modal-mask-hidden {
        display: none;
    }
}

.kbq-modal-open {
    overflow: hidden;
}

@include kbq-modal-theme();
@include kbq-modal-typography();