/**
 * 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';

/**
 * AttributeExpression CSS
 */
export const styles = css`
  :host {
    box-sizing: border-box;
    font-size: var(--nile-type-scale-3);
    overflow: hidden;
    -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));
  }

  .content-editable-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }

  .dropdown-position {
    position: relative;
    bottom: 1px;
  }
  .content-editable-input {
    box-sizing: border-box;
    width: 100%;
    padding: var(--nile-spacing-9px);
    border: 1px solid var(--nile-colors-neutral-500);
    border-radius: var(--nile-radius-radius-xs);
    overflow: auto;
    overflow-x: auto;
    overflow-anchor: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: text;
    white-space: nowrap;
    background-color: var(--nile-colors-white-base);
    height: 38px;
  }
  .content-editable-input:focus {
    outline: none;
  }

  .error {
    border-color: var(--nile-colors-red-500);
  }

  .read-only {
    background-color: var(--nile-colors-dark-200);
    opacity: 0.5;
    cursor: not-allowed;
  }

  .chips {
    display: inline;
    background: var(--nile-colors-neutral-400);
    color: var(--nile-colors-dark-900);
    border-radius: var(--nile-radius-radius-xs);
    padding: var(--nile-spacing-sm);
    height: 24px;
    line-height: 10px;
    margin-left: var(--nile-height-26px);
    letter-spacing: 0.2px;
  }

  .text-area {
    height: 120px;
    overflow: scroll;
    line-height: var(--nile-line-height-medium);
  }

  .text-area .chips {
    padding: var(--nile-spacing-xs) var(--nile-spacing-md);
  }

  .chip-error {
    background: var(--nile-colors-red-400);
  }
  .nile-options-container {
    box-sizing: border-box;
    background-color: var(--nile-colors-white-base);
    border: 1px solid var(--nile-colors-neutral-500);
    overflow: auto;
    max-height: 150px;
  }

  label {
    display: inline-block;
    margin-bottom: var(--nile-spacing-sm);
    font-family: var(--nile-font-family-serif-colfax-medium);
  }

  .asterik {
    color: var(--nile-colors-red-500);
  }

  .no-border {
    border: none;
  }
`;

export default [styles];