@layer components {
  .dropdown {
    @apply relative flex flex-col;

    &-toggle {
      @apply flex cursor-pointer items-center justify-end;
    }

    &-content {
      @apply fixed left-0 top-0 z-20 hidden overflow-hidden rounded-primary border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-800;

      &.show {
        @apply block;
      }
    }

    &-link {
      @apply inline-flex w-full cursor-pointer items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-slate-700;
    }

    &-btn {
      @apply inline-flex w-full items-center gap-2 px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700;

      &.active {
        @apply text-primary-500 dark:text-primary-500;
      }
    }
  }
}
