/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@wordpress/scripts/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/@wordpress/scripts/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./assets/css/components/rating-slider.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
.rating-slider {
    display: flex;
    align-items: center;
    gap: 0.5rem
}

@media (min-width: 768px) {

    .rating-slider {
        gap: 1rem
    }
}

.rating-slider-wrapper {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    width: 2.25rem;
    justify-content: flex-end
}

@media (min-width: 640px) {

    .rating-slider-wrapper {
        width: 4.125rem
    }
}

.rating-slider-progress {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    border-radius: 0.5rem
}

.rating-slider-thumb {
    position: absolute;
    top: 50%;
    display: flex;
    height: 0.625rem;
    width: 0.625rem;
    --tw-translate-y: -50%;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    align-items: center;
    justify-content: center;
    border-radius: 9999px
}

@media (min-width: 640px) {

    .rating-slider-thumb {
        height: 1.25rem;
        width: 1.25rem
    }
}

.rating-slider-thumb .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    --tw-translate-y: -50%;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rating-slider-thumb svg {
    height: 0.375rem;
    width: 0.375rem
}

@media (min-width: 640px) {

    .rating-slider-thumb svg {
        height: 0.75rem;
        width: 0.75rem
    }
}

.rating-slider-number {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.02em
}

/*# sourceMappingURL=rating-slider.css.map*/