/*-----------------------------------------------------------------------------
| Copyright (c) 2014-2016, Jupyter Development Team.
|
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

:root {
  --jp-private-completer-item-height: 24px;

  /* Shift the baseline of the type character to align with the match text */
  --jp-private-completer-type-offset: 2px;
}

.jp-Completer {
  box-shadow: var(--jp-elevation-z6);
  background: var(--jp-layout-color1);
  color: var(--jp-content-font-color1);
  border: var(--jp-border-width) solid var(--jp-border-color1);
  padding: 0;
  display: flex;
  flex-direction: row;

  /* Needed to avoid scrollbar issues when using cached width. */
  box-sizing: content-box;

  /* Position the completer relative to the text editor, align the '.' */
  margin: 4px 0 0 -30px;
  z-index: 10001;
}

.jp-Completer-docpanel {
  border-left: var(--jp-border-width) solid var(--jp-border-color1);
  width: 400px;
  overflow-y: scroll;
  overflow-x: auto;
  padding: 8px;
  max-height: calc((10 * var(--jp-private-completer-item-height)) - 16px);
}

.jp-Completer-docpanel pre {
  border: none;
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
}

.jp-Completer-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow-y: scroll;
  overflow-x: auto;
  max-height: calc((10 * var(--jp-private-completer-item-height)));
  min-height: calc(var(--jp-private-completer-item-height));
  width: 100%;
}

.jp-Completer-item {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  height: var(--jp-private-completer-item-height);
  min-width: 150px;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  position: relative;
}

.jp-Completer-item .jp-Completer-match {
  box-sizing: border-box;
  margin: 0;
  padding: 0 8px 0 6px;
  height: var(--jp-private-completer-item-height);
  font-family: var(--jp-code-font-family);
  font-size: var(--jp-code-font-size);
  line-height: var(--jp-private-completer-item-height);
}

.jp-Completer-deprecated .jp-Completer-match {
  text-decoration: line-through;
  color: var(--jp-content-font-color2);
}

.jp-Completer-item .jp-Completer-type {
  box-sizing: border-box;
  height: var(--jp-private-completer-item-height);
  background: transparent;
  width: var(--jp-private-completer-item-height);
}

.jp-Completer-item .jp-Completer-icon {
  /* Normal element size from LabIconStyle.ISheetOptions */
  height: 16px;
  width: 16px;
}

.jp-Completer-item .jp-Completer-monogram {
  text-align: center;
  color: white;
  width: var(--jp-private-completer-item-height);
  font-family: var(--jp-ui-font-family);
  font-size: var(--jp-ui-font-size1);
  line-height: calc(
    var(--jp-private-completer-item-height) -
      var(--jp-private-completer-type-offset)
  );
  padding-bottom: var(--jp-private-completer-type-offset);
}

.jp-Completer-item .jp-Completer-typeExtended {
  box-sizing: border-box;
  height: var(--jp-private-completer-item-height);
  text-align: right;
  background: transparent;
  color: var(--jp-ui-font-color2);
  font-family: var(--jp-code-font-family);
  font-size: var(--jp-code-font-size);
  line-height: var(--jp-private-completer-item-height);
  padding-right: 8px;
}

.jp-Completer-item:hover {
  background: var(--jp-layout-color2);
  opacity: 0.8;
}

.jp-Completer-item.jp-mod-active {
  background: var(--jp-brand-color1);
  color: white;
}

.jp-Completer-item .jp-Completer-match mark {
  font-weight: bold;
  background: inherit;
  color: inherit;
}

.jp-Completer-type[data-color-index='0'] {
  background: transparent;
}

.jp-Completer-type[data-color-index='1'] {
  background: #1f77b4;
}

.jp-Completer-type[data-color-index='2'] {
  background: #ff7f0e;
}

.jp-Completer-type[data-color-index='3'] {
  background: #2ca02c;
}

.jp-Completer-type[data-color-index='4'] {
  background: #d62728;
}

.jp-Completer-type[data-color-index='5'] {
  background: #9467bd;
}

.jp-Completer-type[data-color-index='6'] {
  background: #8c564b;
}

.jp-Completer-type[data-color-index='7'] {
  background: #e377c2;
}

.jp-Completer-type[data-color-index='8'] {
  background: #7f7f7f;
}

.jp-Completer-type[data-color-index='9'] {
  background: #bcbd22;
}

.jp-Completer-type[data-color-index='10'] {
  background: #17becf;
}

.jp-Completer-loading-bar-container {
  height: 2px;
  width: calc(100% - var(--jp-private-completer-item-height));
  left: var(--jp-private-completer-item-height);
  position: absolute;
  overflow: hidden;
  top: 0;
}

.jp-Completer-loading-bar {
  height: 100%;
  width: 50%;
  background-color: var(--jp-accent-color2);
  position: absolute;
  left: -50%;
  animation: jp-Completer-loading 2s ease-in 0.5s infinite;
}

@keyframes jp-Completer-loading {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(400%);
  }
}
