: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 {
  outline: none;
  user-select: none;
  display: inline-flex;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
:host svg {
  box-sizing: border-box;
  vertical-align: top;
  width: 100%;
  height: 100%;
}

:host {
  width: 30px;
  height: 30px;
}
:host svg, :host svg * {
  fill: var(--scw-icon-color, var(--scw-theme-body-color, var(--scw-color-grey-02)));
}
:host svg .color-00,
:host svg .color-00 * {
  fill: var(--scw-theme-color-00, var(--scw-color-grey-00));
}
:host svg .color-01,
:host svg .color-01 * {
  fill: var(--scw-theme-color-01, var(--scw-color-grey-01));
}
:host svg .color-02,
:host svg .color-02 * {
  fill: var(--scw-theme-color-02, var(--scw-color-grey-02));
}
:host svg .color-03,
:host svg .color-03 * {
  fill: var(--scw-theme-color-03, var(--scw-color-grey-03));
}
:host svg .color-04,
:host svg .color-04 * {
  fill: var(--scw-theme-color-04, var(--scw-color-grey-04));
}
:host svg .color-05,
:host svg .color-05 *,
:host svg .color,
:host svg .color * {
  fill: var(--scw-theme-color-05, var(--scw-color-grey-05));
}
:host svg .color-06,
:host svg .color-06 * {
  fill: var(--scw-theme-color-06, var(--scw-color-grey-06));
}
:host svg .color-07,
:host svg .color-07 * {
  fill: var(--scw-theme-color-07, var(--scw-color-grey-07));
}
:host svg .color-08,
:host svg .color-08 * {
  fill: var(--scw-theme-color-08, var(--scw-color-grey-08));
}
:host svg .color-09,
:host svg .color-09 * {
  fill: var(--scw-theme-color-09, var(--scw-color-grey-09));
}
:host svg .color-092,
:host svg .color-092 * {
  fill: var(--scw-theme-color-092, var(--scw-color-grey-09));
}
:host svg .color-095,
:host svg .color-095 * {
  fill: var(--scw-theme-color-095, var(--scw-color-grey-09));
}
:host svg .color-10,
:host svg .color-10 * {
  fill: var(--scw-theme-color-10, var(--scw-color-grey-10));
}

:host([size="10"]) {
  width: 10px;
  height: 10px;
}

:host([size="15"]) {
  width: 15px;
  height: 15px;
}

:host([size="20"]) {
  width: 20px;
  height: 20px;
}

:host([size="30"]) {
  width: 30px;
  height: 30px;
}

:host([size="40"]) {
  width: 40px;
  height: 40px;
}

:host([size="50"]) {
  width: 50px;
  height: 50px;
}

:host([size="60"]) {
  width: 60px;
  height: 60px;
}

:host([size="70"]) {
  width: 70px;
  height: 70px;
}

:host([size="80"]) {
  width: 80px;
  height: 80px;
}

:host([size="90"]) {
  width: 90px;
  height: 90px;
}

:host([size="100"]) {
  width: 100px;
  height: 100px;
}

:host([animation=spin]) {
  animation: spin 500ms linear 0ms infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}