/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

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

::placeholder {
  color: var(--color--gray-60);
}

/**
 * General form item.
 */

.form-item {
  margin-block: var(--sp1);
}

.form-item__label--multiple-value-form {
  margin-block: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/**
 * When a table row or a container-inline has a single form item, prevent it
 * from adding unnecessary extra spacing.
 * If it has multiple form items, allow spacing between them, overriding core.
 */

tr .form-item,
.container-inline .form-item {
  margin-block: var(--sp0-5);
}

/**
 * Form element label.
 */

.form-item__label {
  display: block;
  margin-block: var(--sp0-5);
}

.container-inline .form-item__label {
  margin-inline-end: 1em;
}

.form-item__label--multiple-value-form {
  margin-block: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.form-item__label[for] {
  cursor: pointer;
}

.form-item__label.option {
  display: inline;
  font-weight: normal;
}

/* Label states. */

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

/* Form required star icon */

.form-item__label.form-required::after,
.fieldset__label.form-required::after,
.required-mark::after {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline: 0.3em;
  content: "";
  vertical-align: text-top;
  /* Use a background image to prevent screen readers from announcing the text. */
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 0.5rem 0.5rem;
}

@media screen and (-ms-high-contrast: active) {
  .form-item__label.form-required::after,
  .fieldset__label.form-required::after,
  .required-mark::after {
    background-image: url("");
  }
}

/**
 * Form item description.
 */

.form-item__description {
  margin-block: var(--sp0-5);
  max-width: 60ch;
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

.field-multiple-table + .form-item__description {
  margin-block-start: 0;
}

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

.form-item--error-message {
  margin-block: var(--sp0-5);
  padding-inline-start: var(--sp1-5);
  color: var(--color--red);
  background-image: url("");
  background-repeat: no-repeat;
  background-position: left top; /* LTR */
  background-size: var(--sp1) var(--sp1);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

@media screen and (-ms-high-contrast: active) {
  .form-item--error-message {
    background-image: url("");
  }
}

[dir="rtl"] .form-item--error-message {
  background-position: right top;
}

/**
 * Form actions.
 */

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-block: var(--sp0-5);
}

.form-actions .button,
.form-actions .action-link {
  margin-block: var(--sp0-5);
}

.form-actions .ajax-progress--throbber {
  align-self: center;
}

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

.form-item--editor-format {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
}

.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix,
.form-item--editor-format .form-element--editor-format {
  min-width: 1px;
}

.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix {
  margin-inline-end: var(--sp0-5);
}

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

/**
 * Inline forms.
 */

.form--inline > * {
  display: inline-block;
  margin-top: var(--sp0-5);
  margin-bottom: 0;
  vertical-align: top; /* Ensure proper alignment if description is present. */
}

.form--inline .form-item__label {
  margin: 0;
}

.form--inline .form-actions {
  margin-top: var(--sp1-5);
}