import { css } from "lit";

export const styles = css`
  :host {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 200px;
  }

  .code-editor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
  }

  .cm-editor {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: 1px solid var(--ct-theme-color-border, #e5e7eb);
    border-radius: var(--ct-theme-border-radius, 0.375rem);
    display: flex;
    flex-direction: column;
  }

  .cm-scroller {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }

  .cm-editor.cm-focused {
    outline: none;
  }

  /* Ensure the editor takes full height */
  .cm-content {
    min-height: 100%;
  }

  /* Match v2 component theming */
  .cm-editor {
    font-size: 0.875rem;
    font-family: var(--ct-theme-mono-font-family, monospace);
  }

  /* Focus state with v2 styling */
  .cm-editor.cm-focused {
    box-shadow: 0 0 0 3px var(--ring-alpha, hsla(212, 100%, 47%, 0.1));
  }

  /* Match v2 border radius */
  .cm-editor {
    border-radius: var(--ct-theme-border-radius, 0.375rem);
  }

  /* Backlink styling - make [[backlinks]] visually distinct */
  .cm-content .cm-line {
    position: relative;
  }

  /* Style for backlinks - we'll use a highlight mark */
  .cm-backlink {
    background-color: var(--ring-alpha, hsla(212, 100%, 47%, 0.1));
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
    cursor: pointer;
    transition: background-color var(--ct-theme-animation-duration, 150ms)
      var(--ct-transition-timing-ease);
    }

    .cm-backlink:hover {
      background-color: var(--ring-alpha, hsla(212, 100%, 47%, 0.2));
    }
  `;