$stacking-order: (
  link: 10,
  content: 20,
);

$avatar-small-size: rem(32px);
$avatar-medium-size: rem(40px);
$avatar-large-size: rem(60px);

$thumbnail-small-size: rem(40px);
$thumbnail-medium-size: rem(60px);
$thumbnail-large-size: rem(80px);

$action-button-height: rem(30px);

.p_bm {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p_i2 {
  + .p_i2 {
    border-top: border();
  }
}

.p_id {
  position: relative;

  &:not(.p_ol) {
    .p_i9 {
      position: absolute;
      right: spacing(tight);
      display: none;
      pointer-events: initial;
    }

    &.p_sv {
      // Need this deeply nested selector to override the more specific :not()
      // selector needed above.
      // stylelint-disable-next-line selector-max-specificity
      .p_i9 {
        display: flex;
      }
    }
  }
}

.p_ol {
  .p_jm {
    margin-left: 0;
  }

  .p_i9 {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-left: spacing();
    pointer-events: initial;

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

.p_nt {
  cursor: pointer;
}

.p_sv {
  background: color(sky, lighter);
}

// Had min-height style below instead of height. Need height for IE11 vertical centering
// to work with display: flex. Reference: http://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie
.p_y3 {
  &.p_wn {
    .p_i9 {
      height: $avatar-small-size;
    }
  }

  &.p_ku {
    .p_i9 {
      height: $avatar-medium-size;
    }
  }

  &.p_i1 {
    .p_i9 {
      height: $avatar-large-size;
    }
  }
}

.p_r7 {
  &.p_wn {
    .p_i9 {
      height: $thumbnail-small-size;
    }
  }

  &.p_ku {
    .p_i9 {
      height: $thumbnail-medium-size;
    }
  }

  &.p_i1 {
    .p_i9 {
      height: $thumbnail-large-size;
    }
  }
}

.p_od {
  flex: 0 0 auto;
  margin-right: spacing(loose);
  color: inherit;
  text-decoration: none;
}

.p_k5 {
  position: relative;
  z-index: z-index(content, $stacking-order);
  display: flex;
  pointer-events: none;
  padding: (0.75 * spacing()) spacing(loose);
}

.p_ik {
  @include layout-flex-fix;
  flex: 1 1 auto;
  align-self: center;

  // Adding with 100% for IE11 fix
  width: 100%;
}

.p_tb {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  color: inherit;
  text-decoration: none;
  hyphens: auto;
  min-height: $action-button-height;

  @include page-content-when-partially-condensed {
    flex-direction: column;
    align-items: flex-start;
  }
}

.p_lt,
.p_lk {
  flex-shrink: 0;
  margin-right: (0.75 * spacing());
}

.p_lt {
  font-weight: 600;
}

.p_jm {
  margin-left: auto;

  @include page-content-when-partially-condensed {
    margin-left: 0;
  }
}

.p_sz {
  flex-shrink: 0;
  flex-basis: auto;
  margin-right: spacing();

  @include page-content-when-partially-condensed {
    order: 4;
    align-self: auto;
    margin-top: rem(4px);
    margin-bottom: rem(4px);
  }
}

.p_i9 {
  display: flex;
  flex-basis: auto;
  align-items: center;
}

.p_ni {
  display: none;
  pointer-events: initial;

  @include page-content-when-partially-condensed {
    display: block;
  }
}

.p_fm {
  margin: spacing(extra-tight) 0 0 0;
  padding: 0;
  list-style: none;
}

.p_hk {
  @include text-emphasis-subdued;
  display: flex;
  align-items: center;

  &::before {
    content: '';
    display: block;
    flex-shrink: 0;
    height: rem(6px);
    width: rem(6px);
    margin-right: spacing(tight);
    background: color(ink, lightest);
    border-radius: 100%;
  }
}

.p_hv {
  .p_n3 {
    color: color(orange, dark);
  }

  &::before {
    background: color(orange);
  }
}

.p_kk {
  .p_n3 {
    color: color(red, dark);
  }

  &::before {
    background: color(red);
  }
}

.p_n3 {
  @include text-emphasis-subdued;
  white-space: nowrap;
}

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

.p_n3 + .p_qn::before {
  content: '\2013';
  padding: 0 spacing(extra-tight);
  color: color(ink, lighter);
}

.p_gu {
  position: absolute;
  z-index: z-index(link, $stacking-order);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
}