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

/**
 * Chip CSS
 */
export const styles = css`
  :host {
    box-sizing: border-box;
    -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));
  }

  :host *,
  :host *::before,
  :host *::after {
    box-sizing: inherit;
  }

  [hidden] {
    display: none !important;
  }

  .form-control .form-control__label {
    display: none;
  }

  .form-control .form-control__help-text {
    display: none;
  }

  /* Label */
  .form-control--has-label .form-control__label {
    display: inline-block;
    color: inherit;
    margin-bottom: var(--nile-spacing-sm,var( --ng-spacing-sm));
    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));
    font-family: var(--nile-font-family-serif,var( --ng-font-family-body));
    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));
    font-style: normal;
    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));
    line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));
    letter-spacing: 0.2px;
  }

  .form-control--has-label.form-control--medium .form-control__label {
    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));
  }

  :host([required]) .form-control--has-label .form-control__label::after {
    content: '*';
    margin-inline-start: -2px;
  }

  /* Help text */
  .form-control--has-help-text .form-control__help-text {
    display: block;
    color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));
    margin-top: var(--nile-spacing-xxxxsmall);
  }

  .form-control--has-help-text.form-control--small .form-control__help-text {
    font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));
  }

  .form-control--has-help-text.form-control--medium .form-control__help-text {
    font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));
  }

  .form-control--has-help-text.form-control--large .form-control__help-text {
    font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));
  }

  .form-control--has-help-text.form-control--radio-group
    .form-control__help-text {
    margin-top: var(--nile-spacing-xxxsmall);
  }

  :host {
    display: block;
    font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));
  }

  .nile-chip {
    padding: var(--nile-spacing-5px,var( --ng-spacing-md)) var(--nile-spacing-10px,var(--ng-spacing-lg));
    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));
    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
    border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow-x: hidden;
    gap : var(--nile-gap-unset, var(--ng-spacing-md));
  }

  nile-input::part(base) {
    padding: 0px !important;
  }

  .nile-chip--no-wrap {
    flex-wrap: nowrap;
    overflow-x: scroll;
  }

  .nile-chip::-webkit-scrollbar {
    height: 2px;
  }

  .nile-chip::-webkit-scrollbar-thumb {
    background: var(
      --nile-colors-primary-600
    );
  }

  .nile-chip--disabled {
    
    /* opacity: 0.5; */
    cursor: not-allowed;
    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));
  }

  :host([disabled]) nile-tag::part(base) {
    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));
    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
  }

  :host([disabled]) .nile-chip {
    background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));
    pointer-events: none;
  }

  .input--standard.input--disabled {
    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));
  }

  .nile-chip.nile-chip--disabled {
    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));
    border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));
  }

  .nile-chip.nile-chip--warning {
    border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));
  }

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

  .nile-chip.nile-chip--success {
    border-color: var(--nile-colors-green-500);
  }

  .nile-chip__auto-complete {
    flex: 1;
  }
  .nile-chip__tags {
    margin: var(--nile-margin-size-rem-small);
  }

  nile-auto-complete::part(input) {
    padding: var(--nile-spacing-lg, var(--ng-spacing-none));
  }
  
  .nile-chip:hover:not(.nile-chip--disabled) {
    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));
    box-shadow: var(--nile-box-shadow-10);
  }

  :host([disabled]) .nile-chip:hover {
    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
    box-shadow: none;
  }


  .nile-chip.nile-chip--open:hover  {
    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));
    box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */
  }

  .nile-chip__tags--focused::part(base) {
    border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));
    gap: 2px;
  }

  nile-auto-complete::part(base)::before {
    box-shadow: none;
  }

  :host([required]) .form-control--has-label .form-control__label::after {
  content: '*';
    margin-inline-start: -2px;
    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
  }

  :host([disabled]) {
    cursor: not-allowed;
  }

  :host([disabled]) nile-auto-complete::part(base) {
    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
  }
`;

export default [styles];