import { styled } from 'styleh-components';
import { Link } from '@skava/link';
import { media } from '@skava/styleh-toolset';
import { Image, BlueButton } from '@skava/packages/ui';
/** @todo fix this @data-qa? */
export const StyledEmptyContent = styled.article.attrs({
    'data-qa': 'qa-empty',
}) `
  background: var(--color-pure-white);
  color: var(--color-light-grey);
  text-align: left;

  padding: var(--spacing2x);
  ${media.tabletOrLarger `
    margin-top: var(--spacing-big);
  `}
  ${media.phoneOrSmaller `
    margin-top: var(--spacing-medium);
    padding: var(--spacing-medium);
  `}
`;
export const StyledEmptyTitle = styled.h1 `
  margin: 0;
  color: var(--color-black);
  @font (24, semi);
  width: rem(446);
  padding-bottom: 2rem;
  ${media.tabletOrSmaller `
    font-size: 1.125rem;
    padding-bottom: 1rem;
  `}
  ${media.phoneOrSmaller `
    @font (16, semi);
    width: 100%;
  `}
`;
export const BlueLink = styled(Link) `
  color: var(--color-blue);
  @font (24, semi);
  padding: 0 0.625rem;
  border-right: rem(2) solid var(--color-light-grey);
  &:first-of-type {
    padding-left: 0;
  }
  &:last-of-type {
    border: none;
  }
  ${media.tabletOrSmaller `
    font-size: 1.125rem;
  `}
`;
export const StyledEmptyLabel = styled.span `
  line-height: 1.25;
  color: var(--color-black);
  @font (60, condensed);

  ${media.desktopOrLarger `
    margin-bottom: 1rem;
  `}
  ${media.tabletOrSmaller `
    @font (48, condensed);
 `}
  ${media.phoneOrSmaller `
    @font (32, condensed);
    text-align: center;
  `}
`;
export const StyledEmptyRight = styled.section `
  padding-left: 1rem;
  background-color: var(--color-white);

  ${media.phoneOrSmaller `
    text-align: center;
    padding: rem(26) 0 0;
  `}
`;
export const StyledEmptyLeft = styled.section `
  width: 600px;
  height: 480px;
`;
export const StyledBlueButton = styled(BlueButton) `
  font-size: 1.125rem;
  width: rem(285);
  height: 2.75rem;
  padding: 0;
  justify-content: center;
  border-radius: 4px;
  ${media.tabletOrSmaller `
    width: rem(220);
  `}
  ${media.phoneOrSmaller `
    width: 100%;
    margin-top: 1.5rem;
  `}
`;
export const StyledImage = styled(Image) ``;
export const StyledEmptyBox = styled.div `
  display: flex;
  align-items: center;
  background: var(--color-pure-white);
  padding: 2rem 1rem;
  ${media.phoneOrSmaller `
    flex-direction: column;
    padding: 1rem 0.5rem;
  `}
`;
//# sourceMappingURL=styled.js.map