@use "sass:map";
@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;

@mixin kendo-breadcrumb--layout() {

    // Breadcrumb
    .k-breadcrumb {
        margin-inline: var( --kendo-breadcrumb-margin-x, #{$kendo-breadcrumb-margin-x} );
        margin-block: var( --kendo-breadcrumb-margin-y, #{$kendo-breadcrumb-margin-y} );
        padding-inline: var( --kendo-breadcrumb-padding-x, #{$kendo-breadcrumb-padding-x} );
        padding-block: var( --kendo-breadcrumb-padding-y, #{$kendo-breadcrumb-padding-y} );
        border-width: var( --kendo-breadcrumb-border-width, #{$kendo-breadcrumb-border-width} );
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: var( --kendo-breadcrumb-font-family, #{$kendo-breadcrumb-font-family} );
        font-size: var( --INTERNAL--kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} );
        line-height: var( --INTERNAL--kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} );
        display: flex;
        flex-direction: row;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
    }


    // Breadcrumb container
    .k-breadcrumb-container,
    .k-breadcrumb-root-item-container {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-flow: row nowrap;
        overflow: hidden;
    }

    .k-breadcrumb-root-item-container {
        align-items: flex-start;
        flex-shrink: 0;
    }


    // Breadcrumb item
    .k-breadcrumb-item {
        vertical-align: middle;
        display: inline-flex;
        flex-direction: row;
        flex: none;
        align-items: center;
        overflow: hidden;
    }


    // Breadcrumb root item
    .k-breadcrumb-root-item {
        flex-shrink: 0;
    }


    // Breadcrumb links
    .k-breadcrumb-link,
    .k-breadcrumb-root-link {
        @include border-radius( var( --kendo-breadcrumb-border-radius, #{$kendo-breadcrumb-link-border-radius} ) );
        padding-inline: var( --INTERNAL--kendo-breadcrumb-link-padding-x, #{$kendo-breadcrumb-link-padding-x} );
        padding-block: var( --INTERNAL--kendo-breadcrumb-link-padding-y, #{$kendo-breadcrumb-link-padding-y} );
        color: var( --kendo-breadcrumb-link-initial-text, #{$kendo-breadcrumb-link-initial-text} );
        text-decoration: none;
        white-space: nowrap;
        outline: none;
        cursor: pointer;
        position: relative;
        display: inline-flex;
        align-items: center;
        align-self: stretch;
        overflow: hidden;
        transition: var( --kendo-transition, none );

       &.k-selected {
            font-weight: var( --kendo-breadcrumb-link-selected-font-weight, #{$kendo-breadcrumb-link-selected-font-weight} );
       }

       &:disabled,
       &.k-disabled {
            background: var( --kendo-breadcrumb-link-disabled-bg, #{$kendo-breadcrumb-link-disabled-bg} );
            border: var( --kendo-breadcrumb-link-disabled-border, #{$kendo-breadcrumb-link-disabled-border} )
       }
    }

    .k-breadcrumb-link > .k-image,
    .k-breadcrumb-icontext-link .k-icon {
        margin-inline-end: var( --kendo-breadcrumb-link-icon-spacing, #{$kendo-breadcrumb-link-icon-spacing} );
    }

    .k-breadcrumb-icon-link {
        padding-inline: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-x, #{$kendo-breadcrumb-icon-link-padding-x} );
        padding-block: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-y, #{$kendo-breadcrumb-icon-link-padding-y} );
    }


    // Breadcrumb delimiter
    .k-breadcrumb-delimiter,
    .k-breadcrumb-delimiter-icon {
        color: inherit;
    }


    // Editing
    .k-breadcrumb-input-container {
        width: 100%;

        .k-breadcrumb-input-container {
            border-color: transparent;
        }
    }


    // Sizing
    @each $size, $size-props in $kendo-breadcrumb-sizes {
        $_link-padding-x: map.get( $size-props, link-padding-x );
        $_link-padding-y: map.get( $size-props, link-padding-y );
        $_icon-link-padding-x: map.get( $size-props, icon-link-padding-x );
        $_icon-link-padding-y: map.get( $size-props, icon-link-padding-y );
        $_font-size: map.get( $size-props, font-size );
        $_line-height: map.get( $size-props, line-height );

        // Breadcrumb sizes
        .k-breadcrumb-#{$size} {
            --INTERNAL--kendo-breadcrumb-font-size: var( --kendo-breadcrumb-#{$size}-font-size, #{$_font-size} );
            --INTERNAL--kendo-breadcrumb-line-height: var( --kendo-breadcrumb-#{$size}-line-height, #{$_line-height} );

            // Breadcrumb links
            .k-breadcrumb-link,
            .k-breadcrumb-root-link {
                --INTERNAL--kendo-breadcrumb-link-padding-x: var( --kendo-breadcrumb-#{$size}-link-padding-x, #{$_link-padding-x} );
                --INTERNAL--kendo-breadcrumb-link-padding-y: var( --kendo-breadcrumb-#{$size}-link-padding-y, #{$_link-padding-y} );
            }

            // Breadcrumb icon links
            .k-breadcrumb-icon-link {
                --INTERNAL--kendo-breadcrumb-icon-link-padding-x: var( --kendo-breadcrumb-#{$size}-icon-link-padding-x, #{$_icon-link-padding-x} );
                --INTERNAL--kendo-breadcrumb-icon-link-padding-y: var( --kendo-breadcrumb-#{$size}-icon-link-padding-y, #{$_icon-link-padding-y} );
            }
        }
    }

}