:host {
  --wcs-field-label-color: var(--wcs-semantic-color-text-secondary);
  --wcs-field-label-font-weight: var(--wcs-semantic-font-weight-medium);
  --wcs-field-label-font-size: var(--wcs-semantic-font-size-body-3);
  --wcs-field-label-line-height: var(--wcs-semantic-font-line-height-large);
  --wcs-field-content-color: var(--wcs-semantic-color-text-secondary);
  --wcs-field-content-font-weight: var(--wcs-semantic-font-weight-book);
  --wcs-field-content-font-size: var(--wcs-semantic-font-size-body-3);
  --wcs-field-content-line-height: var(--wcs-semantic-font-line-height-medium);
  --wcs-field-margin-top: var(--wcs-semantic-spacing-base);
  --wcs-field-margin-bottom: var(--wcs-semantic-spacing-large);
  --wcs-field-gap: var(--wcs-semantic-spacing-small);
  display: flex;
  flex-direction: column;
  margin-top: var(--wcs-field-margin-top);
  margin-bottom: var(--wcs-field-margin-bottom);
  gap: var(--wcs-field-gap);
}

::slotted([slot=label]) {
  color: var(--wcs-field-label-color);
  font-weight: var(--wcs-field-label-font-weight);
  font-size: var(--wcs-field-label-font-size);
  line-height: var(--wcs-field-label-line-height);
}

::slotted([slot=content]) {
  color: var(--wcs-field-content-color);
  font-weight: var(--wcs-field-content-font-weight);
  font-size: var(--wcs-field-content-font-size);
  line-height: var(--wcs-field-content-line-height);
}