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

.Polaris-Tag {
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  min-height: $height;
  padding-left: spacing(tight);
  background-color: color('sky');
  border-radius: border-radius();
  color: color('ink');
  @include text-style-label;

  &.Polaris-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');
  }
}

.Polaris-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);
  }
}