text: /**
   * @license
   * Copyright (c) 2021 Vaadin Ltd.
   * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
   */
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
  import './style.js';
  import './color.js';
  import './typography.js';
  
  const badge = css`
    [theme~='badge'] {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0.4em calc(0.5em + var(--lumo-border-radius-s) / 4);
      color: var(--lumo-primary-text-color);
      background-color: var(--lumo-primary-color-10pct);
      border-radius: var(--lumo-border-radius-s);
      font-family: var(--lumo-font-family);
      font-size: var(--lumo-font-size-s);
      line-height: 1;
      font-weight: 500;
      text-transform: initial;
      letter-spacing: initial;
      min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em);
    }
  
    /* Ensure proper vertical alignment */
    [theme~='badge']::before {
      display: inline-block;
      content: '\\2003';
      width: 0;
    }
  
    [theme~='badge'][theme~='small'] {
      font-size: var(--lumo-font-size-xxs);
      line-height: 1;
    }
  
    /* Colors */
  
    [theme~='badge'][theme~='success'] {
      color: var(--lumo-success-text-color);
      background-color: var(--lumo-success-color-10pct);
    }
  
    [theme~='badge'][theme~='error'] {
      color: var(--lumo-error-text-color);
      background-color: var(--lumo-error-color-10pct);
    }
  
    [theme~='badge'][theme~='contrast'] {
      color: var(--lumo-contrast-80pct);
      background-color: var(--lumo-contrast-5pct);
    }
  
    /* Primary */
  
    [theme~='badge'][theme~='primary'] {
      color: var(--lumo-primary-contrast-color);
      background-color: var(--lumo-primary-color);
    }
  
    [theme~='badge'][theme~='success'][theme~='primary'] {
      color: var(--lumo-success-contrast-color);
      background-color: var(--lumo-success-color);
    }
  
    [theme~='badge'][theme~='error'][theme~='primary'] {
      color: var(--lumo-error-contrast-color);
      background-color: var(--lumo-error-color);
    }
  
    [theme~='badge'][theme~='contrast'][theme~='primary'] {
      color: var(--lumo-base-color);
      background-color: var(--lumo-contrast);
    }
  
    /* Links */
  
    [theme~='badge'][href]:hover {
      text-decoration: none;
    }
  
    /* Icon */
  
    [theme~='badge'] iron-icon {
      margin: -0.25em 0;
      --iron-icon-width: 1.5em;
      --iron-icon-height: 1.5em;
    }
  
    [theme~='badge'] iron-icon:first-child {
      margin-left: -0.375em;
    }
  
    [theme~='badge'] iron-icon:last-child {
      margin-right: -0.375em;
    }
  
    [theme~='badge'][icon] {
      min-width: 0;
      padding: 0;
      font-size: 1rem;
      --iron-icon-width: var(--lumo-icon-size-m);
      --iron-icon-height: var(--lumo-icon-size-m);
    }
  
    [theme~='badge'][icon][theme~='small'] {
      --iron-icon-width: var(--lumo-icon-size-s);
      --iron-icon-height: var(--lumo-icon-size-s);
    }
  
    /* Empty */
  
    [theme~='badge']:not([icon]):empty {
      min-width: 0;
      width: 1em;
      height: 1em;
      padding: 0;
      border-radius: 50%;
      background-color: var(--lumo-primary-color);
    }
  
    [theme~='badge'][theme~='small']:not([icon]):empty {
      width: 0.75em;
      height: 0.75em;
    }
  
    [theme~='badge'][theme~='contrast']:not([icon]):empty {
      background-color: var(--lumo-contrast);
    }
  
    [theme~='badge'][theme~='success']:not([icon]):empty {
      background-color: var(--lumo-success-color);
    }
  
    [theme~='badge'][theme~='error']:not([icon]):empty {
      background-color: var(--lumo-error-color);
    }
  
    /* Pill */
  
    [theme~='badge'][theme~='pill'] {
      --lumo-border-radius-s: 1em;
    }
  
    /* RTL specific styles */
  
    [dir='rtl'][theme~='badge'] iron-icon:first-child {
      margin-right: -0.375em;
      margin-left: 0;
    }
  
    [dir='rtl'][theme~='badge'] iron-icon:last-child {
      margin-left: -0.375em;
      margin-right: 0;
    }
  `;
  
  registerStyles('', badge, { moduleId: 'lumo-badge' });
  
  export { badge };
  