$arrow-size: rem(14px);
$visible-portion-of-arrow: rem(5px);
$content-max-width: rem(400px);

.p_d8 {
  max-width: calc(100vw - #{2 * spacing()});
  margin: $visible-portion-of-arrow spacing(tight) spacing();
  opacity: 1;
  box-shadow: shadow(deep);
  border-radius: border-radius();
  will-change: opacity, left, top;
}

.p_gd {
  margin: 0;
  margin-top: $visible-portion-of-arrow;

  .p_f4 {
    max-width: none;
  }
}

.p_nm:not(.p_bi),
.p_bi {
  opacity: 0;
}

.p_nm {
  .p_f4 {
    display: block;
  }
}

.p_bi {
  transition-timing-function: easing(out);
}

.p_ss {
  margin: spacing() 0 $visible-portion-of-arrow spacing(tight);

  &.p_gd {
    margin: 0 0 $visible-portion-of-arrow;
  }
}

.p_u4 {
  position: relative;
  overflow: hidden;
  background-color: color('white');
  border-radius: border-radius();
}

.p_f4 {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: border-radius();
  max-width: $content-max-width;

  &:focus {
    outline: none;
  }
}

.p_p1 {
  max-height: none;
}

.p_wi {
  flex: 1 1 0%;
  max-width: 100%;

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

.p_d7 {
  overflow: visible;
  flex: 0 0 auto;
}

.p_e8 {
  padding: spacing();

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

.p_tg {
  @include visually-hidden;
}