@import "/imports/ui/stylesheets/variables/_all";

.starRating {
  font-family: 'bbb-icons' !important;
  > fieldset {
    border: none;
    display: inline-block;

    &:not(:checked) {
      > input {
        position: absolute;
        top: -9999px;
        clip: rect(0,0,0,0);
      }

      > label {
        float: right;
        width: 1em;
        padding: 0 .05em 0 .1rem;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        font-size: 2.5rem;
        color: black;
        font-weight: 100;

        [dir="rtl"] & {
          padding: 0 .1rem 0 .05em;
        }

        @include mq($small-only) {
          font-size: 2rem;
        }

        &:before {
          content: '\e951';
        }

        &:hover,
        &:hover ~ label {
          color: var(--color-primary);
          text-shadow: 0 0 3px var(--color-primary);
          &:before {
            content: '\e951';
          }
        }
      }
    }

    > input:checked {
      & ~ label {
        &:before {
          content: '\e952';
          color: var(--color-primary);
        }
      }
    }

    > label:active {
      position: relative;
      top: 2px;
    }
  }
}

.legend {
  font-family: Arial, sans-serif;
  font-weight: normal;
}