import { styled } from 'styleh-components'
import {
  DetailedList,
  DetailedListItemPanel,
  DetailedListLabel,
  DetailedListValue,
} from 'molecules/DetailedList'

const StyledDetailedList = styled.withComponent(DetailedList) `
  ${DetailedListItemPanel} {
    border-bottom: 1px solid var(--color-light-grey);
    color: var(--color-dark-grey);
    width: 100%;
    padding: 1rem 0;
  }

  ${DetailedListLabel} {
    flex: 1;
    flex-basis:30%;
    margin: 0;
    color: inherit;
    font-weight: bold;
  }

  ${DetailedListValue} {
    flex: 1;
    flex-basis:70%;
    color: inherit;
  }
`

export { StyledDetailedList }