@import "./input.vars";

// Input
// --------------------------------------------------

.input {
  position: relative;
  display: block;

  flex: 1;

  width: 100%;
}

// Input Within An Item
// --------------------------------------------------

.item-input .input {
  position: static;
}


// Native Text Input
// --------------------------------------------------

.native-input {
  @include appearance(none);
  @include border-radius(0);

  display: inline-block;

  flex: 1;

  width: 92%;
  width: calc(100% - 10px);

  border: 0;

  background: transparent;

  &:active,
  &:focus {
    outline: none;
  }
}

.native-input[disabled] {
  opacity: .4;
}

input.native-input:-webkit-autofill {
  background-color: transparent;
}


// Input Cover: Unfocused
// --------------------------------------------------
// The input cover is the div that actually receives the
// tap/click event when scroll assist is configured to true.
// This make it so the native input element is not clickable.
// This will only show when the scroll assist is configured
// otherwise the .input-cover will not be rendered at all
// The input cover is not clickable when the input is disabled

.input-cover {
  @include position(0, null, null, 0);

  position: absolute;

  width: 100%;
  height: 100%;
}

.input[disabled] .input-cover {
  pointer-events: none;
}


// Input Cover: Focused
// --------------------------------------------------
// When the input has focus, then the input cover should be hidden

.item-input-has-focus .input-cover {
  display: none;
}

.item-input-has-focus {
  pointer-events: none;
}

.item-input-has-focus input,
.item-input-has-focus a,
.item-input-has-focus button {
  pointer-events: auto;
}


// Scroll Assist Input
// --------------------------------------------------
// This input is used to help the app handle
// Next and Previous input tabbing

[next-input] {
  @include padding(0);

  position: absolute;
  bottom: 20px;

  width: 1px;
  height: 1px;

  border: 0;
  background: transparent;

  pointer-events: none;
}


// Clear Input Icon
// --------------------------------------------------

.input-clear-icon {
  @include margin(0);
  @include padding(0);
  @include background-position(center);

  position: absolute;
  top: 0;
  display: none;

  height: 100%;

  background-repeat: no-repeat;
}

.item-input-has-focus.item-input-has-value .input-clear-icon {
  display: block;
}
