/*-----------------------------------------------------------------------------
| Copyright (c) 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;
  flex-shrink: 0;
  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: hidden;
  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);
  white-space: nowrap;
}

.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: var(--jp-completer-type-background0, transparent);
}

.jp-Completer-type[data-color-index='1'] {
  background: var(--jp-completer-type-background1, #1f77b4);
}

.jp-Completer-type[data-color-index='2'] {
  background: var(--jp-completer-type-background2, #ff7f0e);
}

.jp-Completer-type[data-color-index='3'] {
  background: var(--jp-completer-type-background3, #2ca02c);
}

.jp-Completer-type[data-color-index='4'] {
  background: var(--jp-completer-type-background4, #d62728);
}

.jp-Completer-type[data-color-index='5'] {
  background: var(--jp-completer-type-background5, #9467bd);
}

.jp-Completer-type[data-color-index='6'] {
  background: var(--jp-completer-type-background6, #8c564b);
}

.jp-Completer-type[data-color-index='7'] {
  background: var(--jp-completer-type-background7, #e377c2);
}

.jp-Completer-type[data-color-index='8'] {
  background: var(--jp-completer-type-background8, #7f7f7f);
}

.jp-Completer-type[data-color-index='9'] {
  background: var(--jp-completer-type-background9, #bcbd22);
}

.jp-Completer-type[data-color-index='10'] {
  background: var(--jp-completer-type-background10, #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%);
  }
}

.jp-GhostText {
  color: var(--jp-ui-font-color3);
  white-space: pre-wrap;
}

.jp-GhostText-lineSpacer,
.jp-GhostText-letterSpacer {
  opacity: 0;
  display: inline-block;
  vertical-align: top;
  /* stylelint-disable-next-line csstree/validator */
  text-wrap: none;
}

.jp-GhostText-letterSpacer {
  max-width: 0;
}

.jp-GhostText-lineSpacer {
  /* duration and delay are overwritten by inline styles */
  animation: jp-GhostText-hide 300ms 700ms ease-out forwards;
}

@keyframes jp-GhostText-hide {
  0% {
    font-size: unset;
  }

  100% {
    font-size: 0;
  }
}

.jp-GhostText-expandHidden {
  border: 1px solid var(--jp-border-color0);
  border-radius: var(--jp-border-radius);
  background: var(--jp-layout-color0);
  color: var(--jp-content-font-color3);
  padding: 0 4px;
  margin: 0 4px;
  cursor: default;
}

.jp-GhostText-hiddenWrapper:hover > .jp-GhostText-hiddenLines {
  display: inline;
}

.jp-GhostText-hiddenLines {
  display: none;
}

.jp-GhostText[data-animation='uncover'] {
  position: relative;
}

.jp-GhostText-streamedToken {
  white-space: pre;
}

.jp-GhostText[data-animation='uncover'] > .jp-GhostText-streamedToken {
  animation: jp-GhostText-typing 2s forwards;
  display: inline-flex;
  overflow: hidden;
}

@keyframes jp-GhostText-typing {
  from {
    max-width: 0;
  }

  to {
    max-width: 100%;
  }
}

.jp-GhostText-streamingIndicator::after {
  animation: jp-GhostText-streaming 2s infinite;
  animation-delay: 400ms;
  content: ' ';
  background: var(--jp-layout-color4);
  opacity: 0.2;
}

@keyframes jp-GhostText-streaming {
  0% {
    opacity: 0.2;
  }

  20% {
    opacity: 0.4;
  }

  40% {
    opacity: 0.2;
  }
}

.jp-GhostText-errorIndicator::after {
  animation: jp-GhostText-error 500ms 1;
  animation-delay: 3500ms;
  color: var(--jp-error-color1);
  font-size: 150%;
  line-height: 10px;
  margin-left: 2px;
  padding: 0 4px;
  content: '⚠';
  cursor: help;
  position: relative;
  top: 2px;
}

@keyframes jp-GhostText-error {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.jp-InlineCompleter {
  box-shadow: var(--jp-elevation-z2);
  background: var(--jp-layout-color1);
  color: var(--jp-content-font-color1);
  border: var(--jp-border-width) solid var(--jp-border-color1);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 8px;
}

.jp-InlineCompleter-progressBar {
  height: 2px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--jp-accent-color2);
}

.jp-InlineCompleter[data-display='onHover'] {
  opacity: 0;
  transition:
    visibility 0s linear 0.1s,
    opacity 0.1s linear;
  visibility: hidden;
}

.jp-InlineCompleter[data-display='onHover']:hover,
.jp-InlineCompleter-hover[data-display='onHover'] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.jp-InlineCompleter[data-display='never'] {
  display: none;
}

.jp-InlineCompleter > .jp-Toolbar {
  box-shadow: none;
  border-bottom: none;
  background: none;
}

.jp-InlineCompleter[data-show-shortcuts='false']
  .jp-ToolbarButtonComponent-label {
  display: none;
}

.jp-InlineCompleter [data-command='inline-completer:next'] > svg,
.jp-InlineCompleter [data-command='inline-completer:previous'] > svg {
  scale: 1.5;
}
