@use 'sass:map';

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

// .#{$namespace}-icon-loading {
//   animation: rotating 2s linear infinite;
// }

.#{$namespace}-icon--right {
  margin-left: 5px;
}
.#{$namespace}-icon--left {
  margin-right: 5px;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@include b(icon) {
  --vs-color: inherit;
  height: 1em;
  width: 1em;
  line-height: 1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  fill: currentColor;
  color: rgba(var(--vs-color));
  font-size: inherit;

  @include when(loading) {
    animation: rotating 2s linear infinite;
  }

  svg {
    height: 1em;
    width: 1em;
  }
}

@include b(icon-arrow) {
  pointer-events: none;
  width: 7px;
  height: 7px;
  transform: rotate(-135deg);
  transition: getCssVar(transition-ease);
  transform-origin: center;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 0px;
    display: block;
    border-radius: 2px;
    width: 100%;
    height: 1px;
    background: getColor(text);
  }

  @include pseudo(before) {
    height: 100%;
    width: 1px;
  }

  @include pseudo(after) {
    width: 100%;
    height: 1px;
  }
}

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

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

  .#{$namespace}-icon-check__check {
    height: 16px;
    width: 16px;

    path {
      stroke: #fff;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-dasharray: 0, 24.19;
      stroke-dashoffset: 0;
      visibility: hidden;
      transition: stroke-dasharray 0.2s ease-in-out,
        visibility 0.02s 0.18s;
    }
  }
  @include when(active) {
    &:before {
      width: 8px;
    }
    &:after {
      width: 4px;
    }

    .#{$namespace}-icon-check__check {
      path {
        stroke-dasharray: 24.19, 24.19;
        visibility: visible;
        transition: stroke-dasharray 0.1s 0.18s ease-in-out,
          visibility 0.02s 0.18s;
      }
    }
    @include when(indeterminate) {
      .#{$namespace}-icon-check__line {
        width: 14px;
        visibility: visible;
      }
    }
  }

  @include when(indeterminate) {
    .#{$namespace}-icon-check__line {
      width: 10px;
      transition: all 0.2s ease-in-out;
      left: 0;
      right: auto;
      width: 2.5px;
      height: 2.5px;
      background-color: #fff;
      border-radius: 10px;
      visibility: hidden;
    }
  }
}

// icon close
@include b(icon-close) {
  @include set-component-var(iclose, $icon);
  width: getCssVar(iclose, height);
  height: getCssVar(iclose, height);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: getCssVar(transition-ease);

  &::before,
  &::after {
    background: getColor(color);
    content: '';
    position: absolute;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    transition: getCssVar(transition-ease);
  }

  @include pseudo(before) {
    transform: rotate(-45deg);
  }
  @include pseudo(after) {
    transform: rotate(45deg);
  }
  &-hover--less {
    &:hover {
      &:before,
      &:after {
        width: 12px;
        transform: rotate(180deg);
      }
    }
  }
}

// icon loading
@include b(icon-loading) {
  @include absolute-full;
  margin: auto;
  width: 100%;
  max-width: 50px;
  max-height: 50px;

  border-radius: getCssVar('border-radius-full');
  z-index: 999999;
  color: getColor(color);
  transition: getCssVar(transition-ease);

  @include e(item) {
    @include absolute-full;
    border-radius: inherit;

    .path {
      stroke: currentColor;
      stroke-width: 10;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }
  }
  @include e(1) {
    animation: rotating 0.88s ease infinite 0.11s;

    .path {
      stroke-dasharray: 60 150;
    }
  }
  @include e(2) {
    opacity: 0.6;
    animation: rotating 0.88s linear infinite;

    .path {
      stroke-dasharray: 5 130;
    }
  }
}

// icon plus
@include b(icon-plus) {
  @include set-component-var(iplus, $icon);

  @include flex(center, center);
  width: getCssVar(iplus, height);
  height: getCssVar(iplus, height);
  position: relative;
  transition: getCssVar(transition-ease);
  cursor: pointer;

  &:before,
  &::after {
    background: getColor(color);
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    border-radius: 2px;
  }
  @include pseudo(before) {
    transform: rotate(0);
    transition: getCssVar(transition-ease);
  }
  @include pseudo(after) {
    transform: rotate(90deg);
    transition: all 0.4s ease;
  }

  &:hover:not(.is-less) {
    transform: rotate(-90deg);
  }

  @include when(less) {
    @include pseudo(hover) {
      transform: scale(0.75);
    }
    @include pseudo(after) {
      transform: rotate(180deg);
    }
  }
}