@layer components {
  .rs-loader {
    --rs-loader-size: var(--rs-unit-x6);
    --rs-loader-stroke: 3px;
    --rs-loader-color: var(--rs-color-border-primary);
    position: relative;
    display: inline-block;
    inline-size: var(--rs-loader-size);
    block-size: var(--rs-loader-size);
    color: var(--rs-loader-color);
    animation: rs-loader-spin 2.2s infinite
      cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }

  .rs-loader[data-size="small"] {
    --rs-loader-size: var(--rs-unit-x4);
    --rs-loader-stroke: 2px;
  }

  .rs-loader[data-size="large"] {
    --rs-loader-size: var(--rs-unit-x10);
    --rs-loader-stroke: 5px;
  }

  .rs-loader[data-tone="positive"] {
    --rs-loader-color: var(--rs-color-border-positive);
  }

  .rs-loader[data-tone="critical"] {
    --rs-loader-color: var(--rs-color-border-critical);
  }

  .rs-loader::before,
  .rs-loader::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset-block-start: 50%;
    inline-size: var(--rs-loader-stroke);
    block-size: var(--rs-loader-stroke);
    border-radius: 50%;
    background: currentcolor;
    transform: translateY(-50%);
  }

  .rs-loader::before {
    inset-inline-start: 0;
  }

  .rs-loader::after {
    inset-inline-end: 0;
  }

  .rs-loader__ring::before,
  .rs-loader__ring::after {
    content: "";
    position: absolute;
    inset: 0;
    border: var(--rs-loader-stroke) solid currentcolor;
    border-radius: 50%;
  }

  .rs-loader__ring::before {
    opacity: 0.28;
  }

  .rs-loader__ring::after {
    border-block-end-color: transparent;
    border-inline-start-color: transparent;
    transform: rotate(-45deg);
  }
}