/** @format */

import styled from 'styled-components';

interface ContainerProps {
  theme: {
    primaryColor?: string;
    textColor?: string;
    secondColor?: string;
    thirdColor?: string;
  };
}

const Container = styled.div<ContainerProps>`
  .content-wrapper {
    width: 100%;
    height: 60px;
    background: linear-gradient(
      270deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.1) 100%
    );
    border-radius: 100px 0px 0px 100px;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-right: 24px;
    .dot {
      position: absolute;
      width: 4px;
      height: 4px;
      background: ${props => props.theme.primaryColor};
      border-radius: 50%;
      left: -2px;
      top: 28px;
    }
    .title {
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: ${props => props.theme.secondColor};
      line-height: 20px;
    }
    .count {
      font-size: 18px;
      font-family: DINAlternate-Bold, DINAlternate;
      font-weight: bold;
      color: ${props => props.theme.textColor};
      line-height: 18px;
    }
    .header-img {
      width: 32px;
      height: 32px;
      background-size: cover;
      background-repeat: no-repeat;
    }
    .left-box {
      margin-left: 16px;
      span {
        display: block;
      }
    }
    .right-box {
      margin-left: 20px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      .top-box {
        display: flex;
        justify-content: space-between;
        .count {
          font-size: 16px;
          line-height: 16px;
          margin: 0 6px;
          &.complete {
            color: ${props => props.theme.primaryColor};
          }
        }
      }
      .bottom-percent {
        display: inline-flex;
        width: 100%;
        margin-top: 4px;
        .line {
          height: 2px;
          border-radius: 3px;
          &.complete {
            background: ${props => props.theme.primaryColor};
          }
          &.unComplete {
            background: ${props => props.theme.thirdColor};
            margin-left: 4px;
          }
        }
      }
    }
  }
`;

export { Container };