@import "./mixin.less";

.search-bar-container {
  @apply relative w-auto;

  &:hover,
  &:active {
    > .search-bar-inputer > .text-input {
      @apply flex;
    }

    > .quickly-action-wrapper {
      @apply flex;
    }
  }

  > .search-bar-inputer {
    @apply h-9 flex flex-row justify-start items-center w-full py-2 px-3 sm:px-4 rounded-full sm:rounded-lg bg-zinc-200;

    > .icon-img {
      @apply w-4 h-auto opacity-30;
    }

    > .text-input {
      @apply hidden sm:flex ml-2 w-24 grow text-sm;
    }
  }

  > .quickly-action-wrapper {
    @apply hidden absolute top-9 -right-2 p-2 w-80 z-10;

    > .quickly-action-container {
      @apply flex flex-col justify-start items-start w-full bg-white px-4 py-3 rounded-lg;
      box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);

      > .title-text {
        @apply text-gray-600 text-xs;
      }

      > .types-container {
        @apply flex flex-row justify-start items-start w-full text-xs mt-2;

        > .section-text {
          @apply text-gray-600 mr-1 shrink-0 leading-6;
        }

        > .values-container {
          @apply flex flex-row justify-start items-start flex-wrap select-none;

          > div {
            @apply flex flex-row justify-start items-center leading-6;

            .type-item {
              @apply cursor-pointer px-1 rounded hover:bg-gray-100;

              &.selected {
                @apply bg-green-600 text-white;
              }
            }

            .split-text {
              @apply text-gray-400 mx-1;
            }
          }
        }
      }
    }
  }
}