.cm-wrapper {
  @apply h-full overflow-hidden;

  .cm-editor {
    @apply w-full block text-base;

    .cm-cursor {
      @apply border-fg !important;
      /* Widen the cursor */
      @apply border-l-[2px];
    }

    &.cm-focused {
      outline: none !important;
    }

    .cm-content {
      @apply py-0;
    }

    .cm-line {
      @apply text-fg pl-1 pr-1.5;
    }

    .cm-placeholder {
      @apply text-placeholder;
    }

    .cm-scroller {
      /* Inherit line-height from outside */
      line-height: inherit;

      * {
        @apply cursor-text;
        @apply caret-transparent !important;
      }
    }

    /* Don't show selection on blurred input */

    .cm-selectionBackground {
      @apply bg-transparent;
    }

    &.cm-focused .cm-selectionBackground {
      @apply bg-selection;
    }

    /* Style gutters */

    .cm-gutters {
      @apply border-0 text-fg-subtler bg-transparent;

      .cm-gutterElement {
        @apply cursor-default;
      }
    }

    .placeholder {
      /* Colors */
      @apply bg-background text-fg-subtle border-background-highlight-secondary;
      @apply hover:border-background-highlight hover:text-fg hover:bg-background-highlight-secondary;

      @apply border px-1 mx-[0.5px] rounded cursor-default dark:shadow;

      -webkit-text-security: none;
    }

    .hyperlink-widget {
      & > * {
        @apply underline;
      }

      -webkit-text-security: none;
    }
  }

  &.cm-singleline {
    .cm-editor {
      @apply w-full h-auto;
    }

    .cm-scroller {
      @apply font-mono text-xs overflow-hidden;
    }

    .cm-line {
      @apply px-2 overflow-hidden;
    }
  }

  &.cm-multiline {
    &.cm-full-height {
      @apply relative;

      .cm-editor {
        @apply inset-0 absolute;
        position: absolute !important;
      }
    }

    .cm-editor {
      @apply h-full;
    }

    .cm-scroller {
      @apply font-mono text-editor;
      /*
                               * Round corners or they'll stick out of the editor bounds of editor is rounded.
                               * Could potentially be pushed up from the editor like we do with bg color but this
                               * is probably fine.
                               */
      @apply rounded-lg;
    }
  }
}

/* Obscure text for password fields */
.cm-wrapper.cm-obscure-text .cm-line {
  -webkit-text-security: disc;
}

.cm-editor .cm-gutterElement {
  @apply flex items-center;
  transition: color var(--transition-duration);
}

.cm-editor .fold-gutter-icon {
  @apply pt-[0.25em] pl-[0.4em] px-[0.4em] h-4 rounded;
  @apply cursor-default !important;
}

.cm-editor .fold-gutter-icon::after {
  @apply block w-1.5 h-1.5 border-transparent -rotate-45
  border-l border-b border-l-[currentColor] border-b-[currentColor] content-[''];
}

.cm-editor .fold-gutter-icon[data-open] {
  @apply pt-[0.38em] pl-[0.3em];
}

.cm-editor .fold-gutter-icon[data-open]::after {
  @apply rotate-[-135deg];
}

.cm-editor .fold-gutter-icon:hover {
  @apply text-fg bg-background-highlight;
}

.cm-editor .cm-foldPlaceholder {
  @apply px-2 border border-fg-subtler bg-background-highlight;
  @apply hover:text-fg hover:border-fg-subtle text-fg;
  @apply cursor-default !important;
}

.cm-editor .cm-activeLineGutter {
  @apply bg-transparent;
}

.cm-wrapper:not(.cm-readonly) .cm-editor {
  &.cm-focused .cm-activeLineGutter {
    @apply text-fg-subtle;
  }
}

.cm-wrapper.cm-readonly .cm-editor {
  .cm-cursor {
    @apply border-fg-danger !important;
  }
}

.cm-singleline .cm-editor {
  .cm-content {
    @apply h-full flex items-center;

    /* Break characters on line wrapping mode, useful for URL field.
                 * We can make this dynamic if we need it to be configurable later
                 */

    &.cm-lineWrapping {
      @apply break-all;
    }
  }
}

.cm-tooltip.cm-tooltip-hover {
  @apply shadow-lg bg-background rounded text-fg-subtle border border-fg-subtler z-50 pointer-events-auto text-sm;
  @apply px-2 py-1;

  a {
    @apply text-fg;

    &:hover {
      @apply underline;
    }

    &::after {
      @apply text-fg bg-fg-secondary h-3 w-3 ml-1;
      content: '';
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='black' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
      -webkit-mask-size: contain;
      display: inline-block;
    }
  }
}

/* NOTE: Extra selector required to override default styles */
.cm-tooltip.cm-tooltip-autocomplete,
.cm-tooltip.cm-completionInfo {
  @apply shadow-lg bg-background rounded text-fg-subtle border border-background-highlight z-50 pointer-events-auto text-sm;

  .cm-completionIcon {
    @apply italic font-mono;

    &::after {
      content: 'x' !important; /* Default (eg. for GraphQL) */
    }

    &.cm-completionIcon-class::after {
      content: 'o' !important;
    }

    &.cm-completionIcon-constant::after {
      content: 'c' !important;
    }

    &.cm-completionIcon-enum::after {
      content: 'e' !important;
    }

    &.cm-completionIcon-function::after {
      content: 'z' !important;
    }

    &.cm-completionIcon-interface::after {
      content: 'i' !important;
    }

    &.cm-completionIcon-keyword::after {
      content: 'k' !important;
    }

    &.cm-completionIcon-method::after {
      content: 'm' !important;
    }

    &.cm-completionIcon-namespace::after {
      content: 'n' !important;
    }

    &.cm-completionIcon-property::after {
      content: 'a' !important;
    }

    &.cm-completionIcon-text::after {
      content: 'x' !important;
    }

    &.cm-completionIcon-type::after {
      content: 't' !important;
    }

    &.cm-completionIcon-variable::after {
      content: 'x' !important;
    }
  }

  &.cm-completionInfo-right {
    @apply ml-1 -mt-0.5 font-sans;
  }

  &.cm-completionInfo-right-narrow {
    @apply ml-1;
  }

  * {
    @apply transition-none;
  }

  &.cm-tooltip-autocomplete {
    @apply font-mono;

    & > ul {
      @apply p-1 max-h-[40vh];
    }

    & > ul > li {
      @apply cursor-default px-2 py-1.5 rounded-sm text-fg-subtle flex items-center;
    }

    & > ul > li[aria-selected] {
      @apply bg-background-highlight-secondary text-fg;
    }

    .cm-completionIcon {
      @apply text-sm flex items-center pb-0.5 flex-shrink-0;
    }

    .cm-completionLabel {
      @apply text-fg-subtle;
    }

    .cm-completionDetail {
      @apply ml-auto pl-6;
    }
  }
}

.cm-editor .cm-panels {
  @apply bg-background-highlight-secondary backdrop-blur-sm p-1 mb-1 text-fg z-20 rounded-md;

  input,
  button {
    @apply rounded-sm outline-none;
  }

  button {
    @apply border-fg-subtler bg-background-highlight text-fg hover:border-fg-info;
    @apply appearance-none bg-none cursor-default;
  }

  button[name='close'] {
    @apply text-fg-subtle hocus:text-fg px-2 -mr-1.5 !important;
  }

  input {
    @apply bg-background border-background-highlight focus:border-border-focus;
    @apply border outline-none cursor-text;
  }

  label {
    @apply focus-within:text-fg;
  }

  /* Hide the "All" button */

  button[name='select'] {
    @apply hidden;
  }
}
