@import "./input.native";
@import "./input.md.vars";
@import "./input.md.solid.scss";
@import "./input.md.outline.scss";
@import "../item/item.md.vars.scss";

// Material Design Input
// --------------------------------------------------

:host {
  --border-width: 1px;
  --border-color: #{$item-md-border-color};
  --highlight-height: 2px;

  font-size: $input-md-font-size;
}

.input-clear-icon ion-icon {
  width: 22px;
  height: 22px;
}

// Input - Disabled
// ----------------------------------------------------------------
// The input, label, helper text, char counter and placeholder
// should use the same opacity and match the other form controls

:host(.input-disabled) {
  opacity: #{$input-md-disabled-opacity};
}

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

/**
 * If the input has a validity state, the
 * border and label should reflect that as a color.
 */
:host(.has-focus.ion-valid),
:host(.ion-touched.ion-invalid) {
  --border-color: var(--highlight-color);
}

.input-bottom .counter {
  letter-spacing: 0.0333333333em;
}

// Input Label
// ----------------------------------------------------------------

/**
 * When the input is focused the label should
 * take on the highlight color. This should
 * only apply to floating or stacked labels.
 */
:host(.input-label-placement-floating.has-focus) .label-text-wrapper,
:host(.input-label-placement-stacked.has-focus) .label-text-wrapper {
  color: var(--highlight-color);
}

:host(.has-focus.input-label-placement-floating.ion-valid) .label-text-wrapper,
:host(.input-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,
:host(.has-focus.input-label-placement-stacked.ion-valid) .label-text-wrapper,
:host(.input-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper {
  color: var(--highlight-color);
}

// Input Highlight
// ----------------------------------------------------------------

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

  position: absolute;

  width: 100%;
  height: var(--highlight-height);

  transform: scale(0);

  transition: transform 200ms;

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

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

/**
 * Adjust the highlight up by 1px
 * so it is not cut off by the
 * the item's line (if one is present).
 */
:host(.in-item) .input-highlight {
  @include position(null, null, 0, 0);
}

// Input Shape Rounded
// ----------------------------------------------------------------

:host(.input-shape-round) {
  --border-radius: 16px;
}

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

/**
 * Slotted buttons have a lot of default padding that can
 * cause them to look misaligned from other pieces such
 * as the control's label, especially when using a clear
 * fill. We also make them circular to ensure that non-
 * clear buttons and the focus/hover state on clear ones
 * don't look too crowded.
 */
::slotted(ion-button[slot="start"].button-has-icon-only),
::slotted(ion-button[slot="end"].button-has-icon-only) {
  --border-radius: 50%;
  --padding-start: 8px;
  --padding-end: 8px;
  --padding-top: 8px;
  --padding-bottom: 8px;

  aspect-ratio: 1;

  min-height: 40px;
}