// @flow
import styled from 'styled-components';
import { Box } from '../../../primitives';
import { getBottomBorderWidth, getCardBorderRadius } from './forms.css-rules';
import { getHFontFamily } from '../../typography/head/head.css-rules';
import { getPaletteColor } from '../../../mixins/branding';
import { getFontFamily, getFontSize } from '../../../mixins/typography';
import { getSpacingRules } from '../../../mixins/spacing';
import { getStackeeRules } from '../../../mixins/stackee';

export const ErrorLabel = styled.span.attrs(() => ({ fontSize: 'f0' }))`
  margin-top: 15px;
  margin-bottom: 15px;
  line-height: 13px;
  font-family: ${getHFontFamily};
  font-size: ${getFontSize};
  color: ${getPaletteColor('error-fg')};
`;

ErrorLabel.displayName = 'ErrorLabel';

export const FormBox = styled(Box)`
  border-radius: ${getCardBorderRadius};
  border: 1px solid ${getPaletteColor('greyscale-light')};
  background-color: ${getPaletteColor('white')};
  font-family: ${getFontFamily};
  font-size: ${getFontSize};
  overflow: hidden;
  ${getSpacingRules};
  ${getStackeeRules};
`;

export const FormRow = styled(Box)`
  && {
    min-height: 60px;
    border-bottom: ${getBottomBorderWidth} solid
      ${getPaletteColor('greyscale-light')};
  }

  &:first-child {
    border-radius: 6px 6px 0 0;
  }

  &:last-child {
    border-radius: 0 0 6px 6px;
  }
`;
