.edit-name {
  @apply relative text-center w-full h-full;
  overflow: hidden;
  min-height: 375px;
}

.edit-name__modal .modal__card {
  @apply p-0;
}

.edit-name__modal .modal__card-section {
  @apply mt-0 h-full;
}

.edit-name .reveal:not(.edit-name__found) {
  @apply w-full h-full px-8 py-6;
}

.edit-name__loading,
.edit-name__upload,
.edit-name__failed,
.edit-name__found,
.edit-name__find {
  @apply w-full h-full;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
}

.edit-name__loading {
  @apply justify-center;
}

.edit-name .edit-name__upload .avatar,
.edit-name .edit-name__find .avatar {
  @apply mb-8 mt-0;
}

.edit-name .edit-name__find .avatar img,
.edit-name .edit-name__found .avatar img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.edit-name-failed__title,
.edit-name__title {
  @apply text-xl font-semibold mb-4;
}

.edit-name-failed__pin {
  @apply mt-4 mb-6;
}

.edit-name-failed__subtitle,
.edit-name__subtitle {
  @apply text-sm font-normal text-grey-dark text-center mb-6;
  /*max-width: 300px;*/
}

.reveal-child__edit-name__subtitle-container {
  flex: 1;
}

.reveal-child__edit-name__btn-container,
.edit-name .edit-name__btn,
.edit-name .edit-name__btn .btn {
  @apply w-full;
}

.reveal-child__edit-name__found-header-container {
  @apply w-full;
}

.edit-name .edit-name__found .reveal-child:not(.reveal-child__edit-name__found-header-container) {
  @apply w-full;
}

.edit-name .edit-name__found {
  @apply relative flex flex-col;
  opacity: 0;
}

.edit-name .edit-name__found-enter {
  @apply standard-animation--fast;
  animation-name: reveal;
}

.edit-name .edit-name__found .edit-name__found-header {
  @apply relative flex items-center justify-between mb-2;
}

.edit-name .reveal-child__edit-name__found-gallery-container {
  flex: 1;
}

.edit-name .edit-name__found .edit-name__found-gallery {
  @apply relative h-full;
  overflow: hidden;
}

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

.edit-name .edit-name__found .edit-name__found-header-close svg {
  @apply mt-0 mr-0 text-grey;
  filter: none;
}

.edit-name .edit-name__found .edit-name__found-header-title {
  @apply text-xl font-semibold my-4;
}

.edit-name .edit-name__found .edit-name__found-header-avatar {
  @apply flex items-center;
}