textarea.ionic.scss

@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./textarea.common";
@use "./textarea.ionic.outline.scss" as outline;

// Ionic Textarea
// --------------------------------------------------

:host {
  --border-color: #{globals.$ion-primitives-neutral-500};
  --color: #{globals.$ion-text-default};
  --highlight-color-valid: #{globals.$ion-semantics-success-900};
  --highlight-color-invalid: #{globals.$ion-semantics-danger-800};
  --highlight-color-focused: #{globals.ion-color(primary, base)};
  --placeholder-color: #{globals.$ion-primitives-neutral-800};
  --placeholder-opacity: 1;
  --background: #{globals.$ion-bg-surface-default};
  --padding-bottom: #{globals.$ion-space-200};

  @include globals.typography(globals.$ion-body-md-regular);
}

:host(.ion-color) {
  --highlight-color-focused: #{globals.current-color(base)};
}

// Ionic Textarea Sizes
// --------------------------------------------------

// Setting height to 0 allows it to collapse in height
// instead of growing above the min height by default.
.textarea-wrapper-inner {
  height: 0;
}

:host(.textarea-size-small) .textarea-wrapper-inner {
  --padding-top: #{globals.$ion-space-200};
  --padding-end: #{globals.$ion-space-300};
  --padding-bottom: #{globals.$ion-space-200};
  --padding-start: #{globals.$ion-space-300};

  min-height: globals.$ion-scale-2800;
}

:host(.textarea-size-medium) .textarea-wrapper-inner {
  --padding-top: #{globals.$ion-space-300};
  --padding-end: #{globals.$ion-space-400};
  --padding-bottom: #{globals.$ion-space-300};
  --padding-start: #{globals.$ion-space-400};

  min-height: globals.$ion-scale-3400;
}

:host(.textarea-size-large) .textarea-wrapper-inner {
  --padding-top: #{globals.$ion-space-400};
  --padding-end: #{globals.$ion-space-500};
  --padding-bottom: #{globals.$ion-space-400};
  --padding-start: #{globals.$ion-space-500};

  min-height: globals.$ion-scale-3600;
}

// Ionic Textarea Shapes
// --------------------------------------------------

:host(.textarea-shape-soft) {
  --border-radius: #{globals.$ion-border-radius-200};
}

:host(.textarea-shape-round) {
  --border-radius: #{globals.$ion-border-radius-400};
}

:host(.textarea-shape-rectangular) {
  --border-radius: #{globals.$ion-border-radius-0};
}

// Textarea Wrapper
// ----------------------------------------------------------------

.textarea-wrapper {
  gap: globals.$ion-space-100;
}

.textarea-wrapper-inner {
  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
}

// Textarea Auto Grow
// ----------------------------------------------------------------

// The height should be auto only when auto-grow is enabled.
:host([auto-grow]) .textarea-wrapper-inner {
  height: auto;
}

// The min and max height should be inherited if auto-grow is enabled.
// This allows the textarea to grow and shrink as needed.
:host([auto-grow]) .native-wrapper {
  min-height: inherit;
  max-height: inherit;
}

// Textarea Label
// ----------------------------------------------------------------

.label-text-wrapper {
  @include globals.typography(globals.$ion-body-sm-medium);

  max-width: globals.$ion-scale-5000;

  transition: color globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive,
    transform globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive;

  color: globals.$ion-primitives-neutral-1000;
}

:host(.label-floating) .label-text-wrapper {
  @include globals.transform(none);
}

// Textarea Slotted Content
// ----------------------------------------------------------------

ion-icon {
  color: globals.$ion-primitives-neutral-800;

  font-size: globals.$ion-scale-400;
}

.start-slot-wrapper,
.end-slot-wrapper {
  margin-top: globals.$ion-space-050;
}

// Textarea Bottom Content
// ----------------------------------------------------------------

.textarea-bottom {
  @include globals.padding(globals.$ion-space-100, var(--padding-end), null, var(--padding-start));
  @include globals.typography(globals.$ion-body-sm-medium);
}

.textarea-bottom .helper-text,
.textarea-bottom .counter {
  color: globals.$ion-primitives-neutral-800;
}

:host(.has-focus.ion-valid) .helper-text {
  color: var(--highlight-color-valid);
}

:host(.has-focus.ion-valid),
:host(.ion-touched.ion-invalid) {
  --border-width: #{globals.$ion-border-size-025};
}

// Textarea Highlight
// ----------------------------------------------------------------

.textarea-highlight {
  @include globals.position(null, null, -1px, 0);

  position: absolute;

  width: 100%;
  height: globals.$ion-border-size-050;

  transform: scale(0);

  transition: transform globals.$ion-transition-time-200;

  background: var(--border-color);
}

// Textarea Focus
// ----------------------------------------------------------------

:host(.has-focus) {
  --border-color: #{globals.$ion-border-focus-default};
}

:host(.has-focus) .textarea-highlight {
  transform: scale(1);
}

// Textarea Hover
// ----------------------------------------------------------------

@media (any-hover: hover) {
  :host(:hover) {
    --border-color: #{globals.$ion-primitives-neutral-600};
  }
}

// Textarea - Disabled
// ----------------------------------------------------------------

:host(.textarea-disabled) {
  --color: #{globals.$ion-primitives-neutral-500};
  --background: #{globals.$ion-primitives-neutral-100};
  --border-color: #{globals.$ion-primitives-neutral-300};
  --placeholder-color: #{globals.$ion-primitives-neutral-500};
}

:host(.textarea-disabled:not(.ion-valid)) .textarea-bottom .helper-text,
:host(.textarea-disabled) .textarea-bottom .counter,
:host(.textarea-disabled) .label-text-wrapper {
  color: globals.$ion-text-disabled;
}

:host(.textarea-disabled.has-focus.ion-valid) {
  --border-color: rgba(#{globals.$ion-semantics-success-base-rgb}, 0.6);
}

:host(.textarea-disabled.ion-touched.ion-invalid) {
  --border-color: rgba(#{globals.$ion-semantics-danger-base-rgb}, 0.6);
}

:host(.textarea-disabled.ion-color) {
  --border-color: #{globals.current-color(base, 0.6)};
}

:host(.textarea-disabled.has-focus.ion-valid) .textarea-bottom .helper-text,
:host(.textarea-disabled.ion-touched.ion-invalid) .error-text {
  opacity: 0.6;
}

// Textarea - Readonly
// ----------------------------------------------------------------

:host(.textarea-readonly) {
  --background: #{globals.$ion-primitives-neutral-100};
}

/**
 * This makes the label sit above the textarea.
 */
:host(.label-floating) .label-text-wrapper {
  $form-control-label-stacked-scale: 0.75;

  /**
   * Label text should not extend
   * beyond the bounds of the textarea.
   */
  max-width: calc(100% / #{$form-control-label-stacked-scale});
}

.textarea-wrapper textarea {
  /**
   * When the floating label appears on top of the
   * textarea, we need to fade the textarea out so that the
   * label does not overlap with the placeholder.
   */
  transition: opacity globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive;
}

// Textarea Label Placement - Fixed
// ----------------------------------------------------------------

/**
 * Label is on the left of the textarea in LTR and
 * on the right in RTL. Label also has a fixed width.
 */
:host(.textarea-label-placement-fixed) .label-text {
  $text-wrapper-width: calc(globals.$ion-scale-2400 + globals.$ion-space-100);

  flex: 0 0 $text-wrapper-width;

  width: $text-wrapper-width;
  min-width: $text-wrapper-width;
  max-width: globals.$ion-scale-5000;
}