@import "./mixin.less";

.shortcuts-wrapper {
  @apply flex flex-col justify-start items-start w-full py-0 px-2 mt-2 h-auto shrink-0 flex-nowrap;
  .hide-scroll-bar();

  > .title-text {
    @apply flex flex-row justify-start items-center w-full px-4;

    > .normal-text {
      @apply text-sm leading-6 font-mono text-gray-400;
    }

    > .btn {
      @apply flex flex-col justify-center items-center w-5 p-1 h-5 bg-gray-200 rounded ml-2 shadow hover:opacity-80;

      > .icon-img {
        @apply opacity-60;
      }
    }
  }

  > .create-shortcut-btn-container {
    @apply flex flex-row justify-start items-center w-full mt-4 mb-2 ml-4;

    > .btn {
      @apply flex p-2 px-4 rounded-lg text-sm border border-dashed border-blue-600;

      &:hover {
        @apply bg-blue-600 text-white;
      }
    }
  }

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

    > .shortcut-container {
      @apply flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-2 rounded-lg text-base cursor-pointer select-none shrink-0 hover:bg-white;

      &:hover {
        > .btns-container {
          @apply flex;
        }
      }

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

      > .shortcut-text-container {
        @apply flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black;

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

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

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

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

          &.toggle-btn {
            @apply opacity-60;

            &:hover {
              & + .action-btns-wrapper {
                @apply flex;
              }
            }
          }
        }

        > .action-btns-wrapper {
          @apply flex-col justify-start items-start absolute top-6 right-0 w-auto h-auto px-4 pt-3 hidden z-1;

          > .action-btns-container {
            @apply flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white;
            box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);

            > .btn {
              @apply w-full text-sm leading-6 py-1 px-3 rounded text-left hover:bg-gray-100;

              &.delete-btn {
                @apply text-orange-600;

                &.final-confirm {
                  @apply font-black;
                }
              }
            }
          }

          &:hover {
            @apply flex;
          }
        }
      }
    }
  }
}