@use 'sass:map';
@use '../../tokens';
@use '../../utils';

/// get component token
@function _token($token) {
  @return utils.map-get(tokens.$flexy-comp-checkbox, $token);
}

.flexy-checkbox {
  display: inline-flex;
  position: relative;
  @include utils.size(_token('size'));

  input {
    border: none;
    cursor: pointer;
    margin: 0;
    opacity: 0;
    @include utils.absolute-center();
    @include utils.size(100%);
    @include utils.min-size(tokens.$flexy-sys-ref-touch-size);
    z-index: 1;
  }

  &__box {
    background-color: _token('unselected-fill-color');
    border: _token('outline-width') solid _token('unselected-outline-color');
    border-radius: _token('outline-width');
    box-sizing: border-box;
    pointer-events: none;
    @include utils.absolute-fill();
  }

  &__mark-icon {
    @include utils.absolute-center();
    @include utils.size(_token('mark-size'));

    path {
      fill: none;
      stroke: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 20;
      stroke: transparent;
      transition: {
        property: stroke-dashoffset, transform;
        duration: _token('state-transition-duration');
        timing-function: _token('state-transition-easing');
      }
    }
  }

  &__check-mark {
    stroke-dasharray: 118.10818481445312;
    stroke-dashoffset: 118.10818481445312;
  }

  &__indeterminate-mark {
    transform: scale(0);
    transform-origin: center;
  }

  input:hover ~ &__box {
    border-color: _token('unselected-hovered-outline-color');
  }

  input:focus-visible ~ &__box {
    outline-offset: 2px;
    outline: 2px solid tokens.$flexy-sys-color-primary;
  }

  input:checked ~ &__mark-icon &__check-mark {
    stroke-dashoffset: 0;
    stroke: _token('mark-color');
  }

  input:indeterminate ~ &__mark-icon &__indeterminate-mark {
    stroke: _token('mark-color');
    transform: scale(1);
  }

  input:indeterminate ~ &__box,
  input:checked ~ &__box {
    background-color: _token('selected-fill-color');
    border-color: _token('selected-outline-color');
  }

  input:disabled {
    cursor: none;
    pointer-events: none;
  }

  input:disabled ~ &__box {
    filter: grayscale(1) opacity(0.32);
  }
}