/* ==================================
   #HELP TEXT
   ================================== */

/* Variables
   ========================================================================== */

$au-help-text-color: var(--au-gray-900) !default;
$au-help-text-secondary-color: var(--au-gray-700) !default;
$au-help-text-tertiary-color: var(--au-gray-700) !default;
$au-help-text-warning-color: var(--au-orange-700) !default;
$au-help-text-error-color: var(--au-red-700) !default;
$au-help-text-font-size: var(--au-small) !default;
$au-help-text-font-size-normal: var(--au-base) !default;
$au-help-text-font-size-large: var(--au-h6) !default;

/* Component
  ========================================================================== */

.au-c-help-text {
  @include au-font-size($au-help-text-font-size);
  display: block;
  color: $au-help-text-color;
  margin-top: $au-unit-tiny;
}

.au-c-help-text + .au-c-help-text {
  margin-top: 0;
}

/* Modifiers
  ========================================================================== */

.au-c-help-text--normal {
  @include au-font-size($au-help-text-font-size-normal);
}

.au-c-help-text--large {
  @include au-font-size($au-help-text-font-size-large);
}

.au-c-help-text--secondary {
  color: $au-help-text-secondary-color;
}

.au-c-help-text--tertiary {
  color: $au-help-text-tertiary-color;
  font-style: italic;
}

.au-c-help-text--error {
  color: $au-help-text-error-color;
  font-weight: var(--au-medium);
}

.au-c-help-text--warning {
  color: $au-help-text-warning-color;
  font-weight: var(--au-medium);
}