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

  &:hover,
  &:active {
    > .quickly-action-wrapper {
      @apply flex;
    }
  }

  &.is-focus {
    > .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 dark:bg-zinc-700;

    > .icon-img {
      @apply w-4 h-auto opacity-30 dark:text-gray-200;
    }

    > .text-input {
      @apply flex ml-2 w-24 grow text-sm outline-none bg-transparent dark:text-gray-200;
    }
  }

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

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

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

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

        > .section-text {
          @apply text-gray-600 dark:text-gray-400 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-2 rounded dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-600;

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

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