@import "./mixin.less";

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

  > .title-text {
    .flex(row, flex-start, center);
    @apply w-full px-4;

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

    > .btn {
      .flex(column, center, center);
      @apply w-5 h-5 bg-gray-200 rounded ml-2 hover:opacity-80;

      > img {
        @apply w-4 h-4 opacity-80;
      }
    }
  }

  > .create-shortcut-btn-container {
    .flex(row, flex-start, center);
    @apply 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 {
    .flex(column, flex-start, flex-start);
    @apply relative w-full h-auto flex-nowrap mb-2;

    > .shortcut-container {
      .flex(row, space-between, center);
      @apply w-full h-10 py-0 px-4 mt-1 rounded-lg text-sm cursor-pointer select-none shrink-0;

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

        > .btns-container {
          @apply flex;
        }
      }

      &.active {
        background-color: @text-green !important;

        > .shortcut-text-container {
          > * {
            @apply text-white;
          }
        }
      }

      > .shortcut-text-container {
        .flex(row, flex-start, center);
        @apply truncate shrink leading-5 mr-1;
        color: @text-black;

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

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

      > .btns-container {
        .flex(row, flex-end, center);
        @apply hidden shrink-0;

        > .action-btn {
          .flex(row, center, center);
          @apply w-6 h-6 shrink-0;

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

          &.toggle-btn {
            &:hover {
              & + .action-btns-wrapper {
                display: flex;
              }
            }
          }
        }

        > .action-btns-wrapper {
          .flex(column, flex-start, flex-start);
          @apply absolute right-0 w-auto h-auto px-4 pt-3 translate-y-16 hidden z-10;

          > .action-btns-container {
            .flex(column, flex-start, flex-start);
            @apply w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white shadow;

            > .btn {
              @apply w-full py-2 px-2 rounded text-sm text-left;

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

              &.delete-btn {
                color: @text-red;

                &.final-confirm {
                  font-weight: bold;
                }
              }
            }
          }

          &:hover {
            display: flex;
          }
        }
      }
    }
  }
}