@import "./input";
@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};

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

// TODO FW-2764 Remove this
:host(.legacy-input) {
  --padding-top: #{$input-md-padding-top};
  --padding-end: #{$input-md-padding-end};
  --padding-bottom: #{$input-md-padding-bottom};
  --padding-start: #{$input-md-padding-start};
}

:host-context(.item-label-stacked),
:host-context(.item-label-floating) {
  --padding-top: 8px;
  --padding-bottom: 8px;
  --padding-start: 0;
}

.input-clear-icon {
  @include svg-background-image($input-md-input-clear-icon-svg);

  width: $input-md-input-clear-icon-width;
  height: $input-md-input-clear-icon-width;

  background-size: $input-md-input-clear-icon-size;
}

/**
 * The input with no fill in item should
 * have start padding applied on the input
 * not the item.
 */
:host(.in-full-item:not(.input-fill-outline)),
:host(.in-full-item:not(.input-fill-solid)) {
  --padding-start: #{$item-md-padding-start};
}

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

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

// Input Wrapper
// ----------------------------------------------------------------

.input-wrapper {
  min-height: 56px;
}

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

/**
 * When the input is focused the label should
 * take on the highlight color.
 */
:host(.has-focus) .label-text-wrapper {
  color: var(--highlight-color);
}

:host(.ion-touched.ion-valid) .label-text-wrapper,
:host(.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: 2px;

  transform: scale(0);

  transition: transform 200ms;

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

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

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

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