$error-color: $app-error;
$input-color: $app-primary-black;
$label-font: $font-stack-sans !default;
$help-color: $muted-secondary;
$warning-color: $color-casablanca-300;

.field-control {
  position: relative;
}

// Label

.field-control-label {
  display: block;
  font-size: 12px;
  color: var(--fw-label-color, $label-default);
  font-weight: $font-weight-600;
  margin-block-end: 4px;
  padding-inline-start: 2px;
  line-height: 20px;

  &.required::after {
    content: '*';
    position: relative;
    display: inline-block;
    inset-block-start: 2px;
    font-size: 14px;
    color: $app-error;
    padding-inline-start: 2px;
    font-weight: $font-weight-bold;
  }
}

// Hint text

.field-control-hint-text {
  font-family: $label-font;
  font-size: 12px;
  line-height: 20px;
  margin-block-start: 4px;
  margin-block-end: 0;
  color: var(--fw-hint-color, $help-color);
  position: inherit;
  display: block;
  padding-inline-start: 2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.field-control-error-text {
  font-family: $label-font;
  font-size: 12px;
  line-height: 20px;
  margin-block-start: 4px;
  margin-block-end: 0;
  color: var(--fw-error-color, $app-error);
  position: inherit;
  display: block;
  padding-inline-start: 2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.field-control-warning-text {
  font-family: $label-font;
  font-size: 12px;
  line-height: 20px;
  margin-block-start: 4px;
  margin-block-end: 0;
  color: var(--fw-warning-color, $warning-color);
  position: inherit;
  display: block;
  padding-inline-start: 2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
