.c-dropdown {
  @apply border border-gray-100 shadow-md p-2 flex flex-col gap-1 rounded-xl bg-white;

  &__menu{
    @apply border border-gray-100 shadow-md p-2 flex flex-col gap-1 rounded-xl bg-white;

    &.is-open {
      @apply visible opacity-100;
    }

    &.placement{
      &-bottom-start{
        @apply top-full bottom-auto left-0 right-auto;
      }
      &-bottom{
        @apply top-full bottom-auto left-1/2 -translate-x-1/2;
      }
      &-bottom-end{
        @apply top-full bottom-auto left-auto right-0;
      }
      &-top-start{
        @apply top-auto bottom-full left-0 right-auto;
      }
      &-top{
        @apply top-auto bottom-full left-1/2 -translate-x-1/2;
      }
      &-top-end{
        @apply top-auto bottom-full left-auto right-0;
      }
    }
  }


  &__item{
    @apply cursor-pointer transition-all flex items-center gap-2;
    @apply p-2 text-sm leading-4 rounded-lg text-gray-900;

    &:hover{
      @apply bg-gray-50;
    }

    [class^="fa-"], .c-icon{
      @apply text-gray-600;
    }

    // Danger type
    &--danger{
      @apply text-red-600;

      [class^="fa-"], .c-icon{
        @apply text-red-600;
      }
    }

    // Disabled
    &.is-disabled{
      @apply opacity-50 cursor-not-allowed;

      &:hover{
        @apply bg-white;
      }
    }

    // Disabled
    &.is-selected{
      @apply bg-primary-50 font-semibold justify-between;

      &:after{
        content: "\f00c";
        font-size: 15px;
        font-family: "Font Awesome 6 Pro", serif !important;
        font-weight: 300;
        @apply text-primary-500;
      }

      &:hover{
        @apply bg-primary-50;
      }
    }
  }


  &__separator{
    @apply -mx-2 border-t border-gray-100 my-1;
  }
}
