.spinner {
  /* Public API (customizable component options) */
  --_op-spinner-indicator-color: var(--op-color-primary-base);
  --_op-spinner-track-color: var(--op-color-neutral-plus-four);
  --_op-spinner-track-width-x-small: var(--op-border-width);
  --_op-spinner-track-width-small: var(--op-border-width-large);
  --_op-spinner-track-width-medium: calc(var(--op-border-width-large) + var(--op-border-width));
  --_op-spinner-track-width-large: var(--op-border-width-x-large);
  --_op-spinner-diameter-x-small: calc(6 * var(--op-size-unit)); /* 24px */
  --_op-spinner-diameter-small: calc(10 * var(--op-size-unit)); /* 40px */
  --_op-spinner-diameter-medium: calc(15 * var(--op-size-unit)); /* 60px */
  --_op-spinner-diameter-large: calc(20 * var(--op-size-unit)); /* 80px */
  --_op-spinner-animation-duration: 0.8s;
  --_op-spinner-animation-timing-function: linear;

  /* Private API (component option defaults) */
  --__op-spinner-diameter: var(--_op-spinner-diameter-large);
  --__op-spinner-track-width: var(--_op-spinner-track-width-large);

  width: var(--__op-spinner-diameter);
  height: var(--__op-spinner-diameter);
  border: var(--__op-spinner-track-width) solid var(--_op-spinner-track-color);
  border-radius: var(--__op-spinner-diameter);
  border-top-color: var(--_op-spinner-indicator-color);
  animation: spinner var(--_op-spinner-animation-duration) var(--_op-spinner-animation-timing-function) infinite;

  &.spinner--x-small {
    --__op-spinner-diameter: var(--_op-spinner-diameter-x-small);
    --__op-spinner-track-width: var(--_op-spinner-track-width-x-small);
  }

  &.spinner--small {
    --__op-spinner-diameter: var(--_op-spinner-diameter-small);
    --__op-spinner-track-width: var(--_op-spinner-track-width-small);
  }

  &.spinner--medium {
    --__op-spinner-diameter: var(--_op-spinner-diameter-medium);
    --__op-spinner-track-width: var(--_op-spinner-track-width-medium);
  }

  &.spinner--large {
    --__op-spinner-diameter: var(--_op-spinner-diameter-large);
    --__op-spinner-track-width: var(--_op-spinner-track-width-large);
  }
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}