$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);

.p_dm {
  @include recolor-icon(color(ink, lighter));
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: $min-height;
  min-width: $min-height;
  margin: 0;
  padding: $vertical-padding spacing();
  background: linear-gradient(to bottom, color(white), color(sky, lighter));
  border: border(dark);
  box-shadow: shadow(faint);
  border-radius: border-radius();
  line-height: 1;
  color: color(ink);
  text-align: center;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition-property: background, border, box-shadow;
  transition-duration: duration();
  transition-timing-function: easing();

  &:hover {
    background: linear-gradient(to bottom, color(sky, lighter), color(sky, light));
    border-color: color(sky, dark);
  }

  &:focus {
    border-color: color(indigo);
    outline: 0;
    box-shadow: 0 0 0 1px color(indigo);
  }

  &:active {
    // Same color gradient is necessary for background transitions
    background: linear-gradient(to bottom, color(sky, light), color(sky, light));
    border-color: color(sky, dark);
    box-shadow:
      0 0 0 0 transparent,
      inset 0 1px 1px 0 rgba(color(ink, lighter), 0.1),
      inset 0 1px 4px 0 rgba(color(ink, lighter), 0.2);
  }

  &.p_x1 {
    @include recolor-icon(color(ink, lightest));
    transition: none;
    background: linear-gradient(to bottom, color(sky, light), color(sky, light));
    color: color(ink, lightest);
  }
}

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

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

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

  &: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: rem(-8px);
  }

  & + *:not(.p_ss) {
    margin-left: rem(4px);
  }
}

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

.p_wp {
  @include button-filled(color(indigo), color(indigo, dark));
  @include recolor-icon(color(white));

  &.p_x1 {
    @include button-filled-disabled(color(indigo));
  }
}

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

  &.p_x1 {
    @include button-filled-disabled(color(red));
  }
}

.p_l1 {
  @include button-outline(color(ink, lighter));

  &.p_x1 {
    @include button-outline-disabled(color(ink, lighter));
  }
}

.p_z3.p_l1 {
  @include button-outline(color(red));
  @include recolor-icon(color(red, dark));
}

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

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

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

  &,
  &:hover,
  &.p_x1 {
    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_t7 {
  @include recolor-icon(color(blue));
  margin: (-1 * $vertical-padding) rem(-8px);
  padding-left: rem(8px);
  padding-right: rem(8px);
  background: transparent;
  border: border(transparent);
  box-shadow: none;
  color: color(blue);

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

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

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

  &.p_x1 {
    background: none;
  }

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

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

  &.p_kp {
    @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));
    }

    > .p_yo::after {
      display: none;
    }

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

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

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

// stylelint-enable selector-max-specificity

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

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

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

.p_fn {
  display: flex;
  width: 100%;
}

.p_kp {
  padding-left: rem(8px);
  padding-right: rem(8px);

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

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

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

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