import styled from "styled-components";

import { rem } from "../style/function.style";

export const Container = styled.div<{
  backgroundColor?: string,
  clockBackgroundColor?: string,
  fontColor?: string,
}>`
  width: ${rem(416)};
  height: ${rem(92)};
  border-radius: ${rem(9.4)};
  background-color: ${props => props.backgroundColor || '#fff'};
  opacity: .9;
  display: flex;
  padding: ${rem(16)};
  align-items: center;
  justify-content: space-between;
  .item{
    min-width: ${rem(80)};
    height: ${rem(60)};
    padding: 0 ${rem(8)};
    border-radius: ${rem(6)};
    background: ${props => props.clockBackgroundColor || 'rgba(0, 0, 0, 0.8)'};
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    line-height: ${rem(60)};
    color: ${props => props.fontColor || '#fff'};
    font-size: ${rem(47)};
    text-align: center;
    font-family: 'DINCond-Bold', serif;
    .unit{
      display: inline-block;
      vertical-align: top;
      line-height: ${rem(75)};
      font-size: ${rem(26)};
      font-family: 'HarmonyOS_Sans_SC_Bold', sans-serif;
    }
  }
`;