/**
 * 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 {
    display: inline-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));
  }

  .tag {
    display: flex;
    align-items: center;
    border: solid 2px;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
    border-radius: var(--nile-radius-sm , var(--ng-radius-sm));
    gap: var(--nile-spacing-sm , var(--ng-spacing-sm));
  }

  .tag__remove::part(base) {
    color: inherit;
    padding: var(--nile-spacing-none , var(--ng-spacing-none));
  }

  /*
   * Variant modifiers
   */

  .tag--medium {
    font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
    height: var(--nile-height-26px , var(--ng-height-auto));
    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
    padding: var(--nile-spacing-none , var(--ng-spacing-xs)) var(--nile-spacing-xsmall , var(--ng-spacing-md));
  }

  .tag--primary {
    background: var(--nile-colors-primary-600);
    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-primary));
    border: 2px solid  var(--nile-colors-primary-600, var(--ng-colors-border-primary));
    color: var(--nile-colors-white-base);
  }

  .tag--primary:hover {
    border: 2px solid rgba(0, 94, 166, 0.50);
  }

  .tag--primary:active > nile-icon-button {
    color: var(--nile-colors-blue-700);
  }

  .tag--success {
    background: var(--nile-colors-green-400,var(--ng-componentcolors-utility-success-50));
    border: 2px solid var(--nile-colors-green-400, var(--ng-componentcolors-utility-success-200));
    color: var(--nile-colors-dark-900,var(--ng--componentcolors-utility-success-700));
  }

  .tag--success:hover {
    border: 2px solid var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-300));
  }

  .tag--success:active > nile-icon-button {
    color: var(--nile-colors-green-700);
  }

  .tag--normal {
    background: var(--nile-colors-neutral-400 , var(--ng-colors-bg-primary));
    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
    color: var(--nile-colors-dark-900 , var(--ng-colors-text-secondary-700));
  }

  .tag--normal:hover {
    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
  }

  .tag--normal:active > nile-icon-button {
    color: var(--nile-colors-neutral-700);
  }

  .tag--warning {
    background: var(--nile-colors-yellow-400, var(--ng-componentcolors-utility-warning-50));
    border: 2px solid var(--nile-colors-yellow-400, var(--ng-componentcolors-utility-warning-200));
    color: var(--nile-colors-dark-900, var(--ng-componentcolors-utility-warning-700));
  }

  .tag--warning:hover {
    border: 2px solid var(--nile-colors-yellow-500, var(--ng-componentcolors-utility-warning-300));
  }

  .tag--warning:active > nile-icon-button {
    color: var(--nile-colors-yellow-500);
  }


  .tag--error {
    background: var(--nile-colors-red-400, var(--ng-componentcolors-utility-error-50));
    border: 2px solid var(--nile-colors-red-400, var(--ng-componentcolors-utility-error-200));
    color: var(--nile-colors-dark-900, var(--ng-componentcolors-utility-error-700));
  }

  .tag--error:hover {
    border: 2px solid var(--nile-colors-red-500, var(--ng-componentcolors-utility-error-300));
  }

  .tag--error:active > nile-icon-button {
    color: var(--nile-colors-red-500);
  }

  .tag--info {
    background: var(--nile-colors-blue-400);
    border: 2px solid var(--nile-colors-blue-400, var(--ng-colors-border-primary));
    color: var(--nile-colors-dark-900);
  }

  .tag--info:hover {
    border: 2px solid var(--nile-colors-blue-500, var(--ng-colors-border-primary));
  }

  .tag--info:active > nile-icon-button {
    color: var(--nile-colors-red-500);
  }

  .tag__remove {
    margin-inline-start: var(--nile-spacing-7px , var(--ng-spacing-md));
  }

  /*
   * Pill modifier
   */

  .tag--pill {
    border-radius: var(--nile-radius-full , var(--ng-spacing-8xl));
  }

  .tag__prefix {
  padding: var(--nile-spacing-3px, var(--ng-spacing-xs)) var(--nile-spacing-sm , var(--ng-spacing-sm));
}

 .tag__content {
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
}

  .prefix_content_wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }
`;

export default [styles];