/**
 * Mixin for fluid type.
 * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px);
 */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:host {
  display: block;
}
span.hy-badge {
  border-radius: 15px;
  padding: 0.25rem 1rem;
  text-align: center;
  color: black;
  font-weight: bold;
  font-family: var(--main-font-family);
  font-size: 0.6rem;
}
span.hy-badge.primary {
  background-color: var(--brand-main-light);
  color: white;
}
span.hy-badge.warn {
  background-color: var(--additional-red-dark);
  color: white;
}
span.hy-badge.success {
  background-color: var(--additional-green-dark);
  color: white;
}
span.hy-badge.disabled {
  background-color: var(--grayscale-medium-dark);
  color: black;
}