.purchase-photo {
  @apply relative w-full h-full;
  overflow: hidden;
  min-height: 375px;
}

.purchase-photo__modal .modal__card {
  @apply p-0;
}

.purchase-photo__modal .modal__card-section {
  @apply mt-0 h-full;
}

.purchase-photo .reveal:not(.purchase-photo__found) {
  @apply w-full h-full px-8 py-6;
}

.purchase-photo__loading,
.purchase-photo__upload,
.purchase-photo__failed,
.purchase-photo__success,
.purchase-photo__found,
.purchase-photo__find {
  @apply w-full h-full;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
}

.purchase-photo__loading {
  @apply justify-center;
}

.purchase-photo .purchase-photo__upload .avatar,
.purchase-photo .purchase-photo__find .avatar {
  @apply mb-8 mt-0;
}

.purchase-photo .purchase-photo__find .avatar img,
.purchase-photo .purchase-photo__found .avatar img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.purchase-photo-failed__title,
.purchase-photo-success__title,
.purchase-photo__title {
  @apply text-xl font-semibold mb-4;
}

.purchase-photo-success__pin,
.purchase-photo-failed__pin {
  @apply mt-4 mb-6;
}

.purchase-photo-success__subtitle,
.purchase-photo-failed__subtitle,
.purchase-photo__subtitle {
  @apply text-sm font-normal text-grey-dark text-center mb-6;
  /*max-width: 300px;*/
}

.purchase-photo-success__subtitle a {
  @apply block mt-2;
}

.reveal-child__purchase-photo__subtitle-container {
  flex: 1;
}

.reveal-child__purchase-photo__btn-container,
.purchase-photo .purchase-photo__btn,
.purchase-photo .purchase-photo__btn .btn {
  @apply w-full;
}

.reveal-child__purchase-photo__found-header-container {
  @apply w-full;
}

.purchase-photo .purchase-photo__found .reveal-child:not(.reveal-child__purchase-photo__found-header-container) {
  @apply w-full;
}

.purchase-photo .purchase-photo__found {
  @apply relative flex flex-col;
  opacity: 0;
}

.purchase-photo .purchase-photo__found-enter {
  @apply standard-animation--fast;
  animation-name: reveal;
}

.purchase-photo .purchase-photo__found .purchase-photo__found-header {
  @apply relative flex items-center justify-between mb-2;
}

.purchase-photo .reveal-child__purchase-photo__found-gallery-container {
  flex: 1;
}

.purchase-photo .purchase-photo__found .purchase-photo__found-gallery {
  @apply relative h-full;
  overflow: hidden;
}

.purchase-photo .purchase-photo__found .purchase-photo__found-header-close {
  /** To match the <Avatar> such that middle text is centered. This is SHAMEFUL **/
  width: 4rem;
}

.purchase-photo .purchase-photo__found .purchase-photo__found-header-close svg {
  @apply mt-0 mr-0 text-grey;
  filter: none;
}

.purchase-photo .purchase-photo__found .purchase-photo__found-header-title {
  @apply text-xl font-semibold my-4;
}

.purchase-photo .purchase-photo__found .purchase-photo__found-header-avatar {
  @apply flex items-center;
}

.purchase-photo__payment,
.purchase-photo__success,
.purchase-photo__loading,
.purchase-photo__failed {
  @apply flex justify-center flex-col;
}

.purchase-photo__payment h2,
.purchase-photo__payment .image {
  @apply text-xl font-semibold mb-2;
}

.purchase-photo__payment p {
  @apply text-sm mb-8 text-grey-dark font-medium;
}

.purchase-photo__payment .image {
  @apply shadow-lg;
  width: 100px;
}