@import "./Variables.scss";

@mixin jstb_button_style_only_color() {
  border: solid 1px $color_indigo !important;
  border-radius: .2em !important;
  background-color: $color_indigo !important;
  color: $color_white !important;
  width: 30px !important;
  height: 30px !important;
  margin-right: .2em !important;
  margin-bottom: .2em !important;
  padding: 0 !important;
  font-family: sans-serif !important;
  font-size: 13px !important;
  line-height: 30px !important;
  letter-spacing: 0 !important;
  vertical-align: bottom;
}

@mixin jstb_button_style() {
  @include jstb_button_style_only_color();
  background-image: none !important;
}

@mixin jstb_button_span_style() {
  display: inline-block !important;
  overflow: hidden;
  width: 15px;
  height: 28px;
  color: transparent;
}

///////////////////////////////////////////////////////////////////////////////
// Overwrite only default buttons and menus
///////////////////////////////////////////////////////////////////////////////

#content .jstTabs.tabs ul {
  border-bottom: none !important;
  height: 2em;
}

#content .jstTabs.tabs li {
  height: 1.5rem !important;
}

.jstElements button {
  opacity: 1 !important;
}

.jstElements {
  .jstb_strong {
    @include jstb_button_style();

    &:hover {
      opacity: .7;
   }

    span {
     @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_edit_bold, $color_white);
        margin-right: 0;
      }
    }
  }

  .jstb_em {
   @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
     @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_edit_italic, $color_white);
        margin-right: 0;
      }
    }
  }

  .jstb_ins {
    @include  jstb_button_style();

    &:hover {
      opacity: .7;
   }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_edit_underline, $color_white);
        margin-right: 0;
      }
    }
  }

  .jstb_del {
    @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_edit_strike, $color_white);
        margin-right: 0;
      }
    }
  }

  .jstb_code {
    @include jstb_button_style();

    &:hover {
      opacity: .7;
   }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_code, $color_white);
        margin-right: 0;
      }
    }
  }

  .jstb_h1 {
    @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_h1, $color_white);
        margin-right: 0;
      }
    }
  }

  .jstb_h2 {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_h2, $color_white);
        margin-right: 0;
      }
    }
  }

  .jstb_h3 {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_h3, $color_white);
        margin-right: 0;
      }
    }
  }

  .jstb_ul {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_list_2, $color_white);
        margin-right: 0;
      }
    }
  }

  .jstb_ol {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_list_num, $color_white);
        margin-right: 0;
      }
    }
  }

  .jstb_bq {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_bq, $color_white);
        margin-right: 0;
      }
    }
  }

  .jstb_unbq {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_unbq, $color_white);
        margin-right: 0;
      }
    }
  }

  .jstb_pre {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_edit_pre, $color_white);
        margin-right: 0;
      }
    }
  }

  .jstb_precode {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_edit_pre2, $color_white);
        margin-right: 0;
      }
    }
  }

  .jstb_link {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_link, $color_red_light);
        margin-right: 0;
      }
    }
  }

  .jstb_img {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_image, $color_viridian_light);
        margin-right: 0;
      }
    }
  }

  .jstb_table {
    @include jstb_button_style();

   &:hover {
     opacity: .7;
   }

   span {
     @include jstb_button_span_style();

     &:before {
       @include iconbase();
       @include icon($icon_calendar, $color_white);
       margin-right: 0;
     }
   }
 }


  .jstb_help {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_help, $color_blue_light);
        margin-right: 0;
      }
    }
  }

  ////////////////////////////////////////////////////////////////////////////////
  // jsToolbar Buttons Extension
  ////////////////////////////////////////////////////////////////////////////////

  .jstb_horizontal_rule {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_hr, $color_white);
        margin-right: 0;
      }
    }
  }

  .jstb_ruby {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_ruby, $color_red);
        margin-right: 0;
      }
    }
  }

  .jstb_javascript {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_js, $color_yellow);
        margin-right: 0;
      }
    }
  }

  .jstb_link_title {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_link, $color_blue_light);
        margin-right: 0;
      }
    }
  }

  .jstb_more {
     @include jstb_button_style();

    &:hover {
      opacity: .7;
    }

    span {
      @include jstb_button_span_style();

      &:before {
        @include iconbase();
        @include icon($icon_help_2, $color_blue_light);
        margin-right: 0;
      }
    }
  }

}

// Replace image

[class*="js-replace-icon-"]:before {
  @include iconbase();
}

.js-replace-icon-trash:before {
  @include icon($icon_trash, $color_gray);
}

.js-replace-icon-check:before {
  @include icon($icon_check, $color_green);
}

.js-replace-icon-cross:before {
  @include icon($icon_cross, $color_red);
}

.js-replace-icon-warning:before {
  @include icon($icon_warning, $color_red);
}

.js-replace-icon-add:before {
  @include icon($icon_add, $color_green);
}

.js-replace-icon-edit:before {
  @include icon($icon_edit, $color_yellow_dark);
}

.js-replace-icon-comment:before {
  @include icon($icon_message, $color_blue);
}

.js-replace-icon-calendar:before {
  @include icon($icon_calendar, $color_red);
  margin-left: .5em;
}

.js-replace-icon-toggle-plus:before {
  @include icon($icon_toggle_plus, $color_gray);
}

.js-replace-icon-chevron-top:before {
  @include icon($icon_chevron_up, $color_red);
}

.js-replace-icon-chevron-up:before {
  @include icon($icon_chevron_up, $color_green);
}

.js-replace-icon-chevron-bottom:before {
  @include icon($icon_chevron_down, $color_red);
}

.js-replace-icon-chevron-down:before {
  @include icon($icon_chevron_down, $color_green);
}
