/***************************************
  Default ActionText
****************************************/
@import "trix/dist/trix";

.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;
  max-width: 100%;
}

/***************************************
 Custom ActionText
****************************************/
trix-toolbar {
  .trix-button-row .trix-button-group {
    @apply border-transparent;

    &:not(:first-child) {
      @apply ml-0;
    }

    .trix-button {
      @apply border-transparent hover:bg-gray-500/10 rounded-md dark:hover:bg-gray-500/50 dark:hover:text-white;

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

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

    .trix-button.trix-active {
      @apply rounded-md bg-gray-500/20 text-gray-700 dark:bg-gray-600 dark:text-white;

      &:disabled {
        @apply dark:rounded-md dark:hover:bg-gray-600/30 dark:hover:text-gray-300;
      }
    }
  }

  .trix-button--icon::before {
    @apply dark:invert! dark:opacity-80!;
  }

  .trix-button--icon:disabled::before {
    @apply dark:opacity-25 dark:hover:bg-gray-800;
  }

  .trix-dialog {
    @apply shadow-xs! pl-5! py-4! pr-4! rounded-md border! border-gray-300! dark:border-gray-600! dark:bg-gray-900! dark:shadow-gray-900!;

    .trix-input--dialog {
      @apply px-3 py-2 border border-gray-300! shadow-inner bg-white font-normal text-base placeholder:text-gray-500 rounded-md block w-full focus:outline-none! focus:ring-4 pr-32! focus:ring-gray-500/10! focus:border-gray-400/80! text-gray-900! focus:shadow-none! dark:border-gray-600! dark:placeholder:text-gray-400 dark:focus:ring-gray-500/30 dark:focus:border-gray-500/50! dark:bg-gray-800! dark:text-white!;
    }

    .trix-button-group {
      @apply border-transparent absolute right-8 top-[21px];
    }

    .trix-button:not(:first-child) {
      @apply border-l-0;
    }
  }
}

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

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

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

trix-editor {
  @apply rounded-md! border border-gray-300 focus:ring-4 focus:ring-gray-50 focus:border-gray-400 bg-white p-3! text-base dark:bg-gray-800 dark:text-white dark:focus:ring-gray-600/20! dark:border-gray-700! dark:focus:border-gray-600 focus:outline-none shadow-xs;
}

trix-editor,
.trix-content {
  @apply overflow-x-auto dark:text-white;

  blockquote {
    @apply text-xl font-normal text-gray-800 dark:text-white;
  }

  h1 {
    @apply text-3xl;
  }

  ul,
  ol {
    @apply pl-6;
  }

  ul {
    @apply list-disc;
  }

  ol {
    @apply list-decimal;
  }

  pre {
    @apply p-4 bg-gray-50 font-mono text-base rounded whitespace-pre dark:bg-gray-900;
  }

  a {
    @apply text-gray-600 dark:text-gray-400 underline font-medium;
  }
}