@use "bulma/sass/utilities/css-variables" as cv;
@use "bulma/sass/utilities/initial-variables" as iv;

$rate-color: cv.getVar('grey-lighter') !default;
$rate-color-active: cv.getVar('warning') !default;
$rate-spaced: 0.25rem !default;
$rate-text-spaced: 0.35rem !default;

.#{iv.$class-prefix}rate {

    @include cv.register-vars(
        (
            "rate-color": #{$rate-color},
            "rate-color-active": #{$rate-color-active},
            "rate-spaced": #{$rate-spaced},
            "rate-text-spaced": #{$rate-text-spaced}
        )
    );
}

.#{iv.$class-prefix}rate {
    align-items: center;
    display: flex;
    &:not(:last-child) {
        margin-bottom: calc(cv.getVar("block-spacing") * 0.5);
    }
    &.is-spaced .rate-item:not(:last-child) {
        margin-right: cv.getVar("rate-spaced");
    }
    &.is-disabled .rate-item {
        cursor: initial;
        &:hover {
            transform: none;
        }
    }
    &.is-rtl {
       .rate-item {
            order: 1;
       }
       .rate-text {
            margin-left: 0;
            margin-right: cv.getVar("rate-text-spaced");
       }
    }
    .rate-item {
        cursor: pointer;
        display: inline-flex;
        position: relative;
        transition: all 0.3s;
        &:hover {
            transform: scale(1.1);
        }
        &.set-on .icon,
        &.set-half .is-half {
            color: cv.getVar("rate-color-active");
        }
        &.set-half .is-half {
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
        }
    }
    .icon {
        color: $rate-color;
        line-height: 1;
        pointer-events: none;
        width: inherit;
    }
    .is-half > i {
        position: absolute;
        left: 0;
    }
    .rate-text {
        font-size: calc(#{cv.getVar("size-normal")} / 1.25);
        margin-left: cv.getVar("rate-text-spaced");
        &.is-small {
            font-size: calc(#{cv.getVar("size-small")} / 1.25);
        }
        &.is-medium {
            font-size: calc(#{cv.getVar("size-medium")} / 1.25);
        }
        &.is-large {
            font-size: calc(#{cv.getVar("size-large")} / 1.25);
        }
    }
}