/* 
 * Styles for the various popups around the site
 */

.post-popup {
  background-color: white;
  position: fixed;
  z-index: 999;
  padding: 1rem 2rem;
  box-shadow: 0 0 20px var(--color-light-gray);
  border-radius: 12px;
  bottom: -100%; 
  left: 5%;
  right: 5%;
  transition: bottom 0.5s ease-in;

  .lr-button {
    font-size: var(--fs-7);
  }
}

@media (width > 800px) {
  .post-popup {
    left: 0.5rem;
    right: unset;
    width: 600px;
  }
}

.post-popup.show {
  bottom: 0.5rem;
}

.post-popup__page {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
}

.post-popup__page.active {
  display: flex;
}

.post-popup__title {
  color: var(--color-dark-purple);
  font-size: var(--fs-5);
  font-weight: var(--weight-bold);
}

.post-popup__exit {
  display: block;
  padding: 1rem;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  font-weight: var(--weight-bold);
}

.post-popup__buttons {
  display: flex;
  gap: 2rem;
}