/*
 * AZ Boutique checkbox component.
 *
 * Native controls opt in with `.azb-checkbox`; Mana filter links already opt
 * in through their module-owned checked/unchecked classes. No global checkbox
 * selector is used, and the native input remains the interactive element.
 */

input.checkbox.azb-checkbox {
    position: relative;
    display: inline-block;
    flex: 0 0 16px !important;
    box-sizing: border-box;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    margin: 0 9px 0 0 !important;
    padding: 0 !important;
    overflow: visible;
    vertical-align: middle;
    background: #fff !important;
    border: 1px solid #767b80 !important;
    border-radius: 3px !important;
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
}

input.azb-checkbox.azb-checkbox--flush {
    margin-right: 0 !important;
}

input.azb-checkbox:hover {
    border-color: #ed407c !important;
}

input.azb-checkbox:focus-visible {
    border-color: #ed407c !important;
    outline: 2px solid rgba(222, 38, 102, .25);
    outline-offset: 2px;
}

input.azb-checkbox:checked {
    background: #fde8ef !important;
    border-color: #d982a0 !important;
}

input.azb-checkbox:checked::after {
    position: absolute;
    top: 1px;
    left: 4px;
    box-sizing: content-box;
    width: 5px;
    height: 9px;
    border: solid #a92352;
    border-width: 0 2px 2px 0;
    content: "";
    transform: rotate(45deg);
}

input.azb-checkbox:disabled {
    background: #f3f0ef !important;
    border-color: #bbb7b5 !important;
    cursor: not-allowed;
    opacity: .65;
}

/* Mana uses links, not inputs: retain its navigation and AJAX semantics. */
ol.m-filter-css-checkboxes li > a.m-checkbox-unchecked,
ol.m-filter-css-checkboxes li > a.m-checkbox-checked {
    position: relative;
    min-height: 16px;
    padding-left: 24px;
    background-image: none;
    text-decoration: none;
}

ol.m-filter-css-checkboxes li > a.m-checkbox-unchecked::before,
ol.m-filter-css-checkboxes li > a.m-checkbox-checked::before {
    position: absolute;
    top: 50%;
    left: 0;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 1px solid #767b80;
    border-radius: 3px;
    content: "";
    transform: translateY(-50%);
}

ol.m-filter-css-checkboxes li > a.m-checkbox-unchecked:hover::before,
ol.m-filter-css-checkboxes li > a.m-checkbox-unchecked:focus-visible::before,
ol.m-filter-css-checkboxes li > a.m-checkbox-checked:hover::before,
ol.m-filter-css-checkboxes li > a.m-checkbox-checked:focus-visible::before {
    border-color: #ed407c;
}

ol.m-filter-css-checkboxes li > a.m-checkbox-checked::before {
    background: #fde8ef;
    border-color: #d982a0;
}

ol.m-filter-css-checkboxes li > a.m-checkbox-checked::after {
    position: absolute;
    top: 50%;
    left: 5px;
    box-sizing: content-box;
    width: 5px;
    height: 9px;
    border: solid #a92352;
    border-width: 0 2px 2px 0;
    content: "";
    transform: translateY(-62%) rotate(45deg);
}

@media (forced-colors: active) {
    input.azb-checkbox,
    ol.m-filter-css-checkboxes li > a.m-checkbox-unchecked::before,
    ol.m-filter-css-checkboxes li > a.m-checkbox-checked::before {
        border-color: CanvasText;
        forced-color-adjust: auto;
    }
}