/* Start styling for TinyMCE */

.mce-agsdi-icon-picker {
  .agsdi-icons {
    position    : relative;
    white-space : normal;
    overflow    : auto;
    height      : 470px;
    text-align  : left;

    [class*="i-agsdix-fa"]:before {
      transform : translateY(0px);
      }

    *[data-icon], *[data-icon-pre] {
      font-size        : 32px;
      width            : 38px;
      height           : 38px;
      line-height      : 38px;
      text-align       : center;
      display          : inline-block;
      cursor           : pointer;
      padding          : 8px !important;
      margin           : 5px !important;
      border           : none !important;
      border-radius    : $mainRadius;
      background-color : $lightBorderColor;

      &:hover {
        box-shadow : inset 0 0 0 3px #E6E7E8;
        }

      &:before {
        display        : inline-block;
        height         : 1em;
        vertical-align : top;
        text-align     : center;
        }

      &:after {
        display : none;
        }
      }

    .agsdi-selected, .agsdi-selected:hover {
      box-shadow : inset 0 0 0 3px $seaGreen;
      }
    }
  }

.mce-agsdi-icon-preview {

  *[data-icon] {
    text-align : center;
    display    : inline-block;

    &:before {
      display        : inline-block;
      vertical-align : top;
      text-align     : center;
      }

    &:after {
      display : none;
      }
    }

  .agsdi-icon-preview {
    height   : 100% !important;
    width    : 150px !important;
    overflow : hidden;
    position : relative;

    span {
      width     : 100px;
	  height    : 100px;
      position  : absolute;
      left      : 50% !important;
      top       : 50% !important;
      transform : translate(-50%, -50%) !important;
      }
    }

  label {
    display : none;
    }
  }

.mce-i-agsdi:before {
  display : inline-block;
  }

.mce-agsdi-insert-dialog {
  border        : none !important;
  border-radius : 4px;
  overflow      : hidden;
  box-shadow    : $boxShadow;
  
  .mce-agsdi-color-field {
	min-width: 100px;
  }

  input, input[type="search"], input[type="text"], select {
    @include formInputMixin();
    padding : 0 10px !important;
    }

  label {
    @include formLabelMixin();
    text-shadow : none;
    }

  input.mce-textbox {
    max-width : 97px;
    }

  .mce-container * {
    font-family             : $fontGeneral;
    text-shadow             : none;
    color                   : $fontColor;
    font-weight             : 400;
    line-height             : $lineHeight;
    font-size               : $fontSize;
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    }

  .mce-window-head {
    background-color : #2F0082 !important;
    border           : none;
    padding          : 18px 23px !important;
    min-height       : auto !important;

    .mce-title {
      color         : #FFF !important;
      @include heading();
      @include responsiveFontSize(20px, 19px, 18px);
      margin-bottom : 0;
      padding-left  : 0 !important;
      }

    .mce-close {
      opacity   : 0.75;
      top       : 50% !important;
      transform : translateY(-50%);

      &:hover {
        opacity : 1;
        }

      .mce-i-remove:before {
        color : #FFF !important;
        }
      }
    }

  /* Scrollbar */
  ::-webkit-scrollbar {
    /* total width */
    width            : 7px;
    background-color : #F8F9FD;
    border-radius    : $mainRadius;
    }

  ::-webkit-scrollbar-track {
    /* background of the scrollbar except button or resizer */
    background-color : #F8F9FD;
    }

  ::-webkit-scrollbar-track:hover {
    background-color : #DDE2E5;
    }

  ::-webkit-scrollbar-thumb {
    /* scrollbar itself */
    background-color : $headingColor;
    border-radius    : $mainRadius;
    border           : none;
    }

  ::-webkit-scrollbar-button {
    /* set button(top and bottom of the scrollbar) */
    display : none;
    }

  /* Range slider */
  .mce-slider {
    border           : none;
    border-radius    : 4px;
    background-color : #F8F9FD;
    height           : 7px;
    }

  .mce-slider-handle {
    background    : #6C64DC;
    border-color  : #6C64DC;
    border-radius : 50%;
    height        : 10px !important;
    width         : 10px !important;
    }

  /* Color picker */
  .mce-colorpicker-sv, .mce-colorpicker-h {
    border        : none;
    border-radius : 4px;
    }

  .mce-colorpicker-selector1 {
    border     : 2px solid #FFF;
    box-shadow : 0 1px 4px rgba(0, 0, 0, 0.2);
    }

  .mce-colorpicker-selector2 {
    border : 1px solid #FFF;
    }

  .mce-colorpicker-h-marker {
    box-shadow    :  0 1px 4px rgba(0, 0, 0, 0.2);
    border        : none;
    border-radius : 4px;
    left          : 0;
    height        : 10px;
    }

  // Search input
  input.agsdi-picker-search-divi, input.agsdi-picker-search-tinymce {
    display : block;
    width   : 300px;
    margin  : 10px 0 15px;
    }

  select.agsdi-picker-multicolor-select-tinymce,
  input.agsdi-picker-search-tinymce, select.agsdi-picker-filter-tinymce {
    width      : 100%;
    display: block;
    box-sizing : border-box;
    margin-bottom: 8px;
    }

  // Text messages
  .mce-agsdi-multi-color-message p, .mce-agsdi-style-inherit-message p {
    white-space : normal;
    font-size   : 12px;
    line-height : 1.4em;
    font-weight : 400;

    a {
      cursor    : pointer;
      color     : $seaGreen;
      font-size : inherit;

      &:hover {
        text-decoration : underline;
        color           : $seaGreenDark;
        }
      }
    }

  .mce-agsdi-multi-color-message {
    p {
      height     : 100px;
      overflow-y : auto;
      }
    }

  // Credit
  .agsdi-picker-credit {
    color      : #AAA;
    font-size  : 12px;
    font-style : italic;
    max-width  : 520px;
    display    : block;
    margin-top : 0;

    .agsdi-picker-credit-separator {
      display : none;
      }

    a {
      cursor    : pointer;
      color     : $seaGreen;
      font-size : inherit;

      &:hover {
        text-decoration : underline;
        color           : $seaGreenDark;
        }
      }
    }

  // Footer
  .mce-foot {
    border             : none;
    //height             : auto !important;
    -webkit-box-shadow : 0 0 20px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow    : 0 0 20px 0 rgba(0, 0, 0, 0.2);
    box-shadow         : 0 0 20px 0 rgba(0, 0, 0, 0.2);

    .mce-btn {
      border     : none !important;
      background : transparent !important;
      height     : auto !important;

      .mce-txt {
        font-family : $fontButton;
        font-weight : 600;
        line-height : 1.4;
        }

      button {
        @include button();
        @include colorButtonMixin(purple);
        @include sizeButtonMixin(medium);
        min-width : 100px;
        }

      &:last-child {
        button {
          @include colorButtonMixin(grey);
          }
        }
      }
    }

  // Other
  .mce-panel {
    background-color : transparent;
    }

  .mce-container-body.mce-abs-layout {
    overflow : visible;
    }
  }

/** TinyMCE Divi Visual Builder **/

#et-boc #et-fb-multicolor_icon_select {
  display : none;
  }

html body.et-fb .mce-agsdi-insert-dialog {
  &.mce-floatpanel {
    border : none !important;
    }

  .mce-window-head {
    .mce-close {
      display : none;
      }
    }

  .mce-panel {
    background-color : #FFF;
    }
  }

.et-fb-font-icon-list [data-icon="agsdix-null"], .agsdi-icons [data-icon="agsdix-null"] {
  display : none !important;
  }

/* End styling for TinyMCE */