import { styled } from 'styleh-components';
import { media } from '@skava/styleh-toolset';
const TopBarWrapper = styled.div.attrs({
    className: 'top-bar',
}) `
  ${media.phoneOrSmaller `
    display: none;
  `}

  max-height: rem(44);
  height: rem(44);
  padding: var(--spacing-small) var(--spacing-medium);
  background: #232121;
  z-index: 20;
  position: relative;

  &::before {
    height: 20rem;
    background-color: var(--color-black);
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    right: 0;
    bottom: 100%;
    left: 0;
  }

  ${media.tabletOrSmaller `
    display: none;
  `}
  color: var(--color-light-grey);
`;
const TopBarBox = styled.div `
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  padding-top: var(--spacing-extra-small);
  padding-bottom: var(--spacing-extra-small);
  font: $font-top-bar;
  justify-content: space-between;
  position: relative;
`;
export { TopBarWrapper, TopBarBox };
//# sourceMappingURL=styled.js.map