@use "./_variables.scss" as *;

@mixin kendo-split-button--layout() {

    // Split button
    .k-split-button {
        > .k-button:first-child {
            border-inline-end-width: 0;
        }

        > .k-button:last-child {
            border-inline-start-width: 0;
        }
    }

    // Split button arrow
    .k-split-button-arrow {
        width: auto;
        padding-inline: var( --kendo-split-button-arrow-padding-x, #{$kendo-split-button-md-arrow-padding-x} );
        padding-block: var( --kendo-split-button-arrow-padding-y , #{$kendo-split-button-md-arrow-padding-y} );
        aspect-ratio: auto;
        flex: none;

        .k-button-icon {
            min-width: 0;

            &::after {
                content:"";
                width: var( --kendo-split-button-arrow-delimiter-line-size, #{$kendo-split-button-arrow-delimiter-line-size} );
                height: var( --kendo-split-button-arrow-delimiter-size, #{$kendo-split-button-arrow-delimiter-size} );
                position: absolute;
                top: calc( ( 100% - #{$kendo-split-button-arrow-delimiter-size} ) / 2 );
                background: var( --kendo-split-button-arrow-delimiter-bg, #{$kendo-split-button-arrow-delimiter-bg} );
                z-index: 2;
            }
        }

        // Sizes
        @each $size, $size-props in $kendo-split-button-sizes {

            &.k-button-#{$size} {
                padding: var( --kendo-split-button-arrow-padding-y-#{$size}, #{$size-props} );

                .k-button-icon {
                    &::after {
                        inset-inline-start: calc( var( --kendo-split-button-delimiter-offset-#{$size}, #{$size-props} ) * -1 );
                    }
                }
            }
        }
    }
}