@use "colors";
@use "variables";

/* =Labels
-----------------------------------------------------------------------------*/
.label,
.badge {
  background: var(--ply-bg-muted, colors.$color-gray);
  font-size: variables.$font-size-small;
  display: inline-block;
  line-height: 1;
  padding: 4px 7px 3px 7px;
  color: var(--ply-color-body, colors.$color-black);
  text-align: center;
  font-weight: normal;
  text-transform: uppercase;
}
.label {
  border-radius: var(--ply-label-radius);
}
.label-outline {
  background: none;
  border: 1px solid var(--ply-color-body, colors.$color-black);
  padding: 3px 6px 2px 6px;
}
.badge {
  border-radius: var(--ply-badge-radius);
}
.badge-small {
  font-size: variables.$font-size-smaller;
  padding: 3px 5px;
}
.label-black,
.label-blue,
.label-red,
.label-green,
.badge-black,
.badge-blue,
.badge-red,
.badge-green {
  color: colors.$color-white;
}
.label-black,
.badge-black {
  background: colors.$color-black;
}
.label-blue,
.badge-blue {
  background: colors.$color-blue;
}
.label-red,
.badge-red {
  background: colors.$color-red;
}
.label-green,
.badge-green {
  background: colors.$color-green;
}
.label-yellow,
.badge-yellow {
  background: colors.$color-yellow;
}
.label-white,
.badge-white {
  background: colors.$color-white;
  color: var(--ply-color-text-inverse, #161616);
}
.label-black,
.label-blue,
.label-red,
.label-green,
.label-yellow,
.label-white {
  &.label-outline {
    background: none;
    color: var(--ply-color-body, colors.$color-black);
  }
}
.label-blue {
  &.label-outline {
    border-color: colors.$color-blue;
    color: colors.$color-blue;
  }
}
.label-red {
  &.label-outline {
    border-color: colors.$color-red;
    color: colors.$color-red;
  }
}
.label-green {
  &.label-outline {
    border-color: colors.$color-green;
    color: colors.$color-green;
  }
}
.label-yellow {
  &.label-outline {
    border-color: colors.$color-yellow;
    color: colors.$color-yellow;
  }
}
.label-white {
  &.label-outline {
    border-color: colors.$color-white;
    color: colors.$color-white;
  }
}