.p_l0 {
  position: relative;
}

.p_ph {
  // The basic checked styles have more specificity than this, so need to
  // basically duplicate that selector here, too.
  // stylelint-disable-next-line selector-max-specificity
  .p_hc:checked + .p_pa,
  .p_hc.p_d2 + .p_pa,
  .p_pa {
    @include control-backdrop(error);
  }

  // We need to know if the input is focusing to change the border color.
  // stylelint-disable-next-line selector-max-specificity
  .p_hc:focus + .p_pa,
  .p_hc:active + .p_pa {
    @include control-backdrop(focused-error);
  }

  .p_tl {
    @include recolor-icon(color(red, dark));
  }
}

.p_hc {
  @include visually-hidden;

  &:focus,
  &:active,
  &:checked,
  &.p_d2 {
    + .p_pa {
      background: color(indigo);
    }
  }

  &:checked,
  &.p_d2 {
    ~ .p_tl {
      transform: translate(-50%, -50%) scale(1);
    }
  }

  &:focus,
  &:active {
    + .p_pa {
      @include control-backdrop(focused);
    }
  }

  &:disabled {
    + .p_pa {
      @include control-backdrop(disabled);
    }

    ~ .p_tl {
      @include recolor-icon(color(ink, lightest));
    }
  }
}

.p_pa {
  @include control-backdrop;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.p_tl {
  @include recolor-icon(color(indigo));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: 50% 50%;
  transition: control-icon-transition();
}