@import '../utils.less';

[tuiToast]:where(*&) {
    .transition(transform);

    display: grid;
    grid-auto-flow: column;
    grid-row: 1 / span 2;
    grid-template-rows: 1fr auto;
    box-sizing: border-box;
    gap: 0 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-typography-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) {
        max-inline-size: 50%;
        margin: 0 -0.25rem;
    }

    > * {
        grid-row: 1;
    }

    > [tuiButtonX],
    > [tuiIconButton],
    > :first-child:not(tui-shrink-wrap, [tuiButton]) {
        grid-row: span 2;
    }

    > tui-icon:not([tuiBadge]),
    &::after,
    &::before {
        min-inline-size: 1em;
        margin: 0 -0.25rem;
        grid-row: span 2;
    }

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

    > [tuiAvatar] {
        margin-inline-end: 0;
    }

    > tui-loader,
    > [tuiButton] {
        inline-size: fit-content;
        min-inline-size: fit-content;
    }

    &._rearranged > [tuiButton] {
        grid-row: 2;
        margin: 0.75rem 0 0;
    }
}