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

.hp-filterbar {
  width: $sidebar-width;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: (- $sidebar-width);
  overflow-y: auto;
  background-color: $secondary-background;
  border-right: 1px solid $primary-divider;
  @include box-sizing(border-box);
  @include transition(left, $normal-animation-duration);
  
  .hp-filterbar-open & {
    left: 0px;
  }
  
  > header {
    h1 {
      white-space: nowrap;
      margin-top: 25px;
      margin-left: 0px;
      margin-bottom: 22px;
      padding-right: 20px;
    }
  }
  
  @media print {
    display: none;
  }
}

div.hp-master-filter {
  position: absolute;
  @include box-sizing(border-box);
  top: $subnav-height + $body-gutter;
  left: (- $sidebar-width);
  bottom: $body-gutter;
  width: $sidebar-width;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
  @include transition(left, $normal-animation-duration);
  
  div.hp-filterbar-open & {
    left: $body-gutter;
  }
  
  > header {
    @include box-sizing(border-box);
    padding: 10px 15px;
    color: #333;
    font-family: 'HPRegular', Arial, Helvetica, sans-serif;
    margin-top: 10px;
    
    h1 {
      display: inline-block;
      font-size: 18px;
      line-height: 15px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 5px;
    }
    
    .hp-filter-reset {
      float: right;
      height: 25px;
      font-size: 14px;
    }
  }
  
  .hp-master-referrer {
    margin: 10px 10px 20px 10px;
    
    > label {
      margin-bottom: 10px;
      margin-left: 0px;
      display: block;
      color: $secondary-color;
      
      &:after {
        content: ':';
      }
    }
    
    > a {
      padding-left: 10px;
      display: block;
      width: auto;
      margin-right: 20px;
      word-break: break-all;
    }
    
    .hp-close {
      background-repeat: no-repeat;
      display: inline-block;
      margin-right: 0;
      padding: 0;
      position: absolute;
      right: 10px;
      top: 98px;
      width: 14px;
    }
  }
  
  .hp-filter {
    margin: 10px 10px 20px 10px;
    
    > label {
      margin: 10px 0px;
      
      &:after {
        content: ':';
      }
    }
  }
  
  > .hp-rich-filter {
    display: inline-block;
    white-space: nowrap;

    .hp-rack {
      display: block;
      margin: 10px 15px 15px 10px;
      cursor: pointer;
    }
    
    .hp-device {
      cursor: pointer;
    
      &:hover {
        background-color: #f3f3f3;
      }
      &.hp-selected {
        background-color: $selected-background;
      }
    }
  }
  
  @media print {
    display:none;
  }
}
