import React from 'react';
import { styled } from 'styleh-components';
import { media } from '@skava/styleh-toolset';
import { MaterialIcon } from '@skava/packages/ui';
import { Link } from '@skava/link';
const StyledFavoritesCount = styled.span.attrs({
    'data-qa': 'qa-favorites-count',
}) `
  color: var(--color-light-grey);
  font: $font-bold-large;
  text-align: right;
  ${media.tabletOrLarger `
    min-width: 32px;
  `}
  ${media.phoneOrSmaller `
    font: $font-bold-small;
  `}
`;
const FavoritesLinkAdapter = (props) => {
    return (React.createElement(Link, { className: props.className, "aria-label": 'Favorites', to: `${props.href}` }, props.children));
};
const StyledFavoritesLink = styled(FavoritesLinkAdapter).attrs({
    'data-qa': 'qa-header-favorites',
}) `
  align-items: center;
  margin-bottom: 8px;
  display: flex;
  ${media.phoneOrSmaller `
    order: 2;
    padding-bottom: var(--spacing-small);
  `}
  ${media.tabletOrLarger `
    margin-left: 3rem;
  `}
`;
const StyledHeartIcon = styled(MaterialIcon) `
  cursor: pointer;
  width: 1.75rem;
  fill: ${(props) => props.favoritesCount > 0 ? 'var(--color-red)' : 'var(--color-black)'};
`;
export { StyledFavoritesCount, StyledHeartIcon, StyledFavoritesLink };
//# sourceMappingURL=styled.js.map