import { rgba } from 'polished';
import styled, { css } from 'styled-components';
import { calculateFontSize, readableColor } from '../../styles';
import { defaultThemeProp } from '../../theme';
import { tryCatch } from '../../utils';
import Backdrop from '../Backdrop';
import Flex from '../Flex';
export const StyledProgressBackdrop = styled(Backdrop) ``;
const StyledProgressVisual = styled.div(({ theme }) => {
    return css `
    &:focus-visible {
      box-shadow: ${theme.components.button['focus-shadow']};
      outline: none;
      border-radius: calc(9999 * ${theme.base['border-radius']});
    }
  `;
});
StyledProgressVisual.defaultProps = defaultThemeProp;
export const StyledProgressRing = styled(StyledProgressVisual)(({ theme, placement, determinate }) => {
    const size = placement === 'inline' ? '1em' : '2rem';
    return css `
    position: relative;

    svg {
      display: block;
      width: ${size};
      height: ${size};

      circle {
        fill: transparent;
        stroke: ${theme.base.colors.gray['extra-light']};
        stroke-width: 2;
        r: 45%;
        cx: 50%;
        cy: 50%;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;

        &:nth-child(2) {
          stroke: ${theme.components.progress['progress-color']};
          transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})
            ${theme.base.animation.timing.ease};

          ${!determinate &&
        css `
            @keyframes LoadingRing {
              0% {
                transform: rotate(0deg);
              }

              100% {
                transform: rotate(360deg);
              }
            }
            animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;
          `}
        }
      }
    }

    ${placement === 'inline' &&
        css `
      display: inline-flex;
      vertical-align: top;
    `}
  `;
});
StyledProgressRing.defaultProps = defaultThemeProp;
export const StyledProgressBar = styled(StyledProgressVisual)(({ theme, placement, determinate }) => {
    return css `
    background-color: ${theme.base.colors.gray['extra-light']};
    border-radius: ${theme.base['border-radius']};
    ${placement === 'local'
        ? css `
          width: calc(100% - 4 * ${theme.base.spacing});
        `
        : css `
          width: 100%;
        `}
    height: 0.375rem;
    min-width: 2rem;
    max-width: min(calc(100vw - 4 * ${theme.base.spacing}), ${theme.base['content-width'].lg});
    overflow: hidden;

    ::before {
      content: '';
      display: block;
      height: 100%;
      width: 100%;
      left: 0;
      border-radius: ${theme.base['border-radius']};
      background-color: ${theme.components.progress['progress-color']};
      ${determinate &&
        css `
        transform: translateX(var(--progress, 0));
        transform-origin: 0 50%;
        transition: transform calc(0.5 * ${theme.base.animation.speed})
          ${theme.base.animation.timing.ease};
      `}

      ${!determinate &&
        css `
        @keyframes LoadingBar {
          0% {
            transform: translateX(-100%);
          }

          100% {
            transform: translateX(200%);
          }
        }
        animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;
        width: 50%;
      `}
    }

    ${placement === 'inline' &&
        css `
      width: 3rem;
      display: inline-block;
      position: relative;
    `}
  `;
});
StyledProgressBar.defaultProps = defaultThemeProp;
export const StyledProgressEllipsis = styled(StyledProgressVisual)(({ theme, placement }) => {
    return css `
    line-height: 1;
    display: ${placement === 'inline' ? 'inline-flex' : 'block'};

    @keyframes LoadingEllipsis {
      0% {
        transform: scale(0);
        opacity: 0;
      }

      50% {
        transform: scale(1);
        opacity: 1;
      }

      100% {
        transform: scale(0);
        opacity: 0;
      }
    }

    > span {
      display: flex;
      justify-content: center;
      mix-blend-mode: multiply;

      ${placement === 'inline' &&
        css `
        display: inline-flex;
      `}
    }

    > span span {
      margin: 0 0.3125rem;
      background: ${theme.components.progress['progress-color']};
      border-radius: 50%;
      animation: LoadingEllipsis calc(4 * ${theme.base.animation.speed}) infinite;

      ${placement === 'global' &&
        css `
        width: 1.25rem;
        height: 1.25rem;
      `}

      ${(placement === 'local' || placement === 'block') &&
        css `
        width: 0.625rem;
        height: 0.625rem;
      `}

      ${placement === 'inline' &&
        css `
        width: 0.1875rem;
        height: 0.1875rem;
        margin: 0 0.1875rem;
        animation-duration: calc(4 * ${theme.base.animation.speed});
      `}

      &:nth-child(2) {
        animation-delay: 0.1667s;
      }

      &:nth-child(3) {
        animation-delay: ${0.1667 * 2}s;
      }
    }
  `;
});
StyledProgressEllipsis.defaultProps = defaultThemeProp;
export const StyledMessage = styled.span(({ theme }) => {
    const color = tryCatch(() => {
        return rgba(readableColor(theme.base.palette['primary-background']), theme.base.transparency['transparent-3']);
    });
    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
    return css `
    font-size: ${fontSize[theme.components.label['font-size']]};
    font-weight: ${theme.base['font-weight']['semi-bold']};
    color: ${color};
  `;
});
StyledMessage.defaultProps = defaultThemeProp;
export const StyledProgress = styled(Flex)(({ theme, placement }) => {
    return css `
    ${placement !== 'inline' &&
        css `
      width: 100%;
    `}

    ${placement === 'block' &&
        css `
      margin-block: calc(2 * ${theme.base.spacing});
    `}
  `;
});
StyledProgress.defaultProps = defaultThemeProp;
//# sourceMappingURL=Progress.styles.js.map