.pill {
  display: flex;
  align-items: center;
  width: fit-content;
  border-radius: $border-radius-large;
  font-size: $text-smallest;
  cursor: default;

  .pill-title {
    color: $color-white;
    margin: 0px $base-spacing-quad;
    padding: $base-spacing-double 0px;
  }

  &.removeable {
    position: relative;

    .icon-section {
      display: none;
      color: $color-white;
    }

    &:hover {
      cursor: pointer;
      color: $color-white;

      .icon-section {
        display: inline-block;
        margin-right: 10px;
      }

      .pill-title {
        margin-left: $base-spacing-double;
        margin-right: 0px;
      }
    }
  }

  &.red {
    background-color: $color-red;

    &:hover {
      background-color: $color-red-hover;
    }

    &.active {
      background-color: $color-red-active;
    }
  }

  &.blue {
    background-color: $color-blue;

    &:hover {
      background-color: $color-blue-hover;
    }

    &.active {
      background-color: $color-blue-active;
    }
  }

  &.black {
    background-color: $color-black;
    color: $color-white;

    &:hover {
      background-color: lighten($color-black, 5%);
    }

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

.user-pill {
  position: relative;

  .pill-title {
    padding: 0px;
    margin-left: 10px;
  }

  &.removeable {

    &:hover {
      .icon-section {
        display: inline-block;
        margin-right: $base-spacing;
      }

      .pill-title {
        margin-left: $base-spacing-double;
      }
    }
  }
}