import styled from 'styled-components';
import { cssUnitCalc } from 'utils';
import theme from 'styles/theme';

export const Wrapper = styled.div<any>`
    width: ${p => cssUnitCalc(p.width)};
    height: ${p => cssUnitCalc(p.height)};
    background-color: #dadcdf;
    display: inline-block;
    position: relative;
    overflow: hidden;
`;

export const Current = styled.div<any>`
    position: absolute;
    height: 100%;
    left: 0;
    transition: all 0.3s;
    background: ${p => p.theme.brand};
    width: ${p => `${p.percent}%`};
`;
Current.defaultProps = { theme };

export const CircleWrapper = styled.div<any>`
    width: ${p => cssUnitCalc(p.width)};
    height: ${p => cssUnitCalc(p.height)};
    background-color: transparent;
    display: inline-block;
    position: relative;
    overflow: hidden;
`;

export const CircleText = styled.div<any>`
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
`;