@use 'sass:color';
@use 'sass:list';
@use '../theme.scss' as *;

$baseTagColor: var(--base-color);
$baseHoverTagColor: var(--base-hover-color);
$tagDotSize: 16px;
$tagLineWidth: 80px;
$tagLineHeight: 8px;

.be-tag {
  display: inline-flex;
  align-items: center;
  border-style: solid;
  border-radius: 0.6em;
  &.line {
    border-width: ($tagLineHeight * 0.5);
    width: $tagLineWidth;
    height: 0;
    min-width: 30px;
    border-color: $baseTagColor;
  }
  &.dot {
    border-radius: ($tagDotSize * 0.5);
    border-width: ($tagDotSize * 0.5);
    width: 0;
    height: 0;
    border-color: $baseTagColor;
  }
  &.label,
  &.pointing {
    vertical-align: baseline;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.8em;
    border-radius: $baseBorderRadius;
    // margin: 0 0.2em;
    background-color: $baseTagColor;
    background-image: none;
    padding: 0 0.8em;
    text-transform: none;
    border: 0 solid transparent;
    transition: background 0.1s ease;
    &.hover,
    &.focus,
    &:hover,
    &:focus {
      background-color: $baseHoverTagColor;
    }
    &.icon i {
      line-height: 1.8em;
    }
    i.icon.left {
      margin-right: 0.4em;
      margin-left: -0.4em;
    }
    i.icon.right {
      margin-left: 0.4em;
      margin-right: -0.4em;
    }
    &.round {
      border-radius: 2em;
    }
  }
  &.pointing {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      width: 1em;
      height: 1em;
      clip-path: polygon(0 0, 100% 0, 50% 50%);
      background-color: inherit;
    }
    &.up::after {
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      margin: -1px 0;
    }
    &.down::after {
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%) rotate(180deg);
      margin: -1px 0;
    }
    &.left::after {
      clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
      margin: 0 -1px;
    }
    &.right::after {
      clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
      top: 50%;
      left: 100%;
      transform: translateY(-50%) rotate(180deg);
      margin: 0 -1px;
    }
  }
  &.static {
    pointer-events: none;
  }
  &.disabled {
    pointer-events: none;
    opacity: 0.5;
  }
  & + .be-tag {
    margin-left: 4px;
  }
}

@keyframes bounce {
  25% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
}
.be-tags {
  width: 100%;
  display: inline-flex;
  align-items: center;
  overflow-x: auto;
  &.tagMap {
    flex-wrap: wrap;
  }
  &.one-of-a-kind {
    flex-wrap: wrap;
    visibility: hidden;
    &:hover > * {
      opacity: 0.4;
      transform: scale(0.9);
    }
    > * {
      visibility: visible;
      transition:
        opacity 150ms linear 100ms,
        transform 150ms ease-in-out 100ms;
      &:hover {
        opacity: 1;
        transform: scale(1);
        transition-delay: 0ms, 0ms;
      }
    }
  }
}
.bounce > div,
.bounce > span {
  transform: perspective(1px) translateZ(0);
  &:hover {
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
  }
}

@each $color, $values in $brandColors {
  $bgColor: #{list.nth($values, 1)};
  $hoverColor: #{list.nth($values, 2)};
  $textColor: #{list.nth($values, 3)};
  .be-tag {
    &.#{$color}:not(.label) {
      border-color: $bgColor;
      &.hover,
      &.focus,
      &:hover,
      &:focus {
        border-color: $hoverColor;
      }
    }
    &.#{$color}.pointing,
    &.#{$color}.label {
      background-color: $bgColor;
      color: $white;
      &.hover,
      &.focus,
      &:hover,
      &:focus {
        background-color: $hoverColor;
      }
    }
  }
}

@each $color, $value in $colors {
  $hoverColor: color.adjust($value, $lightness: -10%);
  .be-tag {
    &.#{$color}:not(.label) {
      border-color: $value;
      &.hover,
      &.focus,
      &:hover,
      &:focus {
        border-color: $hoverColor;
      }
    }
    &.#{$color}.pointing,
    &.#{$color}.label {
      background-color: $value;
      color: $white;
      &.hover,
      &.focus,
      &:hover,
      &:focus {
        background-color: $hoverColor;
      }
    }
    &.light.#{$color}.label {
      background-color: color.adjust($value, $lightness: 32%);
      color: $value;
      border: 1px solid;
      border-color: color.adjust($value, $lightness: 10%);
      font-weight: 500 !important;
    }
  }
}