@import './../theme/config.scss';
@import './../anim/fade.scss';
@import './../mixins/reset.scss';

$tag-prefix-cls: amos-tag;
$iconPrefixCls: aficon;

$--geekblue: #597ef7;
$--volcano: #fa541c;

$colors: pink, red, yellow, orange, cyan, green, blue, purple, geekblue, magenta, volcano, gold, lime;

@mixin make-color($bgColor: pink) {
  background: $bgColor;
}

@mixin make-color-classes() {
  @each $--color in $colors {
    &.#{$tag-prefix-cls}-#{"#{$--color}"} {
      @if ($--color == geekblue) {
        $--color: $--geekblue;
      }

      @else if($--color == volcano) {
        $--color: $--volcano;
      }

      @include make-color($--color);

      color: white;

      &:hover {
        background: darken($--color, 10%);
      }
    }
  }
}

.#{$tag-prefix-cls} {
  @include make-color-classes();
  @include reset-component2;

  display: inline-block;
  height: 2em;
  padding: 0 0.4em;
  margin: 0.3em;
  overflow: hidden;
  font-size: $font-size-base;
  line-height: 1.8em;
  vertical-align: middle;
  cursor: pointer;
  background: #f7f7f7;
  border: 1px solid $border-color-split;
  border-radius: $border-radius-base;
  opacity: 1;
  transition: all 0.3s $ease-in-out-circ;

  &:hover {
    opacity: 0.85;
  }

  &,
  a,
  a:hover {
    color: $text-color;
  }

  &-text {
    a:first-child:last-child {
      display: inline-block;
      padding: 0 8px;
      margin: 0 -8px;
    }
  }

  .#{$iconPrefixCls}-cross {
    margin-left: 3px;
    font-size: 12px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    opacity: 0.66;
    transition: all 0.3s ease;

    &:hover {
      opacity: 1;
    }
  }

  &-use-color {
    border-color: transparent;

    &,
    a,
    a:hover,
    .#{$iconPrefixCls}-cross,
    .#{$iconPrefixCls}-cross:hover {
      color: white;
    }
  }

  &-close {
    width: 0;
    padding: 0;
    margin: 0;
  }

  &-zoom-enter,
  &-zoom-appear {
    animation: amosFadeIn 0.2s $ease-in-out-circ;
    animation-fill-mode: both;
  }

  &-zoom-leave {
    animation: amosZoomOut 0.3s $ease-in-out-circ;
    animation-fill-mode: both;
  }

  &-checkable {
    background-color: transparent;
    border-color: transparent;

    &:not(&-checked):hover {
      color: var(--primary-color);
    }

    &:active,
    &-checked {
      color: white;
    }

    &-checked {
      background-color: var(--primary-6);
    }

    &:active {
      background-color: var(--primary-7);
    }
  }
}

.#{$tag-prefix-cls}.#{$tag-prefix-cls}-close {
  width: 0;
}

// stag
$stag-prefix-cls: amos-stag;

.#{$stag-prefix-cls} {
  @include make-color-classes();
  @include reset-component2;

  display: inline-block;
  height: 2em;
  padding: 0 0.4em;
  margin: 0.3em;
  overflow: hidden;
  font-size: $font-size-base;
  line-height: 1.8em;
  vertical-align: middle;
  cursor: pointer;
  background: #f7f7f7;
  border: 1px solid $border-color-split;
  border-radius: $border-radius-base;
  opacity: 1;
  transition: all 0.3s $ease-in-out-circ;

  &:hover {
    opacity: 0.85;
  }

  &,
  a,
  a:hover {
    color: $text-color;
  }

  &-text {
    a:first-child:last-child {
      display: inline-block;
      padding: 0 8px;
      margin: 0 -8px;
    }
  }

  .#{$iconPrefixCls}-cross {
    margin-left: 3px;
    font-size: 12px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    opacity: 0.66;
    transition: all 0.3s ease;

    &:hover {
      opacity: 1;
    }
  }

  &-use-color {
    border-color: transparent;

    &,
    a,
    a:hover,
    .#{$iconPrefixCls}-cross,
    .#{$iconPrefixCls}-cross:hover {
      color: white;
    }
  }

  &-checkable {
    background-color: transparent;
    border-color: transparent;

    &:not(&-checked):hover {
      color: var(--primary-color);
    }

    &:active,
    &-checked {
      color: white;
    }

    &-checked {
      background-color: var(--primary-6);
    }

    &:active {
      background-color: var(--primary-7);
    }
  }
}