/* core/static/phoxtail_core/css/account/messages.css

   A message is a popover (surfaces.css): the risen colour and the deepest
   shadow, no border. Its close button is the round one of the modals. This
   sheet only places the messages and slides them in and out. */

.phx-toast-container {
    position: fixed;
    display: flex;
    justify-content: flex-end;
    top: 1rem;
    right: 1rem;
    z-index: 100000;
    padding-left: 0.5rem;
}

.phx-toast-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 28rem;
}

.phx-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem 0.75rem 1.25rem;
    border-radius: 1rem;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: translateX(0);
    color: rgb(var(--color-surface-900));
    font-family: var(--font-ui);
}

.phx-toast--hidden {
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem));
}

.phx-toast__body {
    flex: 1;
    min-width: 0;
}

/* The status in a word, in its tone's text colour (indicators.css). */
.phx-toast__label {
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

.phx-toast--error .phx-toast__label { color: rgb(var(--color-destructive-700)); }
.phx-toast--success .phx-toast__label { color: rgb(var(--color-success-700)); }
.phx-toast--warning .phx-toast__label { color: rgb(var(--color-warning-700)); }
.phx-toast--info .phx-toast__label { color: rgb(var(--color-info-700)); }

.phx-toast__text {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: rgb(var(--color-surface-700));
}

@media (prefers-color-scheme: dark) {
    .phx-toast {
        color: rgb(var(--color-surface-100));
    }

    .phx-toast--error .phx-toast__label { color: rgb(var(--color-destructive-300)); }
    .phx-toast--success .phx-toast__label { color: rgb(var(--color-success-300)); }
    .phx-toast--warning .phx-toast__label { color: rgb(var(--color-warning-300)); }
    .phx-toast--info .phx-toast__label { color: rgb(var(--color-info-300)); }

    .phx-toast__text {
        color: rgb(var(--color-surface-300));
    }
}