@import "../../styles/variables.scss";

$unchecked-color: $brand-lightGrey;
$checked-color: $brand-blue;

.starGroup {
  font-size: $body-font-size;

  /* flip the order so we can use the + and ~ combinators */
  unicode-bidi: bidi-override;
  direction: rtl;

  & > input {
    display: none;

    & + label {
      background-color: $unchecked-color;
      border-radius: 50px;;
      color: $brand-white;
      display: inline-block;
      padding: 0 ($base-spacing * 1.5);
      cursor: pointer;

      &:not(:last-child) {
        margin-right: $s-spacing;
      }
    }

    &:checked ~ label {
      background-color: $checked-color;
    }
  }

  /* the hidden clearer */
  & .starClear + label {
    display: none;
  }

  &:hover > input + label:hover ~ label,
  &:hover > input + label:hover {
    background-color: $checked-color;
  }
}

.inputHelpText {
  padding-top: $base-spacing;
}