$navigation-elements-height: rem(36px);
$title-height: line-height(display-large, large-screen);
$action-horizontal-padding: (1.5 * spacing(tight));

$difference-between-touch-area-and-backdrop: control-height() -
  control-slim-height();

$stacking-order: (
  title: 10,
  breadcrumbs: 20,
);

html,
body {
  min-height: 100%;
  height: 100%;
}

.p_pa {
  @include page-layout;
}

.p_gv {
  max-width: none;
}

.p_g2 {
  max-width: layout-width(primary, max);
}

.p_gd {
  @include page-content-layout;
}

.p_pl {
  @include page-header-layout;
}

.p_l9,
.p_e8 {
  padding-top: spacing(loose);
}

.p_lm {
  @include page-header-has-secondaryactions;
}

.p_dy {
  padding-bottom: spacing();
  border-bottom: border();

  + .p_gd {
    margin-top: spacing(loose);
  }
}

.p_p7 {
  .p_i1 {
    display: none;
  }

  @include page-content-when-not-partially-condensed {
    .p_zn {
      display: none;
    }

    .p_i1 {
      display: flex;
    }
  }
}

.p_wt {
  display: flex;
  justify-content: space-between;
  margin-bottom: spacing(extra-tight);
}

.p_rn {
  margin-left: auto;
}

.p_b0 {
  display: flex;
  align-items: center;
}

.p_f1 {
  flex: 1 1 0%;
}

.p_op {
  @include layout-flex-fix;
  @include text-breakword;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: -1 * spacing(tight);

  > * {
    margin-top: spacing(tight);
    margin-right: spacing(tight);
  }
}

.p_pv {
  @include visually-hidden;
}

.p_hz {
  @include page-actions-layout;
}

.p_pg {
  flex: 1;
}

.p_i1 {
  display: flex;
  align-items: center;

  > .p_eo,
  > .p_fj {
    &:first-child {
      // Compensates for the fact that we push the icon slightly to the left
      margin-left: -1 * $action-horizontal-padding;
    }

    &:last-child {
      margin-right: -1 * $action-horizontal-padding;
    }
  }
}

.p_th {
  display: flex;
  align-self: stretch;
  align-items: center;

  .p_b0 > & {
    display: none;
    margin-left: spacing(loose);
  }

  @include page-content-when-not-partially-condensed {
    display: none;

    .p_b0 > & {
      display: flex;
    }
  }
}

.p_eo {
  @include unstyled-button;
  @include text-style-body;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: control-height();

  // Negative margin vertically for the amount that is not covered by
  // the focus overlay
  margin-top: -0.5 * $difference-between-touch-area-and-backdrop;
  margin-bottom: -0.5 * $difference-between-touch-area-and-backdrop;
  padding: 0 $action-horizontal-padding;
  text-decoration: none;
  color: color('ink', 'light');

  &:hover,
  &:active {
    color: color('ink');

    .p_c8 {
      @include recolor-icon(color('ink'), color('white'));
    }
  }

  &:focus,
  &:active {
    &::after {
      background: plain-button-background();
    }
  }

  &::after {
    content: '';
    position: absolute;
    top: 0.5 * $difference-between-touch-area-and-backdrop;
    right: spacing(extra-tight);
    left: spacing(extra-tight);
    display: block;
    height: control-slim-height();
    border-radius: border-radius();
    background: transparent;
    will-change: background;
    transition-property: background;
    transition-duration: duration();
    transition-timing-function: easing();
  }

  &.p_fq {
    color: color('ink', 'lightest');
    cursor: default;
    pointer-events: none;

    .p_c8 {
      @include recolor-icon(color('ink', 'lightest'));
    }
  }
}

.p_zh {
  display: flex;
  align-items: center;
}

.p_c8 {
  @include recolor-icon(color('ink', 'lighter'), color('white'));
  display: inline-block;

  &:first-child {
    margin-right: spacing(extra-tight);
  }

  &:last-child {
    margin-left: spacing(extra-tight);

    // 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: -3px;
  }

  &.p_fq {
    @include recolor-icon(color('ink', 'lightest'));
  }
}

.p_bk {
  padding: spacing();
  margin-top: -1 * spacing();

  &.p_ta {
    margin-top: -1 * spacing(tight);
    border-top: border();
  }
}

.p_xy {
  @include button-base;
  @include button-outline(color('ink', 'lighter'));

  &::after {
    top: auto;
    left: auto;
    right: auto;
  }

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