// https://m3.material.io/components/checkbox/specs

$priamy: var(--sd-sys-color-primary);
$error: var(--sd-sys-color-error);

.sd-checkbox {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; // remove webkit blue tap effect
    transition: all 200ms;
    &:hover {
        background: rgb(0 0 0 / 0.1);
    }
    &:focus {
        outline: none;
        background: rgb(0 0 0 / 0.12);
    }
    @include display-inline-flex-center;

    &-icon {
        display: inline-block;
        box-sizing: border-box;
        width: 18px;
        height: 18px;
        border-radius: 2px;
        border: 2px solid var(--sd-sys-color-outline);
        color: var(--sd-sys-color-surface-container-highest);
    }

    &[data-sd-checked='true'] &-icon {
        background: $priamy;
        border: 2px solid $priamy;
    }

    &[data-sd-checked='true'][data-sd-error='true'] &-icon {
        background: $error;
        border: 2px solid $error;
    }

    &[data-sd-disabled='true'] {
        pointer-events: none;
        filter: grayscale(98%) opacity(40%);
    }
}