:host {
  display: block;
  position: relative;

  --fc-form-field-default-font-size: 12px;
  --fc-form-field-default-width: 180px;
}

:host([boldable]) {
  margin-bottom: 2px;
  background-color: var(--fc-gray-100);
  border-radius: 9px;
  padding: 8px;
  width: 100%;
}

label {
  display: flex;
  gap: 5px;
  font-size: var(--fc-form-field-label-font-size, 12px);
  margin-bottom: var(--fc-form-field-label-margin-bottom, 3px);
  margin-left: var(--fc-form-field-label-margin-left, 5px);
  color: var(--fc-color-text-primary);
  text-transform: var(--fc-form-field-label-text-transform, none);
}

label[required]::after {
  content: " *";
  color: var(--fc-red-600);
}

label > fc-chip {
  --fc-chip-height: 18px;
  --fc-chip-background: var(--fc-red-100);
  --fc-chip-font-size: 11px;
}

.label-error {
  margin-left: 3px;
  color: var(--fc-red-600);
}