@use 'sass:map';
@use 'sass:color';


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

@mixin tag-set-types($list) {
  @each $item in $list {
    @include tag-set-type($item)
  }
}

@mixin tag-set-type($type) {
  #{getClassName((tag))}#{getClassName((tag, $type))} {
    // #{joinValName((tag, background-color))}: color.adjust(map.get($colors, $type, base), $alpha: -0.92);
    // #{joinValName((tag, border-color))}: color.adjust(map.get($colors, $type, base), $alpha: -0.7);
    // color.adjust(map.get($colors, primary, base), $alpha: -0.92)
    @include set-css-val(tag,
      (color: (color, $type),
      'background-color': (color, $type, lightest),
      'border-color': (color, $type, lighter),
      ));
  }
}

#{getClassName((tag))} {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  color: #{getValName((tag, color))};
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: .1s;
  font-weight: #{getValName((tag, font-weight))};
  user-select: none;
  vertical-align: middle;
  -webkit-appearance: none;
  background-color: #{getValName((tag, background-color))};
  border: 1px solid;
  border-color: #{getValName((tag, border-color))};
  padding: .3em .6em;
  font-size: #{getValName((tag, font-size))};
  border-radius: #{getValName((tag, border-radius))};
  span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  i {
    display: block;
  }
}

#{getClassName((tag))} {
  
  @include set-css-val(
    tag,
    (
      color: (color, neutral, 6),
      'border-color': (color, neutral, 2),
      'background-color': (color, neutral, 1),
      'border-radius': (border, radius, rounded)
    )
  )
}

#{getClassName((tag, mini))} {
  font-size: 12px;
}
#{getClassName((tag, small))} {
  font-size: #{getValName((heading8))};
}
#{getClassName((tag, medium))} {
  font-size: #{getValName((heading7))};
}
#{getClassName((tag, large))} {
  font-size: #{getValName((heading6))};
}

#{getClassName((tag, clear))} {
  font-size: 12px;margin-left: #{getValName((space, xs))};
  transition: all .2s;
  &:hover {
    transform: rotate3d(0, 0, 1, 90deg);
  }
}

@include tag-set-types($types);