.container {
  max-width: 600px;
  width: 100%;

  margin-top: calc(
    var(--ion-safe-area-top, env(safe-area-inset-top, 0)) + 50px
  );

  overflow-y: auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  position: relative;

  /* from media/gallery/actions/shared.ts */
  margin-bottom: calc(calc(-1 * var(--topPadding)) + 1rem);

  color: white;
}

.dynamicHeightBg {
  position: absolute;
  inset: 0;

  container-type: size;
}

.color {
  position: absolute;
  inset: 0;

  /* 10px for text margins, plus 5px wiggle */
  /* 2.4rem = 1.2 line height, two lines */
  @container (min-height: calc(15px + 2.4rem)) {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 6px;
    transform: translate3d(0, 0, 0); /* safari optimization */
  }
}

.text {
  padding: 5px 10px;
  border-radius: 10px;

  margin-left: 16px;
  margin-right: 16px;

  /* explicit line height for @container calculations */
  line-height: 1.2;

  position: relative;

  white-space: pre-wrap;
  word-break: break-word;
}

.clamped {
  position: relative;
}

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  white-space: initial;
}
