@layer components {

    .u-confirm-modal {
        position: fixed;
        inset: 0;
        z-index: 30000;
        display: grid;
        place-items: center;
        padding: var(--space-20);
    }

    .u-confirm-modal[hidden] {
        display: none;
    }

    .u-confirm-modal__backdrop {
        position: absolute;
        inset: 0;
        background: var(--color-bg-overlay);
        backdrop-filter: blur(0.25rem);
    }

    .u-confirm-modal__dialog {
        position: relative;
        z-index: 1;
        display: grid;
        gap: var(--space-20);
        width: min(28rem, 100%);
        padding: var(--space-24);
        border: var(--border-width-hairline) solid var(--color-border);
        border-radius: var(--radius-corner);
        background: var(--color-bg-surface, var(--color-white));
        color: var(--color-text, var(--color-text-header-control));
        box-shadow: 0 1.5rem 4rem var(--color-shadow-modal);
    }

    .u-confirm-modal__close {
        position: absolute;
        top: var(--space-12);
        right: var(--space-12);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--space-36);
        height: var(--space-36);
        border: var(--border-width-hairline) solid var(--color-border);
        border-radius: var(--radius-round);
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .u-confirm-modal__close:hover,
    .u-confirm-modal__close:focus-visible {
        outline: none;
        background: var(--color-bg-surface-alt);
    }

    .u-confirm-modal__close-icon {
        position: static;
        display: block;
        width: var(--space-14);
        height: var(--space-14);
        overflow: visible;
        fill: currentColor;
    }

    .u-confirm-modal__body {
        display: grid;
        gap: var(--space-8);
        padding-right: var(--space-36);
    }

    .u-confirm-modal__eyebrow {
        color: var(--color-text-muted);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-extrabold);
        text-transform: uppercase;
    }

    .u-confirm-modal__title {
        margin: 0;
        font-size: var(--text-lg);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-title);
    }

    .u-confirm-modal__message {
        margin: 0;
        color: var(--color-text-muted);
        line-height: var(--leading-body);
    }

    .u-confirm-modal__message strong {
        color: var(--color-text);
    }

    .u-confirm-modal__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--space-10);
    }

    .u-confirm-modal__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-8);
        min-width: 8.5rem;
        min-height: 2.625rem;
        padding: 0.55rem 0.85rem;
        border-radius: var(--radius-corner);
        box-shadow: none;
        font: inherit;
        font-weight: var(--font-weight-bold, 700);
        line-height: 1;
        white-space: nowrap;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

    .u-confirm-modal__button:hover,
    .u-confirm-modal__button:focus-visible {
        transform: translateY(-0.0625rem);
    }

    .u-confirm-modal__button-icon {
        position: static;
        display: none;
        flex: 0 0 auto;
        width: var(--space-16);
        height: var(--space-16);
        overflow: visible;
        fill: currentColor;
        pointer-events: none;
    }

    .u-confirm-modal[data-variant="danger"] .u-confirm-modal__button--confirm .u-confirm-modal__button-icon {
        display: block;
    }

    .u-confirm-modal .accent-button-200 {
        border-color: var(--color-border);
        color: var(--color-text-strong);
        background: var(--color-bg-surface-alt);
        box-shadow: none;
    }

    .u-confirm-modal .accent-button-200:hover,
    .u-confirm-modal .accent-button-200:focus-visible {
        border-color: var(--color-border);
        background: var(--color-bg-surface-alt);
        box-shadow: none;
    }

    .u-confirm-modal .primary-button-100 {
        border-color: var(--color-brand-primary);
        color: var(--color-text-strong);
        background: var(--color-brand-primary);
        box-shadow: none;
    }

    .u-confirm-modal[data-variant="danger"] .u-confirm-modal__button--confirm {
        border-color: var(--color-danger);
        background: var(--color-danger);
        color: var(--color-white);
    }

    .u-confirm-modal[data-variant="danger"] .u-confirm-modal__button--confirm:hover,
    .u-confirm-modal[data-variant="danger"] .u-confirm-modal__button--confirm:focus-visible {
        border-color: var(--color-danger-static-hover);
        background: var(--color-danger-static-hover);
        box-shadow: none;
    }

    :root[data-theme="dark"] .u-confirm-modal__eyebrow,
    :root[data-theme="dark"] .u-confirm-modal__title,
    :root[data-theme="dark"] .u-confirm-modal__message {
        color: var(--color-white);
    }

    :root[data-theme="dark"] .u-confirm-modal .primary-button-100:not(.u-confirm-modal__button--confirm) {
        border-color: var(--color-brand-secondary);
        background: var(--color-brand-secondary);
        color: var(--color-white);
    }
}