'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var index = require('../../utils/index.js');
var styles = require('../../utils/styles.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

function getSpinnerVariant(variant) {
    switch (variant) {
        case 'inverse':
            return styled.css `
        border-color: ${index.transparentizeAliasColor(0.35, 'contentInverse')};
        border-top-color: ${index.getColorAlias('contentInverse')};
      `;
        case 'secondary':
            return styled.css `
        border-color: ${index.transparentizeAliasColor(0.35, 'contentInteractiveSecondary')};
        border-top-color: ${index.getColorAlias('contentInteractiveSecondary')};
      `;
        case 'brand':
        default:
            return styled.css `
        border-color: ${index.transparentizeAliasColor(0.35, 'contentBrand')};
        border-top-color: ${index.getColorAlias('contentBrand')};
      `;
    }
}
function getSpinnerSize(size) {
    switch (size) {
        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 Loader = styled__default['default'].div `
  animation: ${styles.spin} 0.8s infinite linear;
  border-radius: ${(props) => props.theme.radius.roundedE};
  ${(props) => {
    const { borderSize, width } = getSpinnerSize(props.size);
    return styled.css `
      border: ${borderSize}px solid;
      width: ${width}px;
      height: ${width}px;
      ${getSpinnerVariant(props.variant)}
    `;
}};
`;

exports.Loader = Loader;
