import styled from 'styled-components';

import { typography } from '@redocly/theme/core/utils';

export const H1 = styled.h1.attrs<{ className?: string }>(({ className }) => ({
  'data-component-name': 'Typography/H1',
  className,
}))`
  color: var(--h1-text-color);
  margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);

  ${typography('h1')};
`;