import styled from "styled-components";

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

const rem = (count: number) => {
  return originRem(count, 1125)
}

export const Container = styled.div`
  .content{
    background-color: #fff;
    display: flex;
    align-items: center;
    .img{
      width: ${rem(240)};
      height: ${rem(297)};
      display: flex;
      align-items: center;
      justify-content: right;
    }
    .avatar{
      width: ${rem(178)};
      height: ${rem(178)};
      border-radius: 100%;
    }
    .info{
      flex: 1;
      margin-left: ${rem(46)};
      min-width: 0;
      .name{
        line-height: ${rem(84)};
        margin-top: ${rem(12)};
        font-size: ${rem(54)};
        color: #2e2e2e;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .desc{
        line-height: ${rem(58)};
        font-size: ${rem(40)};
        color: #b2b2b2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .action{
      margin-left: ${rem(62)};
      margin-right: ${rem(66)};
      width: ${rem(222)};
      height: ${rem(85)};
      line-height: ${rem(85)};
      text-align: center;
      color: #fff;
      font-size: ${rem(42)};
      border-radius: ${rem(85)};
      background: #ff7443;
      &.already{
        background: #b2b2b2;
        color: #fff;
      }
    }
  }
`;
export const FocusContainer = styled.div`
  height: ${rem(384)};
  padding: ${rem(44)} ${rem(52)};
`;

export const AvatarContainer = styled.div`
  height: ${rem(384)};
  padding: ${rem(44)} ${rem(52)};
  .content{
    .avatar{
      width: ${rem(212)};
      height: auto;
      border-radius: unset;
    }
  }
`;