@universal-material/web/chip/chip.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    --_height: var(--u-chip-height, 32px);
    --_outline-width: var(--u-chip-outline-width, 1px);
    --_outline-color: var(--u-chip-outline-color, var(--u-color-outline, rgb(121, 116, 126)));
    --_shape: var(--u-chip-shape, var(--u-shape-corner-small, 8px));
    --_gap: var(--u-chip-gap, 8px);
    --_icon-size: var(--u-chip-icon-size, 1.125rem);
    --_remove-button-margin: var(--u-chip-remove-button-margin, 2px);
    --_remove-button-size: calc(var(--_height) - var(--_remove-button-margin) * 2);
    --_selected-icon-color: var(--u-chip-selected-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
    display: inline-block;
    height: var(--_height);
    border-radius: var(--_shape);
  }

  :host(:not([disabled]):not([elevated]):not([selected])) .outline {
    border: var(--_outline-width) solid var(--_outline-color);
  }

  :host([elevated]:not([disabled])) {
    --u-elevation-level: var(--u-elevated-chip-elevation-level, 1);
  }

  @media (hover: hover) {
    :host([elevated]:not([disabled]):hover) {
      --u-elevation-level: var(--u-elevated-chip-hover-elevation-level, 2);
    }
  }
  .outline {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }

  .container {
    display: flex;
    align-items: center;
    border-radius: inherit;
    height: 100%;
    padding-inline: var(--u-chip-padding, 16px);
    gap: var(--_gap);
  }

  .icon {
    width: 1em;
    height: var(--_icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--_icon-size);
  }

  .leading {
    color: var(--u-chip-leading-icon-color, var(--u-color-primary, rgb(103, 80, 164)));
  }

  .selected {
    color: var(--_selected-icon-color);
  }

  .trailing {
    color: var(--u-chip-trailing-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
  }

  .label {
    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
    line-height: var(--u-chip-label-line-height, var(--u-label-l-line-height, 1.25rem));
    font-size: var(--u-chip-label-font-size, var(--u-label-l-font-size, 0.875rem));
    letter-spacing: var(--u-chip-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));
    font-weight: var(--u-chip-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));
  }

  .remove-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: var(--_remove-button-size);
    height: var(--_remove-button-size);
    cursor: pointer;
    padding: 0;
    margin: 0;
    margin-inline: calc((var(--_remove-button-size) - var(--_icon-size)) * -0.5);
    background: gray;
    border: none;
    border-radius: var(--u-chip-remove-button-border-radius, var(--u-shape-corner-full, 9999px));
    background: none;
    appearance: none;
    outline: 0;
    outline-offset: 0;
    z-index: 1;
  }

  ::slotted([slot=remove-icon]),
  ::slotted([slot=selected-icon]),
  ::slotted([slot=leading-icon]),
  ::slotted([slot=trailing-icon]) {
    font-size: inherit !important;
  }

  slot[name=selected-icon] {
    display: none;
  }

  :host(:not([clickable]):not([toggle])) .button {
    cursor: auto;
  }

  :host([selected]:not([hide-selected-icon])) .leading {
    display: none;
  }
  :host([selected]:not([hide-selected-icon])) slot[name=selected-icon] {
    display: contents;
  }

  .default-select-icon {
    display: contents;
  }

  :host([has-selected-icon]) .default-select-icon {
    display: none;
  }

  :host([selected]:not([disabled])) {
    background-color: var(--u-chip-selected-bg-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
  }
  :host([selected]:not([disabled])) .leading {
    color: var(--u-chip-selected-leading-icon-color, var(--_selected-icon-color));
  }
  :host([selected]:not([disabled])) .trailing {
    color: var(--u-chip-selected-trailing-icon-color, var(--_selected-icon-color));
  }

  :host([has-leading-icon]) .container,
  :host([selected]:not([hide-selected-icon])) .container {
    padding-inline-start: var(--_gap);
  }

  :host([has-trailing-icon]) .container,
  :host([removable]) .container {
    padding-inline-end: var(--_gap);
  }

  :host(:not([has-leading-icon])) .leading {
    display: none;
  }

  :host([hide-selected-icon]) .selected,
  :host(:not([selected])) .selected {
    display: none;
  }

  :host(:not([has-trailing-icon])) .trailing {
    display: none;
  }

  [part=default-selected-icon] {
    display: contents;
  }

  :host([disabled]) .remove-button {
    cursor: default;
  }
`;
//# sourceMappingURL=chip.styles.js.map