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

@use './alert-theme' as *;

.kbq-alert {
    display: flex;

    box-sizing: border-box;

    & .kbq-alert__content_title {
        margin-bottom: var(--kbq-size-xxs);
    }
}

.kbq-alert__content {
    display: flex;
    flex-direction: column;
    flex: 1;

    justify-content: center;
}

.kbq-alert.kbq-alert_normal {
    border-radius: var(--kbq-alert-size-normal-container-border-radius);

    padding: var(--kbq-alert-size-normal-container-padding-top) var(--kbq-alert-size-normal-container-padding-right)
        var(--kbq-alert-size-normal-container-padding-bottom) var(--kbq-alert-size-normal-container-padding-left);

    & .kbq-alert__icon {
        margin: var(--kbq-alert-size-normal-no-title-icon-margin-top) var(--kbq-alert-size-normal-icon-margin-right)
            var(--kbq-alert-size-normal-icon-margin-bottom) var(--kbq-alert-size-normal-icon-margin-left);

        &.kbq-alert__icon_title {
            margin-top: var(--kbq-alert-size-normal-icon-margin-top);

            padding-top: var(--kbq-alert-size-normal-no-title-icon-padding-top);
        }

        display: inline-flex;
        align-items: flex-start;
    }

    & .kbq-alert__content {
        padding: var(--kbq-alert-size-normal-content-padding-top) var(--kbq-alert-size-normal-content-padding-right)
            var(--kbq-alert-size-normal-content-padding-bottom) var(--kbq-alert-size-normal-content-padding-left);
    }

    & .kbq-alert__title {
        margin-bottom: var(--kbq-alert-size-normal-title-margin-bottom);
    }

    & .kbq-alert__button-stack {
        padding-top: var(--kbq-alert-size-normal-button-stack-padding-top);
        padding-bottom: var(--kbq-alert-size-normal-button-stack-padding-bottom);
    }

    & .kbq-alert__button-stack_has-button {
        padding-top: 12px;
    }

    & .kbq-alert__close-button {
        margin-top: var(--kbq-alert-size-normal-close-button-margin-top);
        margin-left: var(--kbq-alert-size-normal-close-button-margin-left);

        .kbq-icon-button {
            --kbq-icon-button-size-normal-horizontal-padding: 4px;
            --kbq-icon-button-size-normal-vertical-padding: 4px;
        }
    }
}

.kbq-alert.kbq-alert_compact {
    border-radius: var(--kbq-alert-size-compact-container-border-radius);

    padding: var(--kbq-alert-size-compact-container-padding-top) var(--kbq-alert-size-compact-container-padding-right)
        var(--kbq-alert-size-compact-container-padding-bottom) var(--kbq-alert-size-compact-container-padding-left);

    & .kbq-alert__icon {
        margin-top: var(--kbq-alert-size-compact-no-title-icon-margin-top);
        margin-right: var(--kbq-alert-size-compact-icon-margin-right);

        padding-top: var(--kbq-alert-size-compact-no-title-icon-padding-top);

        &.kbq-alert__icon_title {
            margin-top: var(--kbq-alert-size-compact-icon-margin-top);

            padding-top: var(--kbq-alert-size-compact-icon-padding-top);
        }

        display: inline-flex;
        align-items: flex-start;
    }

    & .kbq-alert__content {
        padding: var(--kbq-alert-size-compact-content-padding-top) var(--kbq-alert-size-compact-content-padding-right)
            var(--kbq-alert-size-compact-content-padding-bottom) var(--kbq-alert-size-compact-content-padding-left);
    }

    & .kbq-alert__title {
        margin-bottom: var(--kbq-alert-size-compact-title-margin-bottom);
    }

    & .kbq-alert__button-stack {
        padding-top: var(--kbq-alert-size-compact-button-stack-padding-top);
        padding-bottom: var(--kbq-alert-size-compact-button-stack-padding-bottom);
    }

    & .kbq-alert__button-stack_has-button {
        padding-top: 12px;
    }

    & .kbq-alert__close-button {
        margin-top: var(--kbq-alert-size-compact-close-button-margin-top);
        margin-left: var(--kbq-alert-size-compact-close-button-margin-left);

        .kbq-icon-button {
            --kbq-icon-button-size-normal-horizontal-padding: 4px;
            --kbq-icon-button-size-normal-vertical-padding: 4px;
        }
    }
}

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