@use "../../foundations/ionic.vars.scss" as tokens;
@import "./input";
@import "./input.ionic.vars";
@import "./input.ionic.outline.scss";

// Ionic Input
// --------------------------------------------------

:host {
  --border-width: #{$ionic-border-size-small};
  --border-color: #{$ionic-color-neutral-300};
  --highlight-color-valid: #{$ionic-color-success-400};
  --highlight-color-invalid: #{$ionic-color-error-400};
  --text-color-invalid: #{$ionic-color-error-600};
}

// Ionic Input Sizes
// --------------------------------------------------

:host(.input-size-large) .native-wrapper {
  min-height: 48px;
}

// Input Clear Button
// ----------------------------------------------------------------

.input-clear-icon {
  width: 16px;
  height: 16px;

  color: #{$ionic-color-neutral-500};
}

.input-clear-icon.ion-focused {
  border-radius: #{$ionic-border-radius-rounded-small};

  outline: #{$ionic-border-size-medium} solid #{$ionic-color-primary-100};

  opacity: 1;
}

.input-clear-icon ion-icon {
  width: 100%;
  height: 100%;
}

/**
 * The clear button should be visible if the native input
 * OR any other interactive elements in the component (the
 * clear button, slotted buttons, etc.) are focused. If we
 * only looked at the native input, tabbing to the clear
 * button would immediately hide it.
 *
 * Note that the clear button also requires the native input
 * to have any value, but this is not specific to the ionic
 * theme, so it is handled elsewhere.
 */
:host(:not(:focus-within)) .input-clear-icon {
  display: none;
}

// Ionic Input Shapes
// --------------------------------------------------

:host(.input-shape-round) {
  --border-radius: #{$ionic-border-radius-rounded-full};
}

// Input Bottom Content
// ----------------------------------------------------------------

.input-bottom {
  @include padding-horizontal(0, 0);

  // TODO(FW-6112): Update it to `$ionic-font-weight-medium` when it's available
  font-weight: var(--ionic-font-weight-medium, 500);
}

// Input Hint Text
// ----------------------------------------------------------------

.input-bottom .helper-text {
  color: tokens.$ionic-color-neutral-600;
}

:host(.has-focus.ion-valid) .helper-text {
  color: #{tokens.$ionic-color-success-800};
}

:host(.ion-touched.ion-invalid) .error-text {
  color: var(--text-color-invalid);
}

// Input Hover
// ----------------------------------------------------------------

@media (any-hover: hover) {
  :host(:hover) {
    --border-color: #{tokens.$ionic-color-neutral-600};
  }
}

// Input - Disabled
// ----------------------------------------------------------------

:host(.input-disabled) {
  // color for the text within the input
  --color: #{tokens.$ionic-color-neutral-400};
  --background: #{tokens.$ionic-color-neutral-10};

  pointer-events: none;
}

:host(.input-disabled:not(.ion-valid)) .input-bottom .helper-text,
:host(.input-disabled) .input-bottom .counter,
:host(.input-disabled) .label-text-wrapper {
  color: tokens.$ionic-color-neutral-400;
}

:host(.input-disabled.has-focus.ion-valid) {
  // TODO(FW-6112): Update to use the correct color token when rgb tokens are available
  --border-color: rgba(var(--ionic-color-success-400-rgb, 82, 165, 24), 0.6);
}

:host(.input-disabled.ion-touched.ion-invalid) {
  // TODO(FW-6112): Update to use the correct color token when rgb tokens are available
  --border-color: rgba(var(--ionic-color-error-400-rgb, 247, 44, 44), 0.6);
}

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

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