@conduction/components/src/components/tag/Tag.module.css

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

:root {
  --conduction-tag-font-size: var(--skeleton-font-size-sm);
  --conduction-tag-color: var(--skeleton-black);
  --conduction-tag-background-color: var(--skeleton-color-grey-1);
  --conduction-tag-border-radius: var(--skeleton-border-radius-md);
  --conduction-tag-padding: var(--skeleton-size-xs);
  --conduction-tag-icon-margin-inline-end: var(--skeleton-size-2xs);
  --conduction-tag-remove-background-color: #ffbdad;
  --conduction-tag-remove-text-color: #e44f2a;
}

.tag {
  display: inline-block;
  width: fit-content;
  font-size: var(--conduction-tag-font-size);
  color: var(--conduction-tag-color);
  background-color: var(--conduction-tag-background-color);
  padding-inline-start: var(--conduction-tag-padding);
  padding-inline-end: var(--conduction-tag-padding);
  padding-block-start: var(--conduction-tag-padding);
  padding-block-end: var(--conduction-tag-padding);
}

.tag > *:not(:last-child) {
  margin-inline-end: var(--conduction-tag-icon-margin-inline-end);
}

.clickable :hover {
  cursor: pointer;
}

.remove {
  padding-inline-end: 4px;
}

.tagContainer {
  display: flex;
}

.removeTag:hover {
  cursor: pointer;
  background-color: var(--conduction-tag-remove-background-color);
  color: var(--conduction-tag-remove-text-color);
}