/* Mantine-like dark checkbox style for dcc.Checklist */
.mantine-checkbox-style .Select-control,
.mantine-checkbox-style label {
    color: var(--mantine-color-text);
    font-size: 16px;
    font-weight: 400;
}

.mantine-checkbox-style input[type="checkbox"] {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border: 1.5px solid var(--mantine-color-default-border);
    background: var(--mantine-color-default);
    margin-right: 8px;
    vertical-align: middle;
    transition: border-color 100ms ease, background-color 100ms ease, box-shadow 100ms ease;
    cursor: pointer;
    position: relative;
}

.mantine-checkbox-style input[type="checkbox"]:hover {
    background: var(--mantine-color-gray-1);
    border-color: var(--mantine-color-gray-4);
}

.mantine-checkbox-style input[type="checkbox"]:checked {
    background: var(--mantine-primary-color-filled);
    border-color: var(--mantine-primary-color-filled);
}

.mantine-checkbox-style input[type="checkbox"]:checked:after {
    content: "";
    display: block;
    position: absolute;
    left: 0.33rem;
    top: 0.1rem;
    width: 0.3rem;
    height: 0.65rem;
    border: solid var(--mantine-primary-color-contrast);
    border-width: 0 0.16rem 0.16rem 0;
    transform: rotate(45deg);
}

.mantine-checkbox-style input[type="checkbox"]:focus,
.mantine-checkbox-style input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--mantine-primary-color-light);
}

.mantine-checkbox-style input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}