.code {
  > small {
    display: block;
    text-align: right;
    margin-top: 0.3em;
    font: var(--font-small);

    a {
      color: var(--color-dim);
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
  > .cm-editor {
    color: var(--color-input-text);
    background: var(--color-input-bg);
    border: solid 1px var(--color-line);
    border-radius: var(--border-radius);
    overflow: hidden;

    &.cm-focused {
      outline: 0;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px
        color-mix(in hsl, var(--color-primary), transparent 75%);
    }
    .cm-scroller {
      line-height: 1.6;
    }
  }

  /* !important to Override codemirror styles */
  .cm-content {
    padding: 0.5rem !important;
    caret-color: var(--color-input-text) !important;
    min-height: 70px !important;
  }

  .cm-tooltip {
    border: none;
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
  }

  .cm-tooltip-autocomplete {
    & > ul > li[aria-selected] {
      background-color: var(--color-primary) !important;
      color: var(--color-white) !important;
    }
  }
}