:root {
    --app-modal-title-close-size: 36px;
    --app-modal-title-close-mark-width: 16px;
    --app-modal-title-close-bg: #ef4444;
    --app-modal-title-close-bg-hover: #dc2626;
    --app-modal-title-close-border: rgba(254, 202, 202, 0.88);
    --app-modal-title-close-color: #ffffff;
    --app-modal-title-close-shadow: 0 8px 18px rgba(220, 38, 38, 0.22);
    --app-modal-title-close-focus-ring: rgba(239, 68, 68, 0.28);
}

.app-modal-title-close {
    box-sizing: border-box;
    display: inline-flex;
    width: var(--app-modal-title-close-size);
    min-width: var(--app-modal-title-close-size);
    max-width: var(--app-modal-title-close-size);
    height: var(--app-modal-title-close-size);
    min-height: var(--app-modal-title-close-size);
    max-height: var(--app-modal-title-close-size);
    flex: 0 0 var(--app-modal-title-close-size);
    align-self: center;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--app-modal-title-close-border);
    border-radius: 999px;
    background-color: var(--app-modal-title-close-bg);
    background-image:
        linear-gradient(45deg, transparent calc(50% - 1px), var(--app-modal-title-close-color) calc(50% - 1px), var(--app-modal-title-close-color) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(-45deg, transparent calc(50% - 1px), var(--app-modal-title-close-color) calc(50% - 1px), var(--app-modal-title-close-color) calc(50% + 1px), transparent calc(50% + 1px));
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--app-modal-title-close-mark-width) var(--app-modal-title-close-mark-width);
    color: transparent;
    box-shadow: var(--app-modal-title-close-shadow);
    font-size: 0;
    font-weight: 400;
    line-height: 0;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

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

.app-modal-title-close:focus-visible {
    background-color: var(--app-modal-title-close-bg-hover);
    outline: 3px solid var(--app-modal-title-close-focus-ring);
    outline-offset: 2px;
}

.app-modal-title-close > i,
.app-modal-title-close > svg {
    display: none;
}

@media (max-width: 640px) {
    :root {
        --app-modal-title-close-size: 32px;
        --app-modal-title-close-mark-width: 14px;
    }
}