How to use the @govuk-react/constants.SPACING.SCALE_6 function in @govuk-react/constants

import styled from 'styled-components';
import { MEDIA_QUERIES, SPACING } from '@govuk-react/constants';

const TopNavInner = styled('div')({
  display: 'flex',
  flexDirection: 'column',
  width: `calc(100% - ${SPACING.SCALE_5})`,
  maxWidth: '960px',
  padding: `calc(${SPACING.SCALE_2} * 0.8) ${SPACING.SCALE_3}`,
  boxSizing: 'border-box',
  [MEDIA_QUERIES.LARGESCREEN]: {
    padding: `calc(${SPACING.SCALE_2} * 0.8) 0`,
    flexDirection: 'row',
    width: `calc(100% - ${SPACING.SCALE_6})`,
  },
});

export default TopNavInner;

import styled from 'styled-components';
import { BLUE } from 'govuk-colours';
import { MEDIA_QUERIES, SPACING } from '@govuk-react/constants';

const BottomNavWrapper = styled('div')({
  borderBottom: `10px solid ${BLUE}`,
  maxWidth: '960px',
  margin: '0 auto',
  width: `calc(100% - ${SPACING.SCALE_5})`,
  [MEDIA_QUERIES.LARGESCREEN]: {
    width: `calc(100% - ${SPACING.SCALE_6})`,
  },
});

export default BottomNavWrapper;