/*
 * SPDX-FileCopyrightText: 2024 Siemens AG
 *
 * SPDX-License-Identifier: MIT
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/* Dimensions */
/* Font sizes */
/* Line heights */
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
:host {
  display: inline-block;
  position: relative;
  height: 2rem;
  max-height: 2rem;
  margin-left: 0.25rem;
}
:host *,
:host *::after,
:host *::before {
  box-sizing: border-box;
}
:host ::-webkit-scrollbar-button {
  display: none;
}
@-moz-document url-prefix() {
  :host * {
    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
    scrollbar-width: thin;
  }
}
:host {
  /* width */
}
:host ::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}
:host {
  /* Track */
}
:host ::-webkit-scrollbar-track {
  border-radius: 5px;
  background: var(--theme-scrollbar-track--background);
}
:host ::-webkit-scrollbar-track:hover {
  background: var(--theme-scrollbar-track--background--hover);
}
:host {
  /* Handle */
}
:host ::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: var(--theme-scrollbar-thumb--background);
}
:host {
  /* Handle on hover */
}
:host ::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb--background--hover);
}
:host ::-webkit-scrollbar-corner {
  display: none;
}

:host(.inactive) {
  pointer-events: none;
}

.container {
  display: inline-flex;
  width: inherit;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  align-items: center;
  border-radius: 100px;
  padding: 0.5rem;
  vertical-align: top;
  height: 2rem;
  max-height: 2rem;
  cursor: pointer;
}
.container .content-wrapper {
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.container .with-icon {
  margin-right: 0.25rem;
}
.container .close-button-container {
  display: inline-flex;
  margin-left: auto;
  padding-left: 0.5rem;
}
.container .slot-container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container.centerContent .content-wrapper {
  justify-content: center;
  text-align: center;
}

.container.outline.icon {
  padding-left: calc(0.75rem - 1px);
}
.container.outline.icon.alarm .with-icon {
  color: var(--theme-color-alarm);
}
.container.outline.icon.critical .with-icon {
  color: var(--theme-color-critical);
}
.container.outline.icon.warning .with-icon {
  color: var(--theme-color-warning-text);
}
.container.outline.icon.info .with-icon {
  color: var(--theme-color-info);
}
.container.outline.icon.neutral .with-icon {
  color: var(--theme-color-neutral);
}
.container.outline.icon.success .with-icon {
  color: var(--theme-color-success);
}
.container.outline:not(.icon) {
  padding-left: calc(0.5rem - 1px);
}
.container.outline.closable:not(.inactive) {
  padding-right: calc(0.25rem - 1px);
}
.container.outline.closable.inactive, .container.outline:not(.closable) {
  padding-right: calc(0.5rem - 1px);
}
.container.outline.icon:not(.closable) {
  padding-right: calc(0.75rem - 1px);
}
.container:not(.outline).icon {
  padding-left: 0.75rem;
}
.container:not(.outline):not(.icon) {
  padding-left: 0.5rem;
}
.container:not(.outline).closable:not(.inactive) {
  padding-right: 0.25rem;
}
.container:not(.outline).closable.inactive {
  padding-right: 0.5rem;
}
.container:not(.outline):not(.closable).icon {
  padding-right: 0.75rem;
}
.container:not(.outline):not(.closable):not(.icon) {
  padding-right: 0.5rem;
}

.container.primary {
  background-color: var(--theme-color-primary);
  color: var(--theme-chip-primary--color);
}
.container.primary .close-button {
  color: var(--theme-chip-primary--color);
  --ix-icon-button-color: var(--theme-chip-primary--color);
  pointer-events: auto;
}
.container.primary:hover {
  background-color: var(--theme-chip-primary--background--hover);
}
.container.primary:active {
  background-color: var(--theme-chip-primary--background--active);
}
.container.primary:focus-visible {
  outline: 1px solid #199fff;
  outline-offset: var(--theme-btn--focus--outline-offset);
}

.container.primary.outline {
  color: var(--theme-chip-outline--color);
  background-color: var(--theme-chip-primary-outline--background);
  border: solid 1px var(--theme-chip-primary-outline--border-color);
}
.container.primary.outline .close-button {
  color: var(--theme-chip-outline--color);
  --ix-icon-button-color: var(--theme-chip-outline--color);
}
.container.primary.outline .with-icon {
  color: var(--theme-color-primary);
}
.container.primary.outline:hover {
  background-color: var(--theme-chip-primary-outline--background--hover);
}
.container.primary.outline:active {
  background-color: var(--theme-chip-primary-outline--background--active);
}

.container.outline {
  border-width: 1px;
  border-style: solid;
}

.container.alarm {
  color: var(--theme-color-alarm--contrast);
}
.container.alarm:hover::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  left: 0;
  border-radius: 100px;
  pointer-events: none;
}
.container.alarm.active::after, .container.alarm:active::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  left: 0;
  border-radius: 100px;
  pointer-events: none;
}
.container.alarm:not(.outline) {
  background-color: var(--theme-color-alarm);
}
.container.alarm:not(.outline) .close-button {
  color: var(--theme-color-alarm--contrast);
  --ix-icon-button-color: var(--theme-color-alarm--contrast);
}
.container.alarm:not(.outline):hover::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.05);
}
.container.alarm:not(.outline).active::after, .container.alarm:not(.outline):active::after {
  background-color: rgba(0, 0, 0, 0.1);
}
.container.alarm.outline {
  color: var(--theme-chip-outline--color);
  background-color: var(--theme-chip-outline--background);
  border-color: var(--theme-color-alarm);
}
.container.alarm.outline:hover::after {
  display: none;
}
.container.alarm.outline:hover {
  background-color: var(--theme-chip-outline--background--hover);
}
.container.alarm.outline.active::after, .container.alarm.outline:active::after {
  display: none;
}
.container.alarm.outline.active, .container.alarm.outline:active {
  background-color: var(--theme-chip-outline--background--active);
}
.container.alarm:focus-visible {
  outline: 1px solid #199fff;
  outline-offset: var(--theme-btn--focus--outline-offset);
}

.container.critical {
  color: var(--theme-color-critical--contrast);
}
.container.critical:hover::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  left: 0;
  border-radius: 100px;
  pointer-events: none;
}
.container.critical.active::after, .container.critical:active::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  left: 0;
  border-radius: 100px;
  pointer-events: none;
}
.container.critical:not(.outline) {
  background-color: var(--theme-color-critical);
}
.container.critical:not(.outline) .close-button {
  color: var(--theme-color-critical--contrast);
  --ix-icon-button-color: var(--theme-color-critical--contrast);
}
.container.critical:not(.outline):hover::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.05);
}
.container.critical:not(.outline).active::after, .container.critical:not(.outline):active::after {
  background-color: rgba(0, 0, 0, 0.1);
}
.container.critical.outline {
  color: var(--theme-chip-outline--color);
  background-color: var(--theme-chip-outline--background);
  border-color: var(--theme-color-critical);
}
.container.critical.outline:hover::after {
  display: none;
}
.container.critical.outline:hover {
  background-color: var(--theme-chip-outline--background--hover);
}
.container.critical.outline.active::after, .container.critical.outline:active::after {
  display: none;
}
.container.critical.outline.active, .container.critical.outline:active {
  background-color: var(--theme-chip-outline--background--active);
}
.container.critical:focus-visible {
  outline: 1px solid #199fff;
  outline-offset: var(--theme-btn--focus--outline-offset);
}

.container.warning {
  color: var(--theme-color-warning--contrast);
}
.container.warning:hover::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  left: 0;
  border-radius: 100px;
  pointer-events: none;
}
.container.warning.active::after, .container.warning:active::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  left: 0;
  border-radius: 100px;
  pointer-events: none;
}
.container.warning:not(.outline) {
  background-color: var(--theme-color-warning);
}
.container.warning:not(.outline) .close-button {
  color: var(--theme-color-warning--contrast);
  --ix-icon-button-color: var(--theme-color-warning--contrast);
}
.container.warning:not(.outline):hover::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.05);
}
.container.warning:not(.outline).active::after, .container.warning:not(.outline):active::after {
  background-color: rgba(0, 0, 0, 0.1);
}
.container.warning.outline {
  color: var(--theme-chip-outline--color);
  background-color: var(--theme-chip-outline--background);
  border-color: var(--theme-color-warning);
}
.container.warning.outline:hover::after {
  display: none;
}
.container.warning.outline:hover {
  background-color: var(--theme-chip-outline--background--hover);
}
.container.warning.outline.active::after, .container.warning.outline:active::after {
  display: none;
}
.container.warning.outline.active, .container.warning.outline:active {
  background-color: var(--theme-chip-outline--background--active);
}
.container.warning:focus-visible {
  outline: 1px solid #199fff;
  outline-offset: var(--theme-btn--focus--outline-offset);
}

.container.info {
  color: var(--theme-color-info--contrast);
}
.container.info:hover::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  left: 0;
  border-radius: 100px;
  pointer-events: none;
}
.container.info.active::after, .container.info:active::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  left: 0;
  border-radius: 100px;
  pointer-events: none;
}
.container.info:not(.outline) {
  background-color: var(--theme-color-info);
}
.container.info:not(.outline) .close-button {
  color: var(--theme-color-info--contrast);
  --ix-icon-button-color: var(--theme-color-info--contrast);
}
.container.info:not(.outline):hover::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.05);
}
.container.info:not(.outline).active::after, .container.info:not(.outline):active::after {
  background-color: rgba(0, 0, 0, 0.1);
}
.container.info.outline {
  color: var(--theme-chip-outline--color);
  background-color: var(--theme-chip-outline--background);
  border-color: var(--theme-color-info);
}
.container.info.outline:hover::after {
  display: none;
}
.container.info.outline:hover {
  background-color: var(--theme-chip-outline--background--hover);
}
.container.info.outline.active::after, .container.info.outline:active::after {
  display: none;
}
.container.info.outline.active, .container.info.outline:active {
  background-color: var(--theme-chip-outline--background--active);
}
.container.info:focus-visible {
  outline: 1px solid #199fff;
  outline-offset: var(--theme-btn--focus--outline-offset);
}

.container.neutral {
  color: var(--theme-color-neutral--contrast);
}
.container.neutral:hover::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  left: 0;
  border-radius: 100px;
  pointer-events: none;
}
.container.neutral.active::after, .container.neutral:active::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  left: 0;
  border-radius: 100px;
  pointer-events: none;
}
.container.neutral:not(.outline) {
  background-color: var(--theme-color-neutral);
}
.container.neutral:not(.outline) .close-button {
  color: var(--theme-color-neutral--contrast);
  --ix-icon-button-color: var(--theme-color-neutral--contrast);
}
.container.neutral:not(.outline):hover::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.05);
}
.container.neutral:not(.outline).active::after, .container.neutral:not(.outline):active::after {
  background-color: rgba(0, 0, 0, 0.1);
}
.container.neutral.outline {
  color: var(--theme-chip-outline--color);
  background-color: var(--theme-chip-outline--background);
  border-color: var(--theme-color-neutral);
}
.container.neutral.outline:hover::after {
  display: none;
}
.container.neutral.outline:hover {
  background-color: var(--theme-chip-outline--background--hover);
}
.container.neutral.outline.active::after, .container.neutral.outline:active::after {
  display: none;
}
.container.neutral.outline.active, .container.neutral.outline:active {
  background-color: var(--theme-chip-outline--background--active);
}
.container.neutral:focus-visible {
  outline: 1px solid #199fff;
  outline-offset: var(--theme-btn--focus--outline-offset);
}

.container.success {
  color: var(--theme-color-success--contrast);
}
.container.success:hover::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  left: 0;
  border-radius: 100px;
  pointer-events: none;
}
.container.success.active::after, .container.success:active::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  left: 0;
  border-radius: 100px;
  pointer-events: none;
}
.container.success:not(.outline) {
  background-color: var(--theme-color-success);
}
.container.success:not(.outline) .close-button {
  color: var(--theme-color-success--contrast);
  --ix-icon-button-color: var(--theme-color-success--contrast);
}
.container.success:not(.outline):hover::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.05);
}
.container.success:not(.outline).active::after, .container.success:not(.outline):active::after {
  background-color: rgba(0, 0, 0, 0.1);
}
.container.success.outline {
  color: var(--theme-chip-outline--color);
  background-color: var(--theme-chip-outline--background);
  border-color: var(--theme-color-success);
}
.container.success.outline:hover::after {
  display: none;
}
.container.success.outline:hover {
  background-color: var(--theme-chip-outline--background--hover);
}
.container.success.outline.active::after, .container.success.outline:active::after {
  display: none;
}
.container.success.outline.active, .container.success.outline:active {
  background-color: var(--theme-chip-outline--background--active);
}
.container.success:focus-visible {
  outline: 1px solid #199fff;
  outline-offset: var(--theme-btn--focus--outline-offset);
}