import styled from '@emotion/styled';
import { themeGet } from '@styled-system/theme-get';

const MenuHeader = styled.header`
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: ${themeGet('colors.dimmed')};
  font-size: ${themeGet('fontSizes.text-xs')};
  letter-spacing: ${themeGet('letterSpacings.2')};
  color: ${themeGet('sidebarStyles.header.color')};
  padding-left: ${themeGet('space.3')};
  padding-right: ${themeGet('space.3')};
  padding-top: ${themeGet('space.1')};
  padding-bottom: ${themeGet('space.1')};
  line-height: 1.4;
  box-shadow: ${themeGet('innerShadowsN.0')};
  font-weight: ${themeGet('fontWeights.bold')};
`;

export default MenuHeader;