.tag{
  display:inline-flex;
  align-items:center;
  box-sizing:border-box;
  max-width:100%;
}
.tag .tagButton{
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
  margin:0;
  padding:0;
  background:none;
  border:none;
}
.tag .tagButton:focus{
  outline-width:var(--border-state-focus-s-border-width, 2px);
  outline-style:var(--border-state-focus-s-border-style, solid);
  outline-color:var(--border-state-focus-s-border-color, );
  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
}
.tag .tagButton:active{
  outline:none;
}
.tag .icon{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
.tag[data-size=xs]{
  padding-left:var(--space-tag-xs-from-label, 8px);
  padding-right:var(--space-tag-xs-from-label, 8px);
  height:var(--size-tag-xs, 24px);
  border-radius:var(--radius-tag-xs, 4px);
}
.tag[data-size=xs][data-removable=true]{
  padding-left:var(--space-tag-xs-from-label, 8px);
  padding-right:var(--space-tag-xs-from-button, 0px);
  height:var(--size-tag-xs, 24px);
  border-radius:var(--radius-tag-xs, 4px);
  gap:var(--space-tag-xs-gap, 2px);
}
.tag[data-size=xs] .label{
  font-family:var(--sans-label-s-font-family, SB Sans Interface);
  font-weight:var(--sans-label-s-font-weight, Semibold);
  line-height:var(--sans-label-s-line-height, 14px);
  font-size:var(--sans-label-s-font-size, 11px);
  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
}
.tag[data-size=xs] .tagButton{
  border-radius:var(--radius-tag-xs, 4px);
  height:var(--size-tag-xs, 24px);
  width:var(--size-tag-xs, 24px);
}
.tag[data-size=s]{
  padding-left:var(--space-tag-s-from-label, 8px);
  padding-right:var(--space-tag-s-from-label, 8px);
  height:var(--size-tag-s, 32px);
  border-radius:var(--radius-tag-s, 4px);
}
.tag[data-size=s][data-removable=true]{
  padding-left:var(--space-tag-s-from-label, 8px);
  padding-right:var(--space-tag-s-from-button, 0px);
  height:var(--size-tag-s, 32px);
  border-radius:var(--radius-tag-s, 4px);
  gap:var(--space-tag-s-gap, 2px);
}
.tag[data-size=s] .label{
  font-family:var(--sans-label-m-font-family, SB Sans Interface);
  font-weight:var(--sans-label-m-font-weight, Semibold);
  line-height:var(--sans-label-m-line-height, 16px);
  font-size:var(--sans-label-m-font-size, 12px);
  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
}
.tag[data-size=s] .tagButton{
  border-radius:var(--radius-tag-s, 4px);
  height:var(--size-tag-s, 32px);
  width:var(--size-tag-s, 32px);
}
.tag[data-appearance=neutral]{
  background-color:var(--sys-neutral-decor-default, #dde0ea);
}
.tag[data-appearance=neutral] .label{
  overflow:hidden;
  color:var(--sys-neutral-text-support, #6d707f);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tag[data-appearance=neutral] .tagButton{
  color:var(--sys-neutral-text-light, #8b8e9b);
}
.tag[data-appearance=neutral] .tagButton:focus, .tag[data-appearance=neutral] .tagButton:hover, .tag[data-appearance=neutral] .tagButton:active{
  color:var(--sys-neutral-text-main, #41424e);
}
.tag[data-appearance=neutral] .tagButton:focus, .tag[data-appearance=neutral] .tagButton:hover{
  background-color:var(--sys-neutral-decor-hovered, #cfd2dc);
}
.tag[data-appearance=neutral] .tagButton:active{
  background-color:var(--sys-neutral-decor-activated, #b6bac7);
}
.tag[data-appearance=primary]{
  background-color:var(--sys-primary-decor-default, #caeadb);
}
.tag[data-appearance=primary] .label{
  overflow:hidden;
  color:var(--sys-primary-text-support, #358561);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tag[data-appearance=primary] .tagButton{
  color:var(--sys-primary-text-light, #6aaf90);
}
.tag[data-appearance=primary] .tagButton:focus, .tag[data-appearance=primary] .tagButton:hover, .tag[data-appearance=primary] .tagButton:active{
  color:var(--sys-primary-text-main, #1b5840);
}
.tag[data-appearance=primary] .tagButton:focus, .tag[data-appearance=primary] .tagButton:hover{
  background-color:var(--sys-primary-decor-hovered, #b3deca);
}
.tag[data-appearance=primary] .tagButton:active{
  background-color:var(--sys-primary-decor-activated, #99d7ba);
}
.tag[data-appearance=red]{
  background-color:var(--sys-red-decor-default, #fdd6cd);
}
.tag[data-appearance=red] .label{
  overflow:hidden;
  color:var(--sys-red-text-support, #ae514c);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tag[data-appearance=red] .tagButton{
  color:var(--sys-red-text-light, #e7756a);
}
.tag[data-appearance=red] .tagButton:focus, .tag[data-appearance=red] .tagButton:hover, .tag[data-appearance=red] .tagButton:active{
  color:var(--sys-red-text-main, #7a2d2d);
}
.tag[data-appearance=red] .tagButton:focus, .tag[data-appearance=red] .tagButton:hover{
  background-color:var(--sys-red-decor-hovered, #fac1b3);
}
.tag[data-appearance=red] .tagButton:active{
  background-color:var(--sys-red-decor-activated, #fbab99);
}
.tag[data-appearance=orange]{
  background-color:var(--sys-orange-decor-default, #fed8b8);
}
.tag[data-appearance=orange] .label{
  overflow:hidden;
  color:var(--sys-orange-text-support, #bb733e);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tag[data-appearance=orange] .tagButton{
  color:var(--sys-orange-text-light, #e78940);
}
.tag[data-appearance=orange] .tagButton:focus, .tag[data-appearance=orange] .tagButton:hover, .tag[data-appearance=orange] .tagButton:active{
  color:var(--sys-orange-text-main, #884c23);
}
.tag[data-appearance=orange] .tagButton:focus, .tag[data-appearance=orange] .tagButton:hover{
  background-color:var(--sys-orange-decor-hovered, #f8c699);
}
.tag[data-appearance=orange] .tagButton:active{
  background-color:var(--sys-orange-decor-activated, #f5b27b);
}
.tag[data-appearance=yellow]{
  background-color:var(--sys-yellow-decor-default, #f0dfb1);
}
.tag[data-appearance=yellow] .label{
  overflow:hidden;
  color:var(--sys-yellow-text-support, #b78c32);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tag[data-appearance=yellow] .tagButton{
  color:var(--sys-yellow-text-light, #d3a736);
}
.tag[data-appearance=yellow] .tagButton:focus, .tag[data-appearance=yellow] .tagButton:hover, .tag[data-appearance=yellow] .tagButton:active{
  color:var(--sys-yellow-text-main, #815f19);
}
.tag[data-appearance=yellow] .tagButton:focus, .tag[data-appearance=yellow] .tagButton:hover{
  background-color:var(--sys-yellow-decor-hovered, #ead49a);
}
.tag[data-appearance=yellow] .tagButton:active{
  background-color:var(--sys-yellow-decor-activated, #e6c878);
}
.tag[data-appearance=green]{
  background-color:var(--sys-green-decor-default, #d2ead0);
}
.tag[data-appearance=green] .label{
  overflow:hidden;
  color:var(--sys-green-text-support, #55915a);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tag[data-appearance=green] .tagButton{
  color:var(--sys-green-text-light, #69b56f);
}
.tag[data-appearance=green] .tagButton:focus, .tag[data-appearance=green] .tagButton:hover, .tag[data-appearance=green] .tagButton:active{
  color:var(--sys-green-text-main, #3d6035);
}
.tag[data-appearance=green] .tagButton:focus, .tag[data-appearance=green] .tagButton:hover{
  background-color:var(--sys-green-decor-hovered, #c0e1ba);
}
.tag[data-appearance=green] .tagButton:active{
  background-color:var(--sys-green-decor-activated, #a8d1a2);
}
.tag[data-appearance=blue]{
  background-color:var(--sys-blue-decor-default, #d6e2f4);
}
.tag[data-appearance=blue] .label{
  overflow:hidden;
  color:var(--sys-blue-text-support, #4877b0);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tag[data-appearance=blue] .tagButton{
  color:var(--sys-blue-text-light, #749eda);
}
.tag[data-appearance=blue] .tagButton:focus, .tag[data-appearance=blue] .tagButton:hover, .tag[data-appearance=blue] .tagButton:active{
  color:var(--sys-blue-text-main, #2b537e);
}
.tag[data-appearance=blue] .tagButton:focus, .tag[data-appearance=blue] .tagButton:hover{
  background-color:var(--sys-blue-decor-hovered, #c5d9f6);
}
.tag[data-appearance=blue] .tagButton:active{
  background-color:var(--sys-blue-decor-activated, #aac4ea);
}
.tag[data-appearance=violet]{
  background-color:var(--sys-violet-decor-default, #e6dcf3);
}
.tag[data-appearance=violet] .label{
  overflow:hidden;
  color:var(--sys-violet-text-support, #8c639b);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tag[data-appearance=violet] .tagButton{
  color:var(--sys-violet-text-light, #b68bd5);
}
.tag[data-appearance=violet] .tagButton:focus, .tag[data-appearance=violet] .tagButton:hover, .tag[data-appearance=violet] .tagButton:active{
  color:var(--sys-violet-text-main, #59446a);
}
.tag[data-appearance=violet] .tagButton:focus, .tag[data-appearance=violet] .tagButton:hover{
  background-color:var(--sys-violet-decor-hovered, #e1d0f7);
}
.tag[data-appearance=violet] .tagButton:active{
  background-color:var(--sys-violet-decor-activated, #ceb7e7);
}
.tag[data-appearance=pink]{
  background-color:var(--sys-pink-decor-default, #f5d9e1);
}
.tag[data-appearance=pink] .label{
  overflow:hidden;
  color:var(--sys-pink-text-support, #ae5e80);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tag[data-appearance=pink] .tagButton{
  color:var(--sys-pink-text-light, #db85a2);
}
.tag[data-appearance=pink] .tagButton:focus, .tag[data-appearance=pink] .tagButton:hover, .tag[data-appearance=pink] .tagButton:active{
  color:var(--sys-pink-text-main, #754158);
}
.tag[data-appearance=pink] .tagButton:focus, .tag[data-appearance=pink] .tagButton:hover{
  background-color:var(--sys-pink-decor-hovered, #f5c9d6);
}
.tag[data-appearance=pink] .tagButton:active{
  background-color:var(--sys-pink-decor-activated, #e8b1c1);
}