/**
 * @file
 * Description component styles.
 */

.c--description {
  /* Base description styles */
  display: block;
  margin-top: var(--description-margin-top, 0.25rem);
  font-size: var(--description-font-size, 0.875em);
  color: var(--description-color, #6c757d);
  line-height: var(--description-line-height, 1.5);
}

/* When used with form controls */
.form-item .c--description {
  margin-top: var(--description-form-item-margin-top, 0.25rem);
}

/* Visually hidden but accessible to screen readers */
.c--description.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}