:root {
  --x-pill-container-size-x: auto;
  --x-pill-container-size-y: var(--m-dp-4);
  --x-pill-container-spacing-y-start: 0;
  --x-pill-container-spacing-y-end: 0;
  --x-pill-container-spacing-x-start: var(--m-dp-2);
  --x-pill-container-spacing-x-end: var(--m-dp-2);
  --x-pill-container-background-enabled: #fff;
  --x-pill-container-background-hovered: #eee;
  --x-pill-container-background-disabled: #ccc;
  --x-pill-container-border-radius: var(--m-dp-2);
  --x-pill-container-border-width: var(--m-dp-line);
  --x-pill-container-border-style: solid;
  --x-pill-container-border-color-enabled: #aaa;
  --x-pill-container-border-color-hovered: #000;
  --x-pill-container-border-color-disabled: #ddd;
  --x-pill-label-line-height: 1;
  --x-pill-label-font-size: 0.875rem;
  --x-pill-label-color-enabled: #000;
  --x-pill-label-color-hovered: #000;
  --x-pill-label-color-disabled: #ddd;
  --x-pill-icon-gap-x: var(--m-dp-half);
  --x-pill-icon-size-y: var(--m-dp-2);
  --x-pill-icon-file: url("sample-icon.svg");
  --x-pill-icon-color-enabled: #000;
  --x-pill-icon-color-hovered: #000;
  --x-pill-icon-color-disabled: #ddd;
}

/* * Base */
.x-pill {
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  cursor: default;

  height: var(--x-pill-container-size-y);
  width: var(--x-pill-container-size-x);
  padding-block-start: var(--x-pill-container-spacing-y-start);
  padding-block-end: var(--x-pill-container-spacing-y-end);
  padding-inline-start: var(--x-pill-container-spacing-x-start);
  padding-inline-end: var(--x-pill-container-spacing-x-end);
  color: var(--x-pill-label-color-enabled);
  font-size: var(--x-pill-label-font-size);
  line-height: var(--x-pill-label-line-height);
  background-color: var(--x-pill-container-background-enabled);
  border-width: var(--x-pill-container-border-width);
  border-style: var(--x-pill-container-border-style);
  border-color: var(--x-pill-container-border-color-enabled);
  border-radius: var(--x-pill-container-border-radius);
}
.x-pill[disabled],
.x-pill[disabled]:hover {
  color: var(--x-pill-label-color-disabled);
  background-color: var(--x-pill-container-background-disabled);
  border-color: var(--x-pill-container-border-color-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.x-pill:hover {
  color: var(--x-pill-label-color-hovered);
  background-color: var(--x-pill-container-background-hovered);
  border-color: var(--x-pill-container-border-color-hovered);
}

.x-pill.has-icon { gap: var(--x-pill-icon-gap-x); }
.x-pill.has-icon:before {
  content: '';
  width: var(--x-pill-icon-size-y);
  height: var(--x-pill-icon-size-y);
  mask-image: var(--x-pill-icon-file);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: auto var(--x-pill-icon-size-y);
  background-color: var(--x-pill-icon-color-enabled);
  transition: all 0.3s ease-in-out;
}
.x-pill.has-icon:hover:before {
  background-color: var(--x-pill-icon-color-hovered);
}