/***************************************
  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 !important;
  }

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

    .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-400 dark:placeholder:text-gray-400 dark:focus:ring-gray-500/30 dark:focus:border-gray-500/50 dark:bg-gray-800 dark:text-white !important;
    }

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

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

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-sm font-medium dark:border-gray-600 !important;
  border: 1px;
  border-style: solid;

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

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

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

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