@layer components {
    .flash-message__link {
            color: var(--dashboard-color-brand);
            font-weight: 650;
            text-decoration: underline;
        }

    .flash-message__link:hover {
            color: var(--dashboard-color-brand-hover);
        }

    .flash-message__inline-form {
            display: inline;
        }

    .flash-message {
            --flash-message-dismiss-hover: rgb(34 197 94 / 0.16);
            align-items: flex-start;
            background: #dcfce7;
            border: 1px solid #22c55e;
            border-radius: 0;
            box-shadow: none;
            color: var(--dashboard-color-text);
            display: flex;
            gap: 1rem;
            max-width: min(72rem, 100%);
            padding: 1rem 1.25rem;
            pointer-events: auto;
            width: 100%;
        }

    .flash-message--warning {
            --flash-message-dismiss-hover: rgb(234 179 8 / 0.16);
            background: #fefce8;
            border-color: #eab308;
        }

    .flash-message--error {
            --flash-message-dismiss-hover: rgb(239 68 68 / 0.16);
            background: #fee2e2;
            border-color: #ef4444;
        }

    .flash-message__icon {
            align-items: center;
            background: #22c55e;
            border-radius: 0;
            color: #ffffff;
            display: inline-flex;
            flex: 0 0 auto;
            height: 3rem;
            justify-content: center;
            width: 3rem;
        }

    .flash-message--warning .flash-message__icon {
            background: #eab308;
            color: #ffffff;
        }

    .flash-message--error .flash-message__icon {
            background: #ef4444;
            color: #ffffff;
        }

    .flash-message__icon i,
        .flash-message__icon svg {
            height: 1.75rem;
            width: 1.75rem;
        }

    .flash-message__content {
            color: var(--dashboard-color-text);
            font-size: 1rem;
            font-weight: 650;
            line-height: 1.4;
            min-width: 0;
        }

    .flash-message__secondary {
            font-weight: 400;
        }

    .flash-message__content form {
            display: inline;
        }

    .flash-message__content button,
        .flash-message__content a {
            color: var(--dashboard-color-brand);
            font-weight: 650;
            text-decoration: underline;
        }

    .flash-message__dismiss {
            align-items: center;
            align-self: center;
            border-radius: 0;
            color: var(--dashboard-color-text);
            display: inline-flex;
            flex: 0 0 auto;
            height: 2rem;
            justify-content: center;
            margin-left: auto;
            width: 2rem;
        }

    .flash-message__dismiss:hover {
            background: var(--flash-message-dismiss-hover);
            color: var(--dashboard-color-text);
        }

    .flash-message__dismiss i,
        .flash-message__dismiss svg {
            height: 1.25rem;
            width: 1.25rem;
        }
}