@import "../../globals.core";

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

ion-input,
ion-textarea {
  position: relative;
  display: block;

  flex: 1;

  width: 100%;
}


.item-input ion-input,
.item-input ion-textarea {
  position: static;
}

// Textarea Within An Item
// --------------------------------------------------

.item.item-textarea {
  align-items: stretch;
}


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

.text-input {
  @include placeholder();

  display: inline-block;

  flex: 1;

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

  border: 0;
  border-radius: 0;
  background: transparent;

  -webkit-appearance: none;
}

textarea.text-input {
  display: block;
}

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


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

.platform-mobile textarea.text-input {
  resize: none;
}


// 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

.input-cover {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
}


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

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

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

.input-has-focus input,
.input-has-focus textarea {
  pointer-events: auto;
}


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

[next-input] {
  position: absolute;
  bottom: 1px;

  padding: 0;

  width: 1px;
  height: 1px;

  border: 0;
  background: transparent;

  pointer-events: none;
}


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

.text-input-clear-icon {
  position: absolute;

  margin: 0;
  padding: 0;

  background-repeat: no-repeat;
  background-position: center;
}


// Cloned Input
// --------------------------------------------------

.text-input.cloned-input {
  position: relative;
  top: 0;

  pointer-events: none;
}

.item-input:not(.item-label-floating) .text-input.cloned-active {
  display: none;
}