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

select {
  padding-right: 23px;
  background: url('../../img/hp-piano/down-arrow-select.png') no-repeat right center, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
}

option {
  padding: 7px 10px;
  border-top: 1px solid $primary-divider;
  -webkit-appearance: none;

  &:hover {
    cursor: pointer;
  }
}

// combined properties, individual ones below
.hp-select, .hp-drop-menu {
  position: relative;
  white-space: nowrap;
  display: inline-block;
  
  &:focus {
    outline: none;
  }
  
  div.hp-master-filter & {
    display: block;
  }
  
  .hp-options {
    display: none;
    min-width: 100%;
    overflow: hidden;
    margin-bottom: 0px;
    @include box-sizing(content-box);
    
    ol {
      min-width: 100%;
      overflow: hidden;
      margin-bottom: 0px;
    }
    
    li {
      display: block;
      color: $primary-color;
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
      padding-right: 10px;
      white-space: nowrap;
      cursor: pointer;
      
      html.hp-high-contrast & {
        color: $projection-color;
      }

      &:hover, &.hp-active {
        background-color: $menu-selection;
        text-decoration: none;
      }

      &.hp-selected {
        background-color: $selected-background;
        font-weight: bold;
      }
      
      &.hp-sub-options {
        height: auto;
        padding: 0px;
        
        &:hover {
          background: none;
        }
        
        .hp-prefix {
          visibility: hidden;
          padding-right: 5px;
          font-weight: normal;
        }
        
        ol li {
          &:first-child .hp-prefix {
            visibility: visible;
          }
          &:hover .hp-prefix {
            visibility: visible;
            color: $secondary-color;
          }
        }
      }
      
      a {
        display: block;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: -10px;
        margin-right: -10px;
        text-decoration: none;
        color: inherit;
      }
      
      .hp-status {
        float: left;
        margin-top: 10px;
      }
      
      .hp-error, .hp-help {
        display: inline-block;
        float: right;
      }
    }
    
    > a {
      display: block;
      color: $primary-color;
      height: 30px;
      padding-left: 10px;
      padding-right: 10px;
      border-top: 1px solid $primary-divider;
      white-space: nowrap;
      cursor: pointer;
      
      html.hp-high-contrast & {
        color: $projection-color;
      }
    }
  }
  
  &.hp-active {
    .hp-options {
      display: block;
      ///@include box-sizing(border-box);
      position: absolute;
      top: 0px;
      padding-top: 30px;
      background-color: $primary-background;
      @include drop-menu-border();
      z-index: $drop-menu-z-index;
    }
  }
  
  &.hp-select-multi {
    li.hp-selected:hover {
      background-color: $menu-selection;
    }
  }
  
  &.hp-pinned {
    background: transparent;
    border: none;
    @include remove-box-shadow();
    margin: 10px 0px 20px 10px;
    
    > label {
      position: relative;
      display: block;
      color: $secondary-color;
      margin: 5px 0px;
      padding: 0px;
      
      html.hp-high-contrast & {
        color: $projection-secondary-color;
      }
      
      &:after {
        content: ':';
      }
    }
    
    .hp-options {
      position: relative;
      @include remove-box-shadow();
      border: none;
      background-color: transparent;
      padding-top: 0px;
    }
  }
  
  ol {
    border-bottom: 1px solid $primary-divider;
    
    &:last-of-type {
      border: none;
      margin-bottom: 0px;
      padding-bottom: 0px;
    }
  }
}

.hp-select {
  
  > label {
    position: relative;
    display: none;
    padding: 0px 10px;
  }
  
  .hp-value {
    position: relative;
    display: block;
    padding-left: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    
    &:after {
      display: inline-block;
      content: '';
      width: 20px;
      height: 12px;
      background-image: $select-down-url;
      background-position: right -2px;
      background-repeat: no-repeat;
      
      @media print {
        display: none;
      }
    }
    
    &:hover {
      &:after {
        content: '';
        background-image: $select-down-over-url;
      
        .hp-global & {
          background-image: $select-down-global-url;
        }
      }
      .hp-global & {
        color: $global-primary-color;
      }
    }
    
    .hp-master-filter & {
      display: none;
    }
  }
  
  &:focus .hp-value {
    border: 1px solid $selected-background;
  }
  
  &.hp-disabled:hover .hp-value {
    &:after {
      content: '';
      background-image: $select-down-url;
    }
  }
  
  //&.hp-panel-selector .hp-value:after {
  //  content: '';
  //  background-position: right -3px;
  //}
  
  &.hp-sort {
    .hp-value:after {
      content: '';
      background-image: $sort-asc-url;
      background-position: right -2px;
    }
    
    .hp-value:hover:after {
      content: '';
      background-image: $sort-asc-over-url;
    }
    
    &.hp-sort-desc {
      .hp-value:after {
        content: '';
        background-image: $sort-desc-url;
        background-position: right -2px;
      }
      
      .hp-value:hover:after {
        content: '';
        background-image: $sort-desc-over-url;
      }
    }
  }
  
  &.hp-active {
    
    > label {
      position: absolute;
      left: 1px;
      top: 1px;
      display: block;
      color: $secondary-color;
      background-color: $primary-background;
      z-index: ($drop-menu-z-index + 1);
      @include box-sizing(border-box);
      
      html.hp-high-contrast & {
        color: $projection-secondary-color;
      }
    }
    
    .hp-value {
      overflow: hidden;
    }
  }
  
  &.hp-pinned {
    label {
      position: relative;
    }
  }
}

.hp-drop-menu {
  
  > label {
    position: relative;
    display: block;
    padding-left: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    
    &:after {
      display: inline-block;
      content: '';
      width: 20px;
      height: 12px;
      background-image: $select-down-url;
      background-position: right -1px;
      background-repeat: no-repeat;
    }
    
    &:hover:after {
      content: '';
      background-image: $select-down-over-url;
    }
    
    .hp-master-filter & {
      display: none;
    }
  }
  
  &:focus > label {
    border-color: $selected-background;
  }
  
  &.hp-active {
    > label {
      color: $secondary-color;
      border: 1px solid transparent;
      z-index: ($drop-menu-z-index + 1);
      
      html.hp-high-contrast & {
        color: $projection-secondary-color;
      }
      
      &:hover:after {
        content: '';
        background-image: $select-down-url;
      }
    }
  }
  
  &.hp-disabled {
    > label {
      color: $secondary-color;
      
      &:after {
        content: '';
        background-image: none;
      }
    }
    &:focus label {
      border-color: transparent;
    }
  }
}

.hp-select-form {
  display: inline-block;

  .hp-select {
    margin-bottom: 10px;
    padding: 0px;
  	position: relative;
  	font-size: 13px;
  	line-height: normal;
  	text-decoration: none;
  	border: 1px solid $primary-divider;
  	color: $primary-color;
  	outline: none;
  	//vertical-align: middle;
  	//display: inline-block;
  	cursor: default;
  	
  	&:focus {
      border-color: $selected-background;
      .hp-value {
        border: none;
      }
    }
    
    &.hp-disabled {
      color: $secondary-color;
      &:focus {
        border-color: $primary-divider;
      }
    }
    
    &.hp-active {
      .hp-options {
        left: -1px;
      }
    }
    
    .hp-value {
    	padding: 7px 0px 7px 10px;
    	border: none;
    	
    	&:after {
        content: '';
        padding-left: 10px;
      }
    }
  }
}

/* jquery.selectBox */

/* Dropdown control */
.selectBox-dropdown {
	margin-bottom: 10px;
	padding: 7px 37px 7px 13px;
	position: relative;
	font-size: 13px;
	line-height: normal;
	text-decoration: none;
	border: 1px solid $primary-divider;
	color: $primary-color;
	outline: none;
	vertical-align: middle;
	display: inline-block;
	cursor: default;
	
	html.hp-high-contrast & {
    color: $projection-color;
  }
  
  .hp-global & {
    background-color: $primary-background;
    border-color: $primary-background;
    color: #323232;
    font-weight: bold;

    &:hover {
      color: #000;
    }

    &:active {
      background-color: #ccc;
      border-color: #ccc;
      color: #000;
    }
    
    &:disabled, &.hp-disabled {
      background-color: #666;
      border-color: #666;
      color: #323232;
    }
  }
	
	&:hover {
    text-decoration: none;
    
    .selectBox-arrow {
    	background-image: $select-down-over-url;
    }
  }
  
  &:focus {
    border-color: $selected-background;
  }

  /*&.selectBox-menuShowing {
  	-moz-border-radius-bottomleft: 0;
  	-moz-border-radius-bottomright: 0;
  	-webkit-border-bottom-left-radius: 0;
  	-webkit-border-bottom-right-radius: 0;
  	border-bottom-left-radius: 0;
  	border-bottom-right-radius: 0;
  }*/

  .selectBox-label {
  	width: 100%;
  	font-weight: normal;
  	display: inline-block;
  	white-space: nowrap;
  	overflow: hidden;
  	vertical-align: top;
  }

  .selectBox-arrow {
  	position: absolute;
  	top: 0;
  	right: 0;
  	width: 24px;
  	height: 100%;
  	background-image: $select-down-url;
    background-position: right 4px;
    background-repeat: no-repeat;
  }
}

/* Dropdown menu */
.selectBox-dropdown-menu {
	position: absolute;
	// this has to be big, since it isn't inside the delated control's container
	z-index: ($dialog-z-index + $drop-menu-z-index);
	left: 0px;
	max-height: 200px;
	background: $primary-background;
	border: 1px solid $dropdown-outline;
  @include box-shadow(3px, 3px, 5px, 0px, $dropdown-shadow);
	overflow: auto;
	
	&.hp-global {
	  @include box-shadow(2px, 2px, 2px, 0px, $global-dropdown-shadow);
	}
}

/* Inline control */
.selectBox-inline {
	width: 250px;
	outline: none;
	background: $primary-background;
	display: inline-block;
	overflow: auto;
}

.selectBox-inline:focus {
}


/* Options */
.selectBox-options,
.selectBox-options LI,
.selectBox-options LI A {
	list-style: none;
	display: block;
	cursor: default;
	padding: 0;
	margin: 0;
}

.selectBox-options LI A {
	padding: 7px 10px;
	white-space: nowrap;
	overflow: hidden;
	background: 6px center no-repeat;
	color: $primary-color;
	
	html.hp-high-contrast & {
    color: $projection-color;
  }
	
	&:hover {
    text-decoration: none;
  }
}

.selectBox-options LI.selectBox-hover A {
	background-color: $menu-selection;
	text-decoration: none;
}

.selectBox-options LI.selectBox-disabled A {
	color: #888;
	background-color: transparent;
}

.selectBox-options LI.selectBox-selected A {
  font-weight: bold;
  background-color: $selected-background;
}

.selectBox-options .selectBox-optgroup {
	color: #666;
	background: #EEE;
	font-weight: bold;
	padding: 0 .3em;
	white-space: nowrap;
}

/* Disabled state */
.selectBox.selectBox-disabled {
	color: #888 !important;
}

.selectBox-dropdown.selectBox-disabled .selectBox-arrow {
	opacity: .5;
	filter: alpha(opacity=50);
	border-color: #666;
}

.selectBox-inline.selectBox-disabled {
	color: #888 !important;
}

.selectBox-inline.selectBox-disabled .selectBox-options A {
	background-color: transparent !important;
}