/**
  @prop --fw-pill-color: Pill color
  @prop --fw-pill-background-color: Pill background color
  @prop --fw-pill-padding: Pill padding
  @prop --fw-pill-border: Pill border
  @prop --fw-pill-border-radius: Pill border radius
*/

:host {
  --fw-pill-border: none;
  --fw-pill-border-radius: 16px;
  --fw-pill-padding: 5px 12px 5px 8px;
  --fw-pill-color: #{$color-smoke-700};
  --fw-pill-background-color: #{$color-smoke-50};
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fw-pill-color);
  background-color: var(--fw-pill-background-color);
  padding: var(--fw-pill-padding);
  border: var(--fw-pill-border);
  border-radius: var(--fw-pill-border-radius);
  font-weight: 600;
  font-size: $font-size-12;
  line-height: $line-height-label;

  ::slotted(*) {
    height: 14px;
    width: 14px;
  }

  .pill-icon {
    height: 14px;
    width: 14px;
    margin-inline-end: 6px;
  }

  ::slotted(fw-icon) {
    --fw-icon-size: 14px;
    --fw-icon-color: #{$color-smoke-700};
  }

  &--blue {
    background-color: $color-azure-50;
    color: $color-azure-800;

    ::slotted(fw-icon) {
      --fw-icon-color: #{$color-azure-800};
    }
  }

  &--red {
    background-color: $color-persimmon-50;
    color: $color-persimmon-800;

    ::slotted(fw-icon) {
      --fw-icon-color: #{$color-persimmon-800};
    }
  }

  &--green {
    background-color: $color-jungle-50;
    color: $color-jungle-800;

    ::slotted(fw-icon) {
      --fw-icon-color: #{$color-jungle-800};
    }
  }

  &--yellow {
    background-color: $color-casablanca-50;
    color: $color-casablanca-700;

    ::slotted(fw-icon) {
      --fw-icon-color: #{$color-casablanca-700};
    }
  }

  &--grey {
    background-color: $color-smoke-50;
    color: $color-smoke-700;

    ::slotted(fw-icon) {
      --fw-icon-color: #{$color-smoke-700};
    }
  }
}
