/**
  @prop --fw-label-padding-vertical: Top - bottom padding for label
  @prop --fw-label-padding-horizontal: Left - Right padding if direction is left-to-right, and Right - Left padding if direction is right-to-left for label
  
*/

:host {
  --fw-label-padding-vertical: 5px;
  --fw-label-padding-horizontal: 8px;
}

.label {
  color: #6f7c87;
  border: 1px solid #dadfe3;
  background-color: $color-milk;
  font-weight: 600;
  line-height: $line-height-label;
  font-size: $font-size-12;
  padding-block: var(--fw-label-padding-vertical);
  padding-inline: var(--fw-label-padding-horizontal);
  display: inline-block;
  border-radius: 4px;

  &--blue {
    background-color: $color-azure-50;
    color: $color-azure-800;
    border: 1px solid $color-azure-100;
  }

  &--red {
    background-color: $color-persimmon-50;
    color: $color-persimmon-800;
    border: 1px solid $color-persimmon-100;
  }

  &--green {
    background-color: $color-jungle-50;
    color: $color-jungle-800;
    border: 1px solid $color-jungle-100;
  }

  &--yellow {
    background-color: $color-casablanca-50;
    color: $color-casablanca-700;
    border: 1px solid $color-casablanca-100;
  }

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