// Styles shared between snow and bubble

$controlHeight: 24px !default;
$inputPaddingWidth: 5px !default;
$inputPaddingHeight: 3px !default;
$colorItemMargin: 2px !default;
$colorItemSize: 16px !default;
$colorItemsPerRow: 7 !default;

.ql-#{$themeName}.ql-toolbar,
.ql-#{$themeName} .ql-toolbar {
  &:after {
    clear: both;
    content: '';
    display: table;
  }

  button {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    float: left;
    height: $controlHeight;
    padding: $inputPaddingHeight $inputPaddingWidth;
    width: $controlHeight + ($inputPaddingWidth - $inputPaddingHeight) * 2;

    svg {
      float: left;
      height: 100%;
    }

    &:active:hover {
      outline: none;
    }
  }

  input.ql-image[type='file'] {
    display: none;
  }

  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 {
    color: var(--ql-active-color);

    .ql-fill,
    .ql-stroke.ql-fill {
      fill: var(--ql-active-color);
    }

    .ql-stroke,
    .ql-stroke-miter {
      stroke: var(--ql-active-color);
    }
  }
}

// Fix for iOS not losing hover on touch
@media (pointer: coarse) {
  .ql-#{$themeName}.ql-toolbar,
  .ql-#{$themeName} .ql-toolbar {
    button:hover:not(.ql-active) {
      color: var(--ql-inactive-color);

      .ql-fill,
      .ql-stroke.ql-fill {
        fill: var(--ql-inactive-color);
      }

      .ql-stroke,
      .ql-stroke-miter {
        stroke: var(--ql-inactive-color);
      }
    }
  }
}

.ql-#{$themeName} {
  box-sizing: border-box;

  * {
    box-sizing: border-box;
  }

  .ql-hidden {
    display: none;
  }

  .ql-out-bottom,
  .ql-out-top {
    visibility: hidden;
  }

  .ql-tooltip {
    position: absolute;
    transform: translateY(10px);

    a {
      cursor: pointer;
      text-decoration: none;
    }
  }

  .ql-tooltip.ql-flip {
    transform: translateY(-10px);
  }

  .ql-formats {
    display: inline-block;
    vertical-align: middle;

    &:after {
      clear: both;
      content: '';
      display: table;
    }
  }

  .ql-stroke {
    fill: none;
    stroke: var(--ql-inactive-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .ql-stroke-miter {
    fill: none;
    stroke: var(--ql-inactive-color);
    stroke-miterlimit: 10;
    stroke-width: 2;
  }

  .ql-fill,
  .ql-stroke.ql-fill {
    fill: var(--ql-inactive-color);
  }

  .ql-empty {
    fill: none;
  }

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

  .ql-thin,
  .ql-stroke.ql-thin {
    stroke-width: 1;
  }

  .ql-transparent {
    opacity: 0.4;
  }

  .ql-direction {
    svg:last-child {
      display: none;
    }
  }

  .ql-direction.ql-active {
    svg:last-child {
      display: inline;
    }

    svg:first-child {
      display: none;
    }
  }

  .ql-picker {
    color: var(--ql-inactive-color);
    display: inline-block;
    float: left;
    font-size: 14px;
    font-weight: 500;
    height: $controlHeight;
    position: relative;
    vertical-align: middle;

    &.ql-expanded {
      .ql-picker-label {
        color: var(--ql-border-color);
        z-index: 2;

        .ql-fill {
          fill: var(--ql-border-color);
        }

        .ql-stroke {
          stroke: var(--ql-border-color);
        }
      }

      .ql-picker-options {
        display: block;
        margin-top: -1px;
        top: 100%;
        z-index: 1;
      }
    }
  }

  .ql-picker-label {
    cursor: pointer;
    display: inline-block;
    height: 100%;
    padding-left: 8px;
    padding-right: 2px;
    position: relative;
    width: 100%;

    &::before {
      display: inline-block;
      line-height: 22px;
    }
  }

  .ql-picker-options {
    background-color: var(--ql-background-color);
    display: none;
    min-width: 100%;
    padding: 4px 8px;
    position: absolute;
    white-space: nowrap;
    .ql-picker-item {
      cursor: pointer;
      display: block;
      padding-bottom: 5px;
      padding-top: 5px;
    }
  }

  .ql-color-picker,
  .ql-icon-picker {
    width: $controlHeight + 4;
  }

  .ql-color-picker .ql-picker-label,
  .ql-icon-picker .ql-picker-label {
    padding: 2px 4px;
  }

  .ql-color-picker .ql-picker-label svg,
  .ql-icon-picker .ql-picker-label svg {
    right: 4px;
  }

  .ql-icon-picker {
    .ql-picker-options {
      padding: 4px 0px;
    }
    .ql-picker-item {
      height: $controlHeight;
      width: $controlHeight;
      padding: 2px 4px;
    }
  }

  .ql-color-picker {
    .ql-picker-options {
      padding: $inputPaddingHeight $inputPaddingWidth;
      width:
        ($colorItemSize + 2 * $colorItemMargin) *
          $colorItemsPerRow + 2 * $inputPaddingWidth + 2
      ;
    }

    .ql-picker-item {
      border: 1px solid transparent;
      float: left;
      height: $colorItemSize;
      margin: $colorItemMargin;
      padding: 0px;
      width: $colorItemSize;
    }
  }

  .ql-picker {
    &:not(.ql-color-picker):not(.ql-icon-picker) {
      svg {
        position: absolute;
        margin-top: -9px;
        right: 0;
        top: 50%;
        width: 18px;
      }
    }
  }

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

  .ql-picker.ql-header {
    width: 98px;

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

    @for $num from 1 through 3 {
      .ql-picker-label[data-value="#{$num}"]::before,
      .ql-picker-item[data-value="#{$num}"]::before {
        content: 'Heading #{$num}';
      }
    }

    .ql-picker-item[data-value='1']::before {
      font-size: 2em;
    }
    .ql-picker-item[data-value='2']::before {
      font-size: 1.5em;
    }
    .ql-picker-item[data-value='3']::before {
      font-size: 1.17em;
    }
    .ql-picker-item[data-value='4']::before {
      font-size: 1em;
    }
    .ql-picker-item[data-value='5']::before {
      font-size: 0.83em;
    }
    .ql-picker-item[data-value='6']::before {
      font-size: 0.67em;
    }
  }

  .ql-picker.ql-font {
    width: 108px;

    .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-picker.ql-size {
    width: 98px;

    .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 {
      font-size: 10px;
    }
    .ql-picker-item[data-value='large']::before {
      font-size: 18px;
    }
    .ql-picker-item[data-value='huge']::before {
      font-size: 32px;
    }
  }

  .ql-color-picker.ql-background {
    .ql-picker-item {
      background-color: #fff;
    }
  }

  .ql-color-picker.ql-color {
    .ql-picker-item {
      background-color: #000;
    }
  }
}

.ql-code-block-container {
  position: relative;

  .ql-ui {
    right: 5px;
    top: 5px;
  }
}

.ql-editor, .quill-render {
  // h1 {
  //   font-size: 2em;
  // }
  // h2 {
  //   font-size: 1.5em;
  // }
  // h3 {
  //   font-size: 1.17em;
  // }
  // h4 {
  //   font-size: 1em;
  // }
  // h5 {
  //   font-size: 0.83em;
  // }
  // h6 {
  //   font-size: 0.67em;
  // }
  // a {
  //   text-decoration: underline;
  // }

  blockquote {
    border-left: 4px solid #ccc;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 16px;
  }

  code,
  .ql-code-block-container {
    background-color: #f0f0f0;
    border-radius: 3px;
  }

  .ql-code-block-container {
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px 10px;
    background-color: #23241f;
    color: #f8f8f2;
    overflow: visible;
  }

  code {
    font-size: 85%;
    padding: 2px 4px;
  }

  img {
    max-width: 100%;
  }
}