/**
 * @file
 * Main form item styles.
 */

.form-item {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-block: var(--size-4);
}

/* Form item description. */

.form-item__description {
  color: var(--gray-700);
  font-size: var(--font-size-sm);
  line-height: var(--leading-snug);
  margin-block: var(--size-2);
}

.form-item__description.is-disabled {
  color: var(--gray-600);
  cursor: default;
}

/* Error message (Inline form errors). */

.form-item__error-message {
  color: var(--red-900);
  font-size: var(--font-size-sm);
  font-weight: normal;
  line-height: var(--leading-snug);
  margin-block: var(--size-2);
}

.form-item--error-message {
  background-image: url("../images/inline-error.svg");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: var(--size-4) var(--size-4);
  color: var(--red-900);
  font-size: var(--font-size-sm);
  line-height: var(--leading-tight);
  margin-block: var(--size-2);
  -webkit-padding-start: var(--size-6);
  padding-inline-start: var(--size-6);
}

/* Custom label placement for editor filter format select. */

.form-item--editor-format .form-item__description,
.form-item--editor-format .form-item--error-message {
  flex: 0 1 100%;
  min-width: 1px;
}

.form-type--checkbox {
  flex-direction: row;
}