:root {
  --animate-duration: 1s;
}

sl-icons {
  display: block;
  width: fit-content;
}
sl-icons .icons-container {
  position: relative;
  justify-content: center;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
sl-icons .icons-container.with-background {
  background-color: var(--sdx-color-surface-ui-2);
}
sl-icons .red-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid white;
}
sl-icons .x-small-icon-container {
  height: 24px;
  width: 24px;
}
sl-icons .small-icon-container {
  height: 32px;
  width: 32px;
}
sl-icons .medium-icon-container {
  height: 40px;
  width: 40px;
}
sl-icons .large-icon-container {
  height: 48px;
  width: 48px;
}
sl-icons .x-large-icon-container {
  height: 72px;
  width: 72px;
}
sl-icons .xx-large-icon-container {
  height: 100px;
  width: 100px;
}
sl-icons .xxx-large-icon-container {
  height: 128px;
  width: 128px;
}
sl-icons .x-small-icon {
  font-size: 24px;
}
sl-icons .small-icon {
  font-size: 32px;
}
sl-icons .medium-icon {
  font-size: 40px;
}
sl-icons .large-icon {
  font-size: 48px;
}
sl-icons .x-large-icon {
  font-size: 72px;
}
sl-icons .xx-large-icon {
  font-size: 100px;
}
sl-icons .xxx-large-icon {
  font-size: 128px;
}