import React__default from 'react';
import { B as Button } from './index-96c62ad5.js';
import { u as useTranslations } from './index-960c3169.js';
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';

const StyledLoading = styled.div `
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  button {
    position: relative;
  }
`;
const circle = keyframes `
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
`;
styled.div `
  display: flex;
  width: fit-content;
  width: -moz-fit-content;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background: white;
  border-radius: ${theme.borderRadius};
  box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
    -2px 2px 5px rgba(67, 86, 100, 0.123689);
  .loading-spinner {
    width: 24px;
    height: 24px;
    margin-bottom: 0.5rem;
    animation: ${circle} 1.2s linear infinite;
  }
  &[data-is-marrybaby='true'] {
    box-shadow: none;
  }
`;

const Loading = ({ className, size = 'md' }) => {
    const { t } = useTranslations();
    return (React__default.createElement(StyledLoading, { className: className },
        React__default.createElement(Button, { size: size, color: "transparent", isLoading: true }, t('loading'))));
};

export { Loading as L };
