import { css } from 'lit';
import componentStyles from '../../styles/component.styles.mjs';

const styles = css`
  ${componentStyles}

  :host {
    display: inline-block;
    --color: var(--flow-ui-color-primary-950);
    --background-color: var(--flow-ui-color-primary-50);
    --border-color: var(--flow-ui-color-primary-200);
    --active-icon-color: white;
  }

  /* Variant modifiers */
  :host([variant='primary']) {
    --color: var(--flow-ui-color-primary-950);
    --background-color: var(--flow-ui-color-primary-50);
    --border-color: var(--flow-ui-color-primary-300);
    --active-icon-color: white;
  }

  :host([variant='secondary']) {
    --color: var(--flow-ui-color-secondary-950);
    --background-color: var(--flow-ui-color-secondary-50);
    --border-color: var(--flow-ui-color-secondary-300);
    --active-icon-color: white;
  }

  :host([variant='success']) {
    --color: var(--flow-ui-color-success-950);
    --background-color: var(--flow-ui-color-success-50);
    --border-color: var(--flow-ui-color-success-300);
    --active-icon-color: white;
  }

  :host([variant='neutral']) {
    --color: var(--flow-ui-color-neutral-950);
    --background-color: var(--flow-ui-color-neutral-50);
    --border-color: var(--flow-ui-color-neutral-500);
    --active-icon-color: white;
  }

  :host([variant='warning']) {
    --color: var(--flow-ui-color-warning-950);
    --background-color: var(--flow-ui-color-warning-50);
    --border-color: var(--flow-ui-color-warning-300);
    --active-icon-color: white;
  }

  :host([variant='danger']) {
    --color: var(--flow-ui-color-danger-950);
    --background-color: var(--flow-ui-color-danger-50);
    --border-color: var(--flow-ui-color-danger-300);
    --active-icon-color: white;
  }

  .tag {
    display: flex;
    align-items: center;
    border: solid 1px;
    line-height: 1;
    white-space: nowrap;
    user-select: none;

    background-color: var(--background-color);
    border-color: var(--border-color);
    color: var(--color);
  }

  .tag__remove {
    color: inherit;
    padding: 0;
  }

  /*
   * Size modifiers
   */

  .tag--small {
    font-size: var(--flow-ui-button-font-size-small);
    height: calc(var(--flow-ui-control-height-small) * 0.8);
    line-height: calc(var(--flow-ui-control-height-small) - var(--flow-ui-control-border-width) * 2);
    border-radius: var(--flow-ui-control-border-radius-small);
    padding: 0 var(--flow-ui-spacing-x-small);
  }

  .tag--medium {
    font-size: var(--flow-ui-button-font-size-medium);
    height: calc(var(--flow-ui-control-height-medium) * 0.8);
    line-height: calc(var(--flow-ui-control-height-medium) - var(--flow-ui-control-border-width) * 2);
    border-radius: var(--flow-ui-control-border-radius-medium);
    padding: 0 var(--flow-ui-spacing-small);
  }

  .tag--large {
    font-size: var(--flow-ui-button-font-size-large);
    height: calc(var(--flow-ui-control-height-large) * 0.8);
    line-height: calc(var(--flow-ui-control-height-large) - var(--flow-ui-control-border-width) * 2);
    border-radius: var(--flow-ui-control-border-radius-large);
    padding: 0 var(--flow-ui-spacing-medium);
  }

  .tag__remove {
    margin-inline-start: var(--flow-ui-spacing-x-small);
  }

  /*
   * Pill modifier
   */

  .tag--pill {
    border-radius: var(--flow-ui-border-radius-pill);
  }
`;

export { styles as default };
