@import "./mixin.less";

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

  > .title-text {
    @apply w-full py-1 px-4 text-xs font-mono text-gray-400;
  }

  > .tags-container {
    .flex(column, flex-start, flex-start);
    @apply relative w-full h-auto flex-nowrap mb-2 mt-1;

    .subtags-container {
      .flex(column, flex-start, flex-start);
      @apply 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 {
      .flex(row, space-between, center);
      @apply w-full h-10 py-0 px-4 rounded-lg text-sm shrink-0 select-none cursor-pointer;

      &:hover {
        background-color: @bg-gray;
      }

      &.active {
        > .tag-text-container {
          > * {
            @apply font-bold;
            color: @text-green;
          }
        }
      }

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

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

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

      > .btns-container {
        .flex(row, flex-end, center);

        > .action-btn {
          .flex(row, center, center);
          @apply 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-xs text-gray-400;

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