/* Popup styles */
.CodeMirror-info {
  background-color: hsl(var(--color-base));
  border: var(--popover-border);
  border-radius: var(--border-radius-8);
  box-shadow: var(--popover-box-shadow);
  color: hsla(var(--color-neutral), 1);
  max-height: 300px;
  max-width: 400px;
  opacity: 0;
  overflow: auto;
  padding: var(--px-12);
  position: fixed;
  transition: opacity 0.15s;
  z-index: 10;

  /* Link styles */
  & a {
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: underline dotted;
    }
  }

  /* Align elements in header */
  & .CodeMirror-info-header {
    display: flex;
    align-items: baseline;
  }

  /* Main elements */
  & .CodeMirror-info-header {
    & > .type-name,
    & > .field-name,
    & > .arg-name,
    & > .directive-name,
    & > .enum-value {
      font-size: var(--font-size-h4);
      font-weight: var(--font-weight-medium);
    }
  }

  /* Type names */
  & .type-name-pill {
    border: 1px solid hsla(var(--color-neutral), var(--alpha-tertiary));
    border-radius: var(--border-radius-4);
    color: hsla(var(--color-neutral), var(--alpha-secondary));
    margin-left: var(--px-6);
    padding: var(--px-4);
  }

  /* Descriptions */
  & .info-description {
    color: hsla(var(--color-neutral), var(--alpha-secondary));
    margin-top: var(--px-12);
    overflow: hidden;
  }
}