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

.pill {
  font-size: 1rem;
  line-height: base(1);
  border: 0;
  display: inline-flex;
  vertical-align: middle;
  background: $color-light-gray;
  color: $color-dark-gray;
  border-radius: $style-radius-s;
  padding: 0 base(.25);
  padding-left: base(.0875 + .25);
  cursor: default;

  &: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: white;
    &.pill--has-action {
      &:hover {
        background: lighten($color-light-gray, 3%);
      }

      &:active {
        background: lighten($color-light-gray, 5%);
      }
    }
  }

  &--style-light {
    &.pill--has-action {
      &:hover {
        background: lighten($color-light-gray, 3%);
      }

      &:active {
        background: lighten($color-light-gray, 5%);
      }
    }
  }

  &--style-light-gray {
    background: $color-background-gray;
    color: $color-dark-gray;
  }

  &--style-warning {
    background: $color-yellow;
  }

  &--style-success {
    background: $color-green;
  }

  &--style-dark {
    background: $color-dark-gray;
    color: white;

    svg {
      @include color-svg(white);
    }

    &.pill--has-action {
      &:hover {
        background: lighten($color-dark-gray, 3%);
      }

      &:active {
        background: lighten($color-dark-gray, 5%);
      }
    }
  }
}
