@import "./mixin.less";

.memo-editor-container {
  @apply transition-all relative w-full flex flex-col justify-start items-start bg-white p-4 rounded-lg border-2 border-gray-200;

  &.float {
    @media (max-width: 640px) {
      @apply fixed w-full bottom-0 left-0 border-none rounded-none;
      background-color: #f6f5f4;

      > .memo-editor {
        @apply p-4 mb-2 rounded-lg border-2 flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white;

        .tag-action > .tag-list {
          @apply bottom-7;
          top: unset;
        }
      }

      .emoji-picker-react {
        @apply !bottom-8;
        top: unset !important;
      }
    }
  }

  &.fullscreen {
    @apply fixed w-full h-full top-0 left-0 z-1000 border-none rounded-none sm:p-8;
    background-color: #f6f5f4;

    > .memo-editor {
      @apply p-4 mb-4 rounded-lg border shadow-lg flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white;

      > .common-editor-inputer {
        @apply flex-grow w-full !h-full max-h-full;
      }
    }

    .tag-action > .tag-list {
      @apply bottom-7;
      top: unset;
    }

    .emoji-picker-react {
      @apply !bottom-8;
      top: unset !important;
    }
  }

  &.edit-ing {
    border-color: @text-blue;
  }

  > .tip-container {
    @apply mb-1 w-full flex flex-row justify-start items-center text-xs leading-6;

    > .tip-text {
      @apply text-gray-400 mr-2;
    }

    > .cancel-btn {
      @apply px-2 border rounded-full leading-5 text-blue-600 hover:border-blue-600;
    }
  }

  > .memo-editor {
    @apply flex flex-col justify-start items-start relative w-full h-auto bg-white;
  }

  > .common-tools-wrapper {
    @apply relative w-full flex flex-row justify-between items-center;

    > .common-tools-container {
      @apply flex flex-row justify-start items-center;

      > .action-btn {
        @apply flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer opacity-60 hover:opacity-90 hover:bg-gray-300 hover:shadow;

        &.tag-action {
          @apply relative;

          &:hover {
            > .tag-list {
              @apply flex;
            }
          }

          > .tag-list {
            @apply hidden flex-col justify-start items-start absolute top-6 left-0 mt-1 p-1 z-1 rounded w-32 max-h-52 overflow-auto font-mono bg-black;

            > .item-container {
              @apply w-full text-white cursor-pointer rounded text-sm leading-6 px-2 hover:bg-gray-700;
            }

            > .tip-text {
              @apply w-full text-sm text-gray-200 leading-6 px-2 cursor-default;
            }
          }
        }

        > .icon-img {
          @apply w-5 h-5 mx-auto flex flex-row justify-center items-center;
        }

        > .tip-text {
          @apply hidden ml-1 text-xs leading-5 text-gray-700 border border-gray-300 rounded-xl px-2;
        }
      }

      .emoji-picker-react {
        @apply absolute shadow left-6 top-8;

        li.emoji::before {
          @apply hidden;
        }
      }
    }

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

      > .action-btn {
        @apply border-none select-none cursor-pointer py-1 px-3 rounded text-sm hover:opacity-80;
      }

      > .cancel-btn {
        @apply text-gray-500 bg-transparent mr-2;
      }

      > .confirm-btn {
        @apply shadow cursor-pointer px-3 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;

        > .icon-text {
          @apply text-base ml-1;
        }
      }
    }
  }

  > .resource-list-wrapper {
    @apply w-full flex flex-row justify-start flex-wrap;

    > .resource-container {
      @apply mt-1 mr-1 flex flex-row justify-start items-center flex-nowrap bg-gray-50 px-2 py-1 rounded cursor-pointer hover:bg-gray-100;

      > .icon-img {
        @apply w-4 h-auto mr-1 text-gray-500;
      }

      > .name-text {
        @apply text-gray-500 text-sm max-w-xs truncate font-mono;
      }

      > .close-icon {
        @apply w-4 h-auto ml-1 text-gray-500 hover:text-gray-800;
      }
    }
  }
}