$min-height: control-height();
$vertical-padding: ($min-height - line-height(body) - rem(2px)) / 2;
$slim-min-height: rem(30px);
$slim-vertical-padding: ($slim-min-height - line-height(body) - rem(2px)) / 2;
$large-min-height: rem(44px);
$large-vertical-padding: ($large-min-height - line-height(body) - rem(2px)) / 2;
$spinner-size: rem(20px);
$icon-margin: rem(6px);

.p_a0 {
  @include button-base;

  &.p_bv {
    @include base-button-disabled;
  }
}

.p_tp {
  @include text-style-button;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1px;
  min-height: 1px;
}

.p_jr {
  transition: color duration() easing();

  &:first-child {
    // This compensates for the typical icon used in buttons being
    // inset within its bounding box.
    margin-left: -(spacing(extra-tight));
  }

  &:last-child {
    // This compensates for the disclosure icon, which is substantially
    // inset within the viewbox (and makes it look like there is too much
    // spacing on the right of the button)
    margin-right: -(spacing(tight));
    margin-left: spacing(extra-tight);
  }

  + *:not(.p_jr) {
    margin-left: $icon-margin;
  }
}

.p_e0 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.p_j3 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($spinner-size / 2);
  margin-left: -($spinner-size / 2);
}

.p_g7 {
  min-height: $slim-min-height;
  padding: $slim-vertical-padding rem(12px);

  .p_tp {
    @include text-style-button-slim;
  }
}

.p_kl {
  // @include button-filled(color('indigo'), color('indigo', 'dark'));
  @include button-filled(color('blue'), color('blue'));
  @include recolor-icon(color('white'));

  &.p_bv {
    @include button-filled-disabled(color('blue', 'light'));
  }
  .p_tp {
    font-weight: 600;
  }
}

.p_ma {
  @include button-filled(color('red'), color('red', 'dark'));
  @include recolor-icon(color('white'));

  &.p_bv {
    @include button-filled-disabled(color('red', 'light'));
  }
}

.p_di {
  @include button-outline();

  .p_tp {
    @include text-style-button-slim;
  }

  &.p_bv {
    @include button-outline-disabled();
  }
}

.p_bv {
  cursor: default;
  pointer-events: none;
}

@keyframes loading {
  to {
    transform: rotate(360deg);
  }
}

.p_md {
  position: relative;
  transition: border-color duration() easing();

  &,
  &:hover,
  &.p_bv {
    color: transparent;
  }
}

// The way the designs work, we need to do lots of reaching down to
// target the content in pseudo-selectors, so we need higher specificity
// in this case.
// stylelint-disable selector-max-specificity

.p_jb {
  @include recolor-icon(color('blue'));
  margin: rem(-10px) rem(-8px);
  padding-left: rem(8px);
  padding-right: rem(8px);
  background: transparent;
  border: 0;
  box-shadow: none;
  color: color('blue');

  > .p_tp {
    font-weight: 400;
  }

  &:hover,
  &:focus,
  &:active {
    @include recolor-icon(color('blue', 'dark'));
    background: transparent;
    border: 0;
    box-shadow: none;
    color: color('blue', 'dark');
  }

  &:focus > .p_tp::after {
    opacity: 1;
  }

  &.p_ib {
    margin-left: 0;
    margin-right: 0;
  }

  &.p_bv {
    background: none;
  }

  &.p_g7 {
    margin-top: (-1 * $slim-vertical-padding);
    margin-bottom: (-1 * $slim-vertical-padding);
  }

  &.p_h8 {
    margin: (-1 * $large-vertical-padding) (-1 * spacing(loose));
  }

  &.p_fc {
    @include recolor-icon(color('ink', 'lighter'));
    margin: -0.5 * ($min-height - icon-size());

    &:focus,
    &:active {
      @include recolor-icon(color('ink', 'lighter'));
      background: plain-button-background();
    }

    &:hover,
    &:active {
      @include recolor-icon(color('ink'));
    }

    // stylelint-disable-next-line selector-max-class
    > .p_tp::after {
      display: none;
    }

    &.p_bv {
      @include recolor-icon(color('sky', 'dark'));
    }
  }

  > .p_tp::after {
    @include plain-button-backdrop;
    content: '';
    opacity: 0;
  }

  .p_jr {
    margin-left: 0;
    margin-right: 0;
  }
}

// stylelint-enable selector-max-specificity

.p_h8 {
  min-height: $large-min-height;
  min-width: $large-min-height;
  padding: $large-vertical-padding rem(24px);

  .p_tp {
    @include text-style-button-large;
  }
}

.p_ib {
  @include button-full-width;
}

.p_fc {
  @include recolor-icon(color('ink', 'light'));
  padding-left: rem(8px);
  padding-right: rem(8px);

  &.p_h8 {
    padding-left: rem(12px);
    padding-right: rem(12px);
  }

  .p_jr:first-child {
    margin-left: 0;
  }

  .p_jr:last-child {
    margin-right: rem(-4px);
  }

  .p_jr:only-child {
    margin-right: 0;
  }
}

.p_ug {
  @include button-filled(color('sky'), color('sky'));
  .p_tp {
    @include text-emphasis-normal();
    width: 100%;
    justify-content: flex-start;
    margin-right: spacing(extra-tight);
  }
  .p_jr:last-child {
    margin-left: auto;
  }
}

.p_nq {
  @include button-filled(color('green', 'light'), color('green', 'light'));
  @include recolor-icon(color('green', 'dark'));
  color: color('green', 'text');
}

.p_gh {
  @include button-filled(color('yellow', 'light'), color('green', 'light'));
  @include recolor-icon(color('yellow', 'dark'));
  color: color('yellow', 'text');
}

.p_ox {
  @include button-filled(color('red', 'light'), color('red', 'light'));
  @include recolor-icon(color('red', 'dark'));
  color: color('red', 'text');
}

.p_fq {
  @include button-filled(color('blue', 'light'), color('blue', 'light'));
  @include recolor-icon(color('blue', 'dark'));
  color: color('blue', 'text');
}

.p_qm {
  @include button-minimal(color('ink', 'lighter'));

  &.p_bv {
    @include button-minimal-disabled(color('ink', 'lighter'));
  }
}