"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 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: 'product-rating-total-count'
})`
  @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