.ql-container {
  @apply box-border;
  font-family: Helvetica, Arial, sans-serif;
  @apply text-xs;
  @apply h-full;
  @apply m-0;
  @apply relative;

  &.ql-disabled {
    .ql-tooltip {
      @apply invisible;
    }

    .ql-editor ul[data-checked] > li::before {
      @apply pointer-events-none;
    }

    .ql-editor.ql-blank::before {
      @apply cursor-not-allowed;
    }
  }

  &.ql-bubble:not(.ql-disabled) {
    a {
      @apply relative;
      @apply whitespace-nowrap;

      &::before {
        background-color: #444;
        border-radius: 15px;
        top: -5px;
        @apply text-xs;
        @apply text-color-text-inverse;
        content: attr(href);
        @apply font-normal;
        @apply overflow-hidden;
        padding: 5px 15px;
        @apply no-underline;
        @apply ~'z-[1]';
      }

      &::after {
        border-top: 6px solid #444;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        @apply top-0;
        @apply ~"content-['']";
        @apply h-0;
        @apply w-0;
      }

      &::before,
      &::after {
        @apply left-0;
        @apply ~'ml-[50%]';
        @apply absolute;
        @apply ~'-translate-x-1/2' ~'-translate-y-full';
        transition: visibility 0s ease 200ms;
        @apply invisible;
      }

      &:hover::before,
      &:hover::after {
        @apply visible;
      }
    }
  }
}

.ql-clipboard {
  @apply ~'left-[-10000px]';
  @apply h-px;
  @apply overflow-y-hidden;
  @apply absolute;
  @apply ~'top-1/2';

  p {
    @apply m-0;
    @apply p-0;
  }
}

.quill-editor {
  overflow: initial;
  @apply p-0;
}
.ql-editor {
  @apply box-border;
  @apply leading-normal;
  @apply h-full;
  @apply outline-0;
  @apply overflow-y-auto;
  @apply py-3 px-4;
  tab-size: 4;
  -moz-tab-size: 4;
  @apply text-left;
  @apply whitespace-pre-wrap;
  white-space-collapse: preserve-breaks;
  word-wrap: break-word;
  word-break: break-word;

  & > * {
    @apply cursor-text;
  }

  p,
  ol,
  ul,
  pre,
  blockquote,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply m-0;
    @apply p-0;
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }

  ol,
  ul {
    padding-left: 1.5em;

    li {
      @apply list-none;
    }

    li:not(.ql-direction-rtl) {
      padding-left: 1.5em;
    }

    li.ql-direction-rtl {
      padding-right: 1.5em;
    }
  }

  ul {
    & > li::before {
      content: '\2022';
    }

    &[data-checked='true'],
    &[data-checked='false'] {
      @apply pointer-events-none;

      & > li * {
        pointer-events: all;
      }

      & > li::before {
        color: #777;
        @apply cursor-pointer;
        pointer-events: all;
      }
    }

    &[data-checked='true'] > li::before {
      content: '\2611';
    }

    &[data-checked='false'] > li::before {
      content: '\2610';
    }
  }

  ol {
    li {
      counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
      counter-increment: list-0;

      &:before {
        content: counter(list-0, decimal) '. ';
      }

      &.ql-indent-1 {
        counter-increment: list-1;
        counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;

        &:before {
          content: counter(list-1, lower-alpha) '. ';
        }
      }

      &.ql-indent-2 {
        counter-increment: list-2;
        counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;

        &:before {
          content: counter(list-2, lower-roman) '. ';
        }
      }

      &.ql-indent-3 {
        counter-increment: list-3;
        counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;

        &:before {
          content: counter(list-3, decimal) '. ';
        }
      }

      &.ql-indent-4 {
        counter-increment: list-4;
        counter-reset: list-5 list-6 list-7 list-8 list-9;

        &:before {
          content: counter(list-4, lower-alpha) '. ';
        }
      }

      &.ql-indent-5 {
        counter-increment: list-5;
        counter-reset: list-6 list-7 list-8 list-9;

        &:before {
          content: counter(list-5, lower-roman) '. ';
        }
      }

      &.ql-indent-6 {
        counter-increment: list-6;
        counter-reset: list-7 list-8 list-9;

        &:before {
          content: counter(list-6, decimal) '. ';
        }
      }

      &.ql-indent-7 {
        counter-increment: list-7;
        counter-reset: list-8 list-9;

        &:before {
          content: counter(list-7, lower-alpha) '. ';
        }
      }

      &.ql-indent-8 {
        counter-increment: list-8;
        counter-reset: list-9;

        &:before {
          content: counter(list-8, lower-roman) '. ';
        }
      }

      &.ql-indent-9 {
        counter-increment: list-9;

        &:before {
          content: counter(list-9, decimal) '. ';
        }
      }
    }
  }

  li {
    &::before {
      @apply inline-block;
      @apply whitespace-nowrap;
      width: 1.2em;
    }

    &:not(.ql-direction-rtl)::before {
      margin-left: -1.5em;
      margin-right: 0.3em;
      @apply text-right;
    }

    &.ql-direction-rtl::before {
      margin-left: 0.3em;
      margin-right: -1.5em;
    }

    &.ql-indent-1:not(.ql-direction-rtl) {
      padding-left: 4.5em;
    }

    &.ql-indent-1.ql-direction-rtl.ql-align-right {
      padding-right: 4.5em;
    }

    &.ql-indent-2:not(.ql-direction-rtl) {
      padding-left: 7.5em;
    }

    &.ql-indent-2.ql-direction-rtl.ql-align-right {
      padding-right: 7.5em;
    }

    &.ql-indent-3:not(.ql-direction-rtl) {
      padding-left: 10.5em;
    }

    &.ql-indent-3.ql-direction-rtl.ql-align-right {
      padding-right: 10.5em;
    }

    &.ql-indent-4:not(.ql-direction-rtl) {
      padding-left: 13.5em;
    }

    &.ql-indent-4.ql-direction-rtl.ql-align-right {
      padding-right: 13.5em;
    }

    &.ql-indent-5:not(.ql-direction-rtl) {
      padding-left: 16.5em;
    }

    &.ql-indent-5.ql-direction-rtl.ql-align-right {
      padding-right: 16.5em;
    }

    &.ql-indent-6:not(.ql-direction-rtl) {
      padding-left: 19.5em;
    }

    &.ql-indent-6.ql-direction-rtl.ql-align-right {
      padding-right: 19.5em;
    }

    &.ql-indent-7:not(.ql-direction-rtl) {
      padding-left: 22.5em;
    }

    &.ql-indent-7.ql-direction-rtl.ql-align-right {
      padding-right: 22.5em;
    }

    &.ql-indent-8:not(.ql-direction-rtl) {
      padding-left: 25.5em;
    }

    &.ql-indent-8.ql-direction-rtl.ql-align-right {
      padding-right: 25.5em;
    }

    &.ql-indent-9:not(.ql-direction-rtl) {
      padding-left: 28.5em;
    }

    &.ql-indent-9.ql-direction-rtl.ql-align-right {
      padding-right: 28.5em;
    }
  }

  .ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 3em;
  }

  .ql-indent-1.ql-direction-rtl.ql-align-right {
    padding-right: 3em;
  }

  .ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 6em;
  }

  .ql-indent-2.ql-direction-rtl.ql-align-right {
    padding-right: 6em;
  }

  .ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 9em;
  }

  .ql-indent-3.ql-direction-rtl.ql-align-right {
    padding-right: 9em;
  }

  .ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 12em;
  }

  .ql-indent-4.ql-direction-rtl.ql-align-right {
    padding-right: 12em;
  }

  .ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 15em;
  }

  .ql-indent-5.ql-direction-rtl.ql-align-right {
    padding-right: 15em;
  }

  .ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 18em;
  }

  .ql-indent-6.ql-direction-rtl.ql-align-right {
    padding-right: 18em;
  }

  .ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 21em;
  }

  .ql-indent-7.ql-direction-rtl.ql-align-right {
    padding-right: 21em;
  }

  .ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 24em;
  }

  .ql-indent-8.ql-direction-rtl.ql-align-right {
    padding-right: 24em;
  }

  .ql-indent-9:not(.ql-direction-rtl) {
    padding-left: 27em;
  }

  .ql-indent-9.ql-direction-rtl.ql-align-right {
    padding-right: 27em;
  }

  .ql-video {
    @apply block;
    @apply ~'max-w-[100%]';

    &.ql-align-center {
      @apply my-0 mx-auto;
    }

    &.ql-align-right {
      @apply my-0 mr-0 ml-auto;
    }
  }

  .ql-bg-black {
    background-color: #000;
  }

  .ql-bg-red {
    @apply bg-color-error;
  }

  .ql-bg-orange {
    @apply bg-color-alert;
  }

  .ql-bg-yellow {
    background-color: #ff0;
  }

  .ql-bg-green {
    background-color: #008a00;
  }

  .ql-bg-blue {
    background-color: #06c;
  }

  .ql-bg-purple {
    background-color: #93f;
  }

  .ql-color-white {
    @apply text-color-text-inverse;
  }

  .ql-color-red {
    @apply text-color-error;
  }

  .ql-color-orange {
    color: #f90;
  }

  .ql-color-yellow {
    color: #ff0;
  }

  .ql-color-green {
    color: #008a00;
  }

  .ql-color-blue {
    color: #06c;
  }

  .ql-color-purple {
    color: #93f;
  }

  .ql-font-serif {
    font-family: Georgia, 'Times New Roman', serif;
  }

  .ql-font-monospace {
    font-family: Monaco, 'Courier New', monospace;
  }

  .ql-size-small {
    font-size: 0.75em;
  }

  .ql-size-large {
    font-size: 1.5em;
  }

  .ql-size-huge {
    font-size: 2.5em;
  }

  .ql-direction-rtl {
    direction: rtl;
    text-align: inherit;
  }

  .ql-align-center {
    @apply text-center;
  }

  .ql-align-justify {
    @apply text-justify;
  }

  .ql-align-right {
    @apply text-right;
  }

  &.ql-blank::before {
    @apply text-color-text-placeholder;
    content: attr(data-placeholder);
    @apply italic;
    @apply absolute;
    @apply left-3;
    @apply right-3;
  }
}

.is-display-only {
  .ql-toolbar.ql-snow {
    @apply hidden;

    & + .ql-container.ql-snow {
      @apply border-0;
      .ql-editor {
        @apply p-0;
        &.ql-blank:before {
          @apply left-0;
        }
      }
    }
  }
}

.ql-bubble {
  &,
  & * {
    @apply box-border;
  }

  &.ql-container {
    @apply border border-color-border;
    @apply rounded-sm;
  }

  .ql-toolbar {
    @apply pl-2;
  }

  &.ql-toolbar,
  .ql-toolbar {
    &:after {
      @apply clear-both;
      @apply content-[''];
      @apply table;
    }

    button {
      background: none;
      @apply border-none;
      @apply cursor-pointer;
      @apply float-left;
      @apply h-6;
      @apply ~'py-0.5 px-1';
      @apply w-7;

      svg {
        @apply float-left;
        @apply h-full;
        &.icon {
          @apply fill-color-bg-2;
          @apply text-lg;
        }
      }

      &:active:hover {
        @apply outline-0;
      }

      &:hover .icon {
        @apply fill-color-icon-inverse;
      }
    }

    input.ql-image[type='file'] {
      @apply hidden;
    }

    button:hover,
    button:focus,
    button.ql-active,
    .ql-picker-label:hover,
    .ql-picker-label.ql-active,
    .ql-picker-item:hover,
    .ql-picker-item.ql-selected {
      @apply text-color-text-inverse;

      .ql-fill,
      .ql-stroke.ql-fill {
        @apply fill-color-icon-inverse;
      }

      .ql-stroke,
      .ql-stroke-miter {
        @apply stroke-color-bg-1;
      }
    }
  }

  .ql-hidden {
    @apply hidden;
  }

  .ql-out-bottom,
  .ql-out-top {
    @apply invisible;
  }

  .ql-tooltip {
    @apply absolute;
    @apply ~'translate-y-2.5';

    a {
      @apply cursor-pointer;
      @apply no-underline;
    }

    &.ql-flip {
      @apply ~'-translate-y-2.5';
    }
  }

  .ql-formats {
    @apply inline-block;
    @apply align-middle;

    &:after {
      @apply clear-both;
      @apply content-[''];
      @apply table;
    }
  }

  .ql-stroke {
    @apply fill-none;
    stroke: #ccc;
    stroke-linecap: round;
    stroke-linejoin: round;
    @apply stroke-2;
  }

  .ql-stroke-miter {
    @apply fill-none;
    stroke: #ccc;
    stroke-miterlimit: 10;
    @apply stroke-2;
  }

  .ql-fill,
  .ql-stroke.ql-fill {
    @apply fill-color-bg-2;
  }

  .ql-empty {
    @apply fill-none;
  }

  .ql-even {
    fill-rule: evenodd;
  }

  .ql-thin,
  .ql-stroke.ql-thin {
    @apply stroke-1;
  }

  .ql-transparent {
    @apply opacity-40;
  }

  .ql-direction {
    svg:last-child {
      @apply hidden;
    }

    &.ql-active {
      svg:last-child {
        @apply inline;
      }

      svg:first-child {
        @apply hidden;
      }
    }
  }

  .ql-editor {
    h1 {
      @apply text-3xl;
    }

    h2 {
      @apply text-xl;
    }

    h3 {
      @apply text-base;
    }

    h4 {
      @apply text-sm;
    }

    h5 {
      @apply text-xs;
    }

    h6 {
      @apply text-xs;
    }

    a {
      @apply underline;
    }

    blockquote {
      @apply border-l-4 border-l-color-bg-2;
      @apply mt-1;
      @apply pl-4;
    }

    code,
    pre {
      @apply bg-color-bg-2;
      @apply rounded-sm;
    }

    pre {
      @apply whitespace-pre-wrap;
      @apply mb-1;
      @apply mt-1;
      @apply p-1;

      &.ql-syntax {
        @apply bg-color-text-primary;
        @apply text-color-bg-2;
        @apply overflow-visible;
      }
    }

    code {
      font-size: 85%;
      @apply ~'py-0.5' px-1;
    }

    img {
      @apply ~'max-w-[100%]';
    }
  }

  .ql-picker {
    color: #ccc;
    @apply float-left;
    @apply text-sm;
    @apply font-medium;
    @apply h-6;
    @apply leading-6;
    @apply relative;
    @apply align-middle;

    &:not(.ql-color-picker):not(.ql-icon-picker) svg {
      @apply absolute;
      @apply -mt-2;
      @apply right-0;
      @apply ~'top-1/2';
      @apply ~'w-4.5';
    }

    &.ql-header,
    &.ql-font,
    &.ql-size {
      .ql-picker-label[data-label]:not([data-label=''])::before,
      .ql-picker-item[data-label]:not([data-label=''])::before {
        content: attr(data-label);
      }
    }

    &.ql-header {
      @apply w-24;

      .ql-picker-label::before,
      .ql-picker-item::before {
        content: 'Normal';
      }

      .ql-picker-label[data-value='1']::before,
      .ql-picker-item[data-value='1']::before {
        content: 'Heading 1';
      }

      .ql-picker-label[data-value='2']::before,
      .ql-picker-item[data-value='2']::before {
        content: 'Heading 2';
      }

      .ql-picker-label[data-value='3']::before,
      .ql-picker-item[data-value='3']::before {
        content: 'Heading 3';
      }

      .ql-picker-label[data-value='4']::before,
      .ql-picker-item[data-value='4']::before {
        content: 'Heading 4';
      }

      .ql-picker-label[data-value='5']::before,
      .ql-picker-item[data-value='5']::before {
        content: 'Heading 5';
      }

      .ql-picker-label[data-value='6']::before,
      .ql-picker-item[data-value='6']::before {
        content: 'Heading 6';
      }

      .ql-picker-item[data-value='1']::before {
        @apply text-3xl;
      }

      .ql-picker-item[data-value='2']::before {
        @apply text-xl;
      }

      .ql-picker-item[data-value='3']::before {
        @apply text-base;
      }

      .ql-picker-item[data-value='4']::before {
        @apply text-sm;
      }

      .ql-picker-item[data-value='5']::before {
        @apply text-xs;
      }

      .ql-picker-item[data-value='6']::before {
        @apply text-xs;
      }
    }

    &.ql-font {
      @apply w-28;

      .ql-picker-label::before,
      .ql-picker-item::before {
        content: 'Sans Serif';
      }

      .ql-picker-label[data-value='serif']::before,
      .ql-picker-item[data-value='serif']::before {
        content: 'Serif';
      }

      .ql-picker-label[data-value='monospace']::before,
      .ql-picker-item[data-value='monospace']::before {
        content: 'Monospace';
      }

      .ql-picker-item[data-value='serif']::before {
        font-family: Georgia, 'Times New Roman', serif;
      }

      .ql-picker-item[data-value='monospace']::before {
        font-family: Monaco, 'Courier New', monospace;
      }
    }

    &.ql-size {
      @apply w-24;

      .ql-picker-label::before,
      .ql-picker-item::before {
        content: 'Normal';
      }

      .ql-picker-label[data-value='small']::before,
      .ql-picker-item[data-value='small']::before {
        content: 'Small';
      }

      .ql-picker-label[data-value='large']::before,
      .ql-picker-item[data-value='large']::before {
        content: 'large';
      }

      .ql-picker-label[data-value='huge']::before,
      .ql-picker-item[data-value='huge']::before {
        content: 'huge';
      }

      .ql-picker-item[data-value='small']::before {
        @apply text-2xs;
      }

      .ql-picker-item[data-value='large']::before {
        @apply text-lg;
      }

      .ql-picker-item[data-value='huge']::before {
        @apply text-3xl;
      }
    }
  }

  .ql-picker-label {
    @apply cursor-pointer;
    @apply inline-block;
    @apply h-full;
    @apply pl-2;
    @apply ~'pr-0.5';
    @apply relative;
    @apply w-full;

    &::before {
      @apply inline-block;
      @apply ~'leading-5.5';
    }
  }

  .ql-picker-options {
    background-color: #444;
    @apply hidden;
    @apply min-w-full;
    @apply py-1 px-2;
    @apply absolute;
    @apply whitespace-nowrap;

    .ql-picker-item {
      @apply cursor-pointer;
      @apply block;
      @apply pb-1;
      @apply pt-1;
      @apply outline-0;
    }
  }

  .ql-picker.ql-expanded {
    .ql-picker-label {
      color: #777;
      @apply ~'z-[2]';

      .ql-fill {
        fill: #777;
      }

      .ql-stroke {
        stroke: #777;
      }
    }

    .ql-picker-options {
      @apply block;
      @apply -mt-px;
      @apply top-full;
      @apply ~'z-[1]';
    }
  }

  .ql-color-picker,
  .ql-icon-picker {
    @apply w-7;

    .ql-picker-label {
      @apply ~'py-0.5' px-1;

      svg {
        @apply right-1;
      }
    }
  }

  .ql-icon-picker {
    .ql-picker-options {
      @apply py-1 px-0;
    }

    .ql-picker-item {
      @apply h-6;
      @apply w-6;
      @apply ~'py-0.5' px-1;
    }
  }

  .ql-color-picker {
    .ql-picker-options {
      @apply ~'py-0.5 px-1';
      @apply w-40;
    }

    .ql-picker-item {
      @apply border border-solid border-transparent;
      @apply float-left;
      @apply h-4;
      @apply ~'m-0.5';
      @apply p-0;
      @apply w-4;
    }

    &.ql-background .ql-picker-item {
      @apply bg-color-bg-1;
    }

    &.ql-color .ql-picker-item {
      @apply bg-color-bg-7;
    }

    svg {
      @apply m-px;
    }

    .ql-picker-item.ql-selected,
    .ql-picker-item:hover {
      @apply border-color-bg-1;
    }
  }

  .ql-toolbar {
    .ql-formats {
      @apply my-2 mr-3 ml-0;

      &:first-child {
        @apply ml-3;
      }
    }
  }

  .ql-tooltip {
    background-color: #444;
    @apply rounded-md;
    @apply text-color-text-inverse;
    @apply ~'z-[99]';
  }

  .ql-tooltip-arrow {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    @apply ~"content-['']";
    @apply block;
    @apply ~'left-1/2';
    @apply ~'-ml-1.5';
    @apply absolute;
  }

  .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow {
    border-bottom: 6px solid #444;
    @apply ~'-top-1.5';
  }

  .ql-tooltip.ql-flip .ql-tooltip-arrow {
    border-top: 6px solid #444;
    @apply ~'-bottom-1.5';
  }

  .ql-tooltip.ql-editing {
    .ql-tooltip-editor {
      @apply block;
    }

    .ql-formats {
      @apply invisible;
    }
  }

  .ql-tooltip-editor {
    @apply hidden;

    input[type='text'] {
      @apply bg-transparent;
      @apply border-none;
      @apply text-color-text-inverse;
      @apply text-xs;
      @apply outline-0;
      @apply ~'py-2.5' px-5;
      @apply absolute;
      @apply w-full;
    }

    a {
      @apply ~'top-2.5';
      @apply absolute;
      right: 20px;

      &:before {
        color: #ccc;
        content: '\D7';
        @apply text-base;
        @apply font-bold;
      }
    }
  }
}

@media (pointer: coarse) {
  .ql-bubble {
    &.ql-toolbar,
    .ql-toolbar {
      button:hover:not(.ql-active) {
        color: #ccc;

        .ql-fill,
        .ql-stroke.ql-fill {
          @apply fill-color-bg-2;
        }

        .ql-stroke,
        .ql-stroke-miter {
          stroke: #ccc;
        }
      }
    }
  }
}

.ql-snow {
  &,
  & * {
    @apply box-border;
  }

  &.ql-toolbar,
  .ql-toolbar {
    &:after {
      @apply clear-both;
      @apply content-[''];
      @apply table;
    }

    button {
      background: none;
      @apply border-none;
      @apply cursor-pointer;
      @apply float-left;
      @apply h-6;
      @apply ~'py-0.5 px-1';
      @apply w-7;

      svg {
        @apply float-left;
        @apply h-full;
        &.icon {
          @apply text-lg;
        }
      }

      &:active:hover {
        @apply outline-0;
      }
    }

    input.ql-image[type='file'] {
      @apply hidden;
    }

    button:hover,
    button:focus,
    button.ql-active,
    .ql-picker-label:hover,
    .ql-picker-label.ql-active,
    .ql-picker-item:hover,
    .ql-picker-item.ql-selected {
      @apply text-color-brand;

      .ql-fill,
      .ql-stroke.ql-fill {
        @apply fill-color-brand;
      }

      .ql-stroke,
      .ql-stroke-miter {
        stroke: #06c;
      }
    }
  }

  .ql-hidden {
    @apply hidden;
  }

  .ql-out-bottom,
  .ql-out-top {
    @apply invisible;
  }

  .ql-tooltip {
    @apply absolute;
    @apply ~'translate-y-2.5';

    a {
      @apply cursor-pointer;
      @apply no-underline;
    }

    &.ql-flip {
      @apply ~'-translate-y-2.5';
    }
  }

  .ql-formats {
    @apply inline-block;
    @apply align-middle;

    &:after {
      @apply clear-both;
      @apply content-[''];
      @apply table;
    }
  }

  .ql-stroke {
    @apply fill-none;
    @apply stroke-color-icon-primary;
    stroke-linecap: round;
    stroke-linejoin: round;
    @apply stroke-2;
  }

  .ql-stroke-miter {
    @apply fill-none;
    @apply stroke-color-icon-primary;
    stroke-miterlimit: 10;
    @apply stroke-2;
  }

  .ql-fill,
  .ql-stroke.ql-fill {
    @apply fill-color-icon-primary;
  }

  .ql-empty {
    @apply fill-none;
  }

  .ql-even {
    fill-rule: evenodd;
  }

  .ql-thin,
  .ql-stroke.ql-thin {
    @apply stroke-1;
  }

  .ql-transparent {
    @apply opacity-40;
  }

  .ql-direction {
    svg:last-child {
      @apply hidden;
    }

    &.ql-active {
      svg:last-child {
        @apply inline;
      }

      svg:first-child {
        @apply hidden;
      }
    }
  }

  .ql-editor {
    h1 {
      @apply text-3xl;
    }

    h2 {
      @apply text-xl;
    }

    h3 {
      @apply text-base;
    }

    h4 {
      @apply text-sm;
    }

    h5 {
      @apply text-xs;
    }

    h6 {
      @apply text-xs;
    }

    a {
      @apply underline;
    }

    blockquote {
      @apply border-l-4 border-l-color-bg-2;
      @apply mt-1;
      @apply pl-4;
    }

    code,
    pre {
      @apply bg-color-bg-2;
      @apply rounded-sm;
    }

    pre {
      @apply whitespace-pre-wrap;
      @apply mb-1;
      @apply mt-1;
      @apply p-1;

      &.ql-syntax {
        @apply bg-color-text-primary;
        @apply text-color-bg-2;
        @apply overflow-visible;
      }
    }

    code {
      font-size: 85%;
      @apply ~'py-0.5' px-1;
    }

    img {
      @apply ~'max-w-[100%]';
    }
  }

  .ql-picker {
    @apply text-color-text-primary;
    @apply float-left;
    @apply text-sm;
    @apply font-medium;
    @apply h-6;
    @apply leading-6;
    @apply relative;
    @apply align-middle;

    &.ql-expanded {
      .ql-picker-label {
        color: #ccc;
        @apply ~'z-[2]';

        .ql-fill {
          @apply fill-color-bg-2;
        }

        .ql-stroke {
          stroke: #ccc;
        }
      }

      .ql-picker-options {
        @apply block;
        @apply -mt-px;
        @apply top-full;
        @apply ~'z-[1]';
      }
    }

    &:not(.ql-color-picker):not(.ql-icon-picker) svg {
      @apply absolute;
      @apply -mt-2;
      @apply right-0;
      @apply ~'top-1/2';
      @apply ~'w-4.5';
    }

    &.ql-header,
    &.ql-font,
    &.ql-size {
      .ql-picker-label[data-label]:not([data-label=''])::before,
      .ql-picker-item[data-label]:not([data-label=''])::before {
        content: attr(data-label);
      }
    }

    &.ql-header {
      @apply w-24;

      .ql-picker-label::before,
      .ql-picker-item::before {
        content: 'Normal';
      }

      .ql-picker-label[data-value='1']::before,
      .ql-picker-item[data-value='1']::before {
        content: 'Heading 1';
      }

      .ql-picker-label[data-value='2']::before,
      .ql-picker-item[data-value='2']::before {
        content: 'Heading 2';
      }

      .ql-picker-label[data-value='3']::before,
      .ql-picker-item[data-value='3']::before {
        content: 'Heading 3';
      }

      .ql-picker-label[data-value='4']::before,
      .ql-picker-item[data-value='4']::before {
        content: 'Heading 4';
      }

      .ql-picker-label[data-value='5']::before,
      .ql-picker-item[data-value='5']::before {
        content: 'Heading 5';
      }

      .ql-picker-label[data-value='6']::before,
      .ql-picker-item[data-value='6']::before {
        content: 'Heading 6';
      }

      .ql-picker-item[data-value='1']::before {
        @apply text-3xl;
      }

      .ql-picker-item[data-value='2']::before {
        @apply text-xl;
      }

      .ql-picker-item[data-value='3']::before {
        @apply text-base;
      }

      .ql-picker-item[data-value='4']::before {
        @apply text-sm;
      }

      .ql-picker-item[data-value='5']::before {
        @apply text-xs;
      }

      .ql-picker-item[data-value='6']::before {
        @apply text-xs;
      }
    }

    &.ql-font {
      @apply w-28;

      .ql-picker-label::before,
      .ql-picker-item::before {
        content: 'Sans Serif';
      }

      .ql-picker-label[data-value='serif']::before,
      .ql-picker-item[data-value='serif']::before {
        content: 'Serif';
      }

      .ql-picker-label[data-value='monospace']::before,
      .ql-picker-item[data-value='monospace']::before {
        content: 'Monospace';
      }

      .ql-picker-item[data-value='serif']::before {
        font-family: Georgia, 'Times New Roman', serif;
      }

      .ql-picker-item[data-value='monospace']::before {
        font-family: Monaco, 'Courier New', monospace;
      }
    }

    &.ql-size {
      @apply w-24;

      .ql-picker-label::before,
      .ql-picker-item::before {
        content: 'Normal';
      }

      .ql-picker-label[data-value='small']::before,
      .ql-picker-item[data-value='small']::before {
        content: 'Small';
      }

      .ql-picker-label[data-value='large']::before,
      .ql-picker-item[data-value='large']::before {
        content: 'Large';
      }

      .ql-picker-label[data-value='huge']::before,
      .ql-picker-item[data-value='huge']::before {
        content: 'Huge';
      }

      .ql-picker-item[data-value='small']::before {
        @apply text-2xs;
      }

      .ql-picker-item[data-value='large']::before {
        @apply text-lg;
      }

      .ql-picker-item[data-value='huge']::before {
        @apply text-3xl;
      }
    }
  }

  .ql-picker-label {
    @apply cursor-pointer;
    @apply inline-block;
    @apply h-full;
    @apply pl-2;
    @apply ~'pr-0.5';
    @apply relative;
    @apply w-full;

    &::before {
      @apply inline-block;
      @apply ~'leading-5.5';
    }
  }

  .ql-picker-options {
    @apply bg-color-bg-1;
    @apply hidden;
    @apply min-w-full;
    @apply py-1 px-2;
    @apply absolute;
    @apply whitespace-nowrap;

    .ql-picker-item {
      @apply cursor-pointer;
      @apply block;
      @apply pb-1;
      @apply pt-1;
      @apply outline-0;
    }
  }

  .ql-color-picker,
  .ql-icon-picker {
    @apply w-7;

    .ql-picker-label {
      @apply ~'py-0.5' px-1;

      svg {
        @apply right-1;
      }
    }
  }

  .ql-icon-picker {
    .ql-picker-options {
      @apply py-1 px-0;
    }

    .ql-picker-item {
      @apply h-6;
      @apply w-6;
      @apply ~'py-0.5' px-1;
    }
  }

  .ql-color-picker {
    .ql-picker-options {
      @apply ~'py-0.5 px-1';
      @apply w-40;
    }

    .ql-picker-item {
      @apply border border-solid border-transparent;
      @apply float-left;
      @apply h-4;
      @apply ~'m-0.5';
      @apply p-0;
      @apply w-4;
    }

    &.ql-background .ql-picker-item {
      @apply bg-color-bg-1;
    }

    &.ql-color .ql-picker-item {
      @apply bg-color-bg-7;
    }
  }

  &.ql-toolbar {
    @apply border border-color-border;
    @apply box-border;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    @apply p-2;

    .ql-formats {
      margin-right: 15px;
    }

    .ql-picker-label {
      @apply border border-solid border-transparent;
      @apply outline-0;
    }

    .ql-picker-options {
      @apply border border-solid border-transparent;
      box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
    }

    .ql-picker.ql-expanded {
      .ql-picker-label {
        border-color: #ccc;
      }

      .ql-picker-options {
        border-color: #ccc;
      }
    }

    .ql-color-picker .ql-picker-item.ql-selected,
    .ql-color-picker .ql-picker-item:hover {
      border-color: #000;
    }

    & + .ql-container.ql-snow {
      @apply border-t-0;
    }
  }

  .ql-tooltip {
    @apply bg-color-bg-1;
    @apply border border-color-border-separator;
    box-shadow: 0px 0px 5px #ddd;
    color: #444;
    padding: 5px 12px;
    @apply whitespace-nowrap;

    &::before {
      content: 'Visit URL:';
      line-height: 26px;
      @apply mr-2;
    }

    input[type='text'] {
      @apply hidden;
      @apply border border-color-border-separator;
      @apply text-xs;
      @apply m-0;
      @apply ~'py-0.5 px-1';
      width: 170px;
    }

    a.ql-preview {
      @apply inline-block;
      max-width: 200px;
      @apply overflow-x-hidden;
      @apply text-ellipsis;
      @apply align-top;
    }

    a.ql-action::after {
      border-right: 1px solid #ccc;
      content: 'Edit';
      @apply ml-4;
      @apply pr-2;
    }

    a.ql-remove::before {
      content: 'Remove';
      @apply ml-2;
    }

    a {
      line-height: 26px;
    }

    &.ql-editing {
      a.ql-preview,
      a.ql-remove {
        @apply hidden;
      }

      input[type='text'] {
        @apply inline-block;
      }

      a.ql-action::after {
        @apply border-r-0;
        content: 'Save';
        @apply pr-0;
      }
    }

    &[data-mode='link']::before {
      content: 'Enter link:';
    }

    &[data-mode='formula']::before {
      content: 'Enter formula:';
    }

    &[data-mode='video']::before {
      content: 'Enter video:';
    }
  }

  a {
    @apply text-color-brand;
  }

  &.ql-container {
    @apply border border-color-border;
  }
}

@media (pointer: coarse) {
  .ql-snow {
    &.ql-toolbar,
    .ql-toolbar {
      button:hover:not(.ql-active) {
        @apply text-color-text-primary;
      }

      .ql-fill,
      .ql-stroke.ql-fill {
        @apply fill-color-icon-primary;
      }

      .ql-stroke,
      .ql-stroke-miter {
        @apply stroke-color-icon-primary;
      }
    }
  }
}

.toolbar-icon {
  @apply absolute;
  @apply ~'-left-[9999px]';
  @apply opacity-0;
  @apply ~'-z-[1]';
  @apply w-0;
  @apply h-0;
}

.ql-editor table {
  @apply table-fixed;
  @apply ~'max-w-[100%]';
  @apply border-collapse;
}
.ql-editor table td {
  @apply outline-0;
}
.ql-editor td {
  border: 1px solid #000;
  padding: 2px 5px;
}
.ql-editor .ql-toolbar .ql-formats {
  .ql-font.ql-picker {
    width: 102px;
  }
}

.ql-formats {
  .ql-size {
    &.ql-picker {
      span.ql-picker-label[data-value]:before,
      .ql-picker-options > span.ql-picker-item[data-value]:before {
        content: attr(data-value);
      }
    }
  }
}
