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

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

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

.multiline {
  padding: 0;
  flex-wrap: wrap;

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

.hasValue {
  color: color('ink');
}

.focus > .Input,
.Input:focus {
  outline: none;
  border: border(transparent);

  // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity
  ~ .Backdrop::after {
    opacity: 1;
  }
}

.error {
  .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
  > .Input ~ .Backdrop {
    background-color: color('red', 'lighter');
    border-color: color('red', 'dark');

    // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity
    &::after {
      border-color: color('red', 'dark');
    }
  }
}

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

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

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

.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;

  .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;
    }
  }
}

.Input-suffixed {
  padding-right: 0;
}

.Backdrop {
  position: absolute;
  z-index: z-index(backdrop, $stacking-order);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: color('white');
  border: border(dark);
  border-radius: border-radius();
  box-shadow: inset 0 1px 0 0 rgba(color('ink', 'lighter'), 0.05);
  pointer-events: none;

  &::after {
    content: '';
    position: absolute;
    top: $textfield-backdrop-offset;
    right: $textfield-backdrop-offset;
    bottom: $textfield-backdrop-offset;
    left: $textfield-backdrop-offset;
    border: border-width(thick) solid color('indigo');
    border-radius: inherit;
    opacity: 0;
    transition: opacity duration() easing();
    pointer-events: none;
  }
}

.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;
}

.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;
}

.CharacterCount {
  @include text-emphasis-subdued;
  z-index: z-index(contents, $stacking-order);
  margin-right: $backdrop-horizontal-spacing;
  pointer-events: none;
  text-align: right;
}

.AlignFieldBottom {
  align-self: flex-end;
  width: 100%;
  padding-bottom: spacing(tight);
}

.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;
}

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

.Resizer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  visibility: hidden;
  overflow: hidden;
}

.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;
}

.Segment {
  display: flex;
  flex: 1 1 0%;
  justify-content: center;
  align-items: center;
  appearance: none;
  background: linear-gradient(
    to bottom,
    color('white'),
    color('sky', 'lighter')
  );
  border: none;
  border-left: border(dark);
  will-change: background, box-shadow;
  transition: background duration(fast) easing(),
    box-shadow duration(fast) easing();

  &:focus {
    outline: none;
  }

  &:active {
    background: linear-gradient(
      to bottom,
      color('sky', 'light'),
      color('sky', 'light')
    );
    box-shadow: inset 0 1px 1px 0 rgba(color('ink', 'lighter'), 0.1),
      inset 0 1px 4px 0 rgba(color('ink', 'lighter'), 0.2);
  }

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

  &:first-child {
    border-top-right-radius: border-radius();
  }

  &:last-child {
    border-bottom-right-radius: border-radius();
  }
}