@use "../../variables/forms" as formsVars;
@use "../../tools/a11y";
@use "../../tools/borders";
@use "../../tools/colour";
@use "../../tools/media";
@use "../../tools/spacing";
@use "../../tools/typography";

.tna-checkboxes {
  align-self: stretch;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: spacing.space(1);

  &__item {
    position: relative;

    input {
      width: 1px;
      height: 1px;
      margin: 0;
      padding: 0;

      position: absolute;
      top: -1px;
      left: -1px;

      opacity: 0;
    }

    &-label {
      padding-left: spacing.space(3);

      display: block;

      line-height: 2rem;

      cursor: pointer;

      &::before,
      &::after {
        content: "";

        width: 2rem;

        position: absolute;
        top: 0;
        left: 0;
      }

      &::before {
        height: 2rem;

        display: block;
        box-sizing: border-box;

        z-index: 1;

        @include colour.colour-input;

        border-radius: 0.1px;
        @include borders.rounded-border;
      }

      &::after {
        width: 1.25rem;
        height: 0.5rem;
        margin-top: -0.1875rem;

        display: none;

        top: 1rem;
        left: 1rem;
        z-index: 2;

        @include colour.colour-border("input-background", 0, solid);
        border-width: 0 0 formsVars.$checkbox-checkmark-width
          formsVars.$checkbox-checkmark-width;

        transform: translateX(-50%) translateY(-50%) rotate(-45deg);
      }
    }

    &-hint {
      display: block;

      @include typography.font-size(16);
      @include colour.colour-font("font-light");
      line-height: 1.25;
    }
  }

  &--small {
    gap: spacing.space(0.5);
  }

  &--small &__item-label {
    padding-left: spacing.space(2.25);

    line-height: 1.5rem;

    &::before {
      width: 1.5rem;
      height: 1.5rem;
    }

    &::after {
      width: 0.825rem;
      height: 0.375rem;
      margin-top: -0.125rem;

      top: 0.75rem;
      left: 0.75rem;
    }
  }

  &--inline {
    flex-flow: row wrap;

    align-items: flex-start;
    gap: spacing.space(1) spacing.space(2);

    @include media.on-tiny {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  &__item-label:active {
    &::before {
      @include a11y.active-outline;
    }
  }

  input:focus + &__item-label {
    &::before {
      @include a11y.focus-outline;
    }
  }

  input:checked + &__item-label {
    &::before {
      @include colour.colour-background("input-foreground");
    }

    &::after {
      display: block;
    }
  }

  input:focus + &__item-label,
  &__item:hover &__item-label {
    &::before {
      box-shadow: 0 0 0 0.125rem var(--input-border);
    }
  }
}