@import "../settings/_mixins";
@import "../settings/_variables";

.dnetor-rating {
    display: flex;
    --dnetor-rating-icon-marked-color: #ffc824;
    --dnetor-rating-icon-unmarked-color: #ccd6df;
    --dnetor-rating-icon-font-size: 18px;

    .dnetor-icon-item {
        position: relative;
    }

    .dnetor-icon-marked {
        --dnetor-rating-icon-marked-width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: var(--dnetor-rating-icon-marked-width);
        z-index: 10;
        overflow: hidden;
        color: var(--dnetor-rating-icon-marked-color);
        font-size: var(--dnetor-rating-icon-font-size);
        svg {
            width: auto;
            fill: var(--dnetor-rating-icon-marked-color);
            height: var(--dnetor-rating-icon-font-size);
        }
        svg,
        i {
            display: flex;
            flex-shrink: 0;
        }
    }

    .dnetor-icon-unmarked {
        svg {
            width: auto;
            height: var(--dnetor-rating-icon-font-size);
            fill: var(--dnetor-rating-icon-unmarked-color);
        }

        svg,
        i {
            display: flex;
            flex-shrink: 0;
        }
        font-size: var(--dnetor-rating-icon-font-size);
        color: var(--dnetor-rating-icon-unmarked-color);
    }
}