/*******
* ICONS
********/
/*******
* BUTTONS
********/
/*******
* SCROLLBAR
********/
/*******
* FORM
********/
/*******
* A11Y
********/
:host(.ids-tag) {
  display: inline-block;
  border-radius: var(--IDS-TAG__BORDER-RADIUS);
}

.ids-tag.ids-tag--clickable {
  padding: 0 !important;
}
.ids-tag.ids-tag--clickable ::slotted(button) {
  background: none;
  border: none;
  min-width: 1.5rem;
  min-height: 1.5rem;
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: var(--IDS-TAG__BORDER-RADIUS);
  padding: var(--IDS-TAG__PADDING);
  text-align: left;
  width: 100%;
  height: 100%;
}
.ids-tag.ids-tag--clickable ::slotted(button:focus-visible):focus-visible {
  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
}
.ids-tag.ids-tag--clickable ::slotted(button:hover) {
  color: var(--IDS-TAG--INTERACTIVE-HOVER__COLOR);
  background-color: var(--IDS-TAG--INTERACTIVE-HOVER__BACKGROUND-COLOR);
}
.ids-tag.ids-tag--clickable ::slotted(button:active) {
  color: var(--IDS-TAG--INTERACTIVE-ACTIVE__COLOR);
  background-color: var(--IDS-TAG--INTERACTIVE-ACTIVE__BACKGROUND-COLOR);
}