@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(icon-check) {
  @include set-component-css-var('icheck', $iconCheck);

  @include flex('center', 'center');
  height: getCssVar('icheck', 'height');
  width: getCssVar('icheck', 'height');
  transition: getCssVar('transition-ease');
  border-radius: inherit;

  span {
    transform: rotate(45deg);
    display: block;
    position: relative;
    width: 8px;
    height: getCssVar('icheck', 'height');
    margin-top: -4px;

    .line1 {
      background: transparent;
      content: '';
      position: absolute;
      height: 2px;
      transition: all getCssVar('transition-duration-fast') ease;
      border-radius: getCssVar('icheck', 'line-radius');
      z-index: 100;
      width: 8px;
      bottom: 0;

      &:after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        background: $color-white;
        transition: getCssVar('transition-ease');
        border-radius: inherit;
        left: auto;
        right: 0;
      }
    }
    .line2 {
      bottom: 0;
      right: 0;
      z-index: 100;
      border-radius: getCssVar('icheck', 'line-radius');
      background: transparent;
      content: '';
      position: absolute;
      height: getCssVar('icheck', 'height');
      transition: all getCssVar('transition-duration-fast') ease;
      width: 2px;
      &:after {
        content: '';
        position: absolute;
        width: 2px;
        height: 0;
        background: $color-white;
        transition: getCssVar('transition-ease');
        bottom: 0;
        border-radius: inherit;
      }
    }
  }

  @include when(active) {
    &:before {
      width: 8px;
    }
    &:after {
      width: 4px;
    }
  }

  @include when(indeterminate) {
    span {
      transform: rotate(0);
      height: auto;
      margin: 0;
      width: 0;

      &:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0; // checked -> 10px
        height: 2px;
        border-radius: 2px;
        background: $color-white;
        display: block;
        transition: getCssVar('transition-ease');
      }
      .line1 {
        transform: rotate(-45deg);
        bottom: 0;
        right: -1px;
        opacity: 0;
        display: none;
      }
      .line2 {
        right: 0 !important;
        bottom: -14px !important;
        transform: rotate(45deg) !important;
        transition: getCssVar('transition', 'ease') !important;
        height: 11px !important;
        display: none;
      }
    }
  }
}