/* In Ariba Theme, all the state colors are targeted for Form Fields - Input, Checkbox, RadioButton, Dropdowns. */
/* There are other controls, button and toggle, that doesn't fit into the theme state variable colors, these we created other variables.  */
@import "variables";
/* Base theme */
@import '../_theme';

/* Start Buttons */

/* Default Button */
.ui-button {
  border-color: $primaryBorderColor;
  background-color: $primaryBgColor;
  color: $primaryTextColor;
  padding: 5px;
  height: 36px;

  &:focus, &:enabled:hover {
    outline: 0 none;
    background-color: $primaryStateHoverBgColor;
    color: $primaryTextColor;
  }

  &:enabled:active {
    background: $primaryStateHoverBgColor;
    color: $primaryTextColor;
  }
}

/* Primary Button.  !important used to preserve style */
.ui-button-primary {
  border-color: $primaryBorderColor !important;
  background-color: $primaryBgColor !important;
  color: $primaryTextColor !important;
  padding: 5px;
  height: 36px;

  &:focus, &:enabled:hover {
    outline: 0 none;
    background-color: $primaryStateHoverBgColor !important;
    color: $primaryTextColor !important;
  }

  &:enabled:active {
    background: $primaryStateHoverBgColor !important;
    color: $primaryTextColor !important;
  }
}

/* Secondary Button */
.ui-button.ui-button-secondary.ui-state-default {
  background-color: $secondaryBgColor;
  border-color: $secondaryBorderColor;
  color: $secondaryTextColor;
}

.ui-button.ui-button-secondary:enabled:hover,
.ui-button.ui-button-secondary:focus {
  background-color: $secondaryStateHoverBgColor;
  color: $secondaryStateHoverTextColor;
}

.ui-button.ui-button-secondary:active {
  background-color: $secondaryStateHoverBgColor;
  color: $secondaryStateHoverTextColor;
}

.ui-button:disabled {
  color: $disabledTextColor !important;
  background-color: $disabledBgColor !important;
  border-color: $disabledBorderColor !important;
}

.ui-button-success {
  border-color: $successBorderColor !important;
  background-color: $successBgColor !important;
  color: $successTextColor !important;
  padding: 5px;
  height: 36px;

  &:focus, &:enabled:hover {
    outline: 0 none;
    background-color: $successStateHoverBgColor !important;
    color: $successTextColor !important;
  }

  &:enabled:active {
    background: $successStateHoverBgColor !important;
    color: $successTextColor !important;
  }
}


/* End Button */

/* autocomplete */
.ui-autocomplete-input-token {

  input {
    padding-left: 0px;
    @include placeholder();
    color: $inputTextColor;
  }
}

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

.ui-inputtext {
  line-height: 1.45em;
  padding: .5em;
}

// dropdown
.ui-dropdown-trigger.ui-corner-right {
  border: none;
}

.ui-dropdown .ui-dropdown-label {
  padding-left: 14px;

}