import styled from 'styled-components';

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

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

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