/*Reset for redactor*/

.redactor-box {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 16px;
  position: static;
}

.redactor-component[data-redactor-type="table"] td[data-active],
.redactor-component[data-redactor-type="table"] th[data-active] {
  opacity: 0.5;
  box-shadow: 0 0 10px rgb(14, 101, 235);
}

.redactor-component-table-line {
  width: 1px;
  height: 100%;
  background-color: rgba(44, 165, 242, 0.5);
  position: absolute;
  top: 0;
}

.redactor-styles {
  position: static;
  font-family: 'Roboto', Helvetica, Arial, sans-serif !important;
  border: 0;
  min-height: 200px;

  table {
    td,
    th {
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      word-break: break-all;
    }

    tr {
      td:last-child,
      th:last-child {
        cursor: default !important;
      }
    }
  }

  iframe.qor-video-container {
    height: 380px;
    margin-bottom: 16px;
  }
  pre {
    background-color: transparent;
    font-family: monospace, Helvetica Neue, Helvetica, Arial, "sans-serif";
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 0;
  }

  blockquote {
    font-style: inherit;
    color: inherit;
    font-family: inherit;
    font-size: inherit;

    &::before,
    &::after {
      display: none;
    }
  }

  figure,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    font-family: 'Roboto', Helvetica, Arial, sans-serif !important;
  }

  address,
  blockquote,
  dl,
  figure,
  hr,
  p,
  pre,
  table {
    margin: inherit;
  }

  p {
    margin-bottom: 10px;
  }

  // for text alignment
  .rd-text-justify {
    text-align: justify;
  }
  .rd-text-right {
    text-align: right;
  }
  .rd-text-center {
    text-align: center;
  }

  li {
    &.rd-text-justify {
      text-align: justify !important;
    }

    &.rd-text-left {
      text-align: left !important;
    }

    &.rd-text-right {
      text-align: right !important;
    }

    &.rd-text-center {
      text-align: center !important;
    }
  }

  // redactor display mode plugin style
  #redactor-image-displaymode {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 55%;
    margin-top: -11px;
    line-height: 1;
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 3px;
    color: rgb(255, 255, 255);
    font-size: 12px;
    padding: 7px 10px;
    cursor: pointer;
    margin-left: -120px;
    & + #redactor-image-editter {
      left: 57%;
    }
  }
}

.redactor-styles h6,
.redactor-dropdown-format .redactor-dropdown-item-h6 {
  text-transform: none;
}

.redactor-in {
  blockquote:empty,
  h1:empty,
  h2:empty,
  h3:empty,
  h4:empty,
  h5:empty,
  h6:empty,
  p:empty {
    min-height: 1px;
  }
}

.redactor-toolbar {
  box-shadow: none;
  li a {
    padding: 12px;
  }
  i {
    font-size: 18px;
    &.html:after {
      content: 'code';
    }
    &.link:after {
      content: 'insert_link';
    }
    &.image:after {
      content: 'image';
    }
    &.format:after {
      content: 'text_fields';
    }
    &.bold:after {
      content: 'format_bold';
    }
    &.file:after {
      content: 'attach_file';
    }
    &.italic:after {
      content: 'format_italic';
    }
    &.deleted:after {
      content: 'strikethrough_s';
    }
    &.lists:after {
      content: 'format_line_spacing';
    }
    &.table:after {
      content: 'grid_on';
    }
  }
}

.redactor-link-tooltip {
  z-index: 1000;
}

#redactor-modal-box {
  background-color: unquote('rgba(#{$color-black}, 0.75)');
}

#redactor-modal {
  border-radius: 2px;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14),
    0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
  padding: 24px;
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  #redactor-modal-header {
    background: none;
    padding: 0;
    margin-bottom: 36px;
    font-weight: 300;
    border-radius: 0;
    font-size: 30px;
    border: 0;
  }
  input[type='text'],
  input[type='password'],
  input[type='email'],
  input[type='url'],
  select,
  textarea {
    border-radius: 0;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  #redactor-modal-body {
    padding: 0;
  }
  button {
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 2px;
    border: 0;
    background: none;
    &:hover {
      background-color: rgba(158, 158, 158, 0.2);
    }
    &#redactor-modal-button-action {
      background-color: unquote('rgb(#{$color-primary})');
      &:hover {
        background-color: unquote('rgb(#{$color-primary})');
      }
    }
  }
}
