.edit-profile {}
.edit-profile__pill-container {
  @apply w-full;
  overflow: auto;
}

.edit-profile__pill {
  @apply bg-grey-lighter rounded-full my-3 text-center mx-auto;
  width: 24px;
  border-width: 1.5px;
}

.edit-profile__edit-profileables,
.edit-profile__header,
.edit-profile__subtitle,
.edit-profile__title {
  @apply select-none
}

.edit-profile__header {
  @apply  text-center pt-2 pb-5 border-b border-grey-lighter;
}

.edit-profile__title,
.edit-profile__subtitle {
  @apply antialiased;
}

.edit-profile__title {
  @apply text-xl font-semibold;
}

.edit-profile__subtitle {
  @apply text-sm mt-2 text-grey-dark px-8 font-medium;
}

.edit-profile__edit-profileables {
  @apply py-4 px-6;
  /** Contain floats **/
  overflow: hidden;
}

.edit-profile__edit-profileable,
.edit-profile__edit-profileable-separator {
  @apply mb-4;

  /**
   * We float such that elements break but do not take full width
   */
  overflow: hidden;
  float: left;
  clear: left;
}

.edit-profile__edit-profileable {
  @apply block no-underline text-black cursor-pointer;
}

.edit-profile__edit-profileable-image {
  @apply mr-5;
  height: 40px;
  width: 40px;
  display: inline-block;
}

.edit-profile__edit-profileable-text {
  @apply antialiased font-semibold text-sm;
  display: inline-block;
  line-height: 40px;
  vertical-align: top;
}

.edit-profile__edit-profileable-subtext {
  @apply antialiased font-light text-xs text-grey-dark leading-none truncate;
  max-width: 200px;
}

.edit-profile__edit-profileable-text-confirmation {
  @apply antialiased font-medium text-xs inline-block ml-2 text-green;
  opacity: 0;
  transition: opacity .5s;
}

.edit-profile__edit-profileable-text-confirmation--active {
  opacity: 1;
}

.edit-profile__edit-profileable-separator {
  @apply border-b border-grey-lighter w-full;
}

.edit-profile__action {
  @apply px-6 w-full;
}

.edit-profile__action .btn {
  @apply w-full;
}

.edit-profile__action .btn__main-wrapper {
  @apply justify-center;
}


/**
 * For the `Raw` client type, we want to ensure that 
 * tap and hold behavior is preserved for the <a> tag
 */
.edit-profile__edit-profileable--raw {
  /** https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout **/
  -webkit-touch-callout: default;
}

.edit-profile__edit-profileable--raw * {
  pointer-events: none;
}