ujiro99/tlt

.profile {
  $this: .profile;

  display: flex;
  padding: 6px 10px;
  border: solid 1px var(--bg-gray-200);
  border-radius: var(--radius-md);
  background: white;

  &__photo {
    border-radius: 50%;
    width: 46px;
    height: 46px;
  }

  &__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
  }

  &__name {
    @apply text-gray-500;
  }

  &__email {
    @apply text-gray-400;
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 6px;
  }

  @at-root {
    $(this).mod--loading {
      $(this)__photo {
        @apply bg-slate-200;
        @apply animate-pulse;
      }

      $(this)__info {
        padding: 4px 0;
      }

      $(this)__name {
        @apply bg-slate-200;
        @apply animate-pulse;
        height: 1em;
        width: 10em;
        border-radius: 4px;
      }

      $(this)__email {
        @apply bg-slate-200;
        @apply animate-pulse;
        height: 1em;
        width: 14em;
        border-radius: 4px;
        margin-top: 6px;
        margin-bottom: 0;
      }
    }
  }
}