/* moliri-confirm — styles for the confirmation dialog created by moliri-confirm.js.
   Colours use CSS variables with fallbacks so a tenant theme can override them. */

.moliri-confirm {
    padding: 0;
    border: none;
    border-radius: var(--borderRadiusContainer, 12px);
    background-color: var(--mainBgColor, #ffffff);
    color: var(--textDataTypeColor, #1a1a1a);
    max-inline-size: min(28rem, calc(100vw - 2rem));
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
}

.moliri-confirm::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.moliri-confirm__box {
    padding: 1.75rem;
    font-family: var(--fontFamily, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

.moliri-confirm__title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    line-height: 1.3;
    color: inherit;
}

.moliri-confirm__message {
    margin: 0 0 1.5rem;
    line-height: 1.5;
    color: inherit;
}

.moliri-confirm__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

.moliri-confirm__button {
    /* 2.75rem clears the 44px target size recommended by WCAG 2.5.5, rather than only the
       24px minimum of 2.5.8 — these are the buttons that commit or cancel a permanent action. */
    min-block-size: 2.75rem;
    padding-inline: 1.25rem;
    border-radius: var(--borderRadiusButton, 999px);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease-in-out, color 120ms ease-in-out;
}

.moliri-confirm__button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.moliri-confirm__button--cancel {
    background-color: transparent;
    border-color: currentColor;
    color: var(--primaryColor, #205493);
}

.moliri-confirm__button--cancel:hover {
    background-color: var(--primaryColor, #205493);
    color: var(--white-color, #ffffff);
}

.moliri-confirm__button--confirm {
    background-color: var(--primaryColor, #205493);
    color: var(--white-color, #ffffff);
}

/* #b71c1c on white is 6.5:1, and white on #b71c1c likewise — comfortably past the 4.5:1
   that WCAG 1.4.3 asks of this text. */
.moliri-confirm__button--destructive {
    background-color: var(--toastItemErrorBgColorBase, #b71c1c);
    color: var(--white-color, #ffffff);
}

.moliri-confirm__button--destructive:hover {
    background-color: var(--toastItemErrorTimerColorBase, #7f0000);
}

@media (prefers-reduced-motion: reduce) {
    .moliri-confirm__button {
        transition: none;
    }
}