import styled from 'styled-components'

import {
  rem
} from '../style/function.style'

export const EmptyContainer = styled.div`
  min-height: ${rem(80)};
  display: flex;
  justify-content: center;
  align-items: center;
`

export const Box = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`

export const MockingBox = styled.div`
position: absolute;
right: 0;
top: 0;
border: 1px solid #14C4BC;
padding: ${rem(4)} ${rem(8)};
color: #2e2e2e;
z-index: 4;
background: rgba(255, 255, 255, 0.4);
`


export const ProcessTitleBox = styled.div`
  margin: 0 auto ${rem(19, 1125)};
  width: ${rem(875, 1125)};
  font-weight: 600;
  font-size: ${rem(46, 1125)};
  line-height: ${rem(64, 1125)};
  color: #1F1F1F;

  strong {
    font-weight: 500;
    font-size: ${rem(51, 1125)};
    line-height: ${rem(62, 1125)};
    font-style: italic;
    color: #1F1F1F;
  }

  span {
    font-weight: 500;
    font-size: ${rem(31, 1125)};
    line-height: ${rem(37, 1125)};
    font-style: italic;
    color: #949494;
  }
`;

export const ProcessBox = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
`;
export const ProcessBarBox = styled.div`
  position: relative;
  width: ${rem(801, 1125)};
  height: ${rem(31, 1125)};
`;
export const ProcessBarBg = styled.div<{
  percent: number;
  image: string;
  color: string;
}>`
  width: ${rem(801, 1125)};
  height: ${rem(31, 1125)};
  border-radius: ${rem(31, 1125)};
  overflow: hidden;
  background: #F2F2F2;

  &::after {
    display: block;
    content: '';
    height: 100%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    ${({
      percent,
      image,
      color
    }) => (
      `
        width: ${percent}%;
        background-image: url(${image});
        background-color: ${color};
      `
    )};
  }
`;
export const ProcessBarIcon = styled.div<{
  percent: number;
  image: string;
}>`
  position: absolute;
  top: 0;
  transform: translateX(${rem(-22, 1125)}) translateY(${rem(-22, 1125)});
  display: block;
  width: ${rem(74, 1125)};
  height: ${rem(74, 1125)};
  background-repeat: no-repeat;
  background-size: contain;

  ${({
    percent,
    image
  }) => (
    `
      left: ${percent}%;
      background-image: url(${image});
    `
  )};
`;
export const ProcessBarFlagImage = styled.div<{
  image: string;
}>`
  display: block;
  width: ${rem(74, 1125)};
  height: ${rem(74, 1125)};
  background-repeat: no-repeat;
  background-size: contain;

  ${({
    image
  }) => (
    `
      background-image: url(${image});
    `
  )};
`;

export const SupportButton = styled.div<{
  enableImage: string,
  disableImage: string
}>`
  margin: ${rem(78, 1125)} auto 0;
  width: ${rem(538, 1125)};
  height: ${rem(119, 1125)};
  background-repeat: no-repeat;
  background-size: contain;

  ${({
    enableImage,
    disableImage
  }) => (
    `
      background-image: url(${enableImage});

      &.disabled {
        background-image: url(${disableImage});
      }
    `
  )};
`

export const AnnouncementBox = styled.div`
  margin-top: ${rem(63, 1125)};
  width: ${rem(875, 1125)};
  height: ${rem(96, 1125)};
`

export const AnnouncementItem = styled.div`
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
`

export const AnnouncementItemAvatar = styled.img`
  margin-right: ${rem(30, 1125)};
  width: ${rem(96, 1125)};
  height: ${rem(96, 1125)};
  border-radius: ${rem(96, 1125)}
`

export const AnnouncementItemText = styled.div`
font-size: ${rem(37, 1125)};
line-height: ${rem(52, 1125)};
color: #5B5B5B;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
flex-direction: row;
align-items: center;

span {
  display: block;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
strong {
  display: block;
  flex: 0 0 auto;
  font-weight: normal;
}
`