// (C) Copyright 2011-2013 Hewlett-Packard Development Company, L.P.

input, textarea {
  @include box-sizing(border-box);
  margin-bottom: 10px;
  padding: 7px 18px 7px 10px; // leave room for validation icons
  background-color: $primary-background;
  border: 1px solid $primary-divider;
  font-size: 13px;
  line-height: 14px;
  color: $primary-color;
  outline: none;
  
  html.hp-high-contrast & {
    color: $projection-color;
  }
    
  &.hp-error, &.error {
    border-color: $error;
    background-image: $invalid-url;
    background-position: right 4px;
    background-repeat: no-repeat;
    padding-right: 18px;
  }
  
  /*&.hp-normal, &.valid {
    border-color: $normal;
    background-image: $valid-url;
    background-position: right 0px;
    background-repeat: no-repeat;
  }*/
  
  &:focus {
    border-color: $selected-background;
  }
}

textarea {
  background: #fff;
  
  &.hp-code {
    font-family: monospace;
  }
}

input, textarea {
  &::-webkit-input-placeholder {
    color: $tertiary-color;
  }
  &:-moz-placeholder {
    color: $tertiary-color;
  }
  &::-moz-placeholder {
    color: $tertiary-color;
  }
  &:-ms-input-placeholder {
    color: $tertiary-color;
  }
}

input[type="text"], input[type="date"] {
  height: 30px;
}

input[type="radio"], input[type="checkbox"] {
  border: none;
  padding: 0px;
  
  &:focus {
    outline: 1px solid $selected-background;
  }
}

input[type="number"] {
  text-align: right;
}

input[type="search"] {
  font-size: 16px;
}

input[type="button"], input[type="submit"], input[type="reset"],
button, select, a.hp-button, label.hp-button, a.ui-button {
  display: inline-block;
  @include box-sizing(border-box);
  margin: 0px;
  padding: 0px  13px;
  font-size: 18px;
  //line-height: 14px; // ignored by firefox! so use following line :(
  line-height: 26px;
  //line-height:normal !important;
  font-weight: normal;
  height: 30px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 2px solid #e6e6e6;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  color: #000;
  font-family: 'HPRegular', Arial, Helvetica, sans-serif;
  cursor: pointer;
  @include transition(background-color, 0.1s);
  
  &:hover {
    border-color: #999;
    text-decoration: none;
  }
  
  &:active {
    background-color: #e6e6e6;
    border-color: #999;
  }
  
  &.hp-disabled {
    background-color: $secondary-background;
    border-color: $secondary-background;
    color: $secondary-color;
    cursor:default;
  }
  // this is separate so IE8 doesn't skip the above
  &:disabled {
    background-color: $secondary-background;
    border-color: $secondary-background;
    color: $secondary-color;
  }
  // improved for IE8 do not merge with the the one above or IE8 will not use this style
  &[disabled] {
    background-color: $secondary-background;
    border-color: $secondary-background;
    color: $secondary-color;
  }      
  
  &.hp-primary, &.ui-datepicker-close {
    background-color: #0096d6;
    border-color: #0096d6;
    color: #fff;
    font-family: 'HPBold', Arial, Helvetica, sans-serif;
    
    &:hover {
      border-color: #666;
    }
    
    &:active {
      background-color: #0096d6;
      border-color: #333;
    }
    
    &.hp-disabled {
      background-color: $secondary-background;
      border-color: $secondary-background;
      color: $secondary-color;
    }
    // this is separate so IE8 doesn't skip the above
    &:disabled {
      background-color: $secondary-background;
      border-color: $secondary-background;
      color: $secondary-color;
    }
    // improved for IE8 do not merge with the the one above or IE8 will not use this style
    &[disabled] {
      background-color: $secondary-background;
      border-color: $secondary-background;
      color: $secondary-color;
    }    
  }
  
  &.hp-secondary {
    color: $text-link-color;
    border: 2px solid #BFE5F5; //#e6e6e6;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: #BFE5F5;
    
    &:hover {
      border-color: #666;
    }
    
    &:active {
      background-color: #e6e6e6;
      border-color: #333;
    }
    
    &.hp-disabled {
      background-color: $secondary-background;
      border-color: $secondary-background;
      color: $secondary-color;
    }
    // this is separate so IE8 doesn't skip the above
    &:disabled {
      background-color: $secondary-background;
      border-color: $secondary-background;
      color: $secondary-color;
    }
    // improved for IE8 do not merge with the the one above or IE8 will not use this style
    &[disabled] {
      background-color: $secondary-background;
      border-color: $secondary-background;
      color: $secondary-color;
    }        
  }
  
  &:focus {
    border-color: $selected-background;
  }
}

input::-moz-focus-inner,
button::-moz-focus-inner {
  padding:0; border:0;
}

input[disabled] {
  color: #999;
  background: #fcfcfc;
  border-color: #e2e2e2;
}

.ui-buttonset {
  margin-left: 0px;
  
  label.ui-button {
    margin: 2px 20px 0px 5px;
    border-radius: 0px;
    
    &.ui-state-active {
      color: #222;
    }
    
    &.ui-corner-right {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }
    
    &.ui-corner-left {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
  }
}