import { styled } from 'view-container'

const PrgressBarWrap = styled.div `
  position: relative;
  width: 100%;
  height: 20px;
  border: solid 1px ${props => props.progressbarColor};
  border-radius: 3px;
  box-shadow: 1px 2px 6px -2px rgba(0, 0, 0, 0.3) inset;
  overflow: hidden;
`

const ProgressBarFill = styled.div `
  position: relative;
  width: 0;
  height: 100%;
  background: ${props => props.backgroundColor};
  ${props =>
    props.progressWidth &&
    styled.css `
      width: ${props.progressWidth};
    `};
`

export { PrgressBarWrap, ProgressBarFill }