/**
 * @file
 * Style components to look like GCDS.
 *
 * These styles duplicate the look of components provided by GCDS in instances
 * where the component cannot duplicate Drupal functionality. Periodically
 * review them to check if GCDS has new props or components that will work.
 */

/* Autocomplete form */
.js-form-type-entity-autocomplete {
  width: 100%;
  max-width: 75ch;
  transition: color 0.15s ease-in-out;
  color: var(--gcds-input-default-text);
  font: var(--gcds-input-font);
}

.js-form-type-entity-autocomplete:focus-within {
  color: var(--gcds-input-focus-text);
}

.js-form-type-entity-autocomplete label,
.js-form-type-entity-autocomplete input,
.js-form-type-entity-autocomplete .description {
  display: block;
  max-width: 100%;
}

.js-form-type-entity-autocomplete label {
  margin: var(--gcds-label-margin) !important;
  cursor: pointer;
  font: var(--gcds-label-font-desktop);
}

.js-form-type-entity-autocomplete input {
  width: 100%;
  min-width: var(--gcds-input-min-width-and-height);
  min-height: var(--gcds-input-min-width-and-height);
  margin: var(--gcds-input-margin) !important;
  padding: var(--gcds-input-padding) !important;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    outline 0.15s ease-in-out;
  color: var(--gcds-input-default-text);
  border: var(--gcds-input-border-width) solid;
  border-radius: var(--gcds-input-border-radius);
  background-color: var(--gcds-input-default-background);
  font: inherit !important;
}

/* Show outline on input when element is active. */
.js-form-type-entity-autocomplete:focus-within input {
  border-color: var(--gcds-input-focus-text);
  outline: var(--gcds-input-focus-text) var(--gcds-link-focus-outline-width)
    solid;
  outline-offset: var(--gcds-link-focus-outline-offset);
}

.js-form-type-entity-autocomplete .description {
  margin: var(--gcds-hint-margin);
  font: var(--gcds-input-font);
}

/* Prevent auto-complete icon from touching the edge of the input field. */
.js input.form-autocomplete {
  background-position: 99% center;
}

@media only screen and (max-width: 47em) {
  .js-form-type-entity-autocomplete label {
    font: var(--gcds-label-font-mobile);
  }
  .js-form-type-entity-autocomplete .description {
    font: var(--gcds-text-size-body-mobile);
  }
}
/* /Autocomplete form */