@use '~@moda/om';

.Checkbox {
  $checkbox-size: om.space(4);
  $checkbox-check-offset: calc(om.space(1) / 2);

  @include om.stack(2, $direction: horizontal);

  position: relative;
  align-items: flex-start;
  user-select: none;
  cursor: pointer;
  color: om.color(ink);

  &__indicator {
    position: relative;
    width: $checkbox-size;
    height: $checkbox-size;
    margin-top: calc(om.space(1) / 2);
    flex-shrink: 0;
    border: 1px solid;

    &--disabled {
      color: om.color(elephant);
      pointer-events: none;
      &::after {
        background-color: om.color(elephant);
      }
    }
  }

  &__check-mark {
    margin: 7.5%;
  }

  &__input {
    @include om.visually-hidden();
  }

  &:has(.Checkbox__input:focus-visible) .Checkbox__indicator {
    outline: 2px solid om.color(ink);
    outline-offset: 2px;
  }

  &__label {
    @include om.text(body1);

    color: om.color(ink);
  }
}