@use '../core/styles/common/tokens' as *;

@mixin kbq-modal-theme() {
    .kbq-modal-container {
        background: var(--kbq-modal-container-background);
        box-shadow: var(--kbq-modal-container-shadow);

        .kbq-modal-header {
            & .kbq-modal-title {
                color: var(--kbq-modal-header-text-color);
            }

            & .kbq-modal-close {
                color: var(--kbq-modal-close-button-color);
            }
        }

        .kbq-modal-content {
            color: var(--kbq-modal-content-text-color);
        }

        .kbq-modal-header.kbq-modal-body_top-overflow {
            box-shadow: var(--kbq-shadow-overflow-normal-bottom);
        }

        .kbq-modal-footer.kbq-modal-body_bottom-overflow {
            box-shadow: var(--kbq-shadow-overflow-normal-top);
        }
    }

    .kbq-modal-mask {
        background-color: var(--kbq-modal-overlay-background);
    }
}

@mixin kbq-modal-typography() {
    .kbq-modal-title {
        @include kbq-typography-level-to-styles-css-variables(typography, title);
    }

    .kbq-modal-body {
        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
    }
}