$height: rem(28px);
$icon-size: rem(16px);

.Biblio-Tag {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  min-height: $height;
  padding-left: spacing(tight);
  background-color: color('sky');
  border-radius: border-radius();
  color: color('ink');

  &.Biblio-Tag--disabled {
    @include recolor-icon(color('ink', 'lightest'));
    transition: none;
    background: linear-gradient(
      to bottom,
      color('sky', 'light'),
      color('sky', 'light')
    );
    color: color('ink', 'lightest');
  }

  .Biblio-Tag__TagText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.Biblio-Tag__Button {
  @include recolor-icon(color('ink', 'lighter'));
  @include unstyled-button;
  display: block;
  height: $height;
  width: $height;
  margin-left: spacing(extra-tight);
  will-change: background, fill;
  transition-property: background, fill;
  transition-duration: duration();
  transition-timing-function: easing();

  &:hover,
  &:focus,
  &:active {
    @include recolor-icon(color('ink'));
    background: color('sky', 'dark');
  }

  &:disabled {
    @include recolor-icon(color('ink', 'lightest'));
    cursor: default;
    pointer-events: none;
  }

  &:active {
    background: rgba(color('ink', 'lightest'), 0.6);
  }
}