@import '../../../scss/styles.scss';

.pill {
  font-size: 1rem;
  line-height: base(1);
  border: 0;
  display: inline-flex;
  vertical-align: middle;
  background: var(--theme-elevation-150);
  color: var(--theme-elevation-800);
  border-radius: $style-radius-s;
  padding: 0 base(.25);
  padding-left: base(.0875 + .25);
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &:active,
  &:focus {
    outline: none;
  }

  &--has-action {
    cursor: pointer;
    text-decoration: none;
  }

  &--has-icon {
    svg {
      display: block;
    }
  }

  &--align-icon-left {
    padding-left: base(.125);
  }

  &--align-icon-right {
    padding-right: base(.125);
  }

  &--style-white {
    background: var(--theme-elevation-0);

    &.pill--has-action {
      &:hover {
        background: var(--theme-elevation-100);
      }

      &:active {
        background: var(--theme-elevation-100);
      }
    }
  }

  &--style-light {
    &.pill--has-action {
      &:hover {
        background: var(--theme-elevation-100);
      }

      &:active {
        background: var(--theme-elevation-100);
      }
    }
  }

  &--style-light-gray {
    background: var(--theme-elevation-100);
    color: var(--theme-elevation-800);
  }

  &--style-warning {
    background: var(--theme-warning-500);
  }

  &--style-success {
    background: var(--theme-success-500);
    color: var(--color-base-800);
  }

  &--style-dark {
    background: var(--theme-elevation-800);
    color: var(--theme-elevation-0);

    svg {
      @include color-svg(var(--theme-elevation-0));
    }

    &.pill--has-action {
      &:hover {
        background: var(--theme-elevation-750);
      }

      &:active {
        background: var(--theme-elevation-700);
      }
    }
  }
}