$stacking-order: (
  backdrop: 10,
  input: 20,
  icon: 30
);

$icon-size: rem(16px);
$input-horizontal-padding: spacing(tight) * 1.5;

// Without a small amount of vertical adjustment, the text
// in the Select does not appear vertically centered.
$input-vertical-adjust: rem(1px);

.p_no {
  position: relative;

  // IE 11 fix to remove default dropdown arrow
  select::-ms-expand {
    display: none;
  }
}

.p_d4 {
  .p_i8 {
    @include control-backdrop(disabled);
  }

  .p_ns {
    opacity: 0.4;
  }
}

.p_cg {
  .p_i8 {
    @include control-backdrop(error);
  }

  // Need to override the higher specificity of the sibling selector
  // so that errors still have red borders.
  // stylelint-disable-next-line selector-max-specificity
  .p_fh:focus ~ .p_i8 {
    @include control-backdrop(focused-error);
  }
}

.p_rd {
  .p_fh {
    color: color(ink, lightest);
  }

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

  &.p_cg .p_fh:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 color(ink, base);
  }
}

.p_i8 {
  @include control-backdrop;
  position: absolute;
  z-index: z-index(backdrop, $stacking-order);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.p_ns {
  @include recolor-icon(color(ink, lighter));
  position: absolute;
  z-index: z-index(icon, $stacking-order);
  top: 50%;
  right: $input-horizontal-padding;
  transform: translateY(-50%);
  margin-right: (-0.25 * $icon-size);
  pointer-events: none;
}

.p_fh {
  @include text-style-input;
  position: relative;
  z-index: z-index(input, $stacking-order);
  width: 100%;
  min-height: control-height();
  margin: 0;
  padding: control-vertical-padding() ($input-horizontal-padding + $icon-size) control-vertical-padding() $input-horizontal-padding;
  background: transparent;
  border: border(transparent);
  appearance: none;
  line-height: rem(20px);

  &:focus {
    outline: none;

    ~ .p_i8 {
      @include control-backdrop(focused);
    }
  }

  &:disabled {
    color: color(ink, lightest);
  }

  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 color(ink, base);
  }
}