@import '../core';

$tag-colors: (
  info: (bg: var(--ec-color-cobalt-1), border: var(--ec-color-info)),
  success: (bg: var(--ec-color-green-1), border: var(--ec-color-success)),
  warning: (bg: var(--ec-color-yellow-1), border: var(--ec-color-caution)),
  danger: (bg: var(--ec-color-red-1), border: var(--ec-color-danger)),
  accent: (bg: var(--ec-color-purple-1), border: var(--ec-color-accent)),
  chargeback: (bg: var(--ec-color-orange-1), border: var(--ec-color-orange-7)),
  accrual: (bg: var(--ec-color-aqua-1), border: var(--ec-color-aqua-5)),
  system: (bg: var(--ec-color-gray-1), border: var(--ec-color-gray-4)),
);

@mixin tag-type($type) {
  $colors: map-get($tag-colors, $type);
  background-color: map-get($colors, bg);
  border-color: map-get($colors, border);

  > .ec-icon:first-child {
    color: map-get($colors, border);
  }
}

@mixin tags {
  @include ul-reset;
  display: flex;

  &.is-wrapped {
    flex-wrap: wrap;
    margin-top: .25rem;

    > .tag {
      margin-bottom: .25rem 
    }
  }
}

@mixin tag() {
  @include truncate;

  background-color: var(--ec-color-gray-1);
  border: 2px solid var(--ec-color-gray-4);
  display: inline-flex;
  align-items: center;
  border-radius: calc(var(--ec-border-radius, .25rem) * 3);
  height: 1.5rem;
  line-height: 1.25rem;
  padding: 0 0.4375rem;
  vertical-align: top;

  > .ec-icon:first-child {
    margin-right: 0.1875rem;
  }

  .ec-icon {
    display: flex;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    width: auto;
    height: auto;
    min-width: 1em;
    justify-content: center;
  }

  &.is-inverted {
    background-color: var(--ec-background-color);
    border-color: var(--ec-background-color);
  }

  @each $type, $color in $tag-colors {
    &.is-#{$type} {
      @include tag-type($type);
    }
  }
}

@mixin tag-close-btn {
  background-color: transparent;
  border: 0;
  display: flex;
  align-items: center;
  padding: 0 .25rem;
  height: 100%;
  cursor: pointer;
  position: relative;

  &:hover,
  &:focus {
    &::before {
      display: block;
      content: '';
      position: absolute;
      left: .125rem;
      right: .125rem;
      top: .0625rem;
      bottom: .0625rem;
      background-color: rgba(26, 26, 35, .1);
      border-radius: .125rem;
    }
    outline: none;
  }
}

@mixin tag-condensed {
  border-radius: var(--ec-border-radius);
  border-width: 1px;
  padding: 0 .25rem;
  height: 1.125rem;
  line-height: 1.125rem;
  min-width: 1.125rem;
  justify-content: center;

  > .ec-icon:first-child {
    margin-right: .125rem;
  }
}