/***************/
/* HTML Editor */
/***************/

.ui-igbutton .ui-igbutton-table {
  @include stateActive;
}

.ui-ightmleditor {
  background-color: $body-bg;
  /* Bootstrap 4 alpha has a new navbar, we hope with the final release they'll have matching variables
  border: 1px solid $navbar-default-border;
  */
  border: 1px solid darken(#f8f8f8, 6.5%);
}

.ui-ightmleditor .ui-igtoolbar {
  /* Bootstrap 4 alpha has a new navbar, we hope with the final release they'll have matching variables
  background-color: $navbar-default-bg;
  border: 1px solid $navbar-default-border;
  */
  background-color: #f8f8f8;
  border: 1px solid darken(#f8f8f8, 6.5%);
}

.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-igbutton,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton {
  border-radius: 0;
}

.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-default,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-default {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
}

.ui-splitbutton.ui-state-default {
  border-color: $btn-secondary-border;
}

.ui-splitbutton.ui-splitbutton-hover {
  border-color: darken($btn-secondary-border, 12%);
}

.ui-splitbutton.ui-state-active {
  border-color: darken($btn-primary-bg, 5%);
}

.ui-splitbutton.ui-state-active div.ui-igtoolbarbutton.ui-button,
.ui-ightmleditor .ui-splitbutton.ui-state-active div.ui-igtoolbarbutton.ui-button {
  background-color: $brand-primary;
}

.ui-splitbutton-arrow .ui-icon {
  color: $ui-icons-darker;
}

.ui-splitbutton-arrow.ui-state-hover .ui-icon,
.ui-splitbutton-arrow.ui-state-active .ui-icon,
.ui-splitbutton-arrow.ui-state-focus .ui-icon {
  color: $ui-icons-light;
}

.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-hover,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-hover {
  @include stateHover;
}

.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-focus,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-focus {
  @include stateFocused;
}

.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-active,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-active {
  @include stateActive;
}

.ui-ightmleditor .ui-igcombo-fieldholder {
  border-color: $input-border;
}
/* html editor icons*/

.ui-igbutton-viewsource.ui-state-default .ui-igbutton-viewsource-icon {
  background-position: 0 -160px;
}

.ui-igbutton-viewsource.ui-state-hover .ui-igbutton-viewsource-icon {
  background-position: -32px -160px;
}

.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-hover {
  @include stateHover;
}

.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-hover.ui-state-active {
  @include stateHover;
}

.ui-igbutton.ui-state-active .ui-igbutton-collapse,
.ui-igbutton.ui-state-focus .ui-igbutton-collapse {
  background-position: -16px 0;
}

.ui-igbutton.ui-state-active .ui-igbutton-expand,
.ui-igbutton.ui-state-focus .ui-igbutton-expand {
  background-position: -16px -16px;
}

.ui-igbutton.ui-state-active .ui-igbutton-redo,
.ui-igbutton.ui-state-focus .ui-igbutton-redo {
  background-position: -16px -32px;
}

.ui-igbutton.ui-state-active .ui-igbutton-undo,
.ui-igbutton.ui-state-focus .ui-igbutton-undo {
  background-position: -16px -48px;
}

.ui-igbutton.ui-state-active .ui-igbutton-increasefontsize,
.ui-igbutton.ui-state-focus .ui-igbutton-increasefontsize {
  background-position: -16px -80px;
}

.ui-igbutton.ui-state-active .ui-igbutton-decreasefontsize,
.ui-igbutton.ui-state-focus .ui-igbutton-decreasefontsize {
  background-position: -16px -96px;
}

.ui-igbutton.ui-state-active .ui-igbutton-viewsource,
.ui-igbutton.ui-state-focus .ui-igbutton-viewsource {
  background-position: -16px -160px;
}

.ui-igbutton.ui-state-active .ui-igbutton-html,
.ui-igbutton.ui-state-focus .ui-igbutton-html {
  background-position: -16px -112px;
}

.ui-igbutton.ui-state-active .ui-igbutton-html-add,
.ui-igbutton.ui-state-focus .ui-igbutton-html-add {
  background-position: -16px -128px;
}

.ui-igbutton.ui-state-active .ui-igbutton-html-delete,
.ui-igbutton.ui-state-focus .ui-igbutton-html-delete {
  background-position: -16px -144px;
}

.ui-igbutton.ui-state-active .ui-igbutton-html-valid,
.ui-igbutton.ui-state-focus .ui-igbutton-html-valid {
  background-position: -16px -176px;
}

.ui-igbutton.ui-state-active .ui-igbutton-addimage,
.ui-igbutton.ui-state-focus .ui-igbutton-addimage {
  background-position: -16px -192px;
}

.ui-igbutton.ui-state-active .ui-igbutton-link,
.ui-igbutton.ui-state-focus .ui-igbutton-link {
  background-position: -16px -208px;
}

.ui-igbutton.ui-state-active .ui-igbutton-addlink,
.ui-igbutton.ui-state-focus .ui-igbutton-addlink {
  background-position: -16px -224px;
}

.ui-igbutton.ui-state-active .ui-igbutton-unlink,
.ui-igbutton.ui-state-focus .ui-igbutton-unlink {
  background-position: -16px -240px;
}

.ui-igbutton.ui-state-active .ui-igbutton-copy,
.ui-igbutton.ui-state-focus .ui-igbutton-copy {
  background-position: -16px -256px;
}

.ui-igbutton.ui-state-active .ui-igbutton-cut,
.ui-igbutton.ui-state-focus .ui-igbutton-cut {
  background-position: -16px -272px;
}

.ui-igbutton.ui-state-active .ui-igbutton-paste,
.ui-igbutton.ui-state-focus .ui-igbutton-paste {
  background-position: -16px -288px;
}

.ui-igbutton.ui-state-active .ui-igbutton-table,
.ui-igbutton.ui-state-focus .ui-igbutton-table {
  background-position: -16px -304px;
}

.ui-igbutton.ui-state-active .ui-igbutton-addrow,
.ui-igbutton.ui-state-focus .ui-igbutton-addrow {
  background-position: -16px -320px;
}

.ui-igbutton.ui-state-active .ui-igbutton-addcolumn,
.ui-igbutton.ui-state-focus .ui-igbutton-addcolumn {
  background-position: -16px -336px;
}

.ui-igbutton.ui-state-active .ui-igbutton-removerow,
.ui-igbutton.ui-state-focus .ui-igbutton-removerow {
  background-position: -16px -352px;
}

.ui-igbutton.ui-state-active .ui-igbutton-removecolumn,
.ui-igbutton.ui-state-focus .ui-igbutton-removecolumn {
  background-position: -16px -368px;
}

.ui-igbutton.ui-state-active .ui-igbutton-justifyleft,
.ui-igbutton.ui-state-focus .ui-igbutton-justifyleft {
  background-position: -16px -384px;
}

.ui-igbutton.ui-state-active .ui-igbutton-justifycenter,
.ui-igbutton.ui-state-focus .ui-igbutton-justifycenter {
  background-position: -16px -400px;
}

.ui-igbutton.ui-state-active .ui-igbutton-justifyright,
.ui-igbutton.ui-state-focus .ui-igbutton-justifyright {
  background-position: -16px -416px;
}

.ui-igbutton.ui-state-active .ui-igbutton-justifyfull,
.ui-igbutton.ui-state-focus .ui-igbutton-justifyfull {
  background-position: -16px -432px;
}

.ui-igbutton.ui-state-active .ui-igbutton-forecolor,
.ui-igbutton.ui-state-focus .ui-igbutton-forecolor {
  background-position: -16px -448px;
}

.ui-igbutton.ui-state-active .ui-igbutton-backcolor,
.ui-igbutton.ui-state-focus .ui-igbutton-backcolor {
  background-position: -16px -464px;
}

.ui-igbutton.ui-state-active .ui-igbutton-bold,
.ui-igbutton.ui-state-focus .ui-igbutton-bold {
  background-position: -16px -480px;
}

.ui-igbutton.ui-state-active .ui-igbutton-italic,
.ui-igbutton.ui-state-focus .ui-igbutton-italic {
  background-position: -16px -496px;
}

.ui-igbutton.ui-state-active .ui-igbutton-underline,
.ui-igbutton.ui-state-focus .ui-igbutton-underline {
  background-position: -16px -512px;
}

.ui-igbutton.ui-state-active .ui-igbutton-strikethrough,
.ui-igbutton.ui-state-focus .ui-igbutton-strikethrough {
  background-position: -16px -528px;
}

.ui-igbutton.ui-state-active .ui-igbutton-horizontalrule,
.ui-igbutton.ui-state-focus .ui-igbutton-horizontalrule {
  background-position: -16px -544px;
}

.ui-igbutton.ui-state-active .ui-igbutton-indent,
.ui-igbutton.ui-state-focus .ui-igbutton-indent {
  background-position: -16px -560px;
}

.ui-igbutton.ui-state-active .ui-igbutton-removeindent,
.ui-igbutton.ui-state-focus .ui-igbutton-removeindent {
  background-position: -16px -576px;
}

.ui-igbutton.ui-state-active .ui-igbutton-unorderedlist,
.ui-igbutton.ui-state-focus .ui-igbutton-unorderedlist {
  background-position: -16px -592px;
}

.ui-igbutton.ui-state-active .ui-igbutton-orderedlist,
.ui-igbutton.ui-state-focus .ui-igbutton-orderedlist {
  background-position: -16px -608px;
}

.ui-ightmleditor-content iframe,
.ui-ightmleditor-content textarea {
  border: 1px solid $input-border;
  -webkit-box-shadow: inset 2px 2px 3px rgba(50, 50, 50, 0.1);
  -moz-box-shadow: inset 2px 2px 3px rgba(50, 50, 50, 0.1);
  box-shadow: inset 2px 2px 3px rgba(50, 50, 50, 0.1);
}
/*breadcrumb styling*/

.ui-igPathFinder .ui-button::after {
  border-top: 1px solid $btn-secondary-border;
  border-right: 1px solid $btn-secondary-border;
  background: $btn-secondary-bg;
}

.ui-igPathFinder .ui-button.ui-state-hover::after {
  border-top: 1px solid darken($btn-secondary-border, 12%);
  border-right: 1px solid darken($btn-secondary-border, 12%);
  background: darken($btn-secondary-bg, 8%);
}

.ui-igPathFinder .ui-button.ui-state-active::after {
  border-top: 1px solid darken($component-active-bg, 12%);
  border-right: 1px solid darken($component-active-bg, 12%);
  background: $component-active-bg;
  color: $component-active-color;
}

// V.A. 12/12/2019 adding a fix for issue #1984 "igCheckboxEditor: Checked icon is invisible if the default bootstrap4 theme is applied." The fix is based on the suggested workaround in the bug description.	
.ui-state-focus.ui-state-default.ui-state-hover > .ui-icon, .ui-state-focus > .ui-icon {	
	color:#888;	
}