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

$primary: var(--md-sys-color-primary);
$error: var(--md-sys-color-error);

.sd-checkbox {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; // remove webkit blue tap effect
    transition: all 200ms;
    position: relative;
    @include display-inline-flex-center;

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

    &-ripple {
        position: absolute;
        overflow: hidden;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        clip-path: circle(50%);
        border-radius: 50%;
        transition: all 200ms;
        &:hover {
            background: rgb(0 0 0 / 0.1);
        }
        > * {
            // make the ripple full size
            display: block;
            height: 100%;
        }
    }
    &:focus-visible {
        outline: none;
        .sd-checkbox-ripple {
            background: rgb(0 0 0 / 0.12);
        }
    }

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

    &[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%);
    }
}