@import 'element:ef-item';
@import 'element:ef-overlay';
@import 'element:ef-loader';
@import '../shared-styles/scrollbar';
@import '../responsive';
@import '../native-elements/kbd';

:host {
  min-height: 0;
  max-height: 350px;

  border: @control-border-width solid @control-border-color;
  margin-top: @control-border-width;
  background-color: @control-background-color;

  &[loading] {
    min-height: 50px;
    min-width: 150px;
  }

  [part='content'] {
    overflow: auto;
    .touch-action();
    .standard-scrollbars();
  }

  [part='more-results'] {
    border-top: @control-border-width solid @control-border-color;

    mark {
      background-color: inherit;
      font-weight: 500;
    }
  }

  [part='more-results-text'] {
    font-size: 0.76em;
  }

  [part='more-results-keys'],
  [part='more-results'] mark {
    color: if(lightness(@global-background-color) > 50%, @global-text-color, @global-text-mark-color);
  }

  [part='loader'] {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
  }

  [part='backdrop'] {
    background-color: @overlay-background-color;
    opacity: @overlay-opacity;
    width: 100%;
    height: 100%;
  }
}

.webkit-scrollbars();