.q-rating
  color: $rating-grade-color
  vertical-align: middle

  &__icon-container
    height: 1em
    outline: 0

    & + &
      margin-left: 2px

    [dir=rtl] & + &
      margin-left: 0 #{"/* rtl:ignore */"}
      margin-right: 2px #{"/* rtl:ignore */"}

  &__icon
    color: currentColor
    text-shadow: $rating-shadow
    position: relative
    opacity: .4
    transition: transform .2s ease-in, opacity .2s ease-in, color .2s ease-in

    &--hovered
      transform: scale(1.3)

    &--active
      opacity: 1
    &--exselected
      opacity: .7

  &--no-dimming .q-rating__icon
    opacity: 1

  &--editable .q-rating__icon-container
    cursor: pointer