"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const StarIcon_1 = __importDefault(require("atoms/Icons/StarIcon"));
const fixture_1 = require("./fixture");
const StarAndNumberWrap = styled.div.attrs({
    className: 'star-number-wrap',
}) `
  display: flex;
  align-items: center;
`;
exports.StarAndNumberWrap = StarAndNumberWrap;
// StarParent
// start-rating
const StarListWrap = styled.div `
  padding-right: rem(6);
  @tablet-or-smaller() {
    padding-right: rem(4);
  }
`;
exports.StarListWrap = StarListWrap;
const TotalRatings = styled.div.attrs({
    className: fixture_1.classes.totalRatings,
}) `
  /* margin-top: rem(1);
  margin-right: rem(2); */
  @font (12,semi);
  order: 1;
  @tablet-or-smaller() {
    @font (12, regular);
    color: $colors-almostgreyblue;
  }
`;
exports.TotalRatings = TotalRatings;
/**
 * @todo  - this is the second best place to test hoist
 *
 * @todo remember :hover is not allowed when disabled
 * @todo
 *    clip-path: inset(0px 12px 0px 0px);
 *
 * @todo white rabbit has orange stars when full
 */
const StyledStarIcon = styled.withComponent(StarIcon_1.default) `
  width: rem(13);
  height: rem(11);
  margin-right: rem(3);

  .path {
    fill: $colors-black;
    transition: 0.5s fill ease-in-out;

    /* @todo for offsetting...? */
    margin-left: rem(2);
  }
  ${props => props.empty &&
    styled.css `
      path {
        fill: $colors-gray;
      }
    `}

  /* @note also had this on hover */
  transition: 0.5s clip ease-in-out;
  ${props => props.half &&
    styled.css `
      clip-path: inset(0px 6px 0px 0px);
    `}
`;
exports.StyledStarIcon = StyledStarIcon;
const StarNumber = styled.span `
  @font (16, bold);
  color: #6d707f;
  padding: $spacing-extra-small;
`;
exports.StarNumber = StarNumber;
//# sourceMappingURL=elements.js.map