/***************************************
  Default ActionText
****************************************/
@import "https://cdn.jsdelivr.net/npm/trix@2.1.3/dist/trix.min.css";

.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content
  .attachment-gallery.attachment-gallery--2
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
.trix-content
  .attachment-gallery.attachment-gallery--4
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

/***************************************
  Custom ActionText
****************************************/

trix-toolbar .trix-button-group {
  @apply border-none gap-px;
}

trix-toolbar .trix-button-row {
  @apply scrollbar-thin scrollbar-track-white scrollbar-thumb-zinc-200 dark:scrollbar-track-transparent dark:scrollbar-thumb-zinc-700;
}

trix-toolbar .trix-button {
  @apply border-transparent hover:bg-zinc-50/50 rounded dark:hover:bg-zinc-500/50 dark:hover:text-white dark:bg-transparent dark:before:invert;

  &[disabled] {
    @apply dark:rounded dark:hover:bg-transparent dark:hover:text-zinc-500/10 hover:cursor-not-allowed;
  }

  &:before {
    @apply dark:hover:opacity-100 dark:hover:text-white;
  }

  &:not(:first-child) {
    @apply border-l-0 !important;
  }
}

trix-toolbar .trix-button.trix-active {
  @apply bg-zinc-500/25 dark:bg-zinc-500/30 dark:before:text-zinc-50;
}

trix-toolbar .trix-dialog__link-fields .trix-button-group {
  @apply gap-1.5;

  &:not(:first-child) .trix-button--dialog {
    @apply border-l !important;
  }
}

trix-toolbar .trix-dialog {
  @apply shadow-lg p-4 rounded border border-zinc-300 dark:border-zinc-600 dark:bg-zinc-900 !important;
}

trix-toolbar .trix-input--dialog {
  @apply px-3 py-1 text-sm border border-zinc-300 shadow-inner bg-white font-normal placeholder:text-zinc-500 rounded block w-full focus:outline-none focus:ring-4 pr-32 focus:ring-zinc-50 focus:border-zinc-500 text-zinc-900 focus:shadow-none dark:border-zinc-600/70 dark:placeholder:text-zinc-400 dark:focus:ring-zinc-500/30 dark:focus:border-zinc-500/50 dark:bg-zinc-800 dark:text-white !important;
}

trix-toolbar .trix-button.trix-button--dialog {
  @apply border-zinc-300 bg-white dark:bg-zinc-900 dark:text-zinc-100 dark:focus:ring-zinc-500/30 dark:hover:bg-zinc-800/50 text-sm text-zinc-800 px-2 py-1 focus:ring-4 focus:ring-zinc-50 focus:border-zinc-500 hover:bg-zinc-50/50 shadow-sm font-medium dark:border-zinc-600 !important;
  border: 1px;
  border-style: solid;

  &:first-of-type {
    @apply rounded-l;
  }

  &:last-child {
    @apply rounded-r;
  }
}

/* prose style content */
trix-editor {
  @apply rounded border border-zinc-300 focus:ring-4 focus:ring-zinc-50 focus:border-zinc-500 focus-within:ring-zinc-50 focus-within:border-zinc-500 focus:outline-none bg-white shadow-inner p-3 text-base dark:bg-zinc-800 dark:text-white dark:focus:ring-zinc-500/20 dark:border-zinc-700 !important;
}

trix-editor,
.trix-content {
  @apply leading-normal font-sans text-base break-words;

  * {
    @apply box-border m-0 p-0;
  }

  h1 {
    @apply text-4xl leading-tight font-extrabold -tracking-[0.03em];
  }

  blockquote {
    @apply border-0 border-solid border-zinc-300 border-l-4 ml-3 pl-6;
  }

  [dir="rtl"] blockquote,
  blockquote[dir="rtl"] {
    @apply border-0 border-r-4 mr-3 pr-6;
  }

  li {
    @apply ml-4;
  }

  [dir="rtl"] li {
    @apply mr-4;
  }

  pre {
    @apply inline-block w-full align-top font-mono text-sm p-2 whitespace-pre bg-zinc-200/40 dark:bg-zinc-700/80 overflow-x-auto rounded-lg;
  }

  img {
    @apply max-w-full h-auto;
  }

  .attachment__metadata {
    @apply p-1 flex gap-1;
  }

  .attachment__caption {
    @apply mt-2 text-center;

    .attachment__name + .attachment__size::before {
      content: " \2022 ";
    }
  }

  .attachment {
    @apply inline-block relative max-w-full;

    a {
      @apply text-inherit no-underline hover:text-inherit visited:hover:text-inherit;
    }

    &--preview {
      @apply w-full text-center;
    }

    &--file {
      @apply text-zinc-800 leading-none m-0.5 p-2 rounded-md;
    }
  }

  .attachment-gallery {
    @apply flex flex-wrap relative;

    .attachment {
      @apply flex-1 basis-1/3 px-2 max-w-[33%];
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      .attachment {
        @apply basis-1/2 max-w-[50%];
      }
    }
  }
}