@import '../../styles/common';

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

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

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

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

.Button {
  @include recolor-icon(color('ink', 'lighter'));
  @include unstyled-button;
  display: block;
  height: $height;
  width: $height;
  margin-left: spacing(extra-tight);
  border-radius: 0 border-radius() border-radius() 0;

  &: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);
  }
}
