/**
 * The max-height of the panel, currently matching oui-select value.
 */
$oui-autocomplete-panel-max-height: 316px !default;
$oui-autocomplete-panel-border-radius: 4px !default;

.oui-autocomplete-panel {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  min-width: 112px;
  max-width: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: $oui-autocomplete-panel-max-height;
  position: relative;
  width: 100%;
  box-shadow: 0px 1px 3px 0px #4a4a4a;
  background: #fff;
  color: rgba(0, 0, 0, 0.87);
  &.oui-autocomplete-visible {
    visibility: visible;
  }

  &.oui-autocomplete-hidden {
    visibility: hidden;
  }

  .oui-autocomplete-panel-above & {
    border-radius: 0;
  }

  // We need to offset horizontal dividers by their height, because
  // they throw off the keyboard navigation inside the panel.
  .oui-divider-horizontal {
    margin-top: -1px;
  }

  .oui-option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 48px;
    height: 38px;
    padding: 0 12px;
    text-align: left;
    text-decoration: none;
    max-width: 100%;
    position: relative;
    cursor: pointer;
    outline: 0;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
    font-size: 14px;
    color: #333;
    .oui-option-text {
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}

.oui-option {
  color: rgba(0, 0, 0, 0.87);
  &:focus:not(.oui-option-disabled),
  &:hover:not(.oui-option-disabled),
  &.oui-selected:not(.oui-option-multiple):not(.oui-option-disabled) {
    background: #eee;
  }
  &.oui-active {
    background: #eee;
    color: #333;
  }
  &.oui-option-disabled {
    color: rgba(0, 0, 0, 0.38);
  }
}

.oui-autocomplete-panel {
  background: #fff;
  color: rgba(0, 0, 0, 0.87);
  border: 1px solid #c8c8c8;
  border-top: 0;
  padding: 10px 0;
  .oui-option.oui-selected:not(.oui-active):not(:hover) {
    background: #fff;
    &:not(.oui-option-disabled) {
      color: rgba(0, 0, 0, 0.87);
    }
  }
  .oui-optgroup-label {
    padding: 0 12px;
    color: #333;
    font-weight: bold;
    line-height: 20px;
    margin-bottom: 7px;
    display: inline-block;
    margin-top: 7px;
    font-size: 14px;
  }
  &.autocomplete-group {
    padding: 5px 0;
  }
}
.oui-autocomplete-panel-above {
  .oui-autocomplete-panel {
    border-top: 1px solid #c8c8c8;
  }
}