// @flow
import { type StatelessFunctionalComponent } from 'react';
import styled from 'styled-components';
import type { SectionProps } from './section.proptypes';
import { getSpacingRules } from '../../../../mixins/spacing';
import { getPaletteColor } from '../../../../mixins/branding';

export const CardSection: StatelessFunctionalComponent<SectionProps> = styled.div`
  border-bottom: solid 1px ${getPaletteColor('greyscale-light')};

  &:last-of-type {
    border-bottom: none;
  }

  ${getSpacingRules};
`;

CardSection.displayName = 'CardSection';
