@use "../../themes/native/native.globals" as globals;
@use "./textarea.common";
@import "./textarea.vars";

// Textarea - iOS and Material Design
// --------------------------------------------------

:host {
  --placeholder-opacity: #{$placeholder-opacity};
  --padding-bottom: #{$textarea-padding-bottom};
  --highlight-color-focused: #{globals.ion-color(primary, base)};
  --highlight-color-valid: #{globals.ion-color(success, base)};
  --highlight-color-invalid: #{globals.ion-color(danger, base)};

  min-height: 44px;

  font-family: globals.$font-family-base;

  z-index: globals.$z-index-item-input;
}

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

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

/**
 * Since the label sits on top of the element,
 * the component needs to be taller otherwise the
 * label will appear too close to the textarea text.
 * Also, floating and stacked labels should not
 * push the label down since it it
 * sits on top of the textarea.
 */
:host(.textarea-label-placement-floating),
:host(.textarea-label-placement-stacked) {
  --padding-top: 0px;

  min-height: 56px;
}

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

// This is required for auto-grow to work.
.native-wrapper {
  min-height: inherit;
  max-height: inherit;
}

.native-wrapper textarea {
  @include globals.padding(var(--padding-top), 0px, var(--padding-bottom), 0px);
}

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

.textarea-bottom {
  /**
   * The bottom content should take on the start and end
   * padding so it is always aligned with either the label
   * or the start of the textarea.
   */
  @include globals.padding(5px, var(--padding-end), 0, var(--padding-start));

  font-size: globals.dynamic-font(12px);
}

// Textarea Hint Text
// ----------------------------------------------------------------

.textarea-bottom .helper-text {
  color: globals.$text-color-step-300;
}

// Textarea Max Length Counter
// ----------------------------------------------------------------

.textarea-bottom .counter {
  color: globals.$text-color-step-300;

  padding-inline-start: 16px;
}

// Textarea Label Placement - Start
// ----------------------------------------------------------------

:host(.textarea-label-placement-start) .label-text-wrapper {
  /**
   * The margin between the label and
   * the textarea should be on the end
   * when the label sits at the start.
   */
  @include globals.margin(0, globals.$form-control-label-margin, 0, 0);
}

// Textarea Label Placement - End
// ----------------------------------------------------------------

/**
 * The margin between the label and
 * the textarea should be on the start
 * when the label sits at the end.
 */
:host(.textarea-label-placement-end) .label-text-wrapper {
  @include globals.margin(0, 0, 0, globals.$form-control-label-margin);
}

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

:host(.textarea-label-placement-fixed) .label-text-wrapper {
  /**
   * The margin between the label and
   * the textarea should be on the end
   * when the label sits at the start.
   */
  @include globals.margin(0, globals.$form-control-label-margin, 0, 0);
}

// Textarea Label Placement - Stacked & Floating
// ----------------------------------------------------------------

/**
 * Ensures the textarea does not
 * overlap the label.
 */
:host(.textarea-label-placement-stacked) textarea,
:host(.textarea-label-placement-floating) textarea,
:host(.textarea-label-placement-stacked[auto-grow]) .native-wrapper::after,
:host(.textarea-label-placement-floating[auto-grow]) .native-wrapper::after {
  @include globals.margin(8px, 0px, 0px, 0px);
}

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

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

:host(.textarea-label-placement-stacked) ::slotted([slot="start"]),
:host(.textarea-label-placement-stacked) ::slotted([slot="end"]),
:host(.textarea-label-placement-floating) ::slotted([slot="start"]),
:host(.textarea-label-placement-floating) ::slotted([slot="end"]) {
  margin-top: 8px;
}

::slotted([slot="start"]),
::slotted([slot="end"]) {
  margin-top: 0; // ensure slot content is vertically aligned with label
}

::slotted([slot="start"]:last-of-type) {
  margin-inline-end: globals.$form-control-label-margin;
  margin-inline-start: 0;
}

::slotted([slot="end"]:first-of-type) {
  margin-inline-start: globals.$form-control-label-margin;
  margin-inline-end: 0;
}

/**
 * This makes the label sit above the textarea.
 */
:host(.label-floating) .label-text-wrapper {
  @include transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));

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

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

.label-text-wrapper {
  /**
   * Label text should not extend
   * beyond the bounds of the textarea.
   * However, we do not set the max
   * width to 100% because then
   * only the label would show and users
   * would not be able to see what they are typing.
   */
  max-width: 200px;

  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.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 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

// 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 {
  flex: 0 0 100px;

  width: 100px;
  min-width: 100px;
  max-width: 200px;
}