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

DNB Eufemia Design System UI Library

/*
* Tag component
*
*/
/*
 * Utilities
 */
/*
* Tag component
*
*/
/*
* Button mixins
*
*/
/*
* Tag component
*
*/
/*
* Tag mixins
*
*/
.eufemia-scope--11_3_0 .dnb-tag {
  --tag-icon-border-color: var(--token-color-stroke-action);
}
.eufemia-scope--11_3_0 .dnb-tag.dnb-button {
  -webkit-appearance: none;
          appearance: none;
  background-color: var(--token-color-background-neutral-base);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.eufemia-scope--11_3_0 .dnb-tag.dnb-button .dnb-button__text {
  font-size: var(--font-size-x-small);
  transform: none;
}
.eufemia-scope--11_3_0 .dnb-tag:not(.dnb-tag--interactive) {
  -webkit-user-select: unset;
          user-select: unset;
  cursor: unset;
}
.eufemia-scope--11_3_0 .dnb-tag:not(.dnb-tag--interactive) .dnb-button__text {
  cursor: text;
}
.eufemia-scope--11_3_0 .dnb-tag--interactive.dnb-button {
  color: var(--token-color-text-action);
  background-color: var(--token-color-decorative-third-muted);
  --border-color: var(--token-color-stroke-action);
  --border-width: 0.0625rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
html:not([data-whatinput=touch]) .eufemia-scope--11_3_0 .dnb-tag--interactive.dnb-button:focus-visible[disabled] {
  cursor: not-allowed;
}
html:not([data-whatinput=touch]) .eufemia-scope--11_3_0 .dnb-tag--interactive.dnb-button:focus-visible:not([disabled]) {
  --tag-icon-border-color: var(--token-color-stroke-action-focus);
  outline: none;
  color: var(--token-color-text-action-focus);
  background-color: var(--token-color-background-action-focus-subtle);
  --border-color: var(--token-color-stroke-action-focus);
  --border-width: 0.125rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--interactive.dnb-button:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
  color: var(--token-color-text-action-hover);
  --border-color: var(--token-color-stroke-action-hover);
  --border-width: 0.125rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.eufemia-scope--11_3_0 .dnb-tag--interactive.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--interactive.dnb-button:active[disabled] {
  cursor: not-allowed;
}
.eufemia-scope--11_3_0 .dnb-tag--interactive.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--interactive.dnb-button:active:not([disabled]) {
  color: var(--token-color-text-action-pressed);
  background-color: var(--token-color-background-action-pressed-subtle);
  --border-color: transparent;
  --border-width: 0.0625rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.eufemia-scope--11_3_0 .dnb-tag--interactive.dnb-button[disabled] {
  color: var(--token-color-component-button-text-action-disabled);
  background-color: var(--token-color-background-action-disabled);
  --border-color: var(--token-color-stroke-action-disabled);
  --border-width: 0.0625rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button, .eufemia-scope--11_3_0 .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-whatinput=touch]) .eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:focus-visible[disabled], html:not([data-whatinput=touch]) .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button:focus-visible[disabled] {
  cursor: not-allowed;
}
html:not([data-whatinput=touch]) .eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:focus-visible:not([disabled]), html:not([data-whatinput=touch]) .eufemia-scope--11_3_0 .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]) .eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button:hover:not([disabled]) {
  --tag-icon-fill: var(--tag-icon-stroke-color);
  --tag-icon-stroke: var(--tag-icon-fill-color);
}
.eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:active[disabled], .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button:active[disabled] {
  cursor: not-allowed;
}
.eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:active:not([disabled]), .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button:active:not([disabled]) {
  --tag-icon-fill: var(--tag-icon-stroke-color);
  --tag-icon-stroke: var(--tag-icon-fill-color);
}
.eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button svg, .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button svg {
  border-radius: 50%;
  outline: 0.0625rem solid var(--tag-icon-border-color);
  outline-offset: -0.0625rem;
}
.eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path, .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button svg .dnb-icon-close-circle-path {
  fill: var(--tag-icon-fill);
}
.eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path, .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button svg .dnb-icon-close-cross-path {
  stroke: var(--tag-icon-stroke);
}
.eufemia-scope--11_3_0 .dnb-tag--addable {
  --tag-icon-fill-color: var(--token-color-background-action);
  --tag-icon-stroke-color: var(--token-color-icon-neutral-inverse);
}
.eufemia-scope--11_3_0 .dnb-tag--addable svg {
  transform: rotate(45deg);
}
html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button:hover:not([disabled]) {
  --tag-icon-fill: var(--token-color-background-neutral);
  --tag-icon-stroke: var(--token-color-icon-action-hover);
}
html:not([data-whatinput=touch]) .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button:focus-visible[disabled] {
  cursor: not-allowed;
}
html:not([data-whatinput=touch]) .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button:focus-visible:not([disabled]) {
  --tag-icon-fill: var(--token-color-background-neutral);
  --tag-icon-stroke: var(--token-color-icon-action-focus);
}
.eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button:active[disabled] {
  cursor: not-allowed;
}
.eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button:active:not([disabled]) {
  --tag-icon-fill: var(--token-color-background-neutral);
  --tag-icon-stroke: var(--token-color-icon-action-pressed);
  --tag-icon-border-color: var(--token-color-stroke-action-pressed);
}
.eufemia-scope--11_3_0 .dnb-tag--addable.dnb-button[disabled] {
  --tag-icon-fill-color: var(
    --token-color-background-action-disabled
  );
  --tag-icon-border-color: var(--token-color-stroke-action-disabled);
}
.eufemia-scope--11_3_0 .dnb-tag--removable {
  --tag-icon-fill-color: var(--token-color-background-neutral);
  --tag-icon-stroke-color: var(--token-color-stroke-action);
}
html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:hover:not([disabled]) {
  --tag-icon-fill: var(--token-color-background-action-hover);
}
html:not([data-whatinput=touch]) .eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:focus-visible[disabled] {
  cursor: not-allowed;
}
html:not([data-whatinput=touch]) .eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:focus-visible:not([disabled]) {
  --tag-icon-fill: var(--token-color-background-action-focus);
  --tag-icon-stroke: var(--token-color-icon-neutral-inverse);
}
.eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:active[disabled] {
  cursor: not-allowed;
}
.eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button:active:not([disabled]) {
  --tag-icon-fill: var(--token-color-background-action-pressed);
  --tag-icon-stroke: var(--token-color-icon-neutral-inverse);
  --tag-icon-border-color: var(--token-color-stroke-action-pressed);
}
.eufemia-scope--11_3_0 .dnb-tag--removable.dnb-button[disabled] {
  --tag-icon-stroke-color: var(--token-color-stroke-action-disabled);
  --tag-icon-border-color: var(--token-color-stroke-action-disabled);
}
.eufemia-scope--11_3_0 .dnb-tag__group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}