// @flow
import styled from 'styled-components';
import { getPaletteColor } from '../../../mixins/branding';
import { FormList } from '../form-list';
import { FormRow } from '../internals/forms.common';
import { Box } from '../../../primitives/box';

const getBorderRadius = ({ theme }) => theme.cardBorderRadius;
const getFontSize = ({ theme }) => theme.typescale.f1;

export const HoverBox = styled(Box)`
  align-self: stretch;
  width: 100%;

  :hover {
    background: ${({ isDisabled }) =>
      isDisabled ? undefined : getPaletteColor('background')};
  }
`;

export const StyledFormList = styled(FormList)`
  font-size: ${getFontSize};

  ${FormRow}:first-child > ${HoverBox} > * {
    border-top-left-radius: ${getBorderRadius};
    border-top-right-radius: ${getBorderRadius};
  }

  ${FormRow}:last-child > ${HoverBox} > * {
    border-bottom-left-radius: ${getBorderRadius};
    border-bottom-right-radius: ${getBorderRadius};
  }
`;
