@use '../../helpers';
@use '../../internal';
@use '../../mixins';

@mixin Checkbox() {
  @include internal.IndicatorContainer();

  @if not mixins.includes('Checkbox') {
    @include _Checkbox();
  }
}

@mixin _Checkbox() {
  $stroke-size: helpers.space(0.25);

  .ods-checkbox {
    &,
    + .ods-input-indicator::before {
      border-radius: helpers.border-radius('medium');
    }

    // "outline" transition
    + .ods-input-indicator::before {
      transition: background-color var(--ods-transition-duration) ease-out;
    }

    // "tick" for [checked] indication
    &:checked + .ods-input-indicator::after {
      $width: helpers.space(1.75);

      border: 0 solid helpers.color('content-on-action');
      border-width: 0 0 $stroke-size $stroke-size;
      height: $width * 0.5;
      transform: rotate(-45deg);
      transform-origin: 110% 20%; // rotates rectangle from dead center
      width: $width;
    }

    // "line" for [indeterminate] indication
    &:indeterminate + .ods-input-indicator::after {
      $size: helpers.space(2.75);
      $width: helpers.space(1.5);

      background-color: helpers.color('content-on-action');
      height: $stroke-size;
      margin: (($size - $stroke-size) * 0.5) (($size - $width) * 0.5);
      transform: none; // Firefox sets both [checked] and [indeterminate] states
      width: $width;
    }
  }

  // indicating [checked] or [indeterminate] input
  .ods-checkbox:checked,
  .ods-checkbox:indeterminate {
    + .ods-input-indicator::before {
      background-color: helpers.color('background-action');
    }
  }

  // indicating invalid and :enabled input
  .ods-checkbox.-invalid:enabled,
  .ods-checkbox.-touched:invalid:enabled {
    // and [checked] indicator
    &:checked + .ods-input-indicator::after {
      border-color: helpers.color('content-always-light');
    }
    // or [indeterminate] indicator
    &:indeterminate + .ods-input-indicator::after {
      background-color: helpers.color('content-always-light');
    }

    // also [checked] or [indeterminate] outline
    &:checked + .ods-input-indicator::before,
    &:indeterminate + .ods-input-indicator::before {
      background-color: helpers.color('background-negative');
    }
  }

  // indicating [disabled] input
  .ods-checkbox:disabled + .ods-input-indicator {
    &::after {
      border-color: helpers.color('content-disabled');
    }

    &::before {
      background-color: helpers.color('background-disabled');
    }
  }
}