import { dark, lightLine, lightSmoke, smoke } from '@/styles/colors';
import { BELOW_W_1024, BELOW_W_1280 } from '@/styles/dimensions';
import styled from '@emotion/styled';

export const Subtitle = styled.h3`
  font-family: Architekt;
  color: ${dark};
  font-size: 1.4rem;
  margin-bottom: 2.4rem;
  font-weight: 600;
`;

export const Bracketed = styled.span`
  :before,
  :after {
    display: inline-block;
    opacity: 0.35;
  }
  :before {
    content: '[';
    margin-right: 5px;
  }
  :after {
    content: ']';
    margin-left: 5px;
  }
`;

export const Title = styled.h2`
  --backdrop-color: rgba(0, 0, 0, 0.05);
  font-family: Montreal;
  font-size: 7rem;
  text-transform: lowercase;
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 1;
  color: ${smoke};
  display: inline;
  background-image: linear-gradient(
    transparent 0%,
    transparent 9.5%,
    var(--backdrop-color) 9.5%,
    var(--backdrop-color) 89.2%,
    transparent 89.2%
  );
`;

export const FeatureTitle = styled(Title)`
  @media screen and (${BELOW_W_1024}) {
    background-image: none;
    font-size: 4.5rem;
    letter-spacing: -0.06em;
  }
`;

export const EmphasizedCharacter = styled.span`
  --backdrop-color: ${smoke};
  color: ${lightLine};
  background-image: linear-gradient(
    transparent 0px,
    transparent 9.5%,
    var(--backdrop-color) 9.5%,
    var(--backdrop-color) 89.2%,
    transparent 89.2%
  );
`;

export const Body = styled.div`
  font-family: Montreal;
  font-size: 2.2rem;
  line-height: 1.3;
  color: ${lightSmoke};
  strong {
    color: ${smoke};
  }
  p:last-of-type {
    margin-bottom: 0;
  }
`;

export const PrimaryBody = styled(Body)`
  font-size: 3rem;
  @media screen and (${BELOW_W_1280}) {
    font-size: 2.6rem;
  }
  & + & {
    margin-top: 2.4rem;
  }
`;