.profile-sheet {
  position: absolute;
  height: 100%;
  width: 100%;
}

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

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

.profile-sheet__profile-sheetables,
.profile-sheet__header,
.profile-sheet__subtitle,
.profile-sheet__title {
  @apply select-none
}

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

.profile-sheet__title,
.profile-sheet__subtitle {
  @apply antialiased;
}

.profile-sheet__title {
  @apply text-xl font-semibold;
}

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

.profile-sheet__profile-sheetables {
  @apply py-4 px-6;
  /** Contain floats **/
  overflow: hidden;
}

.profile-sheet__avatar {
  @apply flex justify-center mb-2;
}

.profile-sheet__avatar .avatar {
  border: none;
}

.profile-sheet__name {
  @apply text-center text-xl font-semibold;
}

.profile-sheet__profile-sheetable,
.profile-sheet__profile-sheetable-separator {
  @apply mb-4;

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

.profile-sheet__profile-sheetable {
  @apply block no-underline text-black cursor-pointer;
}

.profile-sheet__profile-sheetable-image {
  @apply mr-5;
  height: 40px;
  width: 40px;
  display: inline-block;
}

.profile-sheet__profile-sheetable-text {
  @apply antialiased font-semibold text-sm;
  display: inline-block;
  line-height: 40px;
  vertical-align: top;
}

.profile-sheet__profile-sheetable-subtext {
  @apply antialiased font-light text-xs text-grey-dark leading-none truncate;
  max-width: 200px;
}

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

.profile-sheet__profile-sheetable-text-confirmation--active {
  opacity: 1;
}

.profile-sheet__profile-sheetable-separator {
  @apply border-b border-grey-lighter w-full;
}

.profile-sheet__action {
  @apply px-6 w-full;
}

.profile-sheet__action .btn {
  @apply w-full;
}

.profile-sheet__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
 */
.profile-sheet__profile-sheetable--raw {
  /** https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout **/
  -webkit-touch-callout: default;
}

.profile-sheet__profile-sheetable--raw * {
  pointer-events: none;
}

/** edit-name */
#profile-sheet-edit-name {
  height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

#profile-sheet-edit-name .btn--primary {
  @apply mb-2;
}

#profile-sheet-edit-profile {
  @apply relative;
}

#profile-sheet-edit-profile * {
  cursor: pointer;
}

#profile-sheet-edit-profile .upload__container {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}