@import (inline) 'safarihack.css';

#main-edit-area .editable {
  position: relative;
  // display: table;
}

/* minimum size for empty dropzones */
#main-edit-area .sortable-blocks-edit.empty {
  min-height: 200px;
  // il solo min-height su IE non centra il flexbox
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 30px;
  // flex-direction: column;
  border: 2px dashed @mosaico-outline-color;
  border-radius: 20px;
  animation: border-color-selection-pulsate 4s infinite;
  position: relative;
}

#main-edit-area .sortable-blocks-edit.empty:after {
  content: attr(data-empty-content);
  // reset font (eredito i colori)
  font-size: @base-font-size * 1.6;
  font-weight: normal;
  text-decoration: none;
  font-family: @font-family;
  // text-shadow: 1px 1px 0 #FFFFFF, 0 0 10px #FFFFFF;
}

#main-edit-area .isdragging .sortable-blocks-edit.empty:after {
  .makeDroppable();
  height: auto;
  bottom: -14px;
}

@keyframes pulse {
    0% { left: -10px; right: -10px; opacity: .8; }
  100% { left: -30px; right: -30px; opacity:  0; }
}
@keyframes slidein {
    0% { transform: scale(1.5,1.5); opacity: 0; }
  100% { transform: scale(  1,  1); opacity: 1; }
}
@keyframes slidein2 {
    0% { margin-left: -30%; margin-right: 30%; opacity: 0; }
  100% { margin-left: 0; margin-right: 0; opacity: 1; }
}
#main-edit-area .sortable-placeholder {
  animation: slidein .2s linear 0s 1;
}
#main-edit-area .sortable-placeholder:after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 10px solid red;
  border-color: rgba(255, 0, 0, .1) red rgba(255, 0, 0, .1) red;
  z-index: 50;
  opacity: .8;
}

#main-edit-area .img-wysiwyg,
#main-edit-area .widget-src {
  // required for imgdroppable zones
  position: relative;
  /* This should emulate the stlye of the replaced image... */
  /* display: inline-block; */
  // Using block won't work, either.. see the versafix image+article block where the image is smaller
  /* display: block; */
  width: auto;

  .mo-preloading {
    animation: opacityAnimation 2s infinite;
  }

  // declaring block in order to correctly resize image placeholder while preloading
  // related to the width: auto in the parent img-wysiwyg.
  td.uploadzone {
   overflow: hidden;
   display: block;
  }
}

#main-edit-area .isdraggingimg .ui-droppable.img-wysiwyg {
  &:before {
    .makeDroppable();
    line-height: 45px;
    height: auto;
    top: -10px;
    bottom: -10px;
  }
  &.ui-state-draghover:before {
    background-color: fade(@mosaico-selection-color, 80%);
    animation: none;
  }
}


#main-edit-area .isdragging .sortable-blocks-edit > div:not(.sortable-placeholder) + div:not(.sortable-placeholder):not(.ui-sortable-helper):not(.ui-draggable-dragging):before,
#main-edit-area .isdragging .sortable-blocks-edit > div:not(.sortable-placeholder):not(.ui-sortable-helper):not(.ui-draggable-dragging):first-child:before,
#main-edit-area .isdragging .sortable-blocks-edit > div:not(.sortable-placeholder):not(.ui-sortable-helper):not(.ui-draggable-dragging):last-child:after {
  .makeDroppable();
}

#main-edit-area .isdragging .sortable-blocks-edit > div:not(.sortable-placeholder):not(.ui-sortable-helper):not(.ui-draggable-dragging):last-child:after {
  bottom: -20px;
  top: auto;
}

#main-edit-area .editable.sortable-placeholder:hover .tools {
  // display: none;
  visibility: hidden;
}

#main-edit-area .editable:hover .tools {
  // display: block;
  visibility: visible;
}

#main-edit-area .isresizing .tools {
  visibility: hidden !important;
}

// resizable
#main-edit-area .ui-resizable {
  position: relative;
}
#main-edit-area .ui-resizable-container {
  position: relative;
  .ui-resizable-handle {
    display: none !important;
  }
  &:hover .ui-resizable-handle,
  .resizing-hover .ui-resizable-handle, {
    display: block !important;
  }
}
#main-edit-area .ui-resizable.ui-resizing-div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  &.ui-resizable-resizing {
    z-index: 1000;
    background-color: #ffffffcc;
  }

  &.ui-resizable-resizing:before {
    display: block;
  }

  &:before {
    content: attr(data-size);
    display: none;
    position: absolute;
    text-align: center;
    top: 50%;
    margin-top: -6px;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 12px;
    line-height: 12px;
    color: black;
  }
}

#main-edit-area .ui-resizable-handle.ui-resizable-s {
  .button-style();
  margin: 0;
  padding: 0;
  min-height: 0;
  display: none;
  position: absolute;
  bottom: -8px;
  height: 16px;
  border-radius: 8px;
  left: 50%;
  width: 50px;
  margin-left: -25px;
  box-shadow: 0 0 5px @mosaico-button-shadow-color;
  /* z-index: 90; // this was added because of a bug in uglify-js breaking jquery-ui stuff */

  &:before {
    content: "\f107";
    position: relative;
    font-size: 16px;
    line-height: 16px;
    display: block;
    font-family: FontAwesome;
    text-align: center;
    cursor: row-resize;
    // color: #eee;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

#main-edit-area .ui-resizable:hover .ui-resizable-handle.ui-resizable-s, 
#main-edit-area .ui-resizable .ui-resizable-handle:hover {
  display: block;
}


#main-edit-area .ui-sortable-helper > *,
#main-edit-area .ui-sortable-helper .tools > * {
  opacity: .3;
}
#main-edit-area .ui-sortable-helper .tools,
#main-edit-area .ui-sortable-helper .tools .handle {
  opacity: 1;
}

#main-edit-area, 
#main-toolbox {

  .tool {
    .button-style();

    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    width: 35px;
    height: 33px;
    // border-radius: 3px;
    font-size: 20px;
    padding: 3px;
    padding-bottom: 2px;
    margin: 0;
    min-height: 35px;
    
    box-shadow: 0 0 5px @mosaico-button-shadow-color;
    
    cursor: pointer;

    input.fileupload {
      padding-top: 50px;
    }
  }

  .tool:hover {
    background-color: @mosaico-button-background-color-hover;
  }
  .tools .tool.handle {
    float: left;
    margin-left: 16px;
    cursor: move;
  }
  .tools .tool.moveup,
  .tools .tool.movedown {
    float: left;
    margin-left: 3px;
  }
  
  .tools .tool.delete,
  .tools .tool.clone {
    float: right;
    margin-left: 3px;
  }
  
  .tools .tool.delete {
    margin-right: 16px;
  }

}

#main-edit-area .midtools,
#main-toolbox .midtools {
  // display: none;
  visibility: hidden;
  z-index: 30; 
  position: absolute; 
  bottom: 16px;
  // width: 100%;
  text-align: left;
}
#main-toolbox .midtools {
  visibility: visible;
  bottom: 6px;
}

#main-edit-area .img-wysiwyg:hover .midtools {
  // display: block;
  visibility: visible;
}
// nascondo un po' di cose durante l'upload
#main-edit-area .uploading,
#main-toolbox .uploading {
  .midtools {
    // display: none !important;
    visibility: hidden !important;
  }
  .fileuploadtext {
    // display: none !important;
    visibility: hidden !important;
  }
  .fileupload.withfile {
    // display: none;
    visibility: hidden;
  }
}


#main-edit-area .img-wysiwyg .img-size {
  visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px;
  font-family: @font-family;
  font-size: 12px;
  background-color: rgba(128,128,128,.5);
  color: white;  
}

#main-edit-area .img-wysiwyg:hover .img-size {
  visibility: visible;
}

#main-edit-area .midtools,
#main-toolbox .midtools {
  margin-left: 4px;
  .tool {
    // z-index: 20;
    margin-left: 4px;
  }
}

#main-edit-area .tools,
#main-toolbox .tools {
  position: absolute;
  // display: none;
  visibility: hidden;
  margin: 0;
  top: -16px;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 20;
  text-align: center;
  /* width: 100%;*/
  /* padding: 0.25em; */
}

#main-wysiwyg-area {
  backface-visibility: hidden;
  background-color: white;
}

#main-edit-area, #main-toolbox, #main-preview {
  position: absolute;
  top: 0;
  bottom: 0;
}

@keyframes opacityAnimation {
  0%   { opacity: 1; }
  50%  { opacity: 1; }
  75%  { opacity: 0.3; }
  100% { opacity: 1; }
}

#main-wysiwyg-area {
  // Prevent images inside A tags to show "hand cursor"
  a[href] {
    cursor: default !important;
  }
  // The ruls above breaks the cursor in tinymce, so fix it:
  a[contenteditable] {
    cursor: text !important;
  }

  // Our div wrapper prevent some css property to correctly propagate
  .mo-editor-wrapper {
    text-decoration: inherit;
  }

  // Prevent clicking and show loading whily tinymce is being initialized
  .wysiwyg-loading {
    pointer-events: none;
    animation: opacityAnimation 2s infinite;
  }

  // we force inline editable elements to be shown as inline-block in editing
  // there are many issues with editing inline (non inline-block) elements so 
  // this is a sensible behaviour
  span, a, b, i, cite, code, em, label, small, strong, sub, sup, q {
    &[contenteditable] {
      display: inline-block;
    }
  }
  // Force a minimum width for any contenteditable, to prevent it from collapsing
  // and becoming "non-selectable" with clicks/touches (we can't expect people to use TAB)
  [contenteditable] {
    min-width: 1em;
    // In Firefox if you put the caret in a span and then delete char by char you can get to a point where the content is empty.
    // Even if we force an inline-block, if it is empty it loose its height. So we force a pseudo element as an invisible separator for this specific case.
    &:empty::before {
      content: "\2063";
      display: inline-block;
      position: relative;
    }
  }

}

#main-edit-area {
  .mce-edit-focus {
    outline: none;
  }

  // selectable elements
  #main-wysiwyg-area:not(.isdragging):not(.isdraggingimg):not(.isresizing) {
    // blocks
    .editable {
      .makeSelectable(10px, ~'.selected', 0, ~' .mo-blockselectionhelper');
    }
    
    // texts
    .mce-content-body {
      .makeSelectable(4px, ~'.selecteditem', 0, ~':before');
      cursor: text;
    }
    // images
    .selectable-img {
      .makeSelectable(4px, ~'.selecteditem', 0, ~' .mo-imgselectionhelper:before');
    }

    .editable {
      .makeSelectableHover(~'.mce-content-body', ~'.selecteditem', ~':before');
      .makeSelectableHover(~'.selectable-img', ~'.selecteditem', ~' .mo-imgselectionhelper:before');
    }
  }

  .textMiddle {
    text-shadow: none !important;
    font-weight: bold;
    background-color: fade(white, 20%);
    /* border-radius: 5px; */
    padding: 3px;
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
  }
}

#main-wysiwyg-area replacedbody {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 700px;
  margin: 0 auto !important;
  padding: 16px 20px !important;

  @media (min-width: 1400px) {
    max-width: 800px;
  }
  @media (min-width: 1600px) {
    max-width: 900px;
  }
  .withPreviewFrame & {
    @media (max-width: 1700px) {
      max-width: 700px;
    }
    @media (min-width: 1700px) {
      max-width: 800px;
    }
    @media (max-width: 1400px) {
      &:before, &:after {
        display: none;
      }
    }
  }




  @media (min-width: 1100px) {

    &:before, &:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      bottom: 0;
      background: linear-gradient( 90deg, 
        rgba(255,255,255,0) 19%,
        white 21%,
        white 79%,
        rgba(255,255,255,0) 81%
      ), linear-gradient( 135deg, 
        rgba(255,255,255,0) 25%,
        rgba(255,255,255,0) 28%, 
        white 28%,
        white 72%, 
        rgba(255,255,255,0) 72%, 
        rgba(255,255,255,0) 75%
      ), linear-gradient( -135deg, 
        rgba(255,255,255,0) 25%,
        rgba(255,255,255,0) 28%, 
        white 28%,
        white 72%, 
        rgba(255,255,255,0) 72%, 
        rgba(255,255,255,0) 75%
      ),linear-gradient( 135deg, 
        rgba(255,255,255,0) 25%,
        #CCC 25%, 
        white 28%,
        white 72%, 
        #CCC 75%, 
        rgba(255,255,255,0) 75%
      ), linear-gradient( -135deg, 
        rgba(255,255,255,0) 25%,
        #CCC 25%, 
        white 28%,
        white 72%, 
        #CCC 75%, 
        rgba(255,255,255,0) 75%
      );
      background-size: 80px 20px;
      background-position: left -40px top 0;
      z-index: 1;
    }
    &:after {
      left: auto;
      right: 0;
      background-position: left 0px top 0;
    }
  }

}

// Add shadow to tinymce buttonbar buttons
.mce-toolbar-grp.mce-panel .mce-btn-group {
  box-shadow: 0 0 5px @mosaico-button-shadow-color;
}