import styled from "styled-components";
export const Container = styled.div `
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1401;

  background: ${({ background, theme }) => background ?? theme.new?.colors?.red700 ?? "unset"};
  height: ${({ height }) => height};

  @media (max-width: 1023px) {
    height: unset;
    top: 48px;
    padding: 0 12px;
  }
`;
export const Inner = styled.a `
  position: relative;
  display: flex;
  align-items: center;
  justify-content: ${({ justifyContent }) => justifyContent ?? "center"};

  width: 100%;
  max-width: 1224px;
  padding: 8px 0;
  margin: 0 auto;

  text-decoration: none;

  cursor: pointer;

  @media (max-width: 1023px) {
    flex-direction: column;
  }
`;
export const LeftIcon = styled.img `
  margin-right: 4px;
`;
export const RightIcon = styled.img `
  margin-left: 4px;
`;
export const ContentWrapper = styled.div `
  display: flex;
  flex-direction: ${({ direction }) => direction};
  flex-wrap: nowrap;

  @media (max-width: 1023px) {
    flex-direction: column;
  }
`;
export const Content = styled.div `
  display: flex;
  align-items: center;

  font-family: Bold;
  font-size: 32px;
  line-height: 40px;
  text-align: ${({ textAlign }) => textAlign ?? "center"};

  margin: ${({ contentMargin }) => contentMargin ?? "0 auto"};
  color: ${({ fontColor }) => fontColor ?? "white"};
  white-space: nowrap;

  ${({ fontSize }) => fontSize
    ? `font-size: ${fontSize}; line-height: calc(${fontSize} + 4px);`
    : ""};

  a {
    pointer-events: none;

    color: ${({ fontColor }) => fontColor ?? "white"};

    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-position: under;
  }

  p {
    width: 100%;
    margin: 0;
  }

  strong {
    font-family: Heavy;
  }

  @media (max-width: 1023px) {
    font-size: 24px;
    line-height: 28px;

    margin: ${({ contentMargin }) => contentMargin ?? "12px 0"};
    ${({ fontSize }) => fontSize
    ? `font-size: ${fontSize}; line-height: calc(${fontSize} + 4px);`
    : ""};
  }
`;
export const MinorContent = styled(Content) `
  font-size: 18px;
  line-height: 24px;

  @media (max-width: 1023px) {
    font-size: 16px;
    line-height: 24px;
  }
`;
export const Close = styled.button `
  border: unset;
  background: unset;
  position: absolute;
  padding: 0;
  top: 24px;
  right: calc(50% - 1224px / 2);
  cursor: pointer;

  svg {
    width: 22px;
    height: 22px;
  }

  @media (max-width: 1023px) {
    right: 8px;
    top: 8px;
  }
`;
//# sourceMappingURL=banner.styled.js.map