import { theme , palette } from 'styled-tools' ; import { Box } from '../primitives' ; import styled , { css } from '../styled' ; import { RatingStarProps } from './RatingStar' ; export const Rating = styled ( Box ) `
  & {
    ${ theme ( 'fannypack.Rating.base' ) };
  }
` ; export const starSizes = { small : css `
    & {
      width: 1rem;
      height: 1rem;
    }
    & {
      ${ theme ( 'fannypack.Rating.Star.sizes.small' ) };
    }
  ` , default : css `
    & {
      ${ theme ( 'fannypack.Rating.Star.sizes.default' ) };
    }
  ` , medium : css `
    & {
      width: 2rem;
      height: 2rem;
    }
    & {
      ${ theme ( 'fannypack.Rating.Star.sizes.medium' ) };
    }
  ` , large : css `
    & {
      width: 3rem;
      height: 3rem;
    }
    & {
      ${ theme ( 'fannypack.Rating.Star.sizes.large' ) };
    }
  ` } ; export const RatingStar = styled ( Box ) < RatingStarProps > `
  width: 1.5rem;
  height: 1.5rem;

  & {
    ${ theme ( 'fannypack.Rating.Star.base' ) };
  }

  ${ props => ( props . size ? starSizes [ props . size || '' ] : null ) };

  & path {
    fill: ${ props => ( props . active ? theme ( 'fannypack.Rating.Star.color' ) ( props ) || 'gold' : palette ( 'white800' ) ) };
  }
` ;