/* Spinner component (templates/components/spinner.html); the macro sets the three custom properties. */
.spinner {
  width: var(--spinner-size, 1em);
  height: var(--spinner-size, 1em);
  border: calc(var(--spinner-size, 1em) * 5 / 48) solid var(--spinner-color, currentColor);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  vertical-align: middle;
  animation: spinner-rotation var(--spinner-speed, 1s) linear infinite;
}
/* display: inline-block above would otherwise override the hidden attribute. */
.spinner[hidden] { display: none; }

@keyframes spinner-rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}