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

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

:host {
  --border-color: #{globals.$ion-border-input-default};
  --color: #{globals.$ion-text-default};
  --highlight-color-valid: #{globals.$ion-text-success};
  --highlight-color-invalid: #{globals.$ion-semantics-danger-800};
  --highlight-color-focused: #{globals.ion-color(primary, base)};
  --placeholder-color: #{globals.$ion-text-subtlest};
  --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
// --------------------------------------------------

: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};
}

: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};
}

: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};
}

// Native Textarea
// --------------------------------------------------

:host .native-wrapper::after {
  @include globals.padding(0);
}

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

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

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

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

// 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 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));
}

:host([rows]:not([auto-grow])) .textarea-wrapper-inner {
  @include globals.padding(0, var(--padding-end), 0, var(--padding-start));
}

/**
 * Top and bottom padding are applied to ensure that text remains visible 
 * as it scrolls past the container boundaries. This provides a "sneak peek" 
 * of the content transitioning off-screen, mirroring native textarea behavior 
 * where text isn't immediately clipped or "glued" to the border at the 
 * scroll limits.
 */
:host([rows]:not([auto-grow])) .textarea-wrapper-inner .native-textarea {
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
}

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

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

.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 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 .error-text {
  color: globals.$ion-text-danger;
}

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

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

// 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-text-subtle;
}

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

/**
 * 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;
}

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

ion-icon {
  --color: globals.$ion-icon-subtlest;

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

// Start / End Slots
// ----------------------------------------------------------------

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

:host([rows]:not([auto-grow])) .start-slot-wrapper,
:host([rows]:not([auto-grow])) .end-slot-wrapper {
  @include globals.padding(var(--padding-top), 0, var(--padding-bottom), 0);
}

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

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

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

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

@media (any-hover: hover) {
  :host(:hover) {
    --border-color: #{globals.$ion-border-focus-default};
  }
}

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

:host(.textarea-disabled) {
  --color: #{globals.$ion-text-disabled};
  --background: #{globals.$ion-bg-input-disabled};
  --border-color: #{globals.$ion-border-disabled};
  --placeholder-color: #{globals.$ion-text-disabled};
}

: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-bg-input-read-only};
}