@layer components {
    .warning-banner {
            align-items: flex-start;
            background: #fef3c7;
            border: 1px solid #f59e0b;
            color: #854d0e;
            display: flex;
            gap: 0.75rem;
            margin: 0.25rem auto 0;
            max-width: min(72rem, 100%);
            padding: 1rem var(--dashboard-section-padding-x);
            width: 100%;
        }

    .warning-banner__icon {
            align-items: center;
            background: #f59e0b;
            color: #ffffff;
            display: inline-flex;
            flex: 0 0 auto;
            height: 2.25rem;
            justify-content: center;
            width: 2.25rem;
        }

    .warning-banner__icon i,
        .warning-banner__icon svg {
            height: 1.375rem;
            width: 1.375rem;
        }

    .warning-banner__message {
            color: #854d0e;
            flex: 1 1 auto;
            font-size: 0.9375rem;
            line-height: 1.5;
            min-width: 0;
        }

    .warning-banner__dismiss {
            align-items: center;
            align-self: center;
            border-radius: 0;
            color: #854d0e;
            display: inline-flex;
            flex: 0 0 auto;
            flex-shrink: 0;
            height: 2rem;
            justify-content: center;
            margin-left: auto;
            width: 2rem;
        }

    .warning-banner__dismiss:hover {
            background: rgb(245 158 11 / 0.16);
        }

    .warning-banner__dismiss i,
        .warning-banner__dismiss svg {
            height: 1.25rem;
            width: 1.25rem;
        }
}