.notice {
    background-color: var(--notice-bg, black);
    color: var(--notice-color, currentColor);
}

.notice__icon {
    color: var(--notice-icon, currentColor);
}

.notice:is([data-notice-level="base"]) {
    --notice-bg: var(--notice-base-bg, navy);

    .notice__icon {
        --notice-icon: var(--notice-base-icon, navy);
    }
}

.notice:is([data-notice-level="moderate"]) {
    --notice-bg: var(--notice-moderate-bg, blue);

    .notice__icon {
        --notice-icon: var(--notice-moderate-icon, blue);
    }
}

.notice:is([data-notice-level="critical"]) {
    --notice-bg: var(--notice-critical-bg, orange);

    .notice__icon {
        --notice-icon: var(--notice-critical-icon, orange);
    }
}

.notice:is([data-notice-level="highly-critical"]) {
    --notice-bg: var(--notice-highly-critical-bg, red);

    .notice__icon {
        --notice-icon: var(--notice-highly-critical-icon, red);
    }
}

.notice:is([aria-hidden]) {
    display: none;
}

.notice__inner {
    --icon-size: 36px;

    display: var(--notice-content-display, flex);
    gap: var(--notice-content-gap, 1rem);
    align-items: center;
}

.notice__dismiss {
    margin-inline-start: auto;
    align-self: flex-start;
    cursor: pointer;
}
