@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;
@use "@progress/kendo-theme-core/scss/components/rating/_layout.scss" as *;

@mixin kendo-rating--layout() {

    @include kendo-rating--layout-base();

    .k-rating {
        gap: $kendo-rating-spacing;
    }

    .k-rating-item {
        margin: 0;
        padding-inline: $kendo-rating-item-padding-x;
        padding-block: $kendo-rating-item-padding-y;
        vertical-align: middle;
        display: inline-flex;
        align-items: center;
        position: relative;
        overflow: hidden;
        outline: 0;

        * {
            pointer-events: none;
        }

        svg {
            fill: currentColor;
        }

        &:focus,
        &.k-focus {
            outline-width: $kendo-rating-item-focus-outline-width;
            outline-style: $kendo-rating-item-focus-outline-style;
            outline-offset: calc( -1 * #{$kendo-rating-item-focus-outline-width} );
            border-radius: k-border-radius(md);
        }
    }

    .k-rating-precision-part,
    .k-rating-precision-complement {
        inset-block-start: $kendo-rating-item-padding-y;
        inset-inline-start: $kendo-rating-item-padding-x;
    }

}