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

DNB Eufemia Design System UI Library

.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:.5rem;padding-right:.5rem}.dnb-tag.dnb-button .dnb-button__text{font-size:var(--font-size-x-small);transform:none}.dnb-tag:not(.dnb-tag--interactive){cursor:unset;-webkit-user-select:unset;user-select:unset}.dnb-tag:not(.dnb-tag--interactive) .dnb-button__text{cursor:text}.dnb-tag--interactive.dnb-button{--border-color:var(--color-sea-green);--border-width:0.0625rem;background-color:var(--color-pistachio);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}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]){--border-color:var(--color-emerald-green);--border-width:var(--focus-ring-width);--tag-icon-color:var(--color-emerald-green);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);outline:none}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;--tag-icon-color:var(--color-emerald-green);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.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]){--border-color:transparent;--border-width:0.0625rem;--tag-icon-color:var(--color-sea-green);background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-tag--interactive.dnb-button[disabled]{--border-color:var(--color-sea-green-30);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green-30)}.dnb-tag--addable.dnb-button,.dnb-tag--removable.dnb-button{--tag-icon-fill:var(--tag-icon-fill-color);--tag-icon-stroke:var(--tag-icon-stroke-color);padding-right:.25rem}html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible[disabled],html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.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--addable.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]){--tag-icon-fill:var(--tag-icon-stroke-color);--tag-icon-stroke:var(--tag-icon-fill-color)}.dnb-tag--addable.dnb-button:active[disabled],.dnb-tag--removable.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled]{cursor:not-allowed}.dnb-tag--addable.dnb-button:active:not([disabled]),.dnb-tag--removable.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]){--tag-icon-fill:var(--tag-icon-stroke-color);--tag-icon-stroke:var(--tag-icon-fill-color)}.dnb-tag--addable.dnb-button svg,.dnb-tag--removable.dnb-button svg{border-radius:50%;outline:.0625rem solid var(--tag-icon-border-color);outline-offset:-.0625rem}.dnb-tag--addable.dnb-button svg .dnb-icon-close-circle-path,.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path{fill:var(--tag-icon-fill)}.dnb-tag--addable.dnb-button svg .dnb-icon-close-cross-path,.dnb-tag--removable.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:.5rem}