@import '~less/global-variables';

/**
 * Editor
 */

// Our own customizations
.tr-editor {
  border: 0;
  background: transparent;
  box-shadow: none;
  height: auto;
  resize: none;
  margin: 0;
  padding: 0;
  cursor: text;
  min-height: 100px;
  &:hover {
    background: fade(@brand-primary, 10%);
  }
  &:focus {
    background: transparent;
    outline: none;
    border: 0;
  }
}
/*
 * Bootstrap theme for Medium-editor
 * Adapted from https://raw.githubusercontent.com/daviferreira/medium-editor/master/src/sass/themes/bootstrap.scss
 *
 * When updating:
 * - Copypaste that sass here
 * - Remove Variables from the beginning (they're kept at ./public/less/variables.less)
 * - Replace $ -> @
 * - Replace:
 *     rgba(@medium_editor_placeholder_color, .8)
 *   With:
 *     rgba(red(@medium_editor_placeholder_color), green(@medium_editor_placeholder_color), blue(@medium_editor_placeholder_color), .8)
 * - Fix indentation to be 2 spaces instead of 4
 */

.medium-toolbar-arrow-under:after {
  top: @medium_editor_button_size;
  border-color: @medium_editor_bgcolor transparent transparent transparent;
}

.medium-toolbar-arrow-over:before {
  border-color: transparent transparent @medium_editor_bgcolor transparent;
}

.medium-editor-toolbar {
  border: 1px solid @medium_editor_border_color;
  background-color: @medium_editor_bgcolor;
  border-radius: @medium_editor_border_radius;

  li {
    button {
      min-width: @medium_editor_button_size;
      height: @medium_editor_button_size;
      line-height: @medium_editor_button_size;
      border: none;
      border-right: 1px solid @medium_editor_border_color;
      background-color: transparent;
      color: @medium_editor_link_color;
      padding: 0 5px;
      font-size: 20px;
      box-sizing: border-box;
      transition: background-color 0.2s ease-in, color 0.2s ease-in;
      &:hover {
        background-color: @medium_editor_hover_color;
        color: @medium_editor_button_active_text_color;
      }
    }

    .medium-editor-button-first {
      border-top-left-radius: @medium_editor_border_radius;
      border-bottom-left-radius: @medium_editor_border_radius;
    }

    .medium-editor-button-last {
      border-right: none;
      border-top-right-radius: @medium_editor_border_radius;
      border-bottom-right-radius: @medium_editor_border_radius;
    }

    .medium-editor-button-active {
      background-color: @medium_editor_hover_color;
      color: @medium_editor_button_active_text_color;
    }
  }
}

.medium-editor-toolbar-form {
  background: @medium_editor_bgcolor;
  color: #fff;
  border-radius: @medium_editor_border_radius;

  .medium-editor-toolbar-input {
    height: @medium_editor_button_size;
    background: @medium_editor_bgcolor;
    color: @medium_editor_link_color;
    margin: 0;
    padding: 0 5px;
    line-height: @medium_editor_button_size;

    &::-webkit-input-placeholder {
      color: @medium_editor_link_color;
      color: rgba(
        red(@medium_editor_link_color),
        green(@medium_editor_link_color),
        blue(@medium_editor_link_color),
        0.8
      );
    }
    &:-moz-placeholder {
      /* Firefox 18- */
      color: @medium_editor_placeholder_color;
      color: rgba(
        red(@medium_editor_link_color),
        green(@medium_editor_link_color),
        blue(@medium_editor_link_color),
        0.8
      );
    }
    &::-moz-placeholder {
      /* Firefox 19+ */
      color: @medium_editor_placeholder_color;
      color: rgba(
        red(@medium_editor_link_color),
        green(@medium_editor_link_color),
        blue(@medium_editor_link_color),
        0.8
      );
    }
    &:-ms-input-placeholder {
      color: @medium_editor_placeholder_color;
      color: rgba(
        red(@medium_editor_link_color),
        green(@medium_editor_link_color),
        blue(@medium_editor_link_color),
        0.8
      );
    }
  }

  a {
    color: @medium_editor_link_color;
    margin: 0;
    line-height: 55px;
    padding: 0 10px;
    &:hover {
      text-decoration: none;
      background-color: @medium_editor_hover_color;
      color: @medium_editor_button_active_text_color;
    }
  }
}

.medium-editor-toolbar-anchor-preview {
  background: @medium_editor_bgcolor;
  color: @medium_editor_link_color;
  border-radius: @medium_editor_border_radius;
}

.tr-editor.ng-empty,
.medium-editor-placeholder:after {
  color: @medium_editor_placeholder_color;
}
