.modal {
  @apply shadow-lg bg-grey-light flex flex-col absolute center-x-abs;
  min-height: 200px;
  width: 80%;
  min-width: 200px;
  max-width: 500px;

  visibility: hidden;
}

.modal,
.modal__card {
  @apply rounded-lg antialiased font-sans;
}

.modal__card {
  @apply w-full bg-white flex-1 p-4 shadow-lg;
  padding-bottom: 0;
}

.modal__avatar {
  @apply absolute center-x-abs text-center;
  top: -2rem;
}

.modal__lip {
  @apply flex items-center p-4 relative bg-transparent;
}

.modal__lip-close {
  @apply absolute;
}

.modal__lip-close .icon {
  @apply text-grey-darkest m-0;
  filter: none;
}

.modal__lip-text {
  @apply text-grey-darkest text-sm font-semibold flex-grow text-center;
}

.modal__card-section {
  @apply flex flex-col items-center my-4;
}

.modal__card-section-title {
  @apply flex items-center justify-center;
}

.modal__card-section-title-icon {
  @apply mr-2;
}

.modal__card-section-title-text {
  @apply text-black font-bold text-base text-center;
}

.modal__card-section-subtitle {
  @apply text-grey-dark font-normal text-xs mt-2 mb-2 break-words text-center;

  max-width: 214px;
}

.modal__card-separator {
  @apply flex items-center;
}

.modal__card-separator-line {
  @apply border border-grey-light flex-1;
}

.modal__card-separator-text {
  @apply text-grey px-2 text-sm font-semibold;
}

.modal__card-section-action {
  @apply text-center;
}

.modal__card-section-action,
.modal__card-section-action .btn {
  @apply w-full;
}

.modal__card-section-action .btn__text {
  @apply text-xs font-bold;
}

.modal__tuck {
  height: 0;
}

/**
 * shame
 */
.modal__tuck .form {
  @apply pt-2 pb-3;
}

/**
 * shame
 */
.modal .btn--primary .btn__text {
  @apply text-white !important;
}