.CheckboxRoot {
    background-color: var(--background-neutral-container);
    width: var(--size-300);
    height: var(--size-300);
    border-radius: var(--size-50);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-neutral-subtle);
    &:hover {
        cursor: pointer;
        background-color: var(--background-neutral-hover);
    }
    &[data-state="checked"] {
        background-color: var(--background-primary);
        color: var(--black);
        border-color: var(--black);
        .CheckboxIndicator {
            svg {
                color: var(--black);
            }
        }
        &:hover {
            background-color: var(--background-primary-hover);
        }
    }
    &[data-state="checked"][disabled],
    &[disabled] {
        background-color: var(--background-neutral-disabled);
        color: var(--foreground-neutral-disabled);
        border-color: var(--border-neutral-disabled);
        .CheckboxIndicator {
            svg {
                color: var(--foreground-neutral-disabled);
            }
        }
        &:hover {
            background-color: var(--background-neutral-disabled);
        }
        & + .Label {
            color: var(--foreground-neutral-disabled);
        }
    }
    .CheckboxRoot:focus {
        box-shadow:
            0px 0px 0px 2px var(--focus-inner),
            0px 0px 0px 6px var(--focus-outer),
            0px 0px 0px 8px var(--focus-inner);
    }

    .CheckboxIndicator {
        color: var(--foreground-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        svg {
            width: 20px;
            height: 20px;
            color: var(--foreground-primary);
        }
    }

    .Label {
        color: var(--foreground-neutral);
        line-height: 1;
        p {
            line-height: 1;
        }
    }
}