/* Keep close controls consistent across drawers, dialogs and notifications.
   Layered important rules take precedence over older panel-specific overrides. */
@layer close-controls {
    :is(.ui-close-button, .editor-close-button) {
        box-sizing: border-box !important;
        display: inline-grid;
        place-items: center !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 0 !important;
        gap: 0 !important;
        border: 1px solid #dce3ec !important;
        border-radius: 9px !important;
        background: #fff !important;
        color: #334155 !important;
        box-shadow: 0 2px 7px rgba(15, 23, 42, .035) !important;
        line-height: 1 !important;
        transform: var(--close-button-transform, none) !important;
        cursor: pointer;
        transition: border-color .16s ease, background .16s ease, color .16s ease !important;
    }

    :is(.ui-close-button, .editor-close-button):is(:hover, :active) {
        border-color: #dce3ec !important;
        background: #f5f5f5 !important;
        color: #000 !important;
    }

    :is(.ui-close-button, .editor-close-button):focus-visible {
        outline: 2px solid #abc0f4 !important;
        outline-offset: 2px !important;
    }

    :is(.ui-close-button, .editor-close-button) svg {
        display: block !important;
        flex: 0 0 16px !important;
        width: 16px !important;
        min-width: 16px !important;
        max-width: 16px !important;
        height: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
        pointer-events: none;
    }

    /* Preserve the same visible stroke for existing 24-unit close icons. */
    :is(.ui-close-button, .editor-close-button) svg[viewBox="0 0 24 24"] {
        stroke-width: 2.16 !important;
    }

    :is(.ui-close-button, .editor-close-button)[hidden] {
        display: none !important;
    }

    .ui-close-button:is(.topbar-close, .catalog-search-close) {
        --close-button-transform: translateY(-50%);
    }

    @media (prefers-reduced-motion: reduce) {
        :is(.ui-close-button, .editor-close-button) {
            transition: none !important;
        }
    }
}