@layer components {
    .message {
        position: relative;
        padding: var(--pad-sm) var(--pad-md);
        border: var(--border-thickness-base) solid var(--color-border);
        border-radius: var(--radius-sm);
        color: var(--color-foreground-secondary);
        background-color: var(--color-background-surface);
        font-size: var(--font-size-base);
        line-height: var(--line-height-base);

        transition: opacity 0.5s ease-out, max-height 0.5s ease-out, padding 0.5s ease-out, margin 0.5s ease-out;
        opacity: 1;
        max-height: 500px;
        overflow: hidden;
    }

    .message.fade-out {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .message__content {
        padding-inline-end: var(--pad-lg);
    }

    .message__close {
        all: unset;
        cursor: pointer;
        font-weight: bold;
        line-height: var(--line-height-base);
        padding: 0;

        position: absolute;
        top: var(--pad-sm);
        right: var(--pad-sm);

        color: inherit;
        z-index: var(--z-index-dropdown);

        &:hover {
            opacity: 0.7;
        }
    }

    .message--info {
        border-color: var(--color-feedback-info);
        color: var(--color-feedback-info);
        background-color: color-mix(in srgb, var(--color-feedback-info) 10%, transparent);
    }

    .message--success {
        border-color: var(--color-feedback-success);
        color: var(--color-feedback-success);
        background-color: color-mix(in srgb, var(--color-feedback-success) 10%, transparent);
    }

    .message--warning {
        border-color: var(--color-feedback-warning);
        color: var(--color-foreground);
        background-color: color-mix(in srgb, var(--color-feedback-warning) 25%, transparent);
    }

    .message--danger {
        border-color: var(--color-feedback-danger);
        color: var(--color-feedback-danger);
        background-color: color-mix(in srgb, var(--color-feedback-danger) 10%, transparent);
    }
}