@import '@bolt/core-v3.x';

/* ------------------------------------ *\
   Chips
\* ------------------------------------ */

// Custom element styles
@include bolt-repeat-rule(('bolt-chip', ':host')) {
  --c-bolt-chip-text-color: var(--m-bolt-text);
  --c-bolt-chip-bg-color: #{rgba(bolt-color(gray), 0.16)};
  display: inline;
  outline: none;
}

// Base Chip Styles
.c-bolt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bolt-spacing-x-xxsmall);
  font-family: var(--bolt-type-font-family-body);
  font-size: var(--bolt-type-font-size-xsmall);
  font-weight: var(--bolt-type-font-weight-regular);
  color: var(--c-bolt-chip-text-color);
  line-height: calc(
    var(--bolt-type-line-height-xsmall) *
      var(--bolt-type-line-height-multiplier-tight)
  );
  text-decoration: none;
  border-radius: bolt-border-radius(full);
  box-shadow: 0 0 0 1px rgba(bolt-color(gray, light), 0.2);
  background-color: var(--c-bolt-chip-bg-color);
  transition: color var(--bolt-transition),
    background-color var(--bolt-transition),
    text-decoration var(--bolt-transition);
}

.c-bolt-chip--border-radius-full {
  border-radius: bolt-border-radius(full);
}

.c-bolt-chip--border-radius-small {
  border-radius: bolt-border-radius(small);
}

.c-bolt-chip--border-radius-none {
  border-radius: 0;
}

$_bolt-chip-sizes: (xsmall, small, medium);

@each $size in $_bolt-chip-sizes {
  .c-bolt-chip--size-#{$size} {
    padding: calc(var(--bolt-spacing-y-#{$size}) / 2)
      var(--bolt-spacing-x-#{$size});
  }
}

.c-bolt-chip--link {
  --c-bolt-chip-text-color: var(--m-bolt-link);

  &:hover,
  &:focus {
    --c-bolt-chip-text-color: var(--m-bolt-headline);
    --c-bolt-chip-bg-color: #{rgba(bolt-color(gray), 0.08)};
    text-decoration: underline;
  }

  &:active,
  &:focus:active {
    --c-bolt-chip-text-color: var(--m-bolt-headline);
    text-decoration: none;
  }
}

.c-bolt-chip--color-error {
  --c-bolt-chip-text-color: var(--bolt-color-error-dark);
  --c-bolt-chip-bg-color: var(--bolt-color-error-light);
  box-shadow: 0 0 0 1px currentColor;

  &.c-bolt-chip--link {
    &:hover,
    &:focus {
      --c-bolt-chip-bg-color: var(--bolt-color-error-light);
    }
  }
}

.c-bolt-chip--color-warning {
  --c-bolt-chip-text-color: var(--bolt-color-black);
  --c-bolt-chip-bg-color: var(--bolt-color-warning-light);
  box-shadow: 0 0 0 1px var(--bolt-color-warning-dark);

  &.c-bolt-chip--link {
    &:hover,
    &:focus {
      --c-bolt-chip-bg-color: var(--bolt-color-warning-light);
    }
  }
}

.c-bolt-chip--color-success {
  --c-bolt-chip-text-color: var(--bolt-color-success-dark);
  --c-bolt-chip-bg-color: var(--bolt-color-success-light);
  box-shadow: 0 0 0 1px currentColor;

  &.c-bolt-chip--link {
    &:hover,
    &:focus {
      --c-bolt-chip-bg-color: var(--bolt-color-success-light);
    }
  }
}

.c-bolt-chip--color-navy {
  --c-bolt-chip-text-color: var(--bolt-color-white);
  --c-bolt-chip-bg-color: var(--bolt-color-navy);

  &.c-bolt-chip--link {
    &:hover,
    &:focus {
      --c-bolt-chip-bg-color: var(--bolt-color-navy-light);
    }
  }
}

.c-bolt-chip--color-teal {
  --c-bolt-chip-text-color: var(--bolt-color-white);
  --c-bolt-chip-bg-color: var(--bolt-color-teal-dark);

  &.c-bolt-chip--link {
    &:hover,
    &:focus {
      --c-bolt-chip-bg-color: var(--bolt-color-teal);
    }
  }
}

.c-bolt-chip--color-orange {
  --c-bolt-chip-text-color: var(--bolt-color-white);
  --c-bolt-chip-bg-color: var(--bolt-color-orange-dark);

  &.c-bolt-chip--link {
    &:hover,
    &:focus {
      --c-bolt-chip-bg-color: var(--bolt-color-orange);
    }
  }
}

.c-bolt-chip--color-yellow {
  --c-bolt-chip-text-color: var(--bolt-color-black);
  --c-bolt-chip-bg-color: var(--bolt-color-yellow);

  &.c-bolt-chip--link {
    &:hover,
    &:focus {
      --c-bolt-chip-bg-color: var(--bolt-color-yellow-light);
    }
  }
}

.c-bolt-chip--color-wine {
  --c-bolt-chip-text-color: var(--bolt-color-white);
  --c-bolt-chip-bg-color: var(--bolt-color-wine);

  &.c-bolt-chip--link {
    &:hover,
    &:focus {
      --c-bolt-chip-bg-color: var(--bolt-color-wine);
    }
  }
}

.c-bolt-chip--color-pink {
  --c-bolt-chip-text-color: var(--bolt-color-white);
  --c-bolt-chip-bg-color: var(--bolt-color-pink);

  &.c-bolt-chip--link {
    &:hover,
    &:focus {
      --c-bolt-chip-bg-color: var(--bolt-color-pink);
    }
  }
}

.c-bolt-chip--color-berry {
  --c-bolt-chip-text-color: var(--bolt-color-white);
  --c-bolt-chip-bg-color: var(--bolt-color-berry);

  &.c-bolt-chip--link {
    &:hover,
    &:focus {
      --c-bolt-chip-bg-color: var(--bolt-color-berry);
    }
  }
}

.c-bolt-chip--color-violet {
  --c-bolt-chip-text-color: var(--bolt-color-white);
  --c-bolt-chip-bg-color: var(--bolt-color-violet);

  &.c-bolt-chip--link {
    &:hover,
    &:focus {
      --c-bolt-chip-bg-color: var(--bolt-color-violet);
    }
  }
}

.c-bolt-chip--color-gray {
  --c-bolt-chip-text-color: var(--bolt-color-black);
  --c-bolt-chip-bg-color: var(--bolt-color-gray-light);

  &.c-bolt-chip--link {
    &:hover,
    &:focus {
      --c-bolt-chip-bg-color: var(--bolt-color-gray-light);
    }
  }
}

.c-bolt-chip__text {
  display: inline;
}

.c-bolt-chip__icon {
  transform: translateY(
    -10%
  ); // All translateY values are for countering subpixel alignment issues, do not remove them or re-order them.
  width: 1em;
  height: 1em;
  pointer-events: none;

  @include bolt-mq(small) {
    transform: translateY(-14%);
  }

  @include bolt-mq(medium) {
    transform: translateY(-12%);
  }
}

/* Safari 11+ */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
    .c-bolt-chip__icon {
      transform: translateY(-2%);
    }
  }
}

.c-bolt-chip__icon {
  @include bolt-mq(xlarge) {
    transform: translateY(-9%);
  }
}

.c-bolt-chip--icon-only {
  .c-bolt-chip__text {
    @include bolt-visuallyhidden;
  }
}