.rating
	display: flex
    margin: 0 0 1em 0
    padding: 0
    border: none

/* Caption */

.rating__caption
    margin-bottom: 0.5em
    padding: 0


/* Group */

.rating__group
    position: relative
    width: 6em
    height: 1.2em
    background-image: url(../img/rate1.svg)
    background-size: 1.2em auto
    background-repeat: repeat-x


.rating__group:focus-within
    outline: 0.2em solid #4a90e2
    outline-offset: 0.2em


/* Star */

.rating__star
    position: absolute
    top: 0
    left: 0
    margin: 0
    height: 1.2em
    font-size: inherit
    -webkit-appearance: none
    -moz-appearance: none
    appearance: none
    background-size: 1.2em auto
    background-repeat: repeat-x


.rating__star:focus
    outline: none


.rating__star:hover,
.rating__star:checked
    background-image: url(../img/rate.svg)


.rating__star:hover ~ .rating__star
    background-image: url(../img/rate.svg1)


/* Options */

.rating__star:nth-of-type(1)
    z-index: 5
    width: 1.2em


.rating__star:nth-of-type(2)
    z-index: 4
    width: 2.5em


.rating__star:nth-of-type(3)
    z-index: 3
    width: 3.7em


.rating__star:nth-of-type(4)
    z-index: 2
    width: 4.9em


.rating__star:nth-of-type(5)
    z-index: 1
    width: 6em