pico/scss/inline/_textarea.scss

/** SASS for the <textarea> HTML element
 *
 * Found in scss/components/_loading.scss#10: `#{\$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) {`
 * Found in scss/forms/_basics.scss#6: `$helper-previous-tags: "input, select, textarea, fieldset";`
 * Found in scss/forms/_basics.scss#21: `#{\$parent-selector} textarea {`
 * Found in scss/forms/_basics.scss#51: `#{\$parent-selector} textarea {`
 * Found in scss/forms/_basics.scss#152: `#{\$parent-selector} textarea {`
 * Found in scss/forms/_basics.scss#159: `#{\$parent-selector} textarea {`
 * Found in scss/forms/_basics.scss#168: `#{\$parent-selector} textarea {`
 * Found in scss/forms/_basics.scss#200: `#{\$parent-selector} :where(select, textarea):not([readonly]) {`
 * Found in scss/forms/_basics.scss#211: `#{\$parent-selector} :where(select, textarea):not([readonly]) {`
 * Found in scss/forms/_basics.scss#227: `#{\$parent-selector} :where(select, textarea):not([readonly]) {`
 * Found in scss/forms/_basics.scss#240: `#{\$parent-selector} textarea[disabled],`
 * Found in scss/forms/_basics.scss#244: `:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {`
 * Found in scss/forms/_basics.scss#254: `#{\$parent-selector} :where(input, select, textarea) {`
 * Found in scss/forms/_basics.scss#361: `#{\$parent-selector} :where(input, select, textarea) {`
 * Found in scss/forms/_basics.scss#373: `#{\$parent-selector} textarea::placeholder,`
 * Found in scss/forms/_basics.scss#374: `#{\$parent-selector} textarea::-webkit-input-placeholder,`
 * Found in scss/forms/_basics.scss#383: `#{\$parent-selector} textarea {`
 * Found in scss/forms/_basics.scss#425: `#{\$parent-selector} textarea {`
 * Found in scss/forms/_basics.scss#467: `> :where(input, select, textarea) {`
 * Found in scss/utilities/_accessibility.scss#46: `#{\$parent-selector} textarea,`
 *
 * Add your styles here
 */

@use "sass:map";
@use "../settings" as *;

@if map.get($modules, "utilities/accessibility") {
  // User interaction
  // Remove the tapping delay in IE 10
  #{$parent-selector} textarea {
    -ms-touch-action: manipulation;
  }
}

@if map.get($modules, "forms/basics") {
  #{$parent-selector} textarea {
    width: 100%;
    appearance: none;
    padding: var(#{$css-var-prefix}form-element-spacing-vertical)
      var(#{$css-var-prefix}form-element-spacing-horizontal);
  }

  // Commons styles
  #{$parent-selector} textarea {
    #{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-background-color);
    #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-border-color);
    #{$css-var-prefix}color: var(#{$css-var-prefix}form-element-color);
    #{$css-var-prefix}box-shadow: none;
    border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
    border-radius: var(#{$css-var-prefix}border-radius);
    outline: none;
    background-color: var(#{$css-var-prefix}background-color);
    box-shadow: var(#{$css-var-prefix}box-shadow);
    color: var(#{$css-var-prefix}color);
    font-weight: var(#{$css-var-prefix}font-weight);

    @if $enable-transitions {
      transition:
        background-color var(#{$css-var-prefix}transition),
        border-color var(#{$css-var-prefix}transition),
        color var(#{$css-var-prefix}transition),
        box-shadow var(#{$css-var-prefix}transition);
    }
  }

  #{$parent-selector} :where(select, textarea):not([readonly]) {
    &:is(:active, :focus) {
      #{$css-var-prefix}background-color: var(
        #{$css-var-prefix}form-element-active-background-color
      );
    }
  }

  // Active & Focus
  #{$parent-selector} :where(select, textarea):not([readonly]) {
    &:is(:active, :focus) {
      #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-active-border-color);
    }
  }

  // Focus
  #{$parent-selector} :where(select, textarea):not([readonly]) {
    &:focus {
      #{$css-var-prefix}box-shadow: 0
        0
        0
        var(#{$css-var-prefix}outline-width)
        var(#{$css-var-prefix}form-element-focus-color);
    }
  }

  // Disabled
  #{$parent-selector} textarea[disabled],
  #{$parent-selector}
    :where(fieldset[disabled])
    :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
    opacity: var(#{$css-var-prefix}form-element-disabled-opacity);
    pointer-events: none;
  }

  // Aria-invalid
  #{$parent-selector} :where(input, select, textarea) {
    &:not(
        [type="checkbox"],
        [type="radio"],
        [type="date"],
        [type="datetime-local"],
        [type="month"],
        [type="time"],
        [type="week"],
        [type="range"]
      ) {
      &[aria-invalid] {
        @if $enable-important {
          padding-right: calc(
            var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
          ) !important;
          padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
          padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
          padding-inline-end: calc(
            var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
          ) !important;
        } @else {
          padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
          padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
          padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
          padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
        }
        background-position: center right 0.75rem;
        background-size: 1rem auto;
        background-repeat: no-repeat;
      }

      &[aria-invalid="false"]:not(select) {
        background-image: var(#{$css-var-prefix}icon-valid);
      }

      &[aria-invalid="true"]:not(select) {
        background-image: var(#{$css-var-prefix}icon-invalid);
      }
    }

    &[aria-invalid="false"] {
      #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);

      &:is(:active, :focus) {
        @if $enable-important {
          #{$css-var-prefix}border-color: var(
            #{$css-var-prefix}form-element-valid-active-border-color
          ) !important;

          &:not([type="checkbox"], [type="radio"]) {
            #{$css-var-prefix}box-shadow: 0
              0
              0
              var(#{$css-var-prefix}outline-width)
              var(#{$css-var-prefix}form-element-valid-focus-color) !important;
          }
        } @else {
          #{$css-var-prefix}border-color: var(
            #{$css-var-prefix}form-element-valid-active-border-color
          );

          &:not([type="checkbox"], [type="radio"]) {
            #{$css-var-prefix}box-shadow: 0
              0
              0
              var(#{$css-var-prefix}outline-width)
              var(#{$css-var-prefix}form-element-valid-focus-color);
          }
        }
      }
    }

    &[aria-invalid="true"] {
      #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);

      &:is(:active, :focus) {
        @if $enable-important {
          #{$css-var-prefix}border-color: var(
            #{$css-var-prefix}form-element-invalid-active-border-color
          ) !important;

          &:not([type="checkbox"], [type="radio"]) {
            #{$css-var-prefix}box-shadow: 0
              0
              0
              var(#{$css-var-prefix}outline-width)
              var(#{$css-var-prefix}form-element-invalid-focus-color) !important;
          }
        } @else {
          #{$css-var-prefix}border-color: var(
            #{$css-var-prefix}form-element-invalid-active-border-color
          );

          &:not([type="checkbox"], [type="radio"]) {
            #{$css-var-prefix}box-shadow: 0
              0
              0
              var(#{$css-var-prefix}outline-width)
              var(#{$css-var-prefix}form-element-invalid-focus-color);
          }
        }
      }
    }
  }
  [dir="rtl"] {
    #{$parent-selector} :where(input, select, textarea) {
      &:not([type="checkbox"], [type="radio"]) {
        &:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
          background-position: center left 0.75rem;
        }
      }
    }
  }
  // Placeholder
  #{$parent-selector} textarea::placeholder,
  #{$parent-selector} textarea::-webkit-input-placeholder {
    color: var(#{$css-var-prefix}form-element-placeholder-color);
    opacity: 1;
  }

  // Margin bottom (Not Checkboxes and Radios)
  #{$parent-selector} textarea {
    margin-bottom: var(#{$css-var-prefix}spacing);
  }

  // Textarea
  #{$parent-selector} textarea {
    display: block;
    resize: vertical;

    &[aria-invalid] {
      @if $enable-important {
        #{$css-var-prefix}icon-height: calc(
          (1rem * var(#{$css-var-prefix}line-height)) +
            (var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
            (var(#{$css-var-prefix}border-width) * 2)
        );
        background-position: top right 0.75rem !important;
        background-size: 1rem var(#{$css-var-prefix}icon-height) !important;
      }
    }
  }

  // Styles for Input inside a label
  #{$parent-selector} label {
    > :where(input, select, textarea) {
      margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
    }
  }
}