@define refs {
  name: spinner;
}

@define props {
  size: 25px;
  bdSize: 5px;
  bg: #f2f2f2;
  bgDark: #5f5f5f;
  bgActive: #07f;
}

@alga {refs.name} {
  .{refs.name} {
    ref: display-block borderRadius-50pct;
    ref: marginRight-0px marginBottom-0px;
    ref-height: {props.size};
    ref-width: {props.size};
    ref-marginTop: div({{props.size}},2);
    ref-marginLeft: div({{props.size}},2);
    ref-border: {props.bdSize} solid {props.bg};
    ref-borderTop: {props.bdSize} solid {props.bgActive};
    ref-animation: spin 1s infinite linear;
    prefers-dark: borderColor-{props.bgDark} borderTopColor-{props.bgActive};
    prefers-toDark: borderColor-{props.bgDark} borderTopColor-{props.bgActive};
    prefers-toLight: borderColor-{props.bg} borderTopColor-{props.bgActive};
  }
  
  @keyframes spin {
    from {
      ref-transform: rotate(0deg);
    }
    to {
      ref-transform: rotate(359deg);
    }
  }
}