@taiga-ui/kit/styles/components/toast.less

Taiga UI Angular main components kit

@import '@taiga-ui/core/styles/taiga-ui-local.less';

[tuiToast] {
    .transition(transform);

    display: flex;
    grid-row: 1 / span 2;
    box-sizing: border-box;
    gap: 0.75rem;
    color: var(--tui-text-primary);
    background: var(--tui-background-elevation-3);
    min-block-size: 3.5rem;
    border-radius: 1rem;
    padding: 0.75rem 1rem;
    box-shadow: var(--tui-shadow-medium);
    align-items: center;
    justify-content: center;
    inline-size: max-content;
    font: var(--tui-font-text-ui-s);
    max-inline-size: ~'min(calc(100vw - 2rem), 25rem)';
    border: inherit;
    text-decoration: none;
    white-space: pre-line;
    text-align: start;
    overflow: hidden;

    .interactive({
        cursor: pointer;
    });

    > *:not(tui-shrink-wrap),
    &::after,
    &::before {
        max-inline-size: 50%;
        margin: 0 -0.25rem;
    }

    &::after {
        font-size: 1rem;
        color: var(--tui-text-tertiary);
    }

    // TODO: replace tui-avatar to tuiAvatar in v5
    tui-avatar {
        margin-inline-end: 0;
    }
}