@import "./mixin.less";

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

  > .title-text {
    @apply w-full px-4 text-sm leading-6 font-mono text-gray-400;
  }

  > .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-4 pl-1;
      width: calc(100% - 18px);
      min-width: 80px;
      border-left: 2px solid @bg-gray;

      > .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;

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

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

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

        > .tag-text {
          @apply shrink-0;
        }
      }

      > .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;
          }

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

    > .tag-tip-container {
      @apply w-full mt-2 pl-4 text-sm text-gray-400;

      > .code-text {
        @apply p-1 mx-1 text-blue-600 font-mono whitespace-pre-line bg-blue-100 rounded;
      }
    }
  }
}
