import { styled } from 'styleh-components'

const ProgressBarWrap = styled.div `
  position: relative;
  ${props =>
    props.barWidth &&
    styled.css `
      width: ${props.barWidth}px;
    `};
  height: 20px;
  border: solid 1px ${props => props.barColor};
  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.barColor};
  ${props =>
    props.progressWidth &&
    styled.css `
      width: ${props.progressWidth};
    `};
`

export { ProgressBarWrap, ProgressBarFill }