.smiley-rating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 20px 0;
    padding: 20px 0;
    overflow: auto;
}

.smiley-rating__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    margin: auto;
}

@media (min-width: 992px) {
    .smiley-rating__wrapper {
        gap: 16px;
    }
}

.smiley-rating__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    min-width: 96px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: .75;
}

.smiley-rating__item.inactive {
    opacity: .75;
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
}

.smiley-rating__item:hover {
    opacity: 1;
    -webkit-filter: grayscale(0);
            filter: grayscale(0);
}

.smiley-rating__item.active {
    opacity: 1;
}

.smiley-rating__icon {
    font-size: 48px;
    line-height: 1;
}

.smiley-rating__icon img {
    width: 48px;
    height: 48px;
    -o-object-fit: contain;
       object-fit: contain;
}

.smiley-rating__count,
.smiley-rating__label {
    font-size: 12px;
    line-height: 1.2;
    color: #000;
}

.smiley-rating.smiley-rating__loading .smiley-rating__item {
    opacity: 0.5;
    pointer-events: none;
}