/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { css } from 'lit';

/**
 * CodeEditor CSS
 */
export const styles = css`
  *{
    box-sizing:border-box;
  }

  :host {
    display: block;
    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
  }

  .code__editor__container {
    display: flex;
    padding: var(--nile-spacing-5px, var(--ng-spacing-none));
    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
    position: relative;
  }

  .no-scroller .cm-scroller{
    scrollbar-width: none;
  }

  .error {
    border-color: var(--nile-colors-red-500, var(--ng-componentcolors-utility-error-600));
  }

  .disabled {
  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
  border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
  color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
  cursor: not-allowed;
  opacity: var(--nile-opacity-50, var(--ng-opacity-50));
  user-select: none;
  -webkit-user-select: none;
}

  .disabled .cm-editor {
    cursor: not-allowed;
    pointer-events: none;
  }

  .noborder {
    border: none;
  }

  .cm-editor {
    flex: 1;
    min-width: 0;
  }

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

  .cm-gutters{
   border-top-left-radius:var(--nile-spacing-spacing-none, var(--ng-radius-md));
   border-bottom-left-radius:var(--nile-spacing-spacing-none, var(--ng-radius-md));
  }

  .expand__icon__container{
    display: none;
    position: absolute;
    border-radius: var(--nile-radius-base-standard, var(--ng-radius-none));
    cursor: pointer;
    right: var(--nile-spacing-none, var(--ng-spacing-1-5));
    top: 5px;
    z-index: 1;
    padding: var(--nile-spacing-5px, var(--ng-spacing-none));
    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    }
  
  .code__editor__container:hover > .expand__icon__container{
    display: flex;
  }

  .code__editor__container.disabled .expand__icon__container{
    display: none;
  }
`;

export default [styles];