@progress/kendo-theme-fluent 5.7.0

package/scss/bottom-navigation/_theme.scss

@@ -0,0 +1,92 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-bottom-navigation--theme() {
+
+    .k-bottom-nav {
+        --INTERNAL--kendo-bottom-nav-text: var( --kendo-bottom-nav-text );
+        --INTERNAL--kendo-bottom-nav-bg: var( --kendo-bottom-nav-bg );
+        --INTERNAL--kendo-bottom-nav-border: var( --kendo-bottom-nav-border );
+
+        border-color: var( --INTERNAL--kendo-bottom-nav-border, initial );
+        color: var( --INTERNAL--kendo-bottom-nav-text, inherit );
+        background-color: var( --INTERNAL--kendo-bottom-nav-bg, initial );
+    }
+
+    .k-bottom-nav-item {
+        --INTERNAL--kendo-bottom-nav-item-text: var( --kendo-bottom-nav-item-text );
+        --INTERNAL--kendo-bottom-nav-item-bg: var( --kendo-bottom-nav-item-bg );
+        --INTERNAL--kendo-bottom-nav-item-border: var( --kendo-bottom-nav-item-border );
+
+        border-color: var( --INTERNAL--kendo-bottom-nav-item-border, initial );
+        color: var( --INTERNAL--kendo-bottom-nav-item-text, inherit );
+        background-color: var( --INTERNAL--kendo-bottom-nav-item-bg, initial );
+
+        &:focus,
+        &.k-focus {
+            --INTERNAL--kendo-bottom-nav-item-text: var( --kendo-bottom-nav-item-focus-text );
+            --INTERNAL--kendo-bottom-nav-item-bg: var( --kendo-bottom-nav-item-focus-bg );
+            --INTERNAL--kendo-bottom-nav-item-border: var( --kendo-bottom-nav-item-focus-border );
+        }
+
+        &:focus::after,
+        &.k-focus::after {
+            outline-color: var( --kendo-bottom-nav-item-focus-outline, initial );
+        }
+
+        &.k-selected {
+            --INTERNAL--kendo-bottom-nav-item-text: var( --kendo-bottom-nav-item-selected-text );
+            --INTERNAL--kendo-bottom-nav-item-bg: var( --kendo-bottom-nav-item-selected-bg );
+            --INTERNAL--kendo-bottom-nav-item-border: var( --kendo-bottom-nav-item-selected-border );
+        }
+
+        &:disabled,
+        &.k-disabled{
+            --INTERNAL--kendo-bottom-nav-item-text: var( --kendo-bottom-nav-item-disabled-text );
+            --INTERNAL--kendo-bottom-nav-item-bg: var( --kendo-bottom-nav-item-disabled-bg );
+            --INTERNAL--kendo-bottom-nav-item-border: var( --kendo-bottom-nav-item-disabled-border );
+        }
+    }
+
+    @each $fill-mode, $theme-colors in $kendo-bottom-nav-theme-colors {
+        @each $theme-color, $color-props in $theme-colors {
+
+            $_text-color: map-get( $color-props, text );
+            $_bg: map-get( $color-props, bg );
+            $_border-color: map-get( $color-props, border );
+
+            $_focus-text: map-get( $color-props, focus-text );
+            $_focus-bg: map-get( $color-props, focus-bg );
+            $_focus-border: map-get( $color-props, focus-border );
+            $_focus-outline: map-get( $color-props, focus-outline );
+
+            $_active-text: map-get( $color-props, active-text );
+            $_active-bg: map-get( $color-props, active-bg );
+            $_active-border: map-get( $color-props, active-border );
+
+            $_disabled-text: map-get( $color-props, disabled-text );
+            $_disabled-bg: map-get( $color-props, disabled-bg );
+            $_disabled-border: map-get( $color-props, disabled-border );
+
+            .k-bottom-nav-#{$fill-mode}.k-bottom-nav-#{$theme-color} {
+                --kendo-bottom-nav-text: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-text, #{$_text-color} );
+                --kendo-bottom-nav-bg: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-bg, #{$_bg} );
+                --kendo-bottom-nav-border: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-border, #{$_border-color} );
+
+                --kendo-bottom-nav-item-focus-text: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-focus-text, #{$_focus-text} );
+                --kendo-bottom-nav-item-focus-bg: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-focus-bg, #{$_focus-bg} );
+                --kendo-bottom-nav-item-focus-border: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-focus-border, #{$_focus-border} );
+                --kendo-bottom-nav-item-focus-outline: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-focus-outline, #{$_focus-outline} );
+
+                --kendo-bottom-nav-item-selected-text: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-selected-text, #{$_active-text} );
+                --kendo-bottom-nav-item-selected-bg: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-selected-bg, #{$_active-bg} );
+                --kendo-bottom-nav-item-selected-border: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-selected-border, #{$_active-border} );
+
+                --kendo-bottom-nav-item-disabled-text: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-disabled-text, #{$_disabled-text} );
+                --kendo-bottom-nav-item-disabled-bg: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-disabled-bg, #{$_disabled-bg} );
+                --kendo-bottom-nav-item-disabled-border: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-disabled-border, #{$_disabled-border} );
+            }
+        }
+    }
+
+}

package/scss/bottom-navigation/_variables.scss

@@ -0,0 +1,178 @@
+@use "sass:map";
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Horizontal padding of the bottom navigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-padding-x: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+/// Vertical padding of the bottom navigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-x !default;
+/// Spacing of the bottom navigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-gap: $kendo-bottom-nav-padding-x !default;
+/// Border width of the bottom navigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-border-width: 1px 0px 0px 0px !default;
+/// Font family of the bottom navigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-font-family: var( --kendo-font-family, inherit) !default;
+/// Font size of the bottom navigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-font-size: var( --kendo-font-size-md, 1rem ) !default;
+/// Line height of the bottom navigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-line-height: var( --kendo-line-height-md, normal ) !default;
+/// Letter spacing of the bottom navigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-letter-spacing: .2px !default;
+
+/// Horizontal padding of the bottom navigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the bottom navigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-padding-y: map-get( $kendo-spacing, thin ) !default;
+/// Minimum width of the bottom navigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-min-width: 72px !default;
+/// Maximum width of the bottom navigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-max-width: none !default;
+/// Minimum height of the bottom navigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-min-height: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-padding-x * 2} - #{$kendo-bottom-nav-padding-x * 2} ) !default;
+/// Border radius of the bottom navigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Spacing of the bottom navigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-gap: 0 map-get( $kendo-spacing, 1 ) !default;
+/// Offset of the focused bottom navigation item.
+/// @group bottom-nav
+$kendo-bottom-nav-item-focus-offset: map-get( $kendo-spacing, thin ) !default;
+/// Outline width of the focused bottom navigation item.
+/// @group bottom-nav
+$kendo-bottom-nav-item-focus-outline-width: map-get( $kendo-spacing, hair ) !default;
+/// Outline style of the focused bottom navigation item.
+/// @group bottom-nav
+$kendo-bottom-nav-item-focus-outline-style: solid !default;
+
+/// Vertical margin of the focused bottom navigation item icon.
+/// @group bottom-nav
+$kendo-bottom-nav-item-icon-margin-y: map-get( $kendo-spacing, 2 ) !default;
+/// Horizontal margin of the focused bottom navigation item icon.
+/// @group bottom-nav
+$kendo-bottom-nav-item-icon-margin-x: $kendo-bottom-nav-item-icon-margin-y !default;
+
+/// Size of the focused bottom navigation item icon.
+/// @group bottom-nav
+$kendo-bottom-nav-item-icon-size: map-get( $kendo-spacing, 6 ) !default;
+
+/// Box shadow of the bottom navigation.
+/// @group bottom-nav
+$kendo-bottom-nav-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+
+// Theme variations for the bottom-nav.
+$kendo-bottom-nav-brand-colors: (
+    primary: primary,
+    error: error,
+    success: success,
+    info: info,
+    secondary: neutral,
+    tertiary: tertiary,
+ );
+
+// Matrix with bottom-nav theme colors in the order: bg, color, border
+$_tc-bottom-nav-matrix: (
+    solid: (
+        normal: (100, $white, 100),
+        focus: (100, $white, 100, inherit),
+        active: (120, $white, 120),
+        disabled: ( inherit, 40, var( --kendo-disabled-border, inherit ))
+    ),
+    flat: (
+        normal: ($white, get-theme-color-var( neutral-130 ), transparent),
+        focus: (inherit, 100, transparent, 100),
+        active: (inherit, 100, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), initial)
+    )
+);
+
+$_tc-bottom-nav-warning-matrix: (
+    solid: (
+        normal: (100, get-theme-color-var( neutral-160 ), 100),
+        focus: (100, get-theme-color-var( neutral-160 ), 100, $white),
+        active: (120, get-theme-color-var( neutral-190 ), 120),
+        disabled: (inherit, get-theme-color-var( neutral-120 ) , var( --kendo-disabled-border, inherit ))
+    ),
+    flat: (
+        normal: ($white, get-theme-color-var( neutral-130 ), 100),
+        focus: (inherit, 100, transparent, 100),
+        active: (inherit, 100, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), initial)
+    )
+);
+
+$_tc-bottom-nav-dark-matrix: (
+    solid: (
+        normal: (160, $white, 160),
+        focus: (160, $white, 160, $white),
+        active: (180, $white, 180),
+        disabled: (inherit, 60 , var( --kendo-disabled-border, inherit ))
+    ),
+    flat: (
+        normal: ($white, get-theme-color-var( neutral-130 ), transparent),
+        focus: (inherit, 160, transparent, 130),
+        active: (inherit, 170, transparent),
+        disabled: (inherit, var( --kendo-disabled-text, inherit ), initial)
+    )
+);
+
+$_tc-bottom-nav-light-matrix: (
+    solid: (
+        normal: (50, get-theme-color-var( neutral-160 ), 50),
+        focus: (50, 190, 50, $white),
+        active: (70, 190, 70),
+        disabled: (inherit, 120 , var( --kendo-disabled-border, inherit ))
+    ),
+    flat: (
+        normal: ($white, get-theme-color-var( neutral-130 ), transparent),
+        focus: (inherit, 130, transparent, 130),
+        active: (inherit, 130, transparent),
+        disabled: (inherit, var( --kendo-disabled-text, inherit ), initial)
+    )
+);
+
+/// Theme colors map for the bottom-nav variations.
+$kendo-bottom-nav-theme-colors: ();
+
+@each $fill-mode, $ui-states in $_tc-bottom-nav-matrix {
+    @each $brand-color, $palette in $kendo-bottom-nav-brand-colors {
+        $kendo-bottom-nav-theme-colors: map.deep-merge(
+            $kendo-bottom-nav-theme-colors,
+            generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
+        );
+    };
+}
+
+@each $fill-mode, $ui-states in $_tc-bottom-nav-warning-matrix {
+    $kendo-bottom-nav-theme-colors: map.deep-merge(
+        $kendo-bottom-nav-theme-colors,
+        generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
+    );
+}
+
+@each $fill-mode, $ui-states in $_tc-bottom-nav-dark-matrix {
+    $kendo-bottom-nav-theme-colors: map.deep-merge(
+        $kendo-bottom-nav-theme-colors,
+        generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+    );
+}
+
+@each $fill-mode, $ui-states in $_tc-bottom-nav-light-matrix {
+    $kendo-bottom-nav-theme-colors: map.deep-merge(
+        $kendo-bottom-nav-theme-colors,
+        generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+    );
+}

package/scss/bottom-navigation/index.scss

@@ -0,0 +1,25 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "bottom-navigation",
+    dependencies: (
+        "icon"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "bottom-navigation" ) {
+        @include kendo-bottom-navigation--layout();
+        @include kendo-bottom-navigation--theme();
+    }
+}

package/scss/breadcrumb/_layout.scss

@@ -0,0 +1,132 @@
+@use "../core/" 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( --kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} );
+        line-height: var( --kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} );
+        display: flex;
+        flex-direction: row;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-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-container {
+
+        &.k-flex-wrap {
+            flex-wrap: wrap;
+        }
+    }
+    .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;
+        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( --kendo-breadcrumb-link-padding-x, #{$kendo-breadcrumb-link-padding-x} );
+        padding-block: var( --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-root-link {
+        margin-inline-end: var( --kendo-breadcrumb-root-link-spacing, #{$kendo-breadcrumb-root-link-spacing} );
+    }
+
+    .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( --kendo-breadcrumb-icon-link-padding-x, #{$kendo-breadcrumb-icon-link-padding-x} );
+        padding-block: var( --kendo-breadcrumb-icon-link-padding-y, #{$kendo-breadcrumb-icon-link-padding-y} );
+    }
+
+
+    // Breadcrumb delimiter
+    .k-breadcrumb-delimiter,
+    .k-breadcrumb-delimiter-icon {
+        color: inherit;
+        font-size: var( --kendo-breadcrumb-delimiter-icon-font-size, #{$kendo-breadcrumb-delimiter-icon-font-size} );
+    }
+
+
+    // Editing
+    .k-breadcrumb-input-container {
+        width: 100%;
+
+        .k-breadcrumb-input-container {
+            border-color: transparent;
+        }
+    }
+
+}

package/scss/breadcrumb/_theme.scss

@@ -0,0 +1,134 @@
+@use "../core/" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-breadcrumb--theme() {
+
+    // Breadcrumb
+    .k-breadcrumb {
+        @include fill(
+            var( --kendo-breadcrumb-text, #{$kendo-breadcrumb-text} ),
+            var( --kendo-breadcrumb-bg, #{$kendo-breadcrumb-bg} ),
+            var( --kendo-breadcrumb-border, #{$kendo-breadcrumb-border} )
+        );
+
+        &:focus,
+        &.k-focus {
+            @include box-shadow( var( --kendo-breadcrumb-focus-shadow, #{$kendo-breadcrumb-focus-shadow} ) )
+        }
+    }
+
+
+    // Breadcrumb link
+    .k-breadcrumb-link {
+        @include fill(
+            var( --kendo-breadcrumb-link-text, #{$kendo-breadcrumb-link-text} ),
+            var( --kendo-breadcrumb-link-bg, #{$kendo-breadcrumb-link-bg} ),
+            var( --kendo-breadcrumb-link-border, #{$kendo-breadcrumb-link-border} )
+        );
+
+        // Hovered state
+        &:hover,
+        &.k-hover {
+            @include fill(
+                var( --kendo-breadcrumb-link-hover-text, #{$kendo-breadcrumb-link-hover-text} ),
+                var( --kendo-breadcrumb-link-hover-bg, #{$kendo-breadcrumb-link-hover-bg} ),
+                var( --kendo-breadcrumb-link-hover-border, #{$kendo-breadcrumb-link-hover-border} )
+            );
+        }
+
+        // Active state
+        &:active,
+        &.k-active {
+            @include fill(
+                var( --kendo-breadcrumb-link-active-text, #{$kendo-breadcrumb-link-active-text} ),
+                var( --kendo-breadcrumb-link-active-bg, #{$kendo-breadcrumb-link-active-bg} ),
+                var( --kendo-breadcrumb-link-active-border, #{$kendo-breadcrumb-link-active-border} )
+            );
+        }
+
+        // Focused state
+        &:focus,
+        &.k-focus {
+            @include fill(
+                $color: var( --kendo-breadcrumb-link-focus-text, #{$kendo-breadcrumb-link-focus-text} ),
+                $bg: var( --kendo-breadcrumb-link-focus-bg, #{$kendo-breadcrumb-link-focus-bg} ),
+            );
+            @include box-shadow( var( --kendo-breadcrumb-link-focus-shadow, #{$kendo-breadcrumb-link-focus-shadow} ) );
+
+            // Focus-hover state
+            &:hover,
+            &.k-hover {
+                @include fill( $bg: var( --kendo-breadcrumb-link-focus-hover-bg, #{$kendo-breadcrumb-link-focus-hover-bg} ) );
+            }
+        }
+
+        // Disabled state
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill( $color: var( --kendo-breadcrumb-link-disabled-text, #{$kendo-breadcrumb-link-disabled-text} ) );
+        }
+
+        // Selected state
+        &.k-selected {
+            @include fill(
+                var( --kendo-breadcrumb-link-selected-text, #{$kendo-breadcrumb-link-selected-text} ),
+                var( --kendo-breadcrumb-link-selected-bg, #{$kendo-breadcrumb-link-selected-bg} ),
+                var( --kendo-breadcrumb-link-selected-border, #{$kendo-breadcrumb-link-selected-border} ),
+            );
+        }
+    }
+
+    // Breadcrumb root link
+    .k-breadcrumb-root-link {
+        @include fill(
+            var( --kendo-breadcrumb-root-link-text, #{$kendo-breadcrumb-root-link-text} ),
+            var( --kendo-breadcrumb-root-link-bg, #{$kendo-breadcrumb-root-link-bg} ),
+            var( --kendo-breadcrumb-root-link-border, #{$kendo-breadcrumb-root-link-border} )
+        );
+
+        // Hovered state
+        &:hover,
+        &.k-hover {
+            @include fill(
+                var( --kendo-breadcrumb-root-link-hover-text, #{$kendo-breadcrumb-root-link-hover-text} ),
+                var( --kendo-breadcrumb-root-link-hover-bg, #{$kendo-breadcrumb-root-link-hover-bg} ),
+                var( --kendo-breadcrumb-root-link-hover-border, #{$kendo-breadcrumb-root-link-hover-border} )
+            );
+        }
+
+        // Active state
+        &:active,
+        &.k-active {
+            @include fill(
+                var( --kendo-breadcrumb-root-link-active-text, #{$kendo-breadcrumb-root-link-active-text} ),
+                var( --kendo-breadcrumb-root-link-active-bg, #{$kendo-breadcrumb-root-link-active-bg} ),
+                var( --kendo-breadcrumb-root-link-active-border, #{$kendo-breadcrumb-root-link-active-border} )
+            );
+        }
+
+        // Focused state
+        &:focus,
+        &.k-focus {
+            @include fill(
+                $color: var( --kendo-breadcrumb-root-link-focus-text, #{$kendo-breadcrumb-root-link-focus-text} ),
+                $bg: var( --kendo-breadcrumb-root-link-focus-bg, #{$kendo-breadcrumb-root-link-focus-bg} ),
+            );
+            @include box-shadow( var( --kendo-breadcrumb-root-link-focus-shadow, #{$kendo-breadcrumb-root-link-focus-shadow} ) );
+
+            // Focus-hover state
+            &:hover,
+            &.k-hover {
+                @include fill( $bg: var( --kendo-breadcrumb-root-link-focus-hover-bg, #{$kendo-breadcrumb-root-link-focus-hover-bg} ) );
+            }
+        }
+
+        // Disabled state
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill( $color: var( --kendo-breadcrumb-root-link-disabled-text, #{$kendo-breadcrumb-root-link-disabled-text} ) );
+        }
+    }
+
+}