import { tint } from 'polished' ; import { Box } from '../primitives' ; import styled , { css , palette , theme } from '../styled' ; import { LocalProgressBarProps } from './ProgressBar' ; const sizeAttributes = { small : css `
    height: 0.6rem;

    & {
      ${ theme ( 'fannypack.ProgressBar.sizes.small' ) };
    }
  ` , default : css `
    & {
      ${ theme ( 'fannypack.ProgressBar.sizes.default' ) };
    }
  ` , medium : css `
    height: 1.5rem;

    & {
      ${ theme ( 'fannypack.ProgressBar.sizes.medium' ) };
    }
  ` , large : css `
    height: 2rem;

    & {
      ${ theme ( 'fannypack.ProgressBar.sizes.large' ) };
    }
  ` } ; export const ProgressBarIndicator = styled ( Box ) `
  height: 100%;
  background-color: ${ ( props ) => palette ( props . color , props . color ) };
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  width: ${ props => props . value || '0' }%;

  & {
    ${ theme ( 'fannypack.ProgressBar.indicator' ) };
  }
` ; export const ProgressBar = styled ( Box ) < LocalProgressBarProps & { styledSize ? : string ; } > `
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
  height: 1rem;
  background-color: ${ ( props ) => tint ( 0.9 , palette ( props . color , props . color ) ( props ) ) };

  ${ props => props . styledSize && sizeAttributes [ props . styledSize || '' ] }

  & {
    ${ theme ( 'fannypack.ProgressBar.base' ) };
  }
` ; export default ProgressBar ;