@mixin hover-element() {
  border-color: $stateHoverBorderColor;
  background: $stateHoverBgColor;
  color: $stateHoverTextColor;

  a {
    color: $stateHoverTextColor;
  }
}

@mixin placeholder() {
  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-size: $fontSize;
    color: $inputPlaceHolderColor;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    font-size: $fontSize;
    color: $inputPlaceHolderColor;
  }
  :-ms-input-placeholder { /* IE 10+ */
    font-size: $fontSize;
    color: $inputPlaceHolderColor;
  }
  :-moz-placeholder { /* Firefox 18- */
    font-size: $fontSize;
    color: $inputPlaceHolderColor;
  }
}

@mixin icon-override($icon) {
  background: none !important;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-indent: 0px !important;
  text-align: center;

  &:before {
    content: $icon;
  }
}

.ui-widget {
  font-family: $fontFamily;
  font-size: $fontSize;

  input, select, textarea, button {
    font-family: $fontFamily;
    font-size: $fontSize;
    padding-left: 14px;
  }

  :active {
    outline: none;
  }
}

.ui-widget-content {
  border: $contentBorderWidth solid $contentBorderColor;
  background: $contentBgColor;
  color: $contentTextColor;

  a {
    color: $contentTextColor;
  }
}

.ui-widget-header {
  border: $headerBorderWidth solid $headerBorderColor;
  background: $headerBgColor;
  color: $headerTextColor;
  font-weight: $headerFontWeight;

  a {
    color: $headerTextColor;
  }
}

.ui-widget-overlay {
  background: #666666;
  opacity: .50;
  filter: Alpha(Opacity=50);
}

.ui-widget-header .ui-state-default,
.ui-widget-content .ui-state-default,
.ui-state-default {
  border: $stateDefaultBorderWidth solid $stateDefaultBorderColor;
  background: $stateDefaultBgColor;
  color: $stateDefaultTextColor;

  a {
    color: $stateDefaultTextColor;
  }
}

.ui-widget-header .ui-state-active,
.ui-widget-content .ui-state-active,
.ui-state-active {
  border-color: $stateActiveBorderColor;
  background: $stateActiveBgColor;
  color: $stateActiveTextColor;

  a {
    color: $stateActiveTextColor;
  }
}

.ui-widget-header .ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-state-highlight {
  border-color: $stateHighlightBorderColor;
  background: $stateHighlightBgColor;
  color: $stateHighlightTextColor;
  font-weight: $stateHighlightFontWeight;
  a {
    color: $stateHighlightTextColor;
  }
}

.ui-widget-header .ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-state-focus {
  border-color: $stateFocusBorderColor;
  background: $stateFocusBgColor;
  color: $stateFocusTextColor;

  a {
    color: $stateFocusTextColor;
  }
}

.ui-widget-header .ui-state-error,
.ui-widget-content .ui-state-error,
.ui-state-error {
  border-color: $stateErrorBorderColor;
  background: $stateErrorBgColor;
  color: $stateErrorTextColor;

  a {
    color: $stateErrorTextColor;
  }
}

.ui-state-disabled,
.ui-widget:disabled {
  opacity: $disabledOpacity;
  filter: Alpha(Opacity=$disabledOpacity * 100);
  background-image: none;
  cursor: default !important;

  * {
    cursor: default !important;
  }
}

/* Forms */
.ui-inputtext {
  background: $inputBgColor;
  color: $inputTextColor;
}

.ui-inputtext:enabled:hover {
  border-color: $stateHoverBorderColor;
}

.ui-inputtext.ui-state-focus,
.ui-inputtext:focus {
  outline: 0 none;
  border-color: $stateFocusBorderColor;
  -moz-box-shadow: 0px 0px 5px $stateFocusBorderColor;
  -webkit-box-shadow: 0px 0px 5px $stateFocusBorderColor;
  box-shadow: 0px 0px 5px $stateFocusBorderColor;
}

.ui-autocomplete {
  .ui-autocomplete-multiple-container:not(.ui-state-disabled) {
    &:hover {
      border-color: $stateHoverBorderColor;
    }

    &.ui-state-focus {
      border-color: $stateFocusBorderColor;
    }
  }
}

.ui-chips {
  > ul:not(.ui-state-disabled) {
    &:hover {
      border-color: $stateHoverBorderColor;
    }

    &.ui-state-focus {
      border-color: $stateFocusBorderColor;
    }
  }
}

.ui-button-icon-only {
  .pi, .fa, .icon-history {
    margin-left: -2em;
  }
}

.ui-button:focus,
.ui-button:enabled:hover {
  outline: 0 none;
  @include hover-element();
}

.ui-button:enabled:active {
  border-color: $stateActiveBorderColor;
  background: $stateActiveBgColor;
  color: $stateActiveTextColor;
}

.ui-datepicker-trigger {
  &.ui-button:enabled:active, &.ui-button:enabled:active,
  &.ui-button:focus, &.ui-button:enabled:hover {
    border: 0;
    color: $inputIconColor;
  }

  &.ui-button {
    background: transparent;
    color: $inputIconColor;
  }
}

.ui-chkbox-box:not(.ui-state-disabled):not(.ui-state-active):hover {
  @include hover-element();
}

.ui-radiobutton-box:not(.ui-state-disabled):not(.ui-state-active):hover {
  @include hover-element();
}

.ui-dropdown:not(.ui-state-disabled):hover {
  @include hover-element();
}

.ui-dropdown-panel .ui-dropdown-item:not(.ui-state-highlight):hover {
  @include hover-element();
}

.ui-listbox {
  &:focus {
    outline: 0 none;
    border-color: $stateFocusBorderColor;
    -moz-box-shadow: 0px 0px 5px $stateFocusBorderColor;
    -webkit-box-shadow: 0px 0px 5px $stateFocusBorderColor;
    box-shadow: 0px 0px 5px $stateFocusBorderColor;
  }

  &:hover {
    border-color: $stateHoverBorderColor;
  }

  .ui-listbox-header {
    .ui-listbox-filter-container {
      .fa {
        color: $inputTextColor;
      }
    }
  }

  &:not(.ui-state-disabled) {
    .ui-listbox-item:not(.ui-state-highlight):hover {
      @include hover-element();
    }
  }

  &.ui-state-disabled {
    .ui-chkbox-box:not(.ui-state-active):hover {
      border-color: $stateDefaultBorderColor;
      background: $stateDefaultBgColor;
      color: $stateDefaultTextColor;
    }
  }
}

.ui-multiselect:not(.ui-state-disabled):hover {
  @include hover-element();
}

.ui-multiselect-panel .ui-multiselect-item:not(.ui-state-highlight):hover {
  @include hover-element();
}

.ui-multiselect-panel .ui-multiselect-close {
  color: $headerIconTextColor;
}

.ui-multiselect-panel .ui-multiselect-filter-container .fa {
  color: $inputTextColor;
}

.ui-spinner:not(.ui-state-disabled) .ui-spinner-button:enabled:hover {
  @include hover-element();
}

.ui-spinner:not(.ui-state-disabled) .ui-spinner-button:enabled:active {
  border-color: $stateActiveBorderColor;
  background: $stateActiveBgColor;
  color: $stateActiveTextColor;
}

.ui-selectbutton .ui-button:not(.ui-state-disabled):not(.ui-state-active):hover {
  @include hover-element();
}

.ui-togglebutton:not(.ui-state-disabled):not(.ui-state-active):hover {
  @include hover-element();
}

.ui-paginator a:not(.ui-state-disabled):not(.ui-state-active):hover {
  @include hover-element();
}

.ui-datatable {
  .ui-rowgroup-header a {
    color: $headerTextColor;
  }

  .ui-sortable-column:not(.ui-state-active):hover {
    background: $stateHoverBgColor;
    color: $stateHoverTextColor;
  }

  .ui-row-toggler {
    color: $contentTextColor;
  }

  tbody.ui-datatable-hoverable-rows {
    > tr.ui-widget-content:not(.ui-state-highlight):hover {
      cursor: pointer;
      background: $stateHoverBgColor;
      color: $stateHoverTextColor;
    }
  }
}

.ui-orderlist {
  .ui-orderlist-item:not(.ui-state-highlight):hover {
    @include hover-element();
  }
}

.ui-picklist {
  .ui-picklist-item:not(.ui-state-highlight):hover {
    @include hover-element();
  }
}

.ui-tree {
  &.ui-treenode-dragover {
    border-color: $stateHighlightBorderColor;
  }

  .ui-treenode-content {
    &.ui-treenode-selectable {
      .ui-treenode-label:not(.ui-state-highlight):hover {
        @include hover-element();
      }
    }

    &.ui-treenode-dragover {
      background: $stateActiveBgColor;
      color: $stateActiveTextColor;
    }
  }

  &.ui-tree-horizontal {
    .ui-treenode-content.ui-treenode-selectable {
      .ui-treenode-label:not(.ui-state-highlight):hover {
        background-color: inherit;
        color: inherit;
      }

      &:not(.ui-state-highlight):hover {
        @include hover-element();
      }
    }
  }
}

.ui-treetable {
  .ui-treetable-row.ui-treetable-row-selectable:not(.ui-state-highlight):hover {
    background: $stateHoverBgColor;
    color: $stateHoverTextColor;
  }
}

.ui-accordion {
  .ui-accordion-header:not(.ui-state-active):not(.ui-state-disabled):hover {
    @include hover-element();
  }
}

.ui-fieldset {
  &.ui-fieldset-toggleable {
    .ui-fieldset-legend:hover {
      @include hover-element();
    }
  }
}

.ui-panel {
  .ui-panel-titlebar {
    .ui-panel-titlebar-icon:hover {
      @include hover-element();
    }
  }
}

.ui-tabview {
  .ui-tabview-nav {
    li {
      &:not(.ui-state-active):not(.ui-state-disabled):hover {
        @include hover-element();
      }
    }
  }
}

.ui-dialog {
  .ui-dialog-titlebar-icon {
    color: $headerTextColor;

    &:hover {
      @include hover-element();
    }
  }
}

.ui-overlaypanel {
  .ui-overlaypanel-close:hover {
    @include hover-element();
  }
}

.ui-inplace {
  .ui-inplace-display:hover {
    @include hover-element();
  }
}

.ui-breadcrumb {
  a {
    color: $headerTextColor;
  }
}

.ui-menu {
  .ui-menuitem {
    .ui-menuitem-link {
      color: $contentTextColor;

      &:hover {
        @include hover-element();
        border-color: transparent;
      }
    }

    &.ui-menuitem-active {
      > .ui-menuitem-link {
        @include hover-element();
        border-color: transparent;
      }
    }
  }
}

.ui-tabmenu {
  .ui-tabmenu-nav {
    li:not(.ui-state-active):hover {
      @include hover-element();
    }
  }
}

.ui-steps {
  .ui-steps-item:not(.ui-state-highlight):not(.ui-state-disabled):hover {
    @include hover-element();
  }
}

.ui-panelmenu {
  .ui-panelmenu-header {
    &:not(.ui-state-active):hover {
      @include hover-element();

      a {
        color: $stateHoverTextColor;
      }
    }

    &.ui-state-active {
      a {
        color: $stateActiveTextColor;
      }
    }
  }

  .ui-panelmenu-content {
    .ui-menuitem-link {
      color: $contentTextColor;

      &:hover {
        @include hover-element();
        border-color: transparent;
      }
    }
  }
}

.ui-datepicker {
  .ui-datepicker-header {
    a {
      color: $headerTextColor;

      &:hover {
        @include hover-element();
      }
    }
  }

  .ui-datepicker-calendar {
    td:not(.ui-state-disabled) {
      a:hover {
        @include hover-element();
      }
    }
  }
}

.ui-calendar {
  @include placeholder();

}

.fc {
  .fc-toolbar {
    .fc-prev-button {
      .ui-icon-circle-triangle-w {
        margin-top: .3em;
        @include icon_override("\f053");
      }
    }

    .fc-next-button {
      .ui-icon-circle-triangle-e {
        margin-top: .3em;
        @include icon_override("\f054");
      }
    }
  }
}

.ui-rating {
  a {
    color: $inputTextColor;
  }
}

/* Validation */
.ui-inputtext.ng-dirty.ng-invalid,
p-dropdown.ng-dirty.ng-invalid > .ui-dropdown,
p-autocomplete.ng-dirty.ng-invalid > .ui-autocomplete > .ui-inputtext,
p-calendar.ng-dirty.ng-invalid > .ui-inputtext,
p-chips.ng-dirty.ng-invalid > .ui-inputtext,
p-inputmask.ng-dirty.ng-invalid > .ui-inputtext,
p-checkbox.ng-dirty.ng-invalid .ui-chkbox-box,
p-radiobutton.ng-dirty.ng-invalid .ui-radiobutton-box,
p-inputswitch.ng-dirty.ng-invalid .ui-inputswitch,
p-listbox.ng-dirty.ng-invalid .ui-inputtext,
p-multiselect.ng-dirty.ng-invalid > .ui-multiselect,
p-spinner.ng-dirty.ng-invalid > .ui-inputtext,
p-selectbutton.ng-dirty.ng-invalid .ui-button,
p-togglebutton.ng-dirty.ng-invalid .ui-button {
  border-bottom-color: $invalidInputBorderColor;
}

/* Cornering */
.ui-corner-tl {
  -moz-border-radius-topleft: $borderRadius;
  -webkit-border-top-left-radius: $borderRadius;
  border-top-left-radius: $borderRadius;
}

.ui-corner-tr {
  -moz-border-radius-topright: $borderRadius;
  -webkit-border-top-right-radius: $borderRadius;
  border-top-right-radius: $borderRadius;
}

.ui-corner-bl {
  -moz-border-radius-bottomleft: $borderRadius;
  -webkit-border-bottom-left-radius: $borderRadius;
  border-bottom-left-radius: $borderRadius;
}

.ui-corner-br {
  -moz-border-radius-bottomright: $borderRadius;
  -webkit-border-bottom-right-radius: $borderRadius;
  border-bottom-right-radius: $borderRadius;
}

.ui-corner-top {
  -moz-border-radius-topleft: $borderRadius;
  -webkit-border-top-left-radius: $borderRadius;
  border-top-left-radius: $borderRadius;
  -moz-border-radius-topright: $borderRadius;
  -webkit-border-top-right-radius: $borderRadius;
  border-top-right-radius: $borderRadius;
}

.ui-corner-bottom {
  -moz-border-radius-bottomleft: $borderRadius;
  -webkit-border-bottom-left-radius: $borderRadius;
  border-bottom-left-radius: $borderRadius;
  -moz-border-radius-bottomright: $borderRadius;
  -webkit-border-bottom-right-radius: $borderRadius;
  border-bottom-right-radius: $borderRadius;
}

.ui-corner-right {
  -moz-border-radius-topright: $borderRadius;
  -webkit-border-top-right-radius: $borderRadius;
  border-top-right-radius: $borderRadius;
  -moz-border-radius-bottomright: $borderRadius;
  -webkit-border-bottom-right-radius: $borderRadius;
  border-bottom-right-radius: $borderRadius;
}

.ui-corner-left {
  -moz-border-radius-topleft: $borderRadius;
  -webkit-border-top-left-radius: $borderRadius;
  border-top-left-radius: $borderRadius;
  -moz-border-radius-bottomleft: $borderRadius;
  -webkit-border-bottom-left-radius: $borderRadius;
  border-bottom-left-radius: $borderRadius;
}

.ui-corner-all {
  -moz-border-radius: $borderRadius;
  -webkit-border-radius: $borderRadius;
  border-radius: $borderRadius;
}