// Quill Editor
// https://quilljs.com/
@import "~quill/dist/quill.snow.css";

// Set default customise component variables here,
// Override it in theme variables files

$x-editor-toolbar-color:               theme-color('default')                !default;
$x-editor-toolbar-active-color:        theme-color('secondary')              !default;
$x-editor-toolbar-hover-bg:            theme-color('light-transparent')      !default;
$x-editor-toolbar-active-bg:           theme-color('secondary-transparent')  !default;
$x-editor-container-min-height:        25rem                                 !default;

@mixin x-editor-state($active-color, $hover-bg-color, $active-bg-color) {
  @include transition($btn-transition);
  &.ql-active,
  &.ql-selected {
    background: $active-bg-color;
    color: $active-color;
  }

  &:hover,
  &:focus,
  &.ql-expanded {
    background: $hover-bg-color;
    color: $active-color;
  }

}

.ql-snow {
  &.ql-toolbar,
  &.ql-container {
    font-family: inherit;
  }

  &.ql-toolbar {
    @extend %py-1,
            .border-top-0,
            .border-right-0,
            .border-left-0,
            .border-bottom;

    .ql-formats {
      @extend .d-inline-flex,
              .mr-1;
    }

    button,
    .ql-picker,
    .ql-icon-picker .ql-picker-item {
      @include size(2rem);
    }

    button,
    .ql-picker {
      color: theme-color('primary');
      margin: auto 1px;

      .x-icon {
        @extend .x-icon-lg;
      }
      &.ql-header,
      &.ql-font {
        width: 6.75rem;
      }
    }

    .ql-picker {
      .ql-picker-label {
        @extend .d-flex;
      }

      &:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-label {
        @extend .dropdown-toggle,
                .align-items-center,
                .border-light;

        svg {
          @extend .d-none;
        }

        &::after {
          @extend .position-absolute;
          right: map_get($spacers, 2);
        }
      }

      &.ql-color-picker, &.ql-icon-picker {
        .ql-picker-label {
          @extend .border-0;
        }
      }

      .ql-picker-options {
        @extend %p-0;
      }
    }

    button,
    .ql-picker-label {
      @extend .rounded;
      float: none;
    }

    button,
    .ql-picker-label,
    .ql-picker-item {
      @extend .x-no-focus;
      @include x-editor-state($x-editor-toolbar-active-color, $x-editor-toolbar-hover-bg, $x-editor-toolbar-active-bg);
      padding: 0.375rem;
    }

  }

  &.ql-container {
    @extend %font-size-sm,
            .overflow-auto,
            .bg-white,
            .border-0;
  }

  .ql-editor {
    @extend %p-3;
  }
}