/**
 * Star Ratings
 *
 * Pure CSS. No floats or bidi. HTML inputs makes it ideal for use in a form. Simple em-based sizing.
 *
 * http://codepen.io/cdillon/pen/vXNbBw
 *
 * Based on Pure CSS Star Rating Widget by James Barnett
 * http://codepen.io/jamesbarnett/pen/vlpkh
 */

/* the container */
.strong-rating-wrapper {
}

/* the fieldset */
.strong-rating {
  display: inline-block;
  border: 0;
  margin: 0;
  padding: 5px;
}

.strong-rating:focus {
  outline: 1px solid #CCC;
}

/* the stars */
.strong-rating input[type=radio] {
  display: none !important;
}

.strong-rating label {
  font-weight: normal;
}

.strong-rating label:before {
  content: "";
  display: inline-block;
  font-size: 1.25em;
  width:20px;
  height:20px;
  -webkit-mask: url('../svg/star-solid.svg') center center no-repeat;
  mask: url('../svg/star-solid.svg') center center no-repeat;
  line-height: 1;
  /* use padding not margin */
  padding: 4px;
  transition: color 0.3s ease;
}

.strong-rating label:hover {
  cursor: pointer;
}

/* fieldset tweaks */

.strong-rating-wrapper legend {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* in a form */
.strong-rating-wrapper.in-form .strong-rating {}

/* in a view */
.strong-rating-wrapper.in-view .strong-rating {
  margin: 0;
  padding: 0;
}

/* in the post editor */
.strong-rating-wrapper.in-metabox .strong-rating > label:before {
  font-size: 20px;
  line-height: 27px;
  padding: 0 4px;
  background:#0073AA;
  color: #0073aa;
}

/* the magic */

/* this is how we highlight stars before the checked one (siblings before): */

/* hide the first label which is initially checked */
/* added bonus of POSTing the default value so no need for isset(...) */
.strong-rating label[for$="star0"] {
  display: none !important;
}

/* and turn all on */
.strong-rating label:before {
  color: #FFB900;
  background: #ffb900;
}

/* turn off stars after the one we're on */
.strong-rating label:hover ~ label:before {
  content: "";
  -webkit-mask: url('../svg/star-regular.svg') center center no-repeat;
  mask: url('../svg/star-regular.svg') center center no-repeat;
}
/* maybe use different color if validation error */
.error .strong-rating label:hover ~ label:before {
}

/* turn off stars after the current rating */
.strong-rating input:checked ~ label:before {
  content: "";
  -webkit-mask: url('../svg/star-regular.svg') center center no-repeat;
  mask: url('../svg/star-regular.svg') center center no-repeat;
}
/* maybe use different color if validation error */
.error .strong-rating input:checked ~ label:before {
}

/* turn on the current rating */
.strong-rating input[type="radio"]:checked + label:before,
.error .strong-rating input:checked + label:before {
  content: "";
  -webkit-mask: url('../svg/star-solid.svg') center center no-repeat;
  mask: url('../svg/star-solid.svg') center center no-repeat;
}
.strong-rating-wrapper.in-metabox input[type="radio"]:checked + label:before {
  color: #00b9eb;
  background: #00b9eb;
}

/* when hovering the entire fieldset: */

/* (1) turn all on */
.strong-rating:hover input ~ label:before,
.error .strong-rating:hover input ~ label:before {
  content: "";
  -webkit-mask: url('../svg/star-solid.svg') center center no-repeat;
  mask: url('../svg/star-solid.svg') center center no-repeat;
}

/* (2) indicate current selection (optional) */
.strong-rating:hover input:checked + label:before,
.error .strong-rating:hover input:checked + label:before {
  color: #FFE39E;
  background:#FFE39E;
}

/* (3) then turn off siblings after the hovered star */
.strong-rating:hover label:hover ~ input:not(:checked) + label:before {
  content: "";
  -webkit-mask: url('../svg/star-regular.svg') center center no-repeat;
  mask: url('../svg/star-regular.svg') center center no-repeat;
}
/* maybe use different color if validation error */
.error .strong-rating:hover label:hover ~ input:not(:checked) + label:before {
}