/*
 * The drawers' close button (✕), the same on every page: the round button of the UX2 drawer (assets/ux2/drawer.css,
 * .ux2-drawer-x, as on New job). Loaded on every UX2 page (engine/ux2.php), so the drawers that still have their own
 * panel get it without markup changes:
 *   .be-panel   add / edit person, enroll participants, session attendance, curriculum module
 *   .bs-panel   batch schedule: edit session
 *   .qi-ids     question bank import: look up IDs
 *   .ti-panel   Talent Intelligence: a person (a drawer below 1200px)
 *   .dk-src     Diskover: the source (a drawer at 1100px and below)
 * Only the button in the drawer's header changes: the same classes elsewhere (row actions, toolbars) stay as they are.
 */
.ux2-drawer-x,
.be-head .be-iconbtn,
.bs-panel-head .bs-iconbtn[data-bs="close"],
.qi-ids-head .qi-iconbtn[data-qi="ids-close"],
.ti-panel-head .ux2-icon-btn#tiPanelClose,
.dk-src-head .ux2-icon-btn[data-close-src] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 13px;
    color: var(--ux2d-muted, #5e6278);
    background: #fff;
    border: 1px solid var(--ux2d-line, #e4e7ec);
    border-radius: 50%;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.ux2-drawer-x:hover,
.ux2-drawer-x:focus-visible,
.be-head .be-iconbtn:hover,
.be-head .be-iconbtn:focus-visible,
.bs-panel-head .bs-iconbtn[data-bs="close"]:hover,
.bs-panel-head .bs-iconbtn[data-bs="close"]:focus-visible,
.qi-ids-head .qi-iconbtn[data-qi="ids-close"]:hover,
.qi-ids-head .qi-iconbtn[data-qi="ids-close"]:focus-visible,
.ti-panel-head .ux2-icon-btn#tiPanelClose:hover,
.ti-panel-head .ux2-icon-btn#tiPanelClose:focus-visible,
.dk-src-head .ux2-icon-btn[data-close-src]:hover,
.dk-src-head .ux2-icon-btn[data-close-src]:focus-visible {
    color: #c62828;
    background: #fdecef;
    border-color: #f1b8c0;
}

.be-head .be-iconbtn i,
.bs-panel-head .bs-iconbtn[data-bs="close"] i,
.qi-ids-head .qi-iconbtn[data-qi="ids-close"] i,
.ti-panel-head .ux2-icon-btn#tiPanelClose i,
.dk-src-head .ux2-icon-btn[data-close-src] i {
    font-size: inherit;
    color: inherit;
}