@import 'inputIcon/inputIcon';

.gui-input {
  @apply m-0 border border-solid border-neutral-90 rounded w-full outline-none transition-colors duration-200 bg-white;

  &:hover:enabled {
    @apply border-transparent shadow-blue-primary-1px;
  }

  &:focus:enabled {
    @apply border-transparent shadow-blue-primary-2px;
  }
}

.gui-input-md {
  @apply p-2 text-base leading-6;
}

.gui-input-sm {
  @apply p-2 text-sm leading-4;
}

.gui-input-invalid,
.gui-input-native:invalid {
  @apply border-transparent shadow-red-primary-2px;

  &:hover:enabled,
  &:focus:enabled {
    @apply border-transparent shadow-red-primary-2px;
  }
}

.gui-input-valid,
.gui-input-native:valid {
  @apply border-transparent shadow-green-primary-2px;

  &:hover:enabled,
  &:focus:enabled {
    @apply border-transparent shadow-green-primary-2px;
  }
}

.gui-mentions-input--multiLine {
  @apply h-full bg-white;
}

.gui-mentions-input__input {
  @apply gui-input gui-input-md;

  &:hover:enabled {
    @apply border-transparent shadow-blue-primary-1px;
  }

  &:focus:enabled {
    @apply border-transparent shadow-blue-primary-2px;
  }
}

.gui-mentions-input__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 :(
    max-height: 200px;

    &::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;
  }
}