.tags-wrapper {
  @apply flex flex-col justify-start items-start px-2 w-full h-auto flex-nowrap pb-4 mt-2 grow hide-scrollbar;

  > .tags-container {
    @apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2 mt-1;

    .subtags-container {
      @apply flex flex-col justify-start items-start h-auto mt-1 ml-5 pl-1 border-l-2 border-l-gray-200 dark:border-l-gray-400;
      width: calc(100% - 18px);
      min-width: 80px;

      > .tag-item-container {
        @apply first:mt-0;
      }
    }

    .tag-item-container {
      @apply flex flex-row justify-between items-center w-full h-10 py-0 px-4 rounded-lg text-base shrink-0 select-none cursor-pointer hover:bg-white dark:hover:bg-zinc-700;

      &.active {
        > .tag-text-container {
          @apply !text-green-600;
        }
      }

      > .tag-text-container {
        @apply flex flex-row justify-start items-center overflow-hidden shrink-0 leading-5 text-black dark:text-gray-200;
        max-width: calc(100% - 24px);

        > .icon-text {
          @apply block w-4 shrink-0;
        }

        > .tag-text {
          @apply truncate;
        }
      }

      > .btns-container {
        @apply flex flex-row justify-end items-center;

        > .action-btn {
          @apply flex flex-row justify-center items-center w-6 h-6 shrink-0 transition-all rotate-0;

          > .icon-img {
            @apply w-5 h-5 opacity-80 dark:text-gray-400;
          }

          &.shown {
            @apply rotate-90;
          }
        }
      }
    }

    > .tip-text {
      @apply w-full bg-gray-50 dark:bg-zinc-700 mt-2 px-4 py-1 leading-6 rounded text-sm text-gray-400 font-mono;
    }
  }
}
