:host {
  display: block;
}

.wb-icon {
  line-height: var(--wb-icon__line-height--override, var(--wb-icon__line-height, var(--wb-ds-line-height--default, inherit)));
}
.wb-icon__svg {
  display: block;
  width: var(--wb-icon__size--override, var(--wb-icon__size, 1em));
  height: var(--wb-icon__size--override, var(--wb-icon__size, 1em));
  fill: var(--wb-icon__fill--override, var(--wb-icon__fill, currentcolor));
  filter: var(--wb-icon__filter--override, var(--wb-icon__filter, none));
}
.wb-icon--rotate svg {
  
  transition: var(--wb-icon-rotate__transition--override, var(--wb-icon-rotate__transition, transform var(--wb-icon-rotate__animation-duration--override, var(--wb-icon-rotate__animation-duration, var(--wb-ds-animation-duration--fast, var(--wb-ds-animation-duration--default, 0.25s)))) ease));
  
  transform: rotate(var(--wb-icon__rotate));
}
.wb-icon--loading svg {
  
  animation: wb-icon-loading var(--wb-icon-loading__animation-duration--override, var(--wb-icon-loading__animation-duration, var(--wb-ds-animation-duration--slow, var(--wb-ds-animation-duration--default, 1s)))) linear infinite;
  
  animation-timing-function: var(--wb-icon__timing-function, linear);
}

@keyframes wb-icon-loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}