.react-contexify {
  position: fixed;
  opacity: 0;
  user-select: none;
  z-index: 1000;
  @apply py-1 px-0 m-0 bg-background-subtle rounded-12 border border-border-subtlest-secondary shadow-2 -translate-x-full;

  &.scrollable {
    height: 15rem;
    overflow-y: scroll;
  }

  &.menu-primary {
    & .react-contexify__item__content {
      @apply text-text-tertiary;
    }
  }

  &.menu-secondary {
    & .react-contexify__item__content {
      @apply text-text-primary;

      & .icon {
        font-size: 1.5rem;
        @apply text-text-disabled mr-2;
      }

      & span {
        flex: 1;
        @apply truncate;
      }
    }
  }

  & .react-contexify__item {
    cursor: pointer;
    position: relative;

    & .react-contexify__item__content {
      border-radius: 0.625rem;
      @apply flex items-center typo-footnote h-8 px-3 py-0 truncate;
    }

    &:focus {
      outline: none;
    }

    &:not(.react-contexify__item--disabled):hover
      > .react-contexify__item__content {
      @apply bg-surface-hover;
    }

    &:not(.react-contexify__item--disabled):focus,
    &:not(.react-contexify__item--disabled).focus
      > .react-contexify__item__content {
      @apply bg-surface-float;
    }

    &:not(.react-contexify__item--disabled):active
      > .react-contexify__item__content {
      @apply bg-theme-active;
    }
  }
}

.react-contexify__will-leave--disabled {
  pointer-events: none;
}

@keyframes react-contexify__fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes react-contexify__fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.react-contexify__will-enter--fade {
  animation: react-contexify__fadeIn 0.1s ease-out;
}

.react-contexify__will-leave--fade {
  animation: react-contexify__fadeOut 0.1s ease-out;
}
