General.js

import styled from 'styled-components'
import { grid, th } from '@pubsweet/ui-toolkit'

export const Section = styled.div`
  padding: ${grid(2)} ${grid(3)};
  margin-top: ${grid(2)};
  &:not(:last-of-type) {
    margin-bottom: ${grid(6)};
  }
`

export const Content = styled.div`
  box-shadow: ${th('boxShadow')};
  background-color: ${th('colorBackground')};
  border-radius: ${th('borderRadius')};
`

export const SectionContent = styled(Section)`
  padding: 0;
  box-shadow: ${th('boxShadow')};
  background-color: ${th('colorBackground')};
  border-radius: ${th('borderRadius')};
`

export const PaddedContent = styled(Content)`
  padding: ${grid(2)} ${grid(3)};
  margin-top: ${grid(3)};
  margin-bottom: ${grid(3)};
`

export const Container = styled.div`
  background: ${th('colorBackgroundHue')};
  padding: ${grid(2)};
  overflow-y: scroll;
`

export const Title = styled.h2`
  font-size: ${th('fontSizeHeading5')};
  font-weight: 500;
`

export const SectionHeader = styled.div`
  padding: ${grid(2)} ${grid(3)};
  border-bottom: 1px solid ${th('colorFurniture')};
`

export const SectionRow = styled.div`
  border-bottom: 1px solid ${th('colorFurniture')};
  padding: ${grid(2)} ${grid(3)};
`

export const ClickableSectionRow = styled(SectionRow)`
  color: ${th('colorText')};
  :last-of-type {
    border-radius: 0 0 ${th('borderRadius')} ${th('borderRadius')};
  }
  &:hover {
    cursor: pointer;
    background-color: ${th('colorBackgroundHue')};

    svg {
      stroke: ${th('colorPrimary')};
    }
  }
`
export const SectionRowGrid = styled(SectionRow)`
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: ${grid(2)};
`

export const SectionAction = styled.div`
  grid-column: 3;
  justify-self: end;
`

export const SectionActionInfo = styled.div`
  line-height: ${grid(5)};
  grid-column: 1 / span 2;
`

const Page = styled.div`
  padding: ${grid(2)};
`

const Heading = styled.div`
  color: ${th('colorPrimary')};
  font-family: ${th('fontReading')};
  font-size: ${th('fontSizeHeading3')};
  line-height: ${th('lineHeightHeading3')};
`

export { Page, Heading }

export const HeadingWithAction = styled.div`
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: ${grid(2)};
  align-items: center;
`