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

/* Fonts */

// TODO: add a CSS class to disable HP-Simplified for languages that don't have a mapping
@font-face {
  font-family: 'HPBold';
  src: url($font-dir + "/HPSimplifiedW04-Bold.eot");
  src: url($font-dir + "/HPSimplifiedW04-Bold.eot?#iefix") format("embedded-opentype"), url($font-dir + "/HPSimplifiedW04-Bold.ttf") format("truetype");
  //src: url("fonts/HPSimplifiedW04-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/HPSimplifiedW04-Bold.woff") format("woff"), url("fonts/HPSimplifiedW04-Bold.ttf") format("truetype"), url("fonts/HPSimplifiedW04-Bold.svg#HPBold") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HPRegular';
  src: url($font-dir + "/HPSimplifiedW04-Regular.eot");
  src: url($font-dir + "/HPSimplifiedW04-Regular.eot?#iefix") format("embedded-opentype"), url($font-dir + "/HPSimplifiedW04-Regular.ttf") format("truetype");
  //src: url("fonts/HPSimplifiedW04-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/HPSimplifiedW04-Regular.woff") format("woff"), url("fonts/HPSimplifiedW04-Regular.ttf") format("truetype"), url("fonts/HPSimplifiedW04-Regular.svg#HPRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HPLight';
  src: url($font-dir + "/HPSimplifiedW04-Light.eot");
  src: url($font-dir + "/HPSimplifiedW04-Light.eot?#iefix") format("embedded-opentype"), url($font-dir + "/HPSimplifiedW04-Light.ttf") format("truetype");
  //src: url("fonts/HPSimplifiedW04-Light.eot?#iefix") format("embedded-opentype"), url("fonts/HPSimplifiedW04-Light.woff") format("woff"), url("fonts/HPSimplifiedW04-Light.ttf") format("truetype"), url("fonts/HPSimplifiedW04-Light.svg#HPLight") format("svg");
  font-weight: normal;
  font-style: normal;
}

input,
textarea,
select,
button {
  font-family: Arial, Helvetica, sans-serif;
  /* because Webkit hijacks this */
}
a {
  color: $text-link-color; ///inherit;
  text-decoration: none;
  cursor: pointer;
  
  &:hover {
    text-decoration: underline;
  }
  
  &.hp-disabled {
    color: inherit;
    pointer-events: none;
    cursor: default;
    
    &:hover {
      text-decoration: none;
    }
  }
}

h1 {
  font-size: 20px;
  font-weight: bold;
  line-height: 30px;
}

h2 {
  font-size: 18px;
  font-weight: normal;
  margin: 20px 0px 10px 0px;
}

h3 {
  font-size: 16px;
  font-weight: normal;
  margin: 10px 0px;
}

label, div, p, span, td, h1, h2, h3, li, th {
  
  &.hp-error {
    color: $error;
  }

  &.hp-unset, &.hp-pending, &.hp-missing {
    color: $secondary-color;
    font-style: italic;
    
    html.hp-high-contrast & {
      color: $projection-secondary-color;
    }
  }
  
  &.hp-help, &.hp-optional, &.hp-important {
    color: $secondary-color;
    
    html.hp-high-contrast & {
      color: $projection-secondary-color;
    }
  }
  
  &.hp-primary {
    color: #000;
    font-weight: bold;
  }
  
  &.hp-secondary {
    color: $secondary-color;
    
    html.hp-high-contrast & {
      color: $projection-secondary-color;
    }
  }
  
  &.hp-numeric {
    text-align: right;
  }
  
  &.hp-single {
    text-align: center;
  }
  
  &.hp-dynamic {
    opacity: 1;
    @include transition-full(opacity, 0.2s, ease, 0s);
    -webkit-backface-visibility: hidden;
    
    .hp-show-changing & {
      opacity: $changing-opacity;
    }
  }
  
  &.hp-unavailable {
    position: relative;
    min-width: 1em;
    
    &:before {
      position: absolute;
      content: '—';
    }
  }
}

label, span {
  &.hp-secondary {
    margin-left: 5px;
  }
}

.hp-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-text-tip {
  position: absolute;
  background-color: $primary-background;
  color: $primary-color;
  padding: 5px;
  margin-left: -6px;
  margin-top: -6px;
  border: 1px solid $dropdown-outline;
  @include box-shadow(3px, 3px, 5px, 0px, $dropdown-shadow);
  z-index: $tooltip-z-index;
  
  &.hp-global {
    background-color: $global-hover-background;
    color: $global-primary-color;
    border: 1px solid #888;
    @include box-shadow(1px, 1px, 4px, 2px, $global-dropdown-shadow);
  }
}