.checkbox {
    display: flex;
    gap: rem(10);
    align-items: center;
    cursor: pointer;

    &:has(input:checked) {
        .checkbox__text {
            color: $mainColor;
        }
    }

    // .checkbox__input
    &__input {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: rem(20);
        height: rem(20);
        appearance: none;
        cursor: pointer;
        content: '';
        border: 1px solid rgb(34 36 51 / 18%);
        border-radius: rem(4);

        &:checked {
            background-color: $mainColor;
            border-color: $mainColor;

            &::before {
                position: absolute;
                width: rem(12);
                height: rem(12);
                content: '';
                background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6L5.1213 8.1213L9.3635 3.87866' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
                background-size: cover;
            }
        }
    }

    // .checkbox__text
    &__text {
        font-size: rem(14);
        font-weight: 500;
        line-height: 145%;
        color: rgb(20 20 23 / 42%);
    }
}