:host {
  display: inline-block;
}

.chip {
  position: relative;
}

.chip__wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  border-radius: 9999px;
  background: #eeeded;
  cursor: pointer;
  font-family: var(--ifx-font-family);
  font: 400 0.875rem/1.25rem "Source Sans 3";
}
.chip__wrapper .icon__wrapper {
  display: flex;
}
.chip__wrapper.outlined, .chip__wrapper.filled-dark, .chip__wrapper.filled-light {
  outline: 2px solid transparent;
}
.chip__wrapper.outlined:focus-visible, .chip__wrapper.filled-dark:focus-visible, .chip__wrapper.filled-light:focus-visible {
  outline: 2px solid #0a8276;
  outline-offset: 2px;
}
.chip__wrapper.outlined.chip__wrapper--opened .wrapper__open-button, .chip__wrapper.filled-dark.chip__wrapper--opened .wrapper__open-button, .chip__wrapper.filled-light.chip__wrapper--opened .wrapper__open-button {
  transform: rotate(-180deg);
}
.chip__wrapper.outlined.chip__wrapper--selected .wrapper__label .label__selected-options, .chip__wrapper.filled-dark.chip__wrapper--selected .wrapper__label .label__selected-options, .chip__wrapper.filled-light.chip__wrapper--selected .wrapper__label .label__selected-options {
  font: 400 0.875rem/1.25rem "Source Sans 3";
  font-family: var(--ifx-font-family);
}
.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only), .chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only) {
  background-color: #0a8276;
  color: white;
}
.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only):hover, .chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only):hover {
  background-color: #08665c;
}
.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only):hover.disabled, .chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only):hover.disabled {
  background-color: #0a8276;
}
.chip__wrapper.outlined {
  border: 1px solid transparent;
}
.chip__wrapper.outlined:hover:not(.read-only) {
  background-color: #f7f7f7;
}
.chip__wrapper.outlined:active:not(.read-only) {
  background-color: #bfbbbb;
}
.chip__wrapper.outlined.chip__wrapper--opened {
  border: 1px solid #0a8276;
}
.chip__wrapper.outlined.chip__wrapper--selected {
  outline: 3px solid #0a8276;
  border: 1px solid transparent;
  background-color: #eeeded;
}
.chip__wrapper.outlined.chip__wrapper--selected:focus-visible {
  outline-offset: 0px;
}
.chip__wrapper.outlined.chip__wrapper--selected:hover:not(.read-only) {
  outline-color: #08665c;
}
.chip__wrapper.outlined.chip__wrapper--selected.read-only {
  outline: none;
}
.chip__wrapper.outlined.chip__wrapper--selected.read-only.disabled {
  border: 1px solid #bfbbbb;
}
.chip__wrapper.outlined.disabled {
  outline: none;
  color: #bfbbbb;
  border: 1px solid #bfbbbb;
}
.chip__wrapper.outlined.disabled:hover {
  outline: none;
  border-color: #bfbbbb;
  background-color: white;
}
.chip__wrapper.outlined.read-only:focus-visible {
  outline: 2px solid #0a8276;
  outline-offset: 2px;
}
.chip__wrapper.outlined.read-only.disabled {
  border: 1px solid #bfbbbb;
}
.chip__wrapper.filled-dark {
  background-color: #3c3a39;
  color: white;
}
.chip__wrapper.filled-dark:hover:not(.chip__wrapper--selected, .disabled, .read-only) {
  background-color: #575352;
}
.chip__wrapper.filled-dark:active:not(.chip__wrapper--selected, .disabled, .read-only) {
  background-color: #8d8786;
  color: black;
}
.chip__wrapper.filled-dark.disabled {
  outline: none;
  color: #bfbbbb;
}
.chip__wrapper.filled-dark.disabled:hover:not(.chip__wrapper--selected) {
  background-color: #3c3a39;
}
.chip__wrapper.filled-light {
  background-color: #eeeded;
}
.chip__wrapper.filled-light:hover:not(.read-only) {
  background-color: #bfbbbb;
}
.chip__wrapper.filled-light:active:not(.read-only) {
  background-color: #8d8786;
}
.chip__wrapper.filled-light.disabled {
  outline: none;
  color: #bfbbbb;
}
.chip__wrapper.filled-light.disabled:hover:not(.chip__wrapper--selected) {
  background-color: #eeeded;
}
.chip__wrapper.filled-light.chip__wrapper--selected.read-only.disabled {
  border: none;
}
.chip__wrapper.filled-light.read-only.disabled {
  border: none;
}
.chip__wrapper.chip__wrapper--small {
  padding: 4px 8px;
  height: 24px;
}
.chip__wrapper.chip__wrapper--medium {
  padding: 4px 12px;
  height: 28px;
}
.chip__wrapper.chip__wrapper--large {
  padding: 8px 12px;
  height: 36px;
}

.wrapper__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ifx-font-family);
}
.wrapper__label .label__selected-options {
  font: 600 0.875rem/1.25rem "Source Sans 3";
  font-family: var(--ifx-font-family);
}

.wrapper__open-button {
  display: flex;
  align-items: center;
}

.wrapper__unselect-button {
  display: flex;
  align-items: center;
}

.chip__dropdown {
  position: absolute;
  z-index: 1;
  box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);
  border: 1px solid #eeeded;
  border-radius: 1px;
  padding: 8px 0;
  min-width: 222px;
  background-color: #ffffff;
  font-family: var(--ifx-font-family);
}