form--text.pcss.css

/**
 * @file
 * Text and textarea input elements.
 */

.form-element {
  box-sizing: border-box;
  max-width: 100%;
  min-height: calc((var(--input-padding-vertical) * 2) + var(--input-line-height));
  padding-block: calc(var(--input-padding-vertical) - 1px);
  padding-inline: var(--input-padding-horizontal);
  color: var(--gin-color-text);
  border: 1px solid var(--gin-border-color-form-element);
  border-radius: var(--gin-border-m);
  background-color: var(--gin-bg-input);
  font-size: var(--input-font-size);
  line-height: var(--input-line-height);
  appearance: none; /* Being able to control inner box shadow on iOS. */

  /**
   * States.
   */
  &:active {
    border-color: var(--input--focus-border-color);
  }

  &:hover {
    border-color: var(--gin-color-text);
    box-shadow: inset 0 0 0 1px var(--gin-color-text);
  }

  &.error {
    border-width: var(--input--error-border-size);
    border-color: var(--input--error-border-color);

    &:hover {
      box-shadow: none;
    }
  }

  &[disabled] {
    &,
    &:hover {
      cursor: not-allowed;
      color: var(--gin-color-disabled);
      border-color: var(--gin-color-disabled-border);
      background-color: var(--gin-color-disabled-bg) !important;
      box-shadow: none;
      /* https://stackoverflow.com/q/262158#answer-23511280 */
      -webkit-text-fill-color: var(--input--disabled-fg-color);
    }
  }

  .gin--dark-mode 

  @media (prefers-reduced-motion: no-preference) {
    transition: var(--gin-transition);
  }

  /**
   * Improve form element usability on narrow devices.
   */
  @media screen and (max-width: 600px) {
    /* Number, date and time are skipped here */
    float: none;
    width: 100%;
    margin-block-start: 0.75rem;
    margin-inline: 0;

    &:first-child,
    .form-item__label + 
  }
}

.form-element--small,
.form-element--extrasmall {
  border-radius: var(--gin-border-s);
  font-size: var(--gin-font-size-s);
  line-height: 1.5;
}

.form-textarea-wrapper {
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, .15); */
  border-radius: var(--gin-border-m);

  textarea {
    max-width: 100%;
  }
}

.no-touchevents .form-element--extrasmall,
.no-touchevents .form-element[name$="][_weight]"] {
  min-height: calc(((var(--input--extrasmall-padding-vertical) + var(--input-border-size)) * 2) + var(--input--extrasmall-line-height)); /* iOS. */
  padding: var(--input--extrasmall-padding-vertical) var(--input--extrasmall-padding-horizontal);
  font-size: var(--input--extrasmall-font-size);
  line-height: var(--input--extrasmall-line-height);
}

/**
 * Override normalize.css's search appearance.
 */
.form-element--type-search[type="search"] {
  appearance: none;
  box-sizing: border-box;
}

/**
 * Fix minor things for specific types.
 */
.form-element--type-date,
.form-element--type-time {
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
  vertical-align: -webkit-baseline-middle; /* Prevent iOS input jump while filling. */
}

.form-element--type-date {
  min-width: 9.5rem; /* Prevent input width change while filling. */
}

.form-element--type-time {
  min-width: 7.5rem; /* Prevent input width change while filling. */
}

/**
 * Better upload button alignment for Chrome.
 */
.form-element--type-file::-webkit-file-upload-button {
  vertical-align: top;
}

.form-element--type-textarea.error {
  & + .cke {
    border-color: var(--input--error-border-color);
  }

  & + .ck-editor > .ck-editor__main {
    border: var(--input--error-border-size) solid var(--input--error-border-color);
  }
}

.password-field {
  width: 100%;
}