@import "./mixin.less";

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

  > .title-text {
    .flex(row, space-between, center);
    @apply w-full py-1 px-4;

    > .normal-text {
      @apply text-xs leading-6 font-bold text-black opacity-50;
    }

    > .btn {
      @apply hidden px-1 text-lg leading-6;
    }

    &:hover,
    &:active {
      > .btn {
        @apply block;
      }
    }
  }

  > .create-shortcut-btn-container {
    .flex(row, center, center);
    @apply w-full mt-4 mb-2;

    > .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 font-bold;

          > * {
            @apply text-white;
          }
        }
      }

      > .shortcut-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;
        }

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

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

        > .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 p-2 translate-y-14 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;
          }
        }
      }
    }
  }
}