@use '@xui/theme-core' as core;

@mixin theme() {
  .x-spinner {
    width: 1em;
    aspect-ratio: 1;
    overflow: hidden;

    box-sizing: border-box;
    border-radius: 50%;
    border-style: solid;
    border-width: 0.125em;

    animation: x-spinner-spin 0.8s infinite linear;

    @each $name in core.$color-variations {
      &-#{$name} {
        border-color: var(--color-#{$name}-default)
          transparent
          var(--color-#{$name}-default)
          var(--color-#{$name}-default);
      }
    }
  }

  @keyframes x-spinner-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}