$accent-height: 3px;
$heading-offset: rem(2px);
$intermediate-spacing: rem(12px);
$ribbon-flex-basis: rem(32px);
$secondary-action-vertical-padding: 0.5 * (control-height() - line-height(body));
$secondary-action-horizontal-padding: 1.5 * spacing(tight);

@mixin banner-attributes($highlight, $background, $in-page, $tint) {
  transition: box-shadow duration() easing();
  transition-delay: duration(fast);

  @if $in-page {
    box-shadow: inset 0 $accent-height 0 0 $highlight, inset shadow(transparent),
      shadow();
  }

  @if $tint {
    background-color: mix(white, $background, 44%);
  } @else {
    background-color: $background;
  }

  &:focus {
    outline: none;
    box-shadow: inset 0 $accent-height 0 0 $highlight,
      inset 0 0 0 $accent-height $highlight, shadow();
  }
}

@mixin banner-variants($in-page: false) {
  @include banner-attributes(
    color('ink', 'lighter'),
    color('sky', 'light'),
    $in-page,
    false
  );

  &.p_cu {
    @include banner-attributes(
      color('green'),
      color('green', 'lighter'),
      $in-page,
      true
    );
  }

  &.p_j8 {
    @include banner-attributes(
      color('teal'),
      color('teal', 'lighter'),
      $in-page,
      true
    );
  }

  &.p_xi {
    @include banner-attributes(
      color('yellow'),
      color('yellow', 'lighter'),
      $in-page,
      true
    );
  }

  &.p_xj {
    @include banner-attributes(
      color('red'),
      color('red', 'lighter'),
      $in-page,
      true
    );
  }
}

.p_ei {
  position: relative;
  display: flex;
}

.p_is {
  border-radius: border-radius();
  padding: spacing(tight) $intermediate-spacing;
  margin-left: (spacing(tight) * -1);
  margin-right: (spacing(tight) * -1);

  @include banner-variants;

  + .p_ei {
    margin-top: spacing(tight);
  }

  .p_qe {
    padding-right: $intermediate-spacing;
  }

  .p_zv {
    padding: $intermediate-spacing 0 spacing(extra-tight) 0;
  }

  .p_w6 {
    right: $intermediate-spacing;
    top: $intermediate-spacing;
    position: absolute;
  }
}

.p_ql {
  border-radius: 0 0 border-radius() border-radius();
  padding: spacing();

  @include banner-variants(true);

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

  .p_qe {
    padding-right: spacing();
  }

  .p_zv {
    padding-top: spacing();
  }

  .p_w6 {
    right: spacing();
    top: spacing(loose);
    position: absolute;
  }
}

.p_ol {
  padding-right: spacing() + spacing(extra-tight) + control-height();
}

.p_f7 {
  padding-top: $heading-offset;
}

.p_ep {
  padding: spacing(extra-tight) 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

.p_qe {
  flex: 0 0 $ribbon-flex-basis;
}

// We need pretty high specificity to do the descendant selectors
// onto the text, which needs to be the relative positioned wrapper
// so that the borders/ backgrounds do not extend outside of it.
// stylelint-disable selector-max-specificity

.p_d1 {
  @include unstyled-button;
  @include unstyled-link;
  margin: (-1 * $secondary-action-vertical-padding)
    (-0.5 * $secondary-action-horizontal-padding);
  padding: $secondary-action-vertical-padding
    $secondary-action-horizontal-padding;
  color: color('ink');

  &:hover > .p_ys::after {
    opacity: 0.75;
  }

  &:active > .p_ys::after {
    opacity: 0;
  }

  &:focus > .p_ys {
    &::before {
      opacity: 1;
    }

    &::after {
      opacity: 0;
    }
  }
}

// stylelint-enable selector-max-specificity
.p_ys {
  position: relative;

  &::after,
  &::before {
    content: '';
    position: absolute;
  }

  &::before {
    @include plain-button-backdrop;
    opacity: 0;
  }

  &::after {
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    border: border-width() solid currentColor;
    opacity: 0.25;
    will-change: opacity;
    transition: opacity duration() easing();
  }
}