@import './var.scss';

:root {
    --toast-max-width: #{$toast-max-width};
    --toast-font-size: #{$toast-font-size};
    --toast-text-color: #{$toast-text-color};
    --toast-loading-icon-color: #{$toast-loading-icon-color};
    --toast-line-height: #{$toast-line-height};
    --toast-border-radius: #{$toast-border-radius};
    --toast-background-color: #{$toast-background-color};
    --toast-text-min-width: #{$toast-text-min-width};
    --toast-text-padding: #{$toast-text-padding};
    --toast-default-padding: #{$toast-default-padding};
    --toast-default-width: #{$toast-default-width};
    --toast-default-min-height: #{$toast-default-min-height};
}

.jing-toast {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    width: var(--toast-default-width);
    max-width: var(--toast-max-width);
    min-height: var(--toast-default-min-height);
    padding: var(--toast-default-padding);
    color: var(--toast-text-color);
    font-size: var(--toast-font-size);
    line-height: var(--toast-line-height);
    white-space: pre-wrap;
    word-break: break-all;
    text-align: center;
    background-color: var(--toast-background-color);
    border-radius: var(--toast-border-radius);
    transition: all var(--animation-duration-fast);

    &--unclickable {
        overflow: hidden;
        cursor: not-allowed;

        * {
            pointer-events: none;
        }
    }

    &--info,
    &--html {
        width: fit-content;
        min-height: var(--toast-text-min-width);
        min-height: 0;
        padding: var(--toast-text-padding);

        .jing-toast__info {
            margin-top: 0;
        }
    }

    &__icon {
        width: 32px;
        height: 32px;
    }

    &__loading {
        padding: var(--paddding-base);
        color: var(--toast-loading-icon-color);
    }

    &__info {
        margin-top: var(--padding-xs);
    }
}