import { theme , palette } from 'styled-tools' ; import styled , { space } from '../styled' ; import { Box } from '../primitives' ; import { TimelineStepProps , TimelineRowProps } from './TimelineStep' ; import { TimelineStepDetailProps } from './TimelineStepDetail' ; import { TimelineStepHeadingProps } from './TimelineStepHeading' ; import Paragraph from '../Paragraph' ; export const Timeline = styled ( Box ) `
  & {
    ${ theme ( 'fannypack.Timeline.base' ) };
  }
` ; export const TimelineRow = styled ( Box ) < TimelineRowProps > `
  display: flex;
  position: relative;

  &:last-child {
    margin-bottom: 0;
  }

  &::before {
    content: '';
    border: 1px solid ${ props => palette ( props . lineColor || 'textTint' , props . lineColor ) };
    position: absolute;
    height: 100%;
    left: ${ space ( 1 ) }rem;
    margin-top: ${ space ( 5 ) }rem;
  }

  &:last-child::before {
    border: 0;
  }
` ; export const TimelineStep = styled ( Box ) < TimelineStepProps > `
  & {
    ${ theme ( 'fannypack.Timeline.Step.base' ) };
  }
` ; export const TimelineBullet = styled ( Box ) `
  border-radius: 50%;
  display: inline-flex;
  flex-shrink: 0;
  height: 0.625rem;
  width: 0.625rem;
  margin-top: ${ space ( 4 ) }rem;
  margin-right: ${ space ( 2 ) }rem;
  z-index: 1;

  & {
    ${ theme ( 'fannypack.Timeline.Bullet.base' ) };
  }
` ; export const TimelineStepHeading = styled ( Paragraph ) < TimelineStepHeadingProps > `
  margin-top: ${ space ( 2 ) }rem;
  margin-bottom: ${ space ( 1 ) }rem;
  line-height: 1.5rem;
  color: ${ props => props . color || palette ( 'text' ) };
  font-weight: ${ theme ( 'fannypack.fontWeights.semibold' ) };

  &:not(:last-child) {
    margin-top: ${ space ( 2 ) }rem;
    margin-bottom: ${ space ( 1 ) }rem;
  }

  & {
    ${ theme ( 'fannypack.Timeline.StepHeading.base' ) };
  }
` ; export const TimelineStepDetail = styled ( Box ) < TimelineStepDetailProps > `
  color: ${ props => props . color || palette ( 'text' ) };

  & {
    ${ theme ( 'fannypack.Timeline.StepDetail.base' ) };
  }
` ;