import styled from "styled-components";
import { toSvgLink } from "../../utils/format";
import { bgGen, bgEq, bgGenMobile, bgEqMobile, bgPrimaryCircleGen, bgPrimaryCircleEq, tentacle, tentacleMobile, } from "./imgs";
export const Wrapper = styled.a(({ eq }) => `
  width: 100%;
  height: 100px;

  display: flex;
  align-items: center;

  background-color: ${eq ? "#E8F4FF" : "#e05e2b"};
  background-image: url(${toSvgLink(eq ? bgEq : bgGen)});
  background-repeat: no-repeat;
  background-size: cover;

  text-decoration: none;
  position: relative;
  overflow: hidden;

  ${eq
    ? `
    ${NoBtn},
    ${SecondaryCircle} {
      background: #1792FF;
    }
    ${Circles},
    ${Action} {
      ::before,
      ::after {
        display: none;
      }
    }
    ${PrimaryCircle} {
      background-image: url(${toSvgLink(bgPrimaryCircleEq)});
      width: 265px;
    }
    ${Close} {
      > svg rect {
        fill: white;
      }
    }
  `
    : ""}

  @media (max-width: 1023px) {
    height: ${eq ? "115px" : "200px"};
    max-width: 425px;

    margin: 0 auto;
    padding: 9px;

    background-image: url(${toSvgLink(eq ? bgEqMobile : bgGenMobile)});
  }

  @media (max-width: 400px) {
  }
`);
export const Inner = styled.div `
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  @media (max-width: 1023px) {
    flex-direction: column;
    margin-bottom: 0;
  }
`;
export const NoBtn = styled.div `
  background: #ffffff;
  border-radius: 2px;

  width: 222px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  @media (max-width: 1023px) {
    width: 275px;
    z-index: 11;
    position: relative;
  }
`;
export const Close = styled.div `
  z-index: 20;
  width: 24px;
  height: 24px;

  position: absolute;
  top: 12px;
  right: 24px;

  cursor: pointer;

  > svg {
    width: 24px;
    height: 24px;

    rect {
      fill: #f3b296;
    }
  }

  @media (max-width: 1023px) {
    top: 25px;
    right: 23px;

    width: 16px;
    height: 16px;

    > svg {
      width: 16px;
      height: 16px;
    }
  }
`;
export const Circles = styled.div `
  height: 100px;

  display: flex;
  align-items: center;

  margin-top: -8px;

  position: relative;

  ::before,
  ::after {
    content: "";

    background-image: url(${tentacle});
    background-repeat: no-repeat;
    background-size: cover;

    position: absolute;
    bottom: 0;

    width: 110px;
    height: 95px;

    z-index: 10;
  }

  ::before {
    left: -70px;
  }

  ::after {
    right: -50px;
    transform: scale(-1, 1);
  }

  @media (max-width: 1023px) {
    overflow: hidden;
    height: 80px;
    max-width: 275px;
    margin-bottom: 7px;
    margin-top: 0;

    ::before,
    ::after {
      display: none;
    }
  }
`;
export const PrimaryCircle = styled.div `
  z-index: 5;

  background-image: url(${toSvgLink(bgPrimaryCircleGen)});
  background-repeat: no-repeat;
  background-size: cover;

  width: 240px;
  height: 240px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  padding-top: 5px;
  padding-right: 6px;

  @media (max-width: 1023px) {
    width: 156px;
    min-width: 156px;
    height: 134px;

    padding-top: 0;
    padding-bottom: 28px;

    position: relative;
    top: 28px;
  }
`;
export const SecondaryCircle = styled.div `
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 166px;
  height: 166px;

  border-radius: 50%;
  background: #ffffff;

  position: relative;
  left: -20px;
  top: 6px;

  padding-bottom: 10px;

  @media (max-width: 1023px) {
    width: 127px;
    min-width: 127px;
    height: 123px;
    left: -9px;
    top: 36px;

    padding-bottom: 45px;
  }
`;
export const Action = styled.div `
  @media (max-width: 1023px) {
    position: relative;

    ::before,
    ::after {
      content: "";

      background-image: url(${tentacleMobile});
      background-repeat: no-repeat;
      background-size: cover;

      position: absolute;
      left: -46px;
      bottom: 12px;

      width: 72px;
      height: 131px;

      z-index: 10;
    }
    ::after {
      left: unset;
      right: -40px;
      bottom: 20px;

      transform: scale(-1, 1) rotate(23deg);
    }
  }
`;
export const EqCircles = styled.div `
  @media (max-width: 1023px) {
    width: 100vw;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    margin-top: 6px;
    padding-top: 8px;
  }
`;
export const RegisterCircle = styled.div `
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 28px;

  @media (min-width: 1023px) {
    background: #ecf6ff;
    width: 160px;
    height: 160px;
    border-radius: 80px;
  }
`;
//# sourceMappingURL=styled.js.map