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

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

.kbq-toast {
    display: flex;
    box-sizing: border-box;

    width: var(--kbq-toast-size-container-width);

    height: auto;

    border-radius: var(--kbq-toast-size-container-border-radius);

    padding-left: var(--kbq-toast-size-container-padding-left);
    padding-right: var(--kbq-toast-size-container-padding-right);
}

.kbq-toast__icon-container {
    flex-shrink: 0;
    width: var(--kbq-toast-size-icon-width);
    max-width: var(--kbq-toast-size-icon-width);
    height: var(--kbq-toast-size-icon-height);
    max-height: var(--kbq-toast-size-icon-height);

    border-radius: var(--kbq-toast-size-container-border-radius);

    margin-right: var(--kbq-toast-size-icon-margin-right);

    $padding-top: var(--kbq-toast-size-content-padding-top);
    $toast-font-title-line-height: var(--kbq-typography-text-normal-line-height);
    $toast-size-icon-height: var(--kbq-toast-size-icon-height);
    padding-top: calc($padding-top + (($toast-font-title-line-height - $toast-size-icon-height) / 2));
}

.kbq-toast__container {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding-top: var(--kbq-toast-size-content-padding-top);
    padding-right: var(--kbq-size-s);
    padding-bottom: var(--kbq-toast-size-content-padding-bottom);

    overflow: hidden;
}

.kbq-toast__title {
    overflow: hidden;
    text-overflow: ellipsis;

    & > p {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &.kbq-toast__title_only-text {
        white-space: pre-wrap;
    }
}

.kbq-toast__title_with-content {
    padding-bottom: var(--kbq-toast-size-caption-padding-bottom);
}

.kbq-toast__text {
    display: flex;
    flex: 1;
    align-items: center;

    &.kbq-toast__text_only-text {
        white-space: pre-wrap;
    }
}

.kbq-toast__content {
    display: flex;
    flex-direction: column;

    &.kbq-toast__content_only-text {
        white-space: pre-wrap;
    }
}

.kbq-toast__actions {
    display: flex;

    padding-top: var(--kbq-toast-size-button-stack-padding-top);

    gap: var(--kbq-toast-size-button-stack-content-gap-horizontal);
}

.kbq-toast__close-button {
    margin-top: kbq-difference-series-css-variables(
        [toast-size-content-padding-top,
        calc(
                kbq-difference-series-css-variables(
                        [kbq-sum-series-css-variables(
                            [calc(var(--kbq-icon-button-size-small-vertical-padding) * 2),
                            16px]
                        ),
                        typography-text-normal-line-height]
                    ) /
                    2
            )]
    );
    margin-right: var(--kbq-toast-size-close-button-margin-right);

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

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