@use '../../styles/tools'
@use './variables' as *

@include tools.layer('components')
  // Block
  .v-rating
    max-width: 100%
    display: inline-flex
    white-space: $rating-white-space

    &--readonly
      pointer-events: none

  // Element
  .v-rating__wrapper
    align-items: $rating-item-align-items
    display: inline-flex
    flex-direction: column

    &--bottom
      flex-direction: column-reverse

  .v-rating__item
    display: inline-flex
    position: relative

    label
      cursor: pointer

    .v-btn--variant-plain
      opacity: $rating-item-button-opacity

    .v-btn
      transition-property: $rating-item-button-transition-property

      .v-icon
        transition: inherit
        transition-timing-function: $rating-item-transition-timing-function

    &:hover:not(.v-rating__item--focused)
      .v-rating--hover &
        .v-btn
          transform: $rating-item-icon-transform

    &--half
      overflow: hidden
      position: absolute
      clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%)
      z-index: 1

      .v-btn__overlay,
      &:hover .v-btn__overlay
        opacity: 0

  .v-rating__hidden
    height: 0
    opacity: 0
    position: absolute
    width: 0