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

  &:hover {
    .gui-conversation__text__cutoff {
      @apply bg-blur-grey-bottom;
    }

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

.gui-new-comment__input,
.gui-edit-comment__input {
  @apply border-0 p-0;
}

.gui-blur-background {
  background: rgb(255 255 255 / 75%);

  @supports (filter: blur()) {
    transition: filter $animation-time-micro*0.5;
    filter: blur(4px);
    background: none;
    opacity: .3;
  }
}

.gui-new-comment__suggestions,
.gui-edit-comment__suggestions {
  &__list {
    @apply absolute overflow-y-scroll bg-white border border-solid border-neutral-90 rounded max-h-128 min-w-64;

    top: $layout-spacing-base * 0.5 + ($layout-spacing-base * 0.25);
    margin-bottom: $layout-spacing-base * 3 !important; // have to override inline styles from react-mentions package :(

    &::before {
      content: 'Mention...';

      @apply w-full block p-2 text-neutral-primary;
    }
  }

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

  .gui-avatar__wrapper {
    @apply cursor-pointer p-2 border-t border-b-0 border-l-0 border-r-0 border-solid border-neutral-90;
  }

  .gui-avatar__name {
    @apply text-neutral-30 text-sm font-semi-bold;
  }

  .gui-avatar__email {
    @apply text-neutral-primary text-xs;
  }
}

.gui-icon--resolved path {
  @apply fill-green-primary;
}