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

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

  .badge {
    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-sm, var(--ng-spacing-md-alt));
    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-full));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: var(--nile-height-22px, var(--ng-height-24px));
  }

  .badge__content {
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
    font-style: normal;
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
    letter-spacing: 0.2px;
  }

  .badge--primary {
    background: var(--nile-badge-color-background-primary, var(--ng-componentcolors-utility-brand-50));
    color: var(--nile-badge-color-font-primary, var(--ng-componentcolors-utility-brand-700));
  }

  .badge--normal {
    background: var(--nile-badge-color-background-normal, var(--ng-componentcolors-utility-gray-50));
  }

  .badge--info {
    background: var(--nile-badge-color-background-info, var(--ng-componentcolors-utility-blue-light-50));
  }

  /* for v2 */

    .badge--pill-outline {
    background: transparent ;
  }
  .badge--pink {
    color: var(--nile-badge-color-font-pink, var(--ng-componentcolors-utility-pink-700));
    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
    border-style: solid;
    border-color: var(--nile-badge-color-border-color-pink, var(--ng-componentcolors-utility-pink-200));
    background: var(--nile-badge-color-background-pink, var(--ng-componentcolors-utility-pink-50));
  }

  .badge--orange {
    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));
    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
    border-style: solid;
    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));
    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));
  }

  .badge--purple {
    color: var(--nile-badge-color-font-purple, var(--ng-componentcolors-utility-purple-700));
    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
    border-style: solid;
    border-color: var(--nile-badge-color-border-color-purple, var(--ng-componentcolors-utility-purple-200));
    background: var(--nile-badge-color-background-purple, var(--ng-componentcolors-utility-purple-50));
  }

  .badge--indigo {
    color: var(--nile-badge-color-font-indigo, var(--ng-componentcolors-utility-indigo-700));
    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
    border-style: solid;
    border-color: var(--nile-badge-color-border-color-indigo, var(--ng-componentcolors-utility-indigo-200));
    background: var(--nile-badge-color-background-indigo, var(--ng-componentcolors-utility-indigo-50));
  }

  .badge--blue {
    color: var(--nile-badge-color-font-blue, var(--ng-componentcolors-utility-blue-700));
    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
    border-style: solid;
    border-color: var(--nile-badge-color-border-color-blue, var(--ng-componentcolors-utility-blue-200));
    background: var(--nile-badge-color-background-blue, var(--ng-componentcolors-utility-blue-50));
  }
  .badge--blue-light {
    color:var(--nile-badge-color-font-bluelight, var(--ng-componentcolors-utility-blue-light-700));
    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
    border-style: solid;
    border-color: var(--nile-badge-color-border-color-bluelight, var(--ng-componentcolors-utility-blue-light-200));
    background: var(--nile-badge-color-background-bluelight, var(--ng-componentcolors-utility-blue-light-50));
  }

  .badge--gray-blue {
    color: var(--nile-badge-color-font-grayblue, var(--ng-componentcolors-utility-gray-blue-700));
    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
    border-style: solid;
    border-color: var(--nile-badge-color-border-color-grayblue, var(--ng-componentcolors-utility-gray-blue-200));
    background: var(--nile-badge-color-background-grayblue, var(--ng-componentcolors-utility-gray-blue-50));
  }

  .badge--success {
    color: var(--nile-badge-color-font-success, var(--ng-componentcolors-utility-success-700));
    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
    border-style: solid;
    border-color: var(--nile-badge-color-border-color-success, var(--ng-componentcolors-utility-success-200));
    background: var(--nile-badge-color-background-success, var(--ng-componentcolors-utility-success-50));
  }
  .badge--warning {
    color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));
    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
    border-style: solid;
    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));
    background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));
  }

  .badge--error {
    color: var(--nile-badge-color-font-error, var(--ng-componentcolors-utility-error-700));
    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
    border-style: solid;
    border-color: var(--nile-badge-color-border-color-error, var(--ng-componentcolors-utility-error-200));
    background: var(--nile-badge-color-background-error, var(--ng-componentcolors-utility-error-50));
  }

  .badge--brand {
    color: var(--nile-badge-color-font-brand, var(--ng-componentcolors-utility-brand-700));
    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
    border-style: solid;
    border-color: var(--nile-badge-color-border-color-brand, var(--ng-componentcolors-utility-brand-200));
    background: var(--nile-badge-color-background-brand, var(--ng-componentcolors-utility-brand-50));
  }

  .badge--gray {
    color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));
    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
    border-style: solid;
    border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-200));
    background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));
  }

  .badge--pink.badge--pill-outline {
    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-pink, var(--ng-componentcolors-utility-pink-200));
  }

  .badge--orange.badge--pill-outline {
    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));
  }

  .badge--purple.badge--pill-outline {
    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-purple, var(--ng-componentcolors-utility-purple-200));
  }

  .badge--indigo.badge--pill-outline {
    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-indigo, var(--ng-componentcolors-utility-indigo-200));
  }

  .badge--blue.badge--pill-outline {
    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-blue, var(--ng-componentcolors-utility-blue-200));
  }

  .badge--blue-light.badge--pill-outline {
    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-bluelight,  var(--ng-componentcolors-utility-blue-light-200));
  }

  .badge--gray-blue.badge--pill-outline {
    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-blue-200));
  }

  .badge--success.badge--pill-outline {
    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-success, var(--ng-componentcolors-utility-success-200));
  }

  .badge--warning.badge--pill-outline {
    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));
  }

  .badge--error.badge--pill-outline {
    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-error, var(--ng-componentcolors-utility-error-200));
  }

  .badge--brand.badge--pill-outline {
    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-brand, var(--ng-componentcolors-utility-brand-200));
  }

  .badge--gray.badge--pill-outline {
    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-200));
  }



  .badge--rounded {
    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md-alt));
    border-radius: var(--nile-radius-full, var(--ng-radius-full));
  }
`;
export default [styles];