@dnb/eufemia/components/tag/style/dnb-tag.css

DNB Eufemia Design System UI Library

/*
* Tag component
*
*/
/*
 * Utilities
 */
/*
 * Utilities
 */
/*
* Button mixins
*
*/
/*
* Tag mixins
*
*/
.dnb-tag {
  --tag-icon-color: var(--color-sea-green);
  --tag-icon-border-color: var(--tag-icon-color);
}
.dnb-tag.dnb-button {
  -webkit-appearance: none;
          appearance: none;
  background-color: var(--color-black-8);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.dnb-tag.dnb-button .dnb-button__text {
  font-size: var(--font-size-x-small);
  transform: none;
}
.dnb-tag:not(.dnb-tag--interactive) {
  -webkit-user-select: unset;
          user-select: unset;
  cursor: unset;
}
.dnb-tag:not(.dnb-tag--interactive) .dnb-button__text {
  cursor: text;
}
.dnb-tag--interactive.dnb-button {
  color: var(--color-sea-green);
  background-color: var(--color-pistachio);
  --border-color: var(--color-sea-green);
  --border-width: 0.0625rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible:not([disabled]) {
  outline: none;
  --border-color: var(--color-emerald-green);
  --border-width: var(--focus-ring-width);
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
  --tag-icon-color: var(--color-emerald-green);
}
html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
  --border-color: var(--color-emerald-green);
  --border-width: 0.125rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
  --tag-icon-color: var(--color-emerald-green);
}
.dnb-tag--interactive.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active[disabled] {
  cursor: not-allowed;
}
.dnb-tag--interactive.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active:not([disabled]) {
  background-color: var(--color-mint-green-50);
  --border-color: transparent;
  --border-width: 0.0625rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
  --tag-icon-color: var(--color-sea-green);
}
.dnb-tag--interactive.dnb-button[disabled] {
  color: var(--color-sea-green-30);
  background-color: var(--color-white);
  --border-color: var(--color-sea-green-30);
  --border-width: 0.0625rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-tag--removable.dnb-button, .dnb-tag--addable.dnb-button {
  padding-right: 0.25rem;
  --tag-icon-fill: var(--tag-icon-fill-color);
  --tag-icon-stroke: var(--tag-icon-stroke-color);
}
html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible:not([disabled]) {
  --tag-icon-fill: var(--tag-icon-stroke-color);
  --tag-icon-stroke: var(--tag-icon-fill-color);
}
html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover:not([disabled]) {
  --tag-icon-fill: var(--tag-icon-stroke-color);
  --tag-icon-stroke: var(--tag-icon-fill-color);
}
.dnb-tag--removable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled], .dnb-tag--addable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active[disabled] {
  cursor: not-allowed;
}
.dnb-tag--removable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]), .dnb-tag--addable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active:not([disabled]) {
  --tag-icon-fill: var(--tag-icon-stroke-color);
  --tag-icon-stroke: var(--tag-icon-fill-color);
}
.dnb-tag--removable.dnb-button svg, .dnb-tag--addable.dnb-button svg {
  border-radius: 50%;
  outline: 0.0625rem solid var(--tag-icon-border-color);
  outline-offset: -0.0625rem;
}
.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path, .dnb-tag--addable.dnb-button svg .dnb-icon-close-circle-path {
  fill: var(--tag-icon-fill);
}
.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path, .dnb-tag--addable.dnb-button svg .dnb-icon-close-cross-path {
  stroke: var(--tag-icon-stroke);
}
.dnb-tag--addable {
  --tag-icon-fill-color: var(--tag-icon-color);
  --tag-icon-stroke-color: var(--color-white);
}
.dnb-tag--addable svg {
  transform: rotate(45deg);
}
.dnb-tag--removable {
  --tag-icon-fill-color: var(--color-white);
  --tag-icon-stroke-color: var(--tag-icon-color);
}
.dnb-tag__group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}