/**
 * @file
 * Phone mock-up component.
 */

.xp-phone {
  margin: 0;
}

.xp-phone__stage {
  position: relative;
}

.xp-phone__device {
  width: min(var(--xp-phone-width), 70vw);
  margin-inline: auto;
  padding: 0.625rem;
  border-radius: 2.75rem;
  background-color: var(--xp-phone-frame);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.18);
}

.xp-phone__screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2.25rem;
}

.xp-phone__bubbles {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

/* Speech bubbles: rounded, with one squared corner pointing at the phone. */
.xp-phone__bubble {
  max-width: 16rem;
  padding: 0.75rem 1.125rem;
  border-radius: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
}

.xp-phone__bubble--1 {
  border-bottom-right-radius: 0.25rem;
  background-color: var(--xp-bubble-1-bg);
  color: var(--xp-bubble-1-color);
}

.xp-phone__bubble--2 {
  align-self: flex-end;
  border-bottom-left-radius: 0.25rem;
  background-color: var(--xp-bubble-2-bg);
  color: var(--xp-bubble-2-color);
}

.xp-phone__bubble--3 {
  border-top-right-radius: 0.25rem;
  background-color: var(--xp-bubble-3-bg);
  color: var(--xp-bubble-3-color);
}

.xp-phone__caption {
  margin-top: 1.25rem;
  color: var(--bs-secondary-color);
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

@media (min-width: 992px) {
  .xp-phone__bubbles {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    pointer-events: none;
  }

  /* No wider than the space beside the phone, plus the overlap. */
  .xp-phone__bubble {
    position: absolute;
    max-width: calc(50% - var(--xp-phone-width) / 2 + 2rem);
  }

  .xp-phone__bubble--1 {
    top: 12%;
    right: calc(50% + var(--xp-phone-width) / 2 - 2rem);
  }

  .xp-phone__bubble--2 {
    top: 42%;
    left: calc(50% + var(--xp-phone-width) / 2 - 2rem);
  }

  .xp-phone__bubble--3 {
    bottom: 14%;
    right: calc(50% + var(--xp-phone-width) / 2 - 2rem);
  }
}