.gui-person {
  @apply flex py-2 px-4 overflow-hidden items-center;
}

.gui-person-right {
  @apply ml-3 flex-shrink overflow-hidden w-full flex flex-wrap items-center;
  @include gradient-overflow(rgba(255, 255, 255, 1));

  white-space: nowrap;
}

.gui-person-name {
  @apply text-neutral-20 w-full flex-shrink-0;
}

.gui-person-subtitle {
  @apply text-neutral-primary text-sm w-full flex-shrink-0;
}

.gui-person-interactive {
  @apply outline-none bg-transparent border-0 text-left w-full cursor-pointer;

  &:hover,
  &:focus {
    @apply bg-neutral-95;

    .gui-person-right {
      @include gradient-overflow(theme('colors.neutral.95'));
    }
  }

  &:active {
    @apply bg-blue-98;

    .gui-person-right {
      @include gradient-overflow(theme('colors.blue.98'));
    }
  }
}

.gui-person-selected {
  @apply bg-blue-98;

  .gui-person-right {
    @include gradient-overflow(theme('colors.blue.98'));
  }

  .gui-person-name {
    @apply text-blue-primary;
  }

  .gui-person-tick {
    @apply ml-auto;
  }
}

.gui-person-collapse {
  @apply p-0;
}

.gui-person-bordered {
  @apply border border-t-0 border-l-0 border-r-0 border-solid border-neutral-90;
}

.gui-person-pending {
  @apply text-purple-primary;
}