@import "settings";
@import "quill/dist/quill.core";

/// Flag whether or not you want to include bonsai text editor component
/// @type bool
$bonsai-include-text-editor: $bonsai-include-components !default;

/// Styling for the toolbar buttons active state
@mixin toolbar-button-active {
  color: $bonsai-black !important;
  background-color: $bonsai-very-light-gray;
}

/// Styling for the buttons inside the toolbar
@mixin toolbar-button {
  color: $bonsai-dark-gray;
  background-color: transparent;
  height: 35px;
  width: 35px;
  outline: none;
  margin: 0;
  border: 0;
}

/// Styling for size selector active state
@mixin size-selector-active {
  box-shadow: none;
  background-color: $bonsai-very-light-gray;
}

/// Styling for the "placeholder" text for the sizing select box. Required because of Quill weirdness
@mixin size-placeholder {
  position: absolute;
  margin-top: 8px;
  margin-left: 8px;
  font-size: $bonsai-global-font-size;
  pointer-events: none;
  color: $bonsai-black;
}

/// Styling for the select box to match the look and feel of the text editor
@mixin size-selector {
  width: 125px;
  margin: 0;
  font-size: $bonsai-global-font-size;
  color: $bonsai-black;
  border: none;
  outline: none;
}

/// Styling for the text editor toolbar
@mixin toolbar {
  padding: $bonsai-spacing-small;
  border: $bonsai-standard-border;
  border-bottom: none;
}

/// Styling for the text editor container
@mixin quill-container {
  border: $bonsai-standard-border;
  min-height: 100px;
}

/// Gateway mixin for default bonsai editor
@mixin bonsai-text-editor {
  @if $bonsai-include-text-editor {
    .ql-toolbar {
      @include toolbar;

      button,
      .button {
        @include toolbar-button;

        &.ql-active,
        &:hover,
        &:focus {
          @include toolbar-button-active;
        }
      }

      .size-placeholder {
        @include size-placeholder;
      }

      .ql-size {
        @include size-selector;

        &:focus,
        &:hover {
          @include size-selector-active;
        }
      }
    }

    .ql-size-huge {
      @include xlarge-heading;
    }

    .ql-size-large {
      @include large-heading;
    }

    .ql-size-small {
      @include small;
    }

    .ql-container {
      @include quill-container;
    }
  }
}