import { styled } from 'styleh-components'

const MyaccountWrapperArea = styled.section`
  position: relative;
`

const MyaccountHeaderArea = styled.div`
  position: relative;
  display: grid;
  grid-column: auto / auto;
  grid-template-areas: 'headertop' 'headerbottom';
`

const MyaccountHeaderTopArea = styled.div`
  grid-area: headertop;
  position: relative;
  background: #34495e;
  min-height: 44px;
`

const MyaccountHeaderBottomArea = styled.div`
  grid-area: headerbottom;
  position: relative;
  background: #536d88;
  min-height: 82px;
`

const MyaccountContentArea = styled.div`
  display: grid;
  grid-template-areas: 'tabarea tabcontentarea tabcontentarea tabcontentarea';
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  background: #ccc;
  min-height: 450px;
`

const MyaccountAsideTabArea = styled.aside`
  grid-area: tabarea;
  position: relative;
  background: #7f8c8d;
  width: 250px;
  min-height: 450px;
`

const MyaccountTabContentArea = styled.div`
  grid-area: tabcontentarea;
  position: relative;
  background: #ccc;
  min-height: 450px;
`

export {
  MyaccountWrapperArea,
  MyaccountHeaderArea,
  MyaccountHeaderTopArea,
  MyaccountHeaderBottomArea,
  MyaccountContentArea,
  MyaccountAsideTabArea,
  MyaccountTabContentArea,
}