// Component: Checkbox Form Item

@use '00-config' as *;
@use '../form-item' as *;

.c-form-item--checkbox {
  & + & {
    margin-block-start: -1 * gesso-spacing(2);
  }
}

.c-form-item--checkbox.has-visible-label-after {
  .c-form-item__checkbox {
    @include visually-hidden(true);

    + .c-form-item__label {
      cursor: pointer;
      display: block;
      font-weight: gesso-font-weight(regular);

      &::before {
        @include focus();
        background: gesso-color(form, background-unchecked);
        border: 1px solid gesso-color(form, border-dark);
        content: '\a0';
        display: inline-block;
        height: rem(20px);
        line-height: rem(20px);
        margin-inline-end: 0.6em;
        text-indent: 0.15em;
        transition-duration: gesso-duration(short);
        transition-property:
          background-color, border-color, box-shadow, color, opacity,
          text-shadow, transform;
        transition-timing-function: gesso-easing(ease-in-out);
        vertical-align: middle;
        width: rem(20px);
      }
    }

    &:checked + .c-form-item__label::before {
      @include svg-background(correct);
      background-color: gesso-color(form, background-checked);
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: rem(20px);
    }

    &:focus + .c-form-item__label::before {
      outline-color: gesso-color(ui, generic, focus);
    }

    &:disabled + .c-form-item__label {
      cursor: default;
      opacity: $form-disabled-opacity;

      &::before {
        cursor: not-allowed;
      }
    }
  }
}
