// Adapted from Medium Editor Flat theme
// https://github.com/yabwe/medium-editor/blob/master/src/sass/themes/flat.scss

/*
 * Overrides
 */

.medium-editor-placeholder:after {
  white-space: inherit !important;
}

/*
 * Style
 */

// theme settings
@medium-editor-bgcolor: #fff;
@medium-editor-bgcolor-darken: #D3D3D3;
@medium-editor-border-color: #ccc;
@medium-editor-button-size: 32px;
@medium-editor-button-active-text-color: #000;
@medium-editor-link-color: #000;
@medium-editor-placeholder-color: #000;

// theme rules
.medium-toolbar-arrow-under:after {
  top: @medium-editor-button-size;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAMCAYAAACA0IaCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8yOS8xNizKUXAAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAABVElEQVQokZ3Qz0oCURTH8e8VJ4NIJcJdfxaDA7MZNV2LPkAa1KJ2vlbQK/gOQQ8QtAsKWkTiHcaUMahrnDZ3ZBhUqgPDXGbO78O5BxEByBljbuQfZYy5BnLWQQFOEATlOI6Hf4HiOB4GQVAGHOuQA7aBiuu6vtb69jeQ1vrOdV0fqNh8LpmsAOwDVc/zOqPR6H4TNB6PHzzP6wBVmysACnvXPLALHAB13/dPtdaPq6AwDJ9rtVoPqNv+XSAvIiSYSoGHQKPVap1NJpOXNDSdTl/b7fY50LB9RZtTSywFOrbhCDjpdrsXs9nsTURkPp+HvV7vCmja/8Vk8UsjOWTAEnAMNPv9/mUURU+DwWAAtOz3UhYSETteqpRSyZV3gDKwZxf8CbwDEfABGMmE82RKREQptbABgAWwBXwB8TqI5eJWVGpCx76/AbMO2oilwOQRO/jawA95E2er1dRzagAAAABJRU5ErkJggg==') !important;
  width: 19px !important;
  height: 12px !important;
  border: none !important;
  border-style: none !important;
}

.medium-toolbar-arrow-over:before {
  top: @medium-editor-button-size;
  /*border-color: transparent transparent @medium-editor-bgcolor transparent;*/
  /* make it under */
  border-color: @medium-editor-bgcolor transparent transparent transparent;
  border-width: 8px 8px 0 8px;
}

.medium-editor-toolbar {
  background-color: rgba(255,255,255,0.95);
  -webkit-box-shadow: 0px 2px 8px 0 rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 2px 8px 0 rgba(0,0,0,0.2);
  box-shadow: 0px 2px 8px 0 rgba(0,0,0,0.2);
  border-radius: 2px;

  li {
    padding: 0;

    .medium-editor-button-last {
      border-right: none;
    }
  }
}

/* so get the style in block toolbar */
.medium-editor-action {
  width: 36px;
  height: @medium-editor-button-size;
  border: none;
  /*border-right: 1px solid #CCC;*/
  background-color: transparent;
  color: #666666;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;

  &:hover {
    background-color: #DCDCDC;
    color: @medium-editor-button-active-text-color;
  }

  padding: 0 5px !important;
}

.medium-editor-button-active {
  background-color: darken(@medium-editor-bgcolor, 30);
  color: @medium-editor-button-active-text-color;
}

.medium-editor-toolbar-form {
  .medium-editor-toolbar-input {
    height: @medium-editor-button-size;
    background: @medium-editor-bgcolor;
    color: @medium-editor-link-color;

    &::-webkit-input-placeholder {
      color: @medium-editor-placeholder-color;
      color: fade(@medium-editor-placeholder-color, 80%);
    }
    &:-moz-placeholder {
      /* Firefox 18- */
      color: @medium-editor-placeholder-color;
      color: fade(@medium-editor-placeholder-color, 80%);
    }
    &::-moz-placeholder {
      /* Firefox 19+ */
      color: @medium-editor-placeholder-color;
      color: fade(@medium-editor-placeholder-color, 80%);
    }
    &:-ms-input-placeholder {
      color: @medium-editor-placeholder-color;
      color: fade(@medium-editor-placeholder-color, 80%);
    }
  }

  a {
    color: @medium-editor-link-color;
  }
}

.medium-editor-anchor-preview {
  margin-top: -8px;
}

.medium-editor-toolbar-anchor-preview {
  background: #FFF;
  box-shadow: 0px 0px 8px 0 rgba(0,0,0,0.8);

  a {
    color: #000;
    margin: 5px;
  }
}

.medium-editor-placeholder:after {
  font-family: 'open_sans', sans-serif;
  color: @medium-editor-border-color;
}

/*
 * Add a visual separator before list button in hightlight toolbar
 * TODO: should be dynamic if we keep this
 */

/*
.medium-editor-toolbar-actions li:nth-child(5) button {
  border-right: 1px solid black;
}
*/
