:host {
  /* scw element */
  position: relative;
  box-sizing: border-box;
  --margin-right: initial;
  --margin-bottom: initial;
  --gap-h-int: initial;
  --gap-v-int: initial;
  margin-right: var(--margin-right, var(--gap-h-int, initial));
  margin-bottom: var(--margin-bottom, var(--gap-v-int, initial));
  display: block;
}

:host([warning]) {
  outline: 2px solid red !important;
}
:host {
  display: block;
}

.scw-tag {
  background-color: var(--scw-color-grey-09);
  border-radius: 30px 30px 30px 30px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding-left: var(--scw-spacing-1);
  padding-right: var(--scw-spacing-1);
  padding-top: calc(var(--scw-spacing-1) * 0.5);
  padding-bottom: calc(var(--scw-spacing-1) * 0.5);
  gap: 5px;
}
.scw-tag > *:not(:last-child) {
  margin-right: calc(var(--scw-spacing-1) * 0.5);
  --margin-right: calc( var( --scw-spacing-1 ) * 0.5 );
}
.scw-tag > *:not(:last-child) {
  margin-right: 0;
}
.scw-tag .label {
  text-align: CENTER;
  font: var(--scw-type-text-semibold-02-font);
  color: var(--scw-color-grey-02);
  line-height: normal !important;
}
.scw-tag scw-icon {
  width: 15px;
  height: 15px;
  --scw-icon-color: var(--scw-color-grey-02);
}

:host([href]) .scw-tag:hover {
  background-color: var(--scw-color-grey-08);
  border-radius: 30px 30px 30px 30px;
}
:host([href]) .scw-tag:hover .label {
  text-align: CENTER;
  font: var(--scw-type-text-semibold-02-font);
  color: var(--scw-color-grey-02);
}

:host([selected]) .scw-tag {
  background-color: var(--scw-color-grey-03);
  border-radius: 30px 30px 30px 30px;
}
:host([selected]) .scw-tag .label {
  text-align: CENTER;
  font: var(--scw-type-text-semibold-02-font);
  color: var(--scw-color-grey-10);
}
:host([selected]) .scw-tag scw-icon {
  width: 15px;
  height: 15px;
  --scw-icon-color: var(--scw-color-grey-10);
}

:host([href][selected]) .scw-tag:hover {
  background-color: var(--scw-color-grey-02);
  border-radius: 30px 30px 30px 30px;
}
:host([href][selected]) .scw-tag:hover .label {
  text-align: CENTER;
  font: var(--scw-type-text-semibold-02-font);
  color: var(--scw-color-grey-10);
}
:host([href][selected]) .scw-tag:hover scw-icon {
  width: 15px;
  height: 15px;
  --scw-icon-color: var(--scw-color-grey-10);
}

:host([primary]) .scw-tag {
  background-color: var(--scw-color-primary-09);
  border-radius: 30px 30px 30px 30px;
}

:host([href][primary]) .scw-tag:hover {
  background-color: var(--scw-color-primary-08);
  border-radius: 30px 30px 30px 30px;
}

:host([selected][primary]) .scw-tag {
  background-color: var(--scw-color-primary-02);
  border-radius: 30px 30px 30px 30px;
}

:host([href][selected][primary]) .scw-tag:hover {
  background-color: var(--scw-color-primary-01);
  border-radius: 30px 30px 30px 30px;
}

:host([size=small]) .scw-tag .label {
  font: var(--scw-type-text-semibold-01-font);
}
:host([size=small]) .scw-tag scw-icon {
  width: 12px;
  height: 12px;
}

:host([href][size=small]) .scw-tag:hover .label {
  font: var(--scw-type-text-semibold-01-font);
}