/*
    Styling for the SelectAllCheckBox component, in the site's accent color as every check box.

    A page can set this custom property on an element around the check box:
    - --select-all-check-box-color: the check box's color, to match the check boxes it heads.
*/
.select-all-check-box
{
    accent-color: var(--select-all-check-box-color, var(--primary-higher-emphasis-color));
    cursor: pointer;

    &:disabled
    {
        cursor: default;
    }

    /* Partly checked, while only some options are selected. Browsers draw its dash in white on the
       accent color but a checked box's mark in black, so it is drawn here to match. */
    &:indeterminate
    {
        --select-all-check-box-size: 13px;
        --select-all-check-box-corner-radius: 2px;
        --select-all-check-box-dash-width: 7px;
        --select-all-check-box-dash-height: 2px;
        --select-all-check-box-dash-color: var(--neutral-lowest-emphasis-surface-color);

        appearance: none;
        box-sizing: border-box;
        width: var(--select-all-check-box-size);
        height: var(--select-all-check-box-size);
        border-radius: var(--select-all-check-box-corner-radius);
        background-color: var(--select-all-check-box-color, var(--primary-higher-emphasis-color));
        /* A gradient from one color to the same color is a solid rectangle: the dash, a short
           horizontal bar in the middle of the box, sized and centered below. */
        background-image: linear-gradient(var(--select-all-check-box-dash-color), var(--select-all-check-box-dash-color));
        background-size: var(--select-all-check-box-dash-width) var(--select-all-check-box-dash-height);
        background-position: center;
        background-repeat: no-repeat;
    }
}