.checkbox {
    display: grid;
    grid-gap: 4px 14px;
    color: var(--checkbox-label-color);
    font-family: var(--font-family-primary);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    grid-auto-flow: column;
    justify-content: flex-start;

    --color-description: var(--color-text-secondary);
    --checkbox-label-color: var(--color-text-basic);

    &_disabled {
        color: var(--checkbox-label-color);

        --color-description: var(--color-text-disabled);
    }

    &_description {
        grid-auto-flow: initial;
        grid-template-areas: "a b" "a c";
    }

    @media (hover: hover) and (pointer: fine) {

        &:hover:not(&_disabled) {
            cursor: pointer;
        }
    }

    &__input {
        margin: 0;
        padding: 0;
        appearance: none;
        background-color: var(--color-bg-base);
        border: 1px solid var(--color-border-basic);
        width: 20px;
        height: 20px;
        box-sizing: border-box;
        border-radius: 4px;
        background-position: center center;
        background-repeat: no-repeat;
        transition: all 200ms linear;

        @media screen and (prefers-reduced-motion: reduce) {
            transition: none;
        }

        @media (hover: hover) and (pointer: fine) {

            &:hover:not([disabled]) {
                cursor: pointer;
                border-color: var(--color-bg-brand-2);
            }
        }

        &:checked,
        &_indeterminate {
            background-color: var(--color-bg-accent);
            border-color: var(--color-bg-accent);

            @media (hover: hover) and (pointer: fine) {

                &:hover:not([disabled]) {
                    opacity: 0.8;
                }
            }
        }

        &[disabled] {
            background-color: var(--color-bg-plate);
            border-color: var(--color-border-basic);
        }

        &:checked {
            background-image: url("./img/checkmark.svg");

            &[disabled] {
                background-image: url("./img/checkmark_disabled.svg");
            }
        }

        &_indeterminate,
        &_indeterminate:checked {
            background-image: url("./img/indeterminate.svg");

            &[disabled] {
                background-image: url("./img/indeterminate_disabled.svg");
            }
        }

        &:focus:not([disabled]) {
            outline: none;
            box-shadow: 0 0 0 2px var(--box-shadow-focus);
        }
    }

    &__description {
        color: var(--color-description);
        grid-area: c;
    }
}