@use "../../../bulma/sass/utilities" as bulma-utilities;

$rate-color: var(--grey-lighter) !default;
$rate-color-active-hsla: bulma-utilities.bulmaVarDarken(warning, 5%) !default;
$rate-color-active: var(--rate-color-active-hsla) !default;
$rate-spaced: 0.25rem !default;
$rate-text-spaced: 0.35rem !default;
$rate-text-font-size: var(--size-normal) !default;

// Map Local variables
$-css-vars-map: (
    "rate-color": $rate-color,
    "rate-color-active-hsla": $rate-color-active-hsla,
    "rate-color-active": $rate-color-active,
    "rate-spaced": $rate-spaced,
    "rate-text-spaced": $rate-text-spaced,
    "rate-text-font-size": $rate-text-font-size,
);

// Register & Export CSS Variabless
@include bulma-utilities.exportCSSVars($-css-vars-map);
@include bulma-utilities.registerComponentCSSVars("rate", $-css-vars-map);

.rate {
    display: flex;
    align-items: center;

    &:not(:last-child) {
        margin-bottom: calc(var(--block-spacing) * 0.5);
    }

    &.is-spaced .rate-item:not(:last-child) {
        margin-right: var(--rate-spaced);
    }

    &.is-disabled .rate-item {
        cursor: initial;

        &:hover {
            transform: none;
        }
    }

    &.is-rtl {
        .rate-item {
            order: 1;
        }

        .rate-text {
            margin-right: var(--rate-text-spaced);
            margin-left: 0;
        }
    }

    .rate-item {
        position: relative;
        display: inline-flex;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
            transform: scale(1.1);
        }

        &.set-on .icon,
        &.set-half .is-half {
            color: var(--rate-color-active);
        }

        &.set-half .is-half {
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
        }
    }

    .icon {
        width: inherit;
        line-height: 1;
        color: var(--rate-color);
        pointer-events: none;
    }

    .is-half > i {
        position: absolute;
        left: 0;
    }

    .rate-text {
        margin-left: var(--rate-text-spaced);
        font-size: calc(var(--rate-text-font-size) / 1.25);

        @include bulma-utilities.control-sizes(rate-text-font-size);
    }
}