@import "./mixin.less";

.common-editor-wrapper {
  .flex(column, flex-start, flex-start);
  @apply relative w-full h-auto bg-white;

  > .common-editor-inputer {
    @apply w-full h-full mt-1 mb-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent whitespace-pre-wrap;
    min-height: 40px;
    max-height: 300px;
    .pretty-scroll-bar(2px, 0);

    &::placeholder {
      padding-left: 2px;
    }

    &:focus {
      &::placeholder {
        color: lightgray;
      }
    }
  }

  > .common-tools-wrapper {
    @apply 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-start 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;

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

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

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