import styled from 'styled-components';

/** Vertical stack for form fields with breathable field spacing */
export const FormStack = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.form.fieldGap};
  width: 100%;
`;

/** Grouped form section with optional divider from previous section */
export const FormSection = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.form.fieldGap};
  width: 100%;

  & + & {
    margin-top: ${({ theme }) => theme.form.sectionGap};
    padding-top: ${({ theme }) => theme.form.sectionGap};
    border-top: 1px solid ${({ theme }) => theme.colors.divider};
  }
`;

export const FormActions = styled.div<{ $compact?: boolean }>`
  display: flex;
  flex-wrap: wrap;
  gap: ${({ theme }) => theme.spacing[3]};
  margin-top: ${({ theme, $compact }) => ($compact ? 0 : theme.form.actionsGap)};
  padding-top: ${({ theme, $compact }) => ($compact ? 0 : theme.spacing[2])};
`;