/*
 * The round close button in the top corner of a modal or prompt.
 *
 * This file holds the button's appearance. The stylesheet of the
 * surrounding modal or prompt positions the button. The custom
 * properties are declared on the button, not on :root. A page that
 * loads no other shared stylesheet therefore renders the same button.
 * Each fallback color equals the value content_base.css declares for
 * the custom property.
 */

.modal-close-btn {
    --modal-close-bg: var(--ck-border, #e2e8f0);
    --modal-close-color: #64748b;
    --modal-close-hover-bg: var(--ck-bg-hover, #cbd5e1);
    --modal-close-hover-color: #0a1334;
    --_size: 2rem;

    width: var(--_size);
    height: var(--_size);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;
    padding: 0;

    background: var(--modal-close-bg);
    color: var(--modal-close-color);
    font-size: calc(var(--_size) * 1.15);
    line-height: 1;
    cursor: pointer;

    transition: background-color 0.2s, color 0.2s, transform 0.15s;
}

[data-theme="dark"] .modal-close-btn {
    --modal-close-bg: #334155;
    --modal-close-color: #94a3b8;
    --modal-close-hover-bg: var(--ck-bg-hover, #475569);
    --modal-close-hover-color: #f8fafc;
}

.modal-close-btn:hover {
    background: var(--modal-close-hover-bg);
    color: var(--modal-close-hover-color);
}

.modal-close-btn:active {
    transform: scale(0.92);
}

.modal-close-btn:focus-visible {
    outline: 2px solid var(--modal-close-hover-color);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .modal-close-btn {
        transition: background-color 0.2s, color 0.2s;
    }

    .modal-close-btn:active {
        transform: none;
    }
}