//
// Star rating
//

.star-rating {
  &.disabled,
  &:disabled {
    pointer-events: none;
  }

  > label {
    display: block;
    float: left;
    width: 1em;
    height: 1em;
    font-size: $form-star-size;
    cursor: pointer;
    @include form-star-rating($accessible-orange);

    &:not(:first-of-type){
      margin-left: $form-star-margin-between;
    }
  }

  > input:checked ~ label {
    @include form-star-rating($gray-500);
  }

  > input:checked + label {
    @include form-star-rating($accessible-orange);
  }

  > [data-focus-visible-added]:focus + label {
    @include focus-visible();
    outline-offset: -1px;
    box-shadow: inset 0 0 0 add(1px, $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color);
  }

  &:hover input + label {
    @include form-star-rating($black);
  }

  > input:hover ~ label {
    @include form-star-rating($gray-500);
  }

  > input:hover + label {
    @include form-star-rating($black);
  }
}

.star-rating-dark {
  > label {
    @include form-star-rating($brand-orange);
  }

  > input:checked ~ label {
    @include form-star-rating($gray-700);
  }

  > input:checked + label {
    @include form-star-rating($brand-orange);
  }

  &:hover input + label {
    @include form-star-rating($white);
  }

  > input:hover ~ label {
    @include form-star-rating($gray-700);
  }

  > input:hover + label {
    @include form-star-rating($white);
  }
}

.star-rating-sm > label {
  font-size: $form-star-size-sm;
}