/**
 * @file
 * Visual styles for Bartik's ui-widget component.
 */
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  background-color: transparent;
  background: transparent;
  color: $red;
  border-color: $gray-300;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  background-color: transparent;
  background: transparent;
  color: $gray-400;
  border-color: $gray-300;
}


.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: $red;
  .ui-icon {
    &:before {
      color: $red;
    }
  }
}

.ui-icon,
.ui-widget-content .ui-icon {
  background-image: none;
}

.ui-icon {
  display: initial;
  &:before {
    font-family: "Font Awesome 5 Free";
  }
}

.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
  background-image: none;
  &:before {
    color: $red;
  }
}

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
  background-image: none;
}
