avo-hq/avo

/* EDIT STYLES */

.tiptap {
  @apply m-0 p-4 outline-none min-h-44;

  >*+* {
    @apply mt-4;
  }

  ul,
  ol {
    @apply pl-6 list-outside;
  }

  ul {
    @apply list-disc;
  }

  ol {
    @apply list-decimal;
  }
}

.tiptap__field {
  @apply w-full mb-4 border border-gray-200 rounded;
}

.tiptap__editor {
  @apply border-none;
}

.tiptap__toolbar {
  @apply flex items-center justify-between px-3 py-2 border-b bg-gray-50;
}

.tiptap__toolbar-area {
  @apply flex flex-wrap items-center divide-gray-200 sm:divide-x sm:rtl:divide-x-reverse;
}

.tiptap__button-group {
  @apply flex flex-wrap items-center space-x-1 rtl:space-x-reverse;

  &:not(:first-child):not(:last-child) {
    @apply px-4;
  }

  &:first-child {
    @apply pe-4;
  }

  &:last-child {
    @apply ps-4;
  }
}

.tiptap__button {
  @apply p-1 text-gray-500 rounded cursor-pointer;

  &:hover:enabled {
    @apply bg-gray-100;
  }

  &:active:enabled {
    @apply bg-gray-200;
  }

  &:disabled {
    @apply text-gray-200 cursor-default;
  }

  svg {
    @apply block h-6;
  }
}

.tiptap__button--selected {
  @apply bg-gray-900/10;
}

/* LINK STYLES */

.tiptap__link-area {
  @apply opacity-100 transition-all;
}

.tiptap__link-field {
  &:placeholder {
    @apply italic text-gray-400;
  }

  &:focus::placeholder {
    @apply text-transparent;
  }
}

.tiptap__link-field {
  @apply text-sm mr-2 py-1 border border-gray-200 rounded;
}

/* SHOW STYLES */

.tiptap__content {
  @apply py-2 max-w-4xl;

  >*+* {
    @apply mt-4;
  }

  ul,
  ol {
    @apply pl-6 list-outside;
  }

  ul {
    @apply list-disc;
  }

  ol {
    @apply list-decimal;
  }
}