@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;

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

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

  &.float {
    width: calc(100% - 2rem);
    @apply fixed bottom-4 sm:relative sm:bottom-0 sm:w-full;

    & .emoji-picker-react {
      @apply bottom-16 sm:bottom-auto;
    }
  }

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

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

  .emoji-picker-react {
    @apply absolute;
    
    li.emoji::before {
      @apply hidden;
    }
  }
}