:host {
  /**
   * @prop --label-font-size: font-size of the label
   */
  --label-font-size: var(--joy-font-size-primary-400);
  font-weight: var(--joy-font-weight-bold);
  line-height: var(--joy-line-height-large);
  display: block;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  margin-bottom: var(--joy-core-spacing-2);
}

.joy-label {
  font-size: var(--label-font-size);
  font-family: var(--joy-font-family-base);
  color: var(--joy-color-text-title);
  text-align: left;
  margin-bottom: var(--joy-core-spacing-2);
}
.joy-label--small {
  --label-font-size: var(--joy-font-size-primary-300);
}
.joy-label--medium {
  --label-font-size: var(--joy-font-size-primary-400);
}
.joy-label--large {
  --label-font-size: var(--joy-font-size-primary-600);
}

.joy-label-required {
  margin-left: var(--joy-core-spacing-1);
  font-size: var(--label-font-size);
  line-height: 1;
}

.joy-label-optional {
  font-size: var(--joy-font-size-primary-300);
  font-weight: var(--joy-font-weight-normal);
  font-style: italic;
  color: var(--joy-color-neutral-40);
}