// (C) Copyright 2020 Hewlett-Packard Enterprise Company, L.P.

.hp-search-combo {
  position: relative;
  display: inline-block;
  @include box-sizing(border-box);
  @include transition(top, 0.2s);
  
  &.hp-active {
    .hp-search-combo-menu {
      display: block;

    }
  }
  
  .hp-search-combo-input {
    padding-right: 45px;
    margin: 0px;
    
    &.hp-error {
      background-image: none;
    }
    
    &::-ms-clear {
      display: none;
    }
  }
  
  .hp-close {
    position: absolute;
    top: 9px;
    right: 25px;
    cursor: pointer;
    z-index: 1;
  }
  
  .hp-search-combo-control {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 15px;
    height: 16px;
    background-image: url($img-file);
    background-position: -120px -80px;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 10;
    
    &:hover {
      background-position: -120px -60px;
    }
    
  }
  
  &.hp-disabled {
    .hp-search-combo-control {
      cursor: auto;
    
      &:hover {
        background-position: -120px -80px;
      }
    }
    .hp-close {
      background-position: $close-x $inactive-y;
      cursor: auto;
    }
  }
  
  .hp-search-combo-menu {
    position: absolute;
    background-color: $primary-background;
    @include drop-menu-border();
    @include box-sizing(border-box);
    z-index: $drop-menu-z-index;
    display: none;
    
    ol {
      margin-bottom: 0px;
      
      &.hp-options {
        position: relative;
        overflow-y: auto;
        max-height: 200px;
      }
      
      li {
        margin-bottom: 0px;
        padding: 7px 10px;
        cursor: pointer;
        overflow: auto;
      
        &:hover, &.hp-selected {
          background-color: $menu-selection;
          
          &.hp-more {
            background-color: inherit;
          }
        }
      
        .hp-error, .hp-help {
          display: inline-block;
          float: right;
        }
        .hp-name {
          padding-right: 5px;
          display: inline-block;
          word-break: break-all;
        }
        
        .hp-spinner-small {
          display: block;
          margin: 0px auto;
        }
      }
      
      span.hp-help, &:hover .hp-help {
        border-left: 0px;
          &:before {
            border-width: 0px;
          }
          &:after {
            border: none;
          }
      }
        
    }
    
    .hp-message, .hp-footer { // hp-message is deprecated
      @include box-sizing(border-box);
      background-color: $secondary-background;
      color: $secondary-color;
      padding: 7px 10px;
      
      html.hp-high-contrast & {
        color: $projection-secondary-color;
      }
    }
    
    .hp-header {
      @include box-sizing(border-box);
      background-color: $secondary-background;
      color: $secondary-color;
      padding: 7px 10px;
      text-align: right;
      
      html.hp-high-contrast & {
        color: $projection-secondary-color;
      }
    }
  }
}
