@use '../../styles/variables';

$rate-star-font-size: 18px !default;
.thy-rate {
    &:not(.disabled) {
        &:focus {
            outline: 0 !important;
        }
    }
    .thy-rate-container {
        display: flex;
        align-items: center;
        color: variables.$warning;

        .thy-rate-star {
            position: relative;
            font-size: $rate-star-font-size;
            color: inherit;
            transition: all 0.3s;
            &:not(:last-child) {
                margin-right: 8px;
            }
            &:hover {
                cursor: variables.$hand-cursor;
                transform: scale(1.2);
            }

            .thy-rate-item-left {
                position: absolute;
                top: 0;
                left: 0;
                width: 50%;
                height: 100%;
                overflow: hidden;
                opacity: 0;
            }

            .thy-rate-item-left,
            .thy-rate-item-all {
                color: variables.$gray-100;
                transition: all 0.3s;
                .thy-icon {
                    font-size: $rate-star-font-size;
                }
            }

            &--full {
                .thy-rate-item-all {
                    color: inherit;
                    opacity: 1;
                }
            }

            &--active,
            &--half {
                .thy-rate-item-left {
                    color: inherit;
                    opacity: 1;
                }
            }
        }

        &--disabled {
            pointer-events: none;
        }
    }
}
