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

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

.p_j9 {
  @include text-style-input;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 $backdrop-horizontal-spacing;
  color: color(ink, lightest);
  cursor: text;
}

.p_zv {
  padding: 0;
  overflow: hidden;

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

.p_bz {
  color: color(ink);
}

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

  ~ .p_ze {
    border-color: color(indigo);
    box-shadow:
      inset shadow(transparent),
      0 0 0 1px color(indigo);
  }
}

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

  > .p_p4 ~ .p_ze {
    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-specificity
  > .p_p4:focus ~ .p_ze {
    border-color: color(indigo);
    box-shadow:
      inset shadow(transparent),
      0 0 0 1px color(indigo);
  }
}

.p_tm > .p_ze {
  background-color: color(sky, lighter);
}

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

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

.p_p4 {
  @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() 0;
  background: none;
  border: border(transparent);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  appearance: none;

  &: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;
    }
  }
}

.p_ze {
  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: inset 0 1px 0 0 rgba(color(ink, lighter), 0.05);
  border-radius: border-radius();
  will-change: box-shadow, border-color;
  transition-property: box-shadow, border-color;
  transition-duration: duration();
  transition-timing-function: easing();
}

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

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

.p_pq {
  z-index: z-index(contents, $stacking-order);
  display: flex;
  align-self: stretch;
  flex-direction: column;
  width: rem(22px);
  margin: 1px calc(-#{$backdrop-horizontal-spacing} + 1px) 1px $backdrop-horizontal-spacing;
  color: color(ink);
  cursor: pointer;
}

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

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

.p_xk {
  @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.
  white-space: pre-wrap;
  word-wrap: break-word;
}

.p_x6 {
  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();
  }
}