import d, { css as e } from "styled-components";
import { transparentizeAliasColor as t, getColorAlias as o } from "../../utils/index.js";
import { spin as a } from "../../utils/styles.js";
function c(r) {
  switch (r) {
    case "inverse":
      return e`
        border-color: ${t(0.35, "contentInverse")};
        border-top-color: ${o("contentInverse")};
      `;
    case "secondary":
      return e`
        border-color: ${t(
        0.35,
        "contentInteractiveSecondary"
      )};
        border-top-color: ${o("contentInteractiveSecondary")};
      `;
    case "brand":
    default:
      return e`
        border-color: ${t(0.35, "contentBrand")};
        border-top-color: ${o("contentBrand")};
      `;
  }
}
function s(r) {
  switch (r) {
    case "XS":
      return { borderSize: 2, width: 16 };
    case "S":
      return { borderSize: 2.5, width: 20 };
    case "L":
      return { borderSize: 4, width: 32 };
    case "XL":
      return { borderSize: 6, width: 48 };
    case "M":
    default:
      return { borderSize: 3, width: 24 };
  }
}
const S = d.div`
  animation: ${a} 0.8s infinite linear;
  border-radius: ${(r) => r.theme.radius.roundedE};
  ${(r) => {
  const { borderSize: i, width: n } = s(r.size);
  return e`
      border: ${i}px solid;
      width: ${n}px;
      height: ${n}px;
      ${c(r.variant)}
    `;
}};
`;
export {
  S as Loader
};
