import { darkLine } from '@/styles/colors';
import { BELOW_W_768, NOT_BELOW_W_512, NOT_BELOW_W_768 } from '@/styles/dimensions';
import { css } from '@emotion/react';
import styled from '@emotion/styled';

export const SyntheticLine = styled.div<{ position: string }>`
  position: absolute;
  width: 0;
  top: 0;
  bottom: 0;
  border-left: 1px solid ${darkLine};
  left: ${({ position }) => position};
  @media screen and (${BELOW_W_768}) {
    display: none;
  }
`;

export const AuxPageHero = styled.div`
  padding: 12px;
  @media screen and (${NOT_BELOW_W_512}) {
    padding: 24px;
  }
  @media screen and (${NOT_BELOW_W_768}) {
    padding: 48px;
  }
`;
export const FullWidthBackground = styled.div<{ color: string }>`
  position: absolute;
  left: -100svw;
  right: -100svw;
  top: 0;
  bottom: 0;
  ${({ color }) => `background-color: ${color};`}
`;

export const VerticalBlock = styled.div`
  position: relative;
  &:before {
    content: '';
    display: block;
    position: absolute;
    left: -10000px;
    top: -1px; // so that adjacent borders don't become 2px thick
    bottom: 0;
    right: -10000px;
    border-top: 1px solid ${darkLine};
    border-bottom: 1px solid ${darkLine};
    pointer-events: none;
  }
`;

export const WhiteBackgroundPaddedBlockCSS = css`
  margin: 0 2.4rem 2.4rem 2.4rem;
  padding: 2.4rem;
  height: auto;
  background-color: white;
  border-radius: 0.7rem;
  border: none;
`;

export const EvenColumns = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
`;

export const QuarterPaddedBlock = styled.div`
  padding: 12px;
`;

export const PaddedBlock = styled.div`
  padding: 48px;
  @media screen and (${BELOW_W_768}) {
    padding: 24px;
  }
`;

export const Section = styled.section<{ trim?: boolean }>`
  min-height: calc(100svh - 55px);
  padding: ${({ trim }) => (trim ? '0' : '48px 0')};
  background-color: var(--background-color);
  @media screen and (max-width: 800px) {
    padding: ${({ trim }) => (trim ? '0' : '10px 0')};
  }
`;

export const Spacer = styled(VerticalBlock)`
  &:after {
    border: none;
  }
`;

export const HorizontalBlock = styled.div<{ flex?: number; mask?: boolean; tight?: boolean }>`
  position: relative;
  padding: ${({ tight, mask }) => (mask ? '0 0' : tight ? '20px 0' : '48px')};
  flex: ${({ flex }) => flex || 1};
  :not(:last-child) {
    border-right: 1px solid var(--line-color);
  }
  * + & {
    border-top: none;
  }

  @media screen and (max-width: 800px) {
    flex-direction: column;
    padding: ${({ tight, mask }) => (mask ? '0 0' : tight ? '10px 0' : '10px')};
  }
`;

export const OverflowingImgWrapper = styled.div`
  position: absolute;
  left: -48px;
  right: -48px;
  top: 0;
  bottom: 1px;
`;