:host {
  --r-hint--text--flex: 1;
}

:host([variant=information]) {
  --r-hint--color: var(--r-text-soft, #686868);
}

:host([variant=success]),
:host([success]) {
  --r-hint--color: var(--r-status-success-regular, #298535);
}

:host([variant=warning]),
:host([warning]) {
  --r-hint--color: var(--r-status-warning-strong, #89411a);
}

:host([variant=error]),
:host([invalid]) {
  --r-hint--color: var(--r-status-error-regular, #b00c15);
}

:host([icon-position=end]) {
  --r-hint--flex-direction: row-reverse;
}

:host {
  display: block;
}

.r-hint {
  display: var(--r-hint--display, flex);
  flex-direction: var(--r-hint--flex-direction, row);
  gap: var(--r-hint--gap, var(--r-spacing-050, 0.5rem));
  font-family: var(--r-hint--font-family, var(--r-font-family-text, system-ui));
  font-size: var(--r-hint--font-size, var(--r-font-size-300, 0.875rem));
  line-height: var(--r-hint--line-height, var(--r-line-height-m, 1.5));
  color: var(--r-hint--color, var(--r-text-soft, #686868));
  font-weight: var(--r-hint--font-weight, var(--r-font-weight-regular, 400));
  margin-top: var(--r-hint--margin-top, 0);
  margin-bottom: var(--r-hint--margin-bottom, 0);
}
.r-hint--icon {
  display: var(--r-hint--icon--display, flex);
  align-items: var(--r-hint--icon--align-items, start);
  min-width: var(--r-hint--icon--min-width, 1rem);
  margin-top: var(--r-hint--icon--margin-top, 0.15rem);
}
.r-hint--text {
  flex: var(--r-hint--text--flex, 1);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}