import styled from "styled-components";

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

export const FocusContainer = styled.div<{
  type: number;
}>`
  position: relative;
  // width: 100%;
  height: 100%;
  padding: ${props => props.type === 3 ? 0 : rem(40)};
`;

export const FocusControlContainer = styled.div<{
  focusColor?: string;
}>`
  &.type-3 {
    height: ${rem(100)};
    margin-bottom: ${rem(20)};
    img {
      width: ${rem(100)};
      height: ${rem(100)};
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: ${rem(100)};
      float: left;
    }
    .info-container {
      float: right;
      text-align: left;
      height: 100%;
      width: 2.4rem;
    }
    .button {
      padding: ${rem(4)} ${rem(28)};
      height: ${rem(42)};
      font-size: ${rem(24)};
      line-height: ${rem(34)};
      border-radius: ${rem(24)};
      display: inline-block;
    }
    div[role="button"] {
      background-color:${props => props.focusColor ? props.focusColor : '#14c4bc;'}; 
      color: #ffffff;
    }
    div[role="none"] {
      background-color: #f5f5f5;
      color: black;
    }
  }
  &.type-2 {
    width: 100%;
    position: relative;
    height: ${rem(100)};
    margin-bottom: ${rem(20)};
    display: inline-block;
    img {
      width: ${rem(100)};
      height: ${rem(100)};
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: ${rem(100)};
    }
    div[role="button"] {
      padding: 0 ${rem(30)};
      height: ${rem(60)};
      background-color:${props => props.focusColor ? props.focusColor : '#14c4bc;'}; 
      color: #ffffff;
      font-size: ${rem(26)};
      border-radius: ${rem(92)};
      position: absolute;
      left:80%;
      top: 23%;
      transform: translate(-50%);
      bottom: ${rem(30)};
      display: flex;
      align-items: center;
      justify-content: center;
      width: ${rem(140)};
    }
    div[role="none"] {
      padding: 0 ${rem(30)};
      height: ${rem(60)};
      background-color: #f5f5f5;
      color: black;
      font-size: ${rem(26)};
      border-radius: ${rem(92)};
      position: absolute;
      left: 80%;
      top: 25%;
      transform: translate(-50%);
      bottom: ${rem(30)};
      display: flex;
      align-items: center;
      width: ${rem(140)};
    }
  }
  &.type-1 {
    width: 50%;
    position: relative;
    height: ${rem(100)};
    margin-bottom: ${rem(20)};
    display: inline-block;
    img {
      width: ${rem(100)};
      height: ${rem(100)};
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: ${rem(100)};
    }
    div[role="button"] {
      padding: 0 ${rem(20)};
      height: ${rem(48)};
      background-color:${props => props.focusColor ? props.focusColor : '#14c4bc;'}; 
      color: #ffffff;
      font-size: ${rem(24)};
      border-radius: ${rem(92)};
      position: absolute;
      left: 60%;
      top: 50%;
      transform: translate(-50%);
      bottom: ${rem(30)};
      display: flex;
      align-items: center;
      white-space: nowrap;
    }
    div[role="none"] {
      padding: 0 ${rem(20)};
      height: ${rem(48)};
      background-color: #f5f5f5;
      color: black;
      font-size: ${rem(24)};
      border-radius: ${rem(92)};
      position: absolute;
      left: 60%;
      top: 50%;
      transform: translate(-50%);
      bottom: ${rem(30)};
      display: flex;
      align-items: center;
      white-space: nowrap;
    }
  }
`;
export const Item = styled.div`
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
`;
export const Vlogo = styled.span`
  position: absolute;
  left: ${rem(60)};
  top: ${rem(65)};
  width: ${rem(15)};
  height: ${rem(15)};
  display: inline-block;
`;

export const NickName = styled.div`
  &.type-3 {
    font-weight: 500;
    height: ${rem(55)};
    font-size: ${rem(28)};
    bottom: ${rem(55)};
    width: ${rem(180)};
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: right;
  }
  &.type-1 {
    padding: 0 ${rem(10)};
    // padding-left: ${rem(70)};
    height: ${rem(48)};
    font-size: ${rem(30)};
    border-radius: ${rem(92)};
    position: absolute;
    left: 65%;
    transform: translate(-50%);
    bottom: ${rem(55)};
    width: ${rem(180)};
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &.type-2 {
    color: #2e2e2e;
    font-weight: 600;
    font-size: ${rem(28)};
    line-height: ${rem(42)};
    font-family: PingFang SC;
    padding: 0 ${rem(40)};
    height: ${rem(48)};
    position: absolute;
    left: 45%;
    top: 30%;
    transform: translate(-50%);
    bottom: ${rem(30)};
    display: flex;
    align-items: center;
    width: ${rem(350)};
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
`;