import { css } from 'lit';
export default css `
  :host {
    display: flex;
    flex-direction: column;
    outline: none;
    min-width: 200px;
    background-color: transparent;
    color: var(--md-sys-color-on-surface);

    font-family: var(--md-sys-typescale-body-large-font);
    font-size: var(--md-sys-typescale-body-large-size);
    letter-spacing: var(--md-sys-typescale-body-large-tracking);
    line-height: var(--md-sys-typescale-body-large-height);
  }

  .surface {
    display: flex;
    flex-direction: column;
  }

  .content {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .label {
    font-family: var(--md-sys-typescale-label-medium-font);
    font-weight: var(--md-sys-typescale-label-medium-weight);
    font-size: var(--md-sys-typescale-label-medium-size);
    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
    line-height: var(--md-sys-typescale-label-medium-height);
    color: var(--md-sys-color-on-surface-variant);

    padding: 8px 16px 4px 16px;
    margin: 0;
  }

  .has-focus .label {
    color: var(--md-sys-color-primary);
  }

  .editor-container {
    position: relative;
    flex: 1;

    border-radius: var(--md-sys-shape-corner-extra-small);
    border: 1px solid var(--md-sys-color-outline);
    outline: 0px solid var(--md-sys-color-primary);
    outline-offset: -1px;
    transition:
      border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
      outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1),
      outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .editor-container:focus-within {
    border-color: var(--md-sys-color-primary);
    outline-width: 2px;
    outline-offset: -2px;
  }

  .supporting-text {
    margin-top: 4px;
    padding: 0 16px;
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--md-sys-typescale-body-small-font);
    font-weight: var(--md-sys-typescale-body-small-weight);
    font-size: var(--md-sys-typescale-body-small-size);
    letter-spacing: var(--md-sys-typescale-body-small-tracking);
    line-height: var(--md-sys-typescale-body-small-height);
  }

  :host([disabled]) {
    pointer-events: none;
  }

  :host([disabled]) .editor-container {
    border-color: var(--md-sys-color-on-surface);
  }

  :host([disabled]) .label,
  :host([disabled]) .editor-container {
    color: var(--md-sys-color-on-surface);
    opacity: 0.38;
  }

  :host([invalid]) .label,
  :host([invalid]) .supporting-text {
    color: var(--md-sys-color-error);
  }

  :host([invalid]) .editor-container {
    border-color: var(--md-sys-color-error);
    outline-color: var(--md-sys-color-error);
  }

  .mention-chip {
    display: inline-flex;
    align-items: center;
    margin: 0 2px;
    vertical-align: baseline;
    user-select: none;
  }

  .mention-chip ui-chip {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
  }

  .cm-gutters {
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    border: none;
  }

  .cm-focused .cm-cursor {
    border-left-color: var(--md-sys-color-primary);
  }

  ::selection {
    background: var(--md-sys-color-surface-variant);
  }

  .ͼ1.cm-focused {
    outline: none;
  }

  .function-info {
    padding: 8px;
  }

  /* Responsive */
  @media (max-width: 600px) {
    :host {
      min-width: 0;
    }

    .label {
      padding: 6px 6px 3px 6px;
    }

    .editor-container {
      padding: 6px;
    }

    .supporting-text {
      padding: 3px 6px 6px 6px;
    }
  }
`;
//# sourceMappingURL=CodeEditor.styles.js.map