//
// _quill-editor.scss
//

.ql-editor {
  text-align: start;
  @extend .lh-lg;

  ol,
  ul {
    padding-inline-start: 1.5em;
    padding-inline-end: 0;
  }

  li:not(.ql-direction-rtl)::before {
    margin-inline-start: -1.5em;
    margin-inline-end: 0.3em;
    text-align: end;
  }
}

.ql-container {
  font-family: $font-family-base;

  &.ql-snow {
    border-color: $input-border-color !important;
    border-radius: 0 0 $input-border-radius $input-border-radius;
    min-block-size: 12rem;
  }
}

// Toolbar
.ql-toolbar {
  font-family: $font-family-base !important;

  span,
  button {
    outline: none !important;
    color: $dropdown-link-color;

    &:hover {
      color: $primary !important;
    }
  }

  &.ql-snow {
    border-radius: $input-border-radius $input-border-radius 0 0;
    border-color: $input-border-color !important;
    display: flex;
    flex-wrap: wrap;
    row-gap: 8px;

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

    .ql-picker-options {
      box-shadow: $dropdown-box-shadow;
      border-radius: $dropdown-border-radius;
    }

    .ql-formats {
      border: 1px solid $input-border-color;
      margin-inline-end: 10px;
      border-radius: 3px;

      button,
      span {
        i {
          line-height: 18px;
          color: var(--#{$prefix}body-color);
        }

        &:hover {
          i {
            color: var(--#{$prefix}primary);
          }
        }
      }
    }
  }

  .ql-picker-label,
  button {
    display: flex;

    svg {
      height: 16px;
      width: 16px;
    }
  }
}

.ql-snow {
  a {
    color: $link-color;
  }

  .ql-picker {
    font-size: $font-size-base;
  }

  .ql-picker.ql-expanded .ql-picker-label {
    color: var(--#{$prefix}body-color) !important;
  }

  .ql-picker-options {
    background-color: $dropdown-bg;
    border-color: $dropdown-border-color !important;
  }

  .ql-tooltip {
    background-color: $dropdown-bg;
    border-color: var(--#{$prefix}border-color);
    box-shadow: $dropdown-box-shadow;
    color: var(--#{$prefix}body-color);
    padding: 8px 16px;

    input[type='text'] {
      border: $input-border-width solid $input-border-color !important;
      border-radius: $input-border-radius;

      &:focus,
      &:focus-visible {
        border: $input-border-width solid $input-border-color !important;
      }
    }
  }
}

// Quill Bubble tyle
.ql-bubble {
  border: $input-border-width solid $input-border-color;
  border-radius: $input-border-radius;

  .ql-tooltip-editor {
    input::placeholder {
      color: $input-placeholder-color;
    }
  }
}

.ql-tooltip {
  .ql-toolbar {
    button {
      color: $white !important;

      &:hover {
        color: var(--#{$prefix}primary) !important;
      }
    }
  }
}
