:root {
    --unitab-close-size: 38px;
    --unitab-close-icon-size: 20px;
    --unitab-close-color: #0b2852;
    --unitab-close-hover-color: #1d4ed8;
    --unitab-close-hover-bg: rgba(37, 99, 235, 0.10);
    --unitab-close-focus-color: #2563eb;
    --unitab-close-duration: 200ms;
    --unitab-close-rotation: 90deg;
    --unitab-close-active-scale: 0.94;
}

.unitab-modal-close {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    inline-size: var(--unitab-close-size);
    min-inline-size: var(--unitab-close-size);
    block-size: var(--unitab-close-size);
    min-block-size: var(--unitab-close-size);
    flex: 0 0 var(--unitab-close-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--unitab-close-color);
    font: inherit;
    line-height: 0;
    cursor: pointer;
    transition:
        background-color var(--unitab-close-duration) ease,
        color var(--unitab-close-duration) ease;
}

.unitab-modal-close::before {
    content: "";
    inline-size: var(--unitab-close-icon-size);
    block-size: var(--unitab-close-icon-size);
    background: currentColor;
    -webkit-mask: url("/images/icons/close.svg") center / contain no-repeat;
    mask: url("/images/icons/close.svg") center / contain no-repeat;
    transform: rotate(0deg) scale(1);
    transform-origin: center;
    transition: transform var(--unitab-close-duration) ease;
    pointer-events: none;
}

.unitab-modal-close:hover,
.unitab-modal-close:focus-visible {
    background: var(--unitab-close-hover-bg);
    color: var(--unitab-close-hover-color);
}

.unitab-modal-close:hover::before {
    transform: rotate(var(--unitab-close-rotation)) scale(1);
}

.unitab-modal-close:active::before {
    transform: rotate(var(--unitab-close-rotation)) scale(var(--unitab-close-active-scale));
}

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

.unitab-modal-close:disabled,
.unitab-modal-close[aria-disabled="true"] {
    opacity: 0.48;
    cursor: default;
}

.unitab-modal-close--absolute {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    z-index: 2;
}

.unitab-modal-close--inverse {
    --unitab-close-color: #ffffff;
    --unitab-close-hover-color: #ffffff;
    --unitab-close-hover-bg: rgba(255, 255, 255, 0.14);
    --unitab-close-focus-color: #bfdbfe;
}

@media (prefers-reduced-motion: reduce) {
    .unitab-modal-close,
    .unitab-modal-close::before {
        transition: none;
    }

    .unitab-modal-close:hover::before,
    .unitab-modal-close:active::before {
        transform: none;
    }
}