.memo-editor-container {
  @apply relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-700 px-4 rounded-lg border-2 border-gray-200 dark:border-zinc-600;

  .tag-suggestions {
    margin-left: -10px;
    margin-top: 2px;
  }

  > .memo-editor {
    @apply mt-4 flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-200;
  }

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

    > .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 text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow;

        > .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-600 dark:text-gray-300 border border-gray-300 dark:border-zinc-500 rounded-xl px-2;
        }
      }
    }
  }

  > .editor-footer-container {
    @apply w-full flex flex-row justify-between items-center border-t border-t-gray-100 dark:border-t-zinc-500 py-3 mt-2;

    > .visibility-selector {
      @apply h-8;

      > .current-value-container {
        @apply rounded-full px-3;

        > .value-text {
          @apply text-sm w-full mr-1;
        }
      }
    }

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

      > .cancel-btn {
        @apply mr-4 text-sm text-gray-500 hover:opacity-80 dark:text-gray-300;
      }

      > .confirm-btn {
        @apply border-none select-none rounded-full flex flex-row justify-center items-center shadow cursor-pointer px-4 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
      }
    }
  }
}