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

const styles = css`
  ${componentStyles}

  :host {
    display: inline-flex;
    --color: var(--flow-ui-color-primary-contrast);
    --background-color: var(--flow-ui-color-primary-500);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: max(12px, 0.75em);
    font-weight: var(--flow-ui-font-weight-semibold);
    letter-spacing: var(--flow-ui-letter-spacing-normal);
    line-height: 1;
    border-radius: var(--flow-ui-border-radius-small);
    border: solid 1px var(--background-color);
    white-space: nowrap;
    padding: 0.35em 0.6em;
    user-select: none;
    cursor: inherit;

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

  /* Variant modifiers */
  :host([variant='primary']) {
    --color: var(--flow-ui-color-primary-contrast);
    --background-color: var(--flow-ui-color-primary-500);
  }

  :host([variant='secondary']) {
    --color: var(--flow-ui-color-secondary-contrast);
    --background-color: var(--flow-ui-color-secondary-500);
  }

  :host([variant='success']) {
    --color: var(--flow-ui-color-success-contrast);
    --background-color: var(--flow-ui-color-success-500);
  }

  :host([variant='neutral']) {
    --color: var(--flow-ui-color-neutral-contrast);
    --background-color: var(--flow-ui-color-neutral-500);
  }

  :host([variant='warning']) {
    --color: var(--flow-ui-color-warning-contrast);
    --background-color: var(--flow-ui-color-warning-500);
  }

  :host([variant='danger']) {
    --color: var(--flow-ui-color-danger-contrast);
    --background-color: var(--flow-ui-color-danger-500);
  }

  /* Size modifiers */
  :host([size='small']) .badge {
    font-size: var(--flow-ui-font-size-x-small);
  }

  :host([size='medium']) .badge {
    font-size: var(--flow-ui-font-size-small);
  }

  :host([size='large']) .badge {
    font-size: var(--flow-ui-font-size-medium);
  }

  /* Pill modifier */
  .badge--pill {
    border-radius: var(--flow-ui-border-radius-pill);
  }

  /* Pulse modifier */
  .badge--pulse {
    animation: pulse 1.5s infinite;
  }

  .badge--pulse.badge--primary {
    --pulse-color: var(--flow-ui-color-primary-500);
  }

  .badge--pulse.badge--secondary {
    --pulse-color: var(--flow-ui-color-secondary-500);
  }

  .badge--pulse.badge--success {
    --pulse-color: var(--flow-ui-color-success-600);
  }

  .badge--pulse.badge--neutral {
    --pulse-color: var(--flow-ui-color-neutral-600);
  }

  .badge--pulse.badge--warning {
    --pulse-color: var(--flow-ui-color-warning-600);
  }

  .badge--pulse.badge--danger {
    --pulse-color: var(--flow-ui-color-danger-600);
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 var(--pulse-color);
    }
    70% {
      box-shadow: 0 0 0 0.5rem transparent;
    }
    100% {
      box-shadow: 0 0 0 0 transparent;
    }
  }
`;

export { styles as default };
