$backdrop-horizontal-spacing: spacing(tight) * 1.5;
$addon-horizontal-spacing: 0.25em;
$spinner-icon-size: rem(12px);

$stacking-order: (
  contents: 20,
  backdrop: 10,
);

.Polaris-TextField {
  @include text-style-input;
  position: relative;
  display: flex;
  align-items: center;
  color: color('ink', 'lightest');
  cursor: text;
}

.Polaris-TextField--multiline {
  padding: 0;

  > .Polaris-TextField__Input {
    overflow: auto;
    padding-left: $backdrop-horizontal-spacing;
    padding-right: $backdrop-horizontal-spacing;
    resize: none;
  }
}

.Polaris-TextField--minimal:not(.Polaris-TextField--focus) > .Polaris-TextField__Input,
.Polaris-TextField--minimal .Polaris-TextField__Input:not(:focus) {
  ~ .Polaris-TextField__Backdrop {
    background: none;
    border-color: transparent;
  }
}

.Polaris-TextField--hasValue {
  color: color('ink');
}

.Polaris-TextField--focus > .Polaris-TextField__Input,
.Polaris-TextField__Input:focus {
  outline: none;
  border: border(transparent);

  // stylelint-disable-next-line selector-max-class, selector-max-combinators
  ~ .Polaris-TextField__Backdrop {
    border-color: color('blue');
    box-shadow: 0 0 0 2px rgba(color('blue'), 0.25);
  }
}

.Polaris-TextField--error {
  .Polaris-TextField__Input::placeholder {
    // This is the only place this color is used.
    // stylelint-disable-next-line color-no-hex
    color: #9c9798;
  }

  // stylelint-disable-next-line selector-max-class, selector-max-combinators
  > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop {
    background-color: color('red', 'lighter');
    border-color: color('red');
    box-shadow: none;
  }

  // We need this to override the box-shadow in the focus state.
  // stylelint-disable-next-line selector-max-class, selector-max-specificity, selector-max-combinators
  > .Polaris-TextField__Input:focus ~ .Polaris-TextField__Backdrop {
    border-color: color('blue');
    box-shadow: 0 0 0 2px rgba(color('blue'), 0.25);
  }
}

.Polaris-TextField--readOnly > .Polaris-TextField__Backdrop {
  background-color: color('sky', 'lighter');
}

.Polaris-TextField--disabled {
  color: color('ink', 'lightest');
  cursor: initial;

  > .Polaris-TextField__Backdrop {
    background-color: color('sky', 'lighter');
    box-shadow: none;
  }
}

.Polaris-TextField__Input {
  @include text-style-input;
  position: relative;
  z-index: z-index(contents, $stacking-order);
  display: block;
  flex: 1 1 0%;
  width: 100%;
  min-width: 0;
  min-height: control-height();
  margin: 0;
  padding: control-vertical-padding() $backdrop-horizontal-spacing;
  background: none;
  border: border(transparent);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  appearance: none;

  .Polaris-TextField__Prefix + & {
    padding-left: 0;
  }

  &:disabled {
    background: none;
    border: border(transparent);
    color: currentColor;
    opacity: 1;
    -webkit-text-fill-color: currentColor;
  }

  // remove the box shadow in Firefox when the input is invalid
  &:invalid {
    box-shadow: none;
  }

  &::placeholder {
    color: color('ink', 'lightest');
  }

  // These properties are used to remove the default "spinner" controls
  // for number fields, since we add our own, custom versions instead.
  &[type='number'] {
    appearance: textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      appearance: none;
      margin: 0;
    }
  }
}

.Polaris-TextField__Input--suffixed {
  padding-right: 0;
}

.Polaris-TextField__Backdrop {
  position: absolute;
  z-index: z-index(backdrop, $stacking-order);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: color('white');
  border: border(dark);
  box-shadow: 0 0 0 2px transparent;
  border-radius: border-radius();
  will-change: background, box-shadow, border-color;
  transition-property: background, box-shadow, border-color;
  transition-duration: duration();
  transition-timing-function: easing();
}

.Polaris-TextField__Prefix {
  position: relative;
  z-index: z-index(contents, $stacking-order);
  flex: 0 0 auto;
  margin: 0 $addon-horizontal-spacing 0 $backdrop-horizontal-spacing;
  color: currentColor;
  pointer-events: none;
}

.Polaris-TextField__Suffix {
  position: relative;
  z-index: z-index(contents, $stacking-order);
  flex: 0 0 auto;
  margin: 0 $backdrop-horizontal-spacing 0 $addon-horizontal-spacing;
  color: currentColor;
  pointer-events: none;
}

.Polaris-TextField__Spinner {
  z-index: z-index(contents, $stacking-order);
  display: flex;
  align-self: stretch;
  flex-direction: column;
  width: rem(22px);
  margin: 1px;
  color: color('ink');
  cursor: pointer;
}

.Polaris-TextField__SpinnerIcon {
  height: $spinner-icon-size;
  width: $spinner-icon-size;
}

.Polaris-TextField__Resizer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  visibility: hidden;
  overflow: hidden;
}

.Polaris-TextField__DummyInput {
  @include text-style-input;
  padding: control-vertical-padding() $backdrop-horizontal-spacing;
  border: border(transparent);

  // We need the following properties in order to have long, unbroken
  // strings wrap in the same way they do in textareas.
  @include text-breakword;
  white-space: pre-wrap;
}

.Polaris-TextField__Segment {
  display: flex;
  flex: 1 1 0%;
  justify-content: center;
  align-items: center;
  appearance: none;
  background: none;
  border: none;
  border-left: border(dark);
  will-change: background, box-shadow;
  transition: background duration(fast) easing(),
    box-shadow duration(fast) easing();

  &:hover {
    @include state(hover);
  }

  &:focus {
    outline: none;
  }

  &:active {
    @include state(press);
  }

  &:not(:first-child) {
    margin-top: -1px;
    border-top: border(dark);
  }

  &:first-child {
    border-top-right-radius: calc(#{border-radius()} - 1px);
  }

  &:last-child {
    border-bottom-right-radius: calc(#{border-radius()} - 1px);
  }
}