// This file is auto-generated. Do not edit!
// baka:source scss/all.scss

// #region @import "./index.scss"; -> scss/index.scss
// #region @import "./core/_index.scss"; -> scss/core/_index.scss
$wcag-min-contrast-ratio: 4.5 !default;

// Variables
// #region @import "../_variables.scss"; -> scss/_variables.scss
// #region @import "./core/functions/index.import.scss"; -> scss/core/functions/index.import.scss
// #region @import "@progress/kendo-theme-core/scss/functions/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
// #region @import "./_color.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_color.import.scss
/// Returns the alpha channel of a color.
/// @param {Color} $color - The color to get the alpha channel for.
/// @return {Number} - The alpha channel of the color.
///
/// @example scss - Usage
///   @debug k-color-alpha( rgba( 0, 0, 0, 0.5 ) ); // => 0.5
///   @debug k-color-alpha( #000 ); // => 1
@function k-color-alpha( $color ) {
    @return alpha( $color );
}

/// Returns the red channel of a color.
/// @param {Color} $color - The color to get the red channel for.
/// @return {Number} - The red channel of the color.
///
/// @example scss - Usage
///   @debug k-color-red( #ff0000 ); // => 255
@function k-color-red( $color ) {
    @return red( $color );
}

/// Returns the green channel of a color.
/// @param {Color} $color - The color to get the green channel for.
/// @return {Number} - The green channel of the color.
///
/// @example scss - Usage
///   @debug k-color-green( #00ff00 ); // => 255
@function k-color-green( $color ) {
    @return green( $color );
}

/// Returns the blue channel of a color.
/// @param {Color} $color - The color to get the blue channel for.
/// @return {Number} - The blue channel of the color.
///
/// @example scss - Usage
///   @debug k-color-blue( #0000ff ); // => 255
@function k-color-blue( $color ) {
    @return blue( $color );
}

/// Returns the hue of a color.
/// @param {Color} $color - The color to get the hue for.
/// @return {Number} - The hue of the color.
///
/// @example scss - Usage
///   @debug k-color-hue( #e1d7d2 ); // => 20deg
@function k-color-hue( $color ) {
    @return hue( $color );
}

/// Returns the saturation of a color.
/// @param {Color} $color - The color to get the saturation for.
/// @return {Number} - The saturation of the color.
///
/// @example scss - Usage
///   @debug k-color-saturation( #e1d7d2 ); // => 20%
@function k-color-saturation( $color ) {
    @return saturation( $color );
}

/// Returns the lightness of a color.
/// @param {Color} $color - The color to get the lightness for.
/// @return {Number} - The lightness of the color.
///
/// @example scss - Usage
///   @debug k-color-lightness( #e1d7d2 ); // => 80%
@function k-color-lightness( $color ) {
    @return lightness( $color );
}

/// Returns a color that is a mix of two colors.
/// @param {Color} $color1 - The first color.
/// @param {Color} $color2 - The second color.
/// @param {Number} $weight - The weight of the first color in the mix.
/// @return {Color} - The mixed color.
///
/// @example scss - Usage
///   @debug k-color-mix( #f00, #00f ); // => #800080
@function k-color-mix( $color1, $color2, $weight: 50% ) {
    @return mix( $color1, $color2, $weight );
}

/// Makes a color darker by decreasing its lightness.
/// @param {Color} $color - The color to darken.
/// @param {Number} $amount - The amount to darken the color.
/// @return {Color} - The darkened color.
///
/// @example scss - Usage
///   @debug k-color-darken( #f00, 10% ); // => #e60000
@function k-color-darken( $color, $amount) {
    @return darken( $color, $amount );
}

/// Makes a color lighter by increasing its lightness.
/// @param {Color} $color - The color to lighten.
/// @param {Number} $amount - The amount to lighten the color.
/// @return {Color} - The lightened color.
///
/// @example scss - Usage
///   @debug k-color-lighten( #f00, 10% ); // => #ff1a1a
@function k-color-lighten( $color, $amount) {
    @return lighten( $color, $amount );
}

/// Increases or decreases the hue of a color.
/// @param {Color} $color - The color to adjust the hue for.
/// @param {Number} $degrees - The amount to adjust the hue.
/// @return {Color} - The adjusted color.
///
/// @example scss - Usage
///   @debug k-color-adjust-hue( #f00, 10deg ); // => #ff1a00
@function k-color-adjust-hue( $color, $degrees ) {
    @return adjust-hue( $color, $degrees );
}

/// Increases the saturation of a color.
/// @param {Color} $color - The color to saturate.
/// @param {Number} $amount - The amount to saturate the color.
/// @return {Color} - The saturated color.
///
/// @example scss - Usage
///   @debug k-color-saturate( #f00, 10% ); // => #ff3333
@function k-color-saturate( $color, $amount ) {
    @return saturate( $color, $amount );
}

/// Decreases the saturation of a color.
/// @param {Color} $color - The color to desaturate.
/// @param {Number} $amount - The amount to desaturate the color.
/// @return {Color} - The desaturated color.
///
/// @example scss - Usage
///   @debug k-color-desaturate( #f00, 10% ); // => #e60000
@function k-color-desaturate( $color, $amount ) {
    @return desaturate( $color, $amount );
}

/// Returns a gray color with the same lightness as the input color.
/// @param {Color} $color - The color to convert to grayscale.
/// @return {Color} - The grayscale color.
///
/// @example scss - Usage
///   @debug k-color-grayscale( #f00 ); // => #808080
@function k-color-grayscale( $color ) {
    @return grayscale( $color );
}

/// Returns the RGB complement of a color. This identical to adjusting the hue
/// by 180 degrees.
/// @param {Color} $color - The color to get the complement for.
/// @return {Color} - The complement color.
///
/// @example scss - Usage
///   @debug k-color-complement( #f00 ); // => #00ffff
@function k-color-complement( $color ) {
    @return complement( $color );
}

/// Returns the inverse of a color.
/// @param {Color} $color - The color to invert.
/// @return {Color} - The inverted color.
///
/// @example scss - Usage
///   @debug k-color-invert( #f00 ); // => #00ffff
@function k-color-invert( $color ) {
    @return invert( $color );
}

// #endregion
// #region @import "./_color-contrast.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_color-contrast.import.scss
// Adapted from https://gist.github.com/sgomes/ccc72f71137fe29039c92c0a9fe9b657
// Adapted from https://github.com/twbs/bootstrap/commit/03908ea37a55eaa44c12ce5694dddc1630c980b3

//  Precomputed linear color channel values, for use in contrast calculations.
//  See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
//  Algorithm, for c in 0 to 255:
//  f(c) {
//    c = c / 255;
//    return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
//  }
//  This lookup table is needed since there is no `pow` in SASS.
// stylelint-disable number-max-precision
$_linear-channel-values: (
    0
    .0003035269835488375
    .000607053967097675
    .0009105809506465125
    .00121410793419535
    .0015176349177441874
    .001821161901293025
    .0021246888848418626
    .0024282158683907
    .0027317428519395373
    .003035269835488375
    .003346535763899161
    .003676507324047436
    .004024717018496307
    .004391442037410293
    .004776953480693729
    .005181516702338386
    .005605391624202723
    .006048833022857054
    .006512090792594475
    .006995410187265387
    .007499032043226175
    .008023192985384994
    .008568125618069307
    .009134058702220787
    .00972121732023785
    .010329823029626936
    .010960094006488246
    .011612245179743885
    .012286488356915872
    .012983032342173012
    .013702083047289686
    .014443843596092545
    .01520851442291271
    .01599629336550963
    .016807375752887384
    .017641954488384078
    .018500220128379697
    .019382360956935723
    .0202885630566524
    .021219010376003555
    .022173884793387385
    .02315336617811041
    .024157632448504756
    .02518685962736163
    .026241221894849898
    .027320891639074894
    .028426039504420793
    .0295568344378088
    .030713443732993635
    .03189603307301153
    .033104766570885055
    .03433980680868217
    .03560131487502034
    .03688945040110004
    .0382043715953465
    .03954623527673284
    .04091519690685319
    .042311410620809675
    .043735029256973465
    .04518620438567554
    .046665086336880095
    .04817182422688942
    .04970656598412723
    .05126945837404324
    .052860647023180246
    .05448027644244237
    .05612849004960009
    .05780543019106723
    .0595112381629812
    .06124605423161761
    .06301001765316767
    .06480326669290577
    .06662593864377289
    .06847816984440017
    .07036009569659588
    .07227185068231748
    .07421356838014963
    .07618538148130785
    .07818742180518633
    .08021982031446832
    .0822827071298148
    .08437621154414882
    .08650046203654976
    .08865558628577294
    .09084171118340768
    .09305896284668745
    .0953074666309647
    .09758734714186246
    .09989872824711389
    .10224173308810132
    .10461648409110419
    .10702310297826761
    .10946171077829933
    .1119324278369056
    .11443537382697373
    .11697066775851084
    .11953842798834562
    .12213877222960187
    .12477181756095049
    .12743768043564743
    .1301364766903643
    .13286832155381798
    .13563332965520566
    .13843161503245183
    .14126329114027164
    .14412847085805777
    .14702726649759498
    .14995978981060856
    .15292615199615017
    .1559264637078274
    .1589608350608804
    .162029375639111
    .1651321945016676
    .16826940018969075
    .1714411007328226
    .17464740365558504
    .17788841598362912
    .18116424424986022
    .184474994500441
    .18782077230067787
    .19120168274079138
    .1946178304415758
    .19806931955994886
    .20155625379439707
    .20507873639031693
    .20863687014525575
    .21223075741405523
    .21586050011389926
    .2195261997292692
    .2232279573168085
    .22696587351009836
    .23074004852434915
    .23455058216100522
    .238397573812271
    .24228112246555486
    .24620132670783548
    .25015828472995344
    .25415209433082675
    .2581828529215958
    .26225065752969623
    .26635560480286247
    .2704977910130658
    .27467731206038465
    .2788942634768104
    .2831487404299921
    .2874408377269175
    .29177064981753587
    .2961382707983211
    .3005437944157765
    .3049873140698863
    .30946892281750854
    .31398871337571754
    .31854677812509186
    .32314320911295075
    .3277780980565422
    .33245153634617935
    .33716361504833037
    .3419144249086609
    .3467040563550296
    .35153259950043936
    .3564001441459435
    .3613067797835095
    .3662525955988395
    .3712376804741491
    .3762621229909065
    .38132601143253014
    .386429433787049
    .39157247774972326
    .39675523072562685
    .4019777798321958
    .4072402119017367
    .41254261348390375
    .4178850708481375
    .4232676699860717
    .4286904966139066
    .43415363617474895
    .4396571738409188
    .44520119451622786
    .45078578283822346
    .45641102318040466
    .4620769996544071
    .467783796112159
    .47353149614800955
    .4793201831008268
    .4851499400560704
    .4910208498478356
    .4969329950608704
    .5028864580325687
    .5088813208549338
    .5149176653765214
    .5209955732043543
    .5271151257058131
    .5332764040105052
    .5394794890121072
    .5457244613701866
    .5520114015120001
    .5583403896342679
    .5647115057049292
    .5711248294648731
    .5775804404296506
    .5840784178911641
    .5906188409193369
    .5972017883637634
    .6038273388553378
    .6104955708078648
    .6172065624196511
    .6239603916750761
    .6307571363461468
    .6375968739940326
    .6444796819705821
    .6514056374198242
    .6583748172794485
    .665387298282272
    .6724431569576875
    .6795424696330938
    .6866853124353135
    .6938717612919899
    .7011018919329731
    .7083757798916868
    .7156935005064807
    .7230551289219693
    .7304607400903537
    .7379104087727308
    .7454042095403874
    .7529422167760779
    .7605245046752924
    .768151147247507
    .7758222183174236
    .7835377915261935
    .7912979403326302
    .799102738014409
    .8069522576692516
    .8148465722161012
    .8227857543962835
    .8307698767746546
    .83879901174074
    .846873231509858
    .8549926081242338
    .8631572134541023
    .8713671191987972
    .8796223968878317
    .8879231178819663
    .8962693533742664
    .9046611743911496
    .9130986517934192
    .9215818562772946
    .9301108583754237
    .938685728457888
    .9473065367331999
    .9559733532492861
    .9646862478944651
    .9734452903984125
    .9822505503331171
    .9911020971138298
    1
);
// stylelint-enable number-max-precision

/// The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
/// Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
/// @type Number
/// @group accessibility
///
/// @link https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
$wcag-min-contrast-ratio: 7 !default;
/// Default dark color for WCAG 2.0.
/// @type Color
/// @group accessibility
$wcag-dark: black !default;
/// Default light color for WCAG 2.0.
/// @type Color
/// @group accessibility
$wcag-light: white !default;

/// Calculate the relative luminance for a color.
/// @param {Color} $color - The color to calculate the relative luminance for.
/// @return {Number} - The relative luminance for the color.
///
/// @group accessibility
///
/// @link https://www.w3.org/TR/WCAG/#dfn-relative-luminance
/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function k-color-luminance( $color ) {
    $red: k-list-nth( $_linear-channel-values, k-color-red( $color ) + 1 );
    $green: k-list-nth( $_linear-channel-values, k-color-green( $color ) + 1 );
    $blue: k-list-nth( $_linear-channel-values, k-color-blue( $color ) + 1 );

    @return .2126 * $red + .7152 * $green + .0722 * $blue;
}

/// Calculates contrast ratio between two colors
/// @param {Color} $background - The background color
/// @param {Color} $foreground - The foreground color
/// @return {Number} - The contrast ratio between the two colors
///
/// @group accessibility
///
/// @link https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function k-color-contrast-ratio( $background, $foreground ) {
    $backLum: k-color-luminance( $background ) + .05;
    $foreLum: k-color-luminance( $foreground ) + .05;

    @return k-math-div( k-math-max( $backLum, $foreLum ), k-math-min( $backLum, $foreLum ) );
}

/// Checks if a color is dark
/// @param {Color} $color - The color to check
/// @return {Boolean} - True if the color is dark, false otherwise
///
/// @group accessibility
@function k-is-dark( $color ) {
    @return if( k-color-luminance( $color ) < .5, true, false );
}

/// Checks if a color is light
/// @param {Color} $color - The color to check
/// @return {Boolean} - True if the color is light, false otherwise
///
/// @group accessibility
@function k-is-light( $color ) {
    @return if( k-color-luminance( $color ) < .5, false, true );
}


/// Calculates the contrast ratio between a background color and a foreground color.
/// If the contrast ratio is not high enough, it will return the color with the highest contrast ratio.
/// @param {Color} $background - The background color
/// @param {Color} $dark - The dark color to use as a fallback
/// @param {Color} $light - The light color to use as a fallback
/// @param {Number} $min-ratio - The minimum contrast ratio to reach
/// @return {Color} - The color with the highest contrast ratio
///
/// @group accessibility
@function k-contrast-color( $background, $dark: $wcag-dark, $light: $wcag-light, $min-ratio: $wcag-min-contrast-ratio ) {
    $foregrounds: $light, $dark, #ffffff, #000000;
    $max-ratio: 0;
    $max-ratio-color: null;

    @each $color in $foregrounds {
        $contrast-ratio: k-color-contrast-ratio( $background, $color );

        @if ( $contrast-ratio > $min-ratio ) {
            @return $color;
        } @else if ( $contrast-ratio > $max-ratio ) {
            $max-ratio: $contrast-ratio;
            $max-ratio-color: $color;
        }
    }

    @warn "Found no color leading to #{$min-ratio}:1 contrast ratio against #{$background}...";

    @return $max-ratio-color;
}


// Legacy functions
@function k-yiq-luma-information($color) {
    $r: k-color-red($color);
    $g: k-color-green($color);
    $b: k-color-blue($color);

    $yiq: k-math-div( (($r * 299) + ($g * 587) + ($b * 114)), 1000 );

    @return $yiq;
}
@function k-contrast-yiq($color, $dark: $yiq-dark, $light: $yiq-light) {
    $yiq: k-yiq-luma-information($color);
    $out: if($yiq >= $yiq-threshold, $dark, $light);
    // @debug yiq;
    @return $out;
}
@function k-contrast-legacy($color, $dark: $wcag-dark, $light: $wcag-light) {
    $luma: k-color-luminance($color);
    $out: if($luma < .5, $light, $dark);
    // @debug $luma;
    @return $out;
}

// #endregion
// #region @import "./_color-manipulation.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_color-manipulation.import.scss
$kendo-light-color-level-step: 8% !default;
$kendo-dark-color-level-step: 16% !default;

/// Set a specific jump point for requesting color jumps
/// @group color-system
/// @access private
$kendo-color-level-step: 8% !default;

@function k-color-level( $color, $level: 0 ) {
    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
    $_color-level-step: if( $_dark-theme, $kendo-dark-color-level-step, $kendo-light-color-level-step );

    @if ( $level == 0 ) or ( $level == 0% ) {
        @return $color;
    }

    $base: if( $level < 0, #ffffff, #000000 );
    $level: k-math-abs( $level );


    @if ( k-math-unit($level) == "%" ) {
        @return k-color-mix( $base, $color, $level );
    }

    @return k-color-mix( $base, $color, k-math-clamp( $level * $_color-level-step, 0%, 100% ) );
}

/// Makes a color lighter by mixing it with white
/// @param {Color} $color - The color to lighten
/// @param {Number} $level - The amount to lighten the color
/// @return {Color} - The lightened color
///
/// @group color-system
///
/// @example scss - Usage
///   @debug k-color-tint( #f00, 1 ); // => #ff1a1a
@function k-color-tint( $color, $level: 1 ) {
    @return k-color-level( $color, -$level );
}

/// Makes a color darker by mixing it with black
/// @param {Color} $color - The color to darken
/// @param {Number} $level - The amount to darken the color
/// @return {Color} - The darkened color
///
/// @group color-system
///
/// @example scss - Usage
///   @debug k-color-shade( #f00, 1 ); // => #e60000
@function k-color-shade( $color, $level: 1 ) {
    @return k-color-level( $color, $level );
}

/// Shades the color in light themes and tints it in dark themes
/// @param {Color} $color - The color to shade or tint
/// @param {Number} $level - The amount to shade or tint the color
/// @return {Color} - The shaded or tinted color
///
/// @group color-system
@function k-try-shade( $color, $level: 1 ) {
    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );

    @if $_dark-theme {
        @return k-color-tint( $color, $level );
    }

    @return k-color-shade( $color, $level );
}

/// Tints the color in light themes and shades it in dark themes
/// @param {Color} $color - The color to tint or shade
/// @param {Number} $level - The amount to tint or shade the color
/// @return {Color} - The tinted or shaded color
///
/// @group color-system
@function k-try-tint( $color, $level: 1 ) {
    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );

    @if $_dark-theme {
        @return k-color-shade( $color, $level );
    }

    @return k-color-tint( $color, $level );
}

/// Darkens the color in light themes and lightens it in dark themes
/// @param {Color} $color - The color to darken or lighten
/// @param {Number} $level - The amount to darken or lighten the color
/// @return {Color} - The darkened or lightened color
///
/// @group color-system
@function k-try-darken( $color, $amount ) {
    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );

    @if $_dark-theme {
        @return k-color-lighten( $color, $amount );
    }
    @return k-color-darken( $color, $amount );
}

/// Lightens the color in light themes and darkens it in dark themes
/// @param {Color} $color - The color to lighten or darken
/// @param {Number} $level - The amount to lighten or darken the color
/// @return {Color} - The lightened or darkened color
///
/// @group color-system
@function k-try-lighten( $color, $amount ) {
    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );

    @if $_dark-theme {
        @return k-color-darken( $color, $amount );
    }
    @return k-color-lighten( $color, $amount );
}

/// Converts a color with alpha to solid color mixed with a background color
/// @param {Color} $color - The color to convert
/// @param {Color} $bg - The background color
/// @return {Color} - The converted color
///
/// @group color-system
///
/// @example scss - Usage
///   @debug k-rgba-to-mix( rgba( #f00, 0.5 ), #fff ); // => #ff8080
@function k-rgba-to-mix( $color, $bg ) {
    $percent: k-color-alpha( $color ) * 100%;

    @return k-color-mix( rgba( $color, 1 ), $bg, $percent );
}

// TODO: Remove this function or rethink the logic
@function k-true-mix( $color1, $color2, $weight: 50% ) {
    @return k-color-mix( rgba( $color1, 1 ), rgba( $color2, 1 ), $weight );
}

// #endregion
// #region @import "./_color-system.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_color-system.import.scss
/// Generates all color variations of a given main color
/// @param {String} $name - The name of the main color
/// @param {Color} $color - The color value to be assigned to the main color
/// @param {String} $theme - The theme the colors will be generated for
/// @return {Map} - A map with the generated keys and values
///
/// @group color-system
@function k-generate-color-variations( $name, $color, $theme: null ) {
    $result: ();

    // DataViz
    @if ( 
            $name == 'series-a' or
            $name == 'series-b' or
            $name == 'series-c' or
            $name == 'series-d' or
            $name == 'series-e' or
            $name == 'series-f'
        ) {
        $_variations: (
            #{$name}: $color,
            #{$name}-bold: k-color-mix(black, $color, 25%),
            #{$name}-bolder: k-color-mix(black, $color, 50%),
            #{$name}-subtle: k-color-mix(white, $color, 25%),
            #{$name}-subtler: k-color-mix(white, $color, 50%),
        );

        $result: k-map-merge($result, $_variations);
    } @else {
        // Default
        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line
            $_variations: (
                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),
                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),
                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),
                #{$name}: $color,
                #{$name}-hover: k-try-shade( $color, 0.5 ),
                #{$name}-active: k-try-shade( $color, 1.5 ),
                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),
                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),
                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),
                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),
            );

            $result: k-map-merge($result, $_variations);
        }

        // Bootstrap
        @if ( $theme == 'bootstrap' ) {
            $_variations: (
                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),
                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),
                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),
                #{$name}: $color,
                #{$name}-hover: k-color-darken( $color, 7.5% ),
                #{$name}-active: k-color-darken( $color, 10% ),
                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),
                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),
                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),
                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),
            );

            $result: k-map-merge($result, $_variations);
        }

        // Material
        @if ( $theme == 'material' ) {
            $_variations: (
                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),
                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),
                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),
                #{$name}: $color,
                #{$name}-hover: k-try-shade( $color, 0.5 ),
                #{$name}-active: k-try-shade( $color, 1.5 ),
                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),
                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),
                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),
                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),
            );

            $result: k-map-merge($result, $_variations);
        }

        // Fluent
        @if ( $theme == 'fluent' ) {
            $_variations: (
                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),
                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),
                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),
                #{$name}: $color,
                #{$name}-hover: k-try-shade( $color, 0.5 ),
                #{$name}-active: k-try-shade( $color, 1.5 ),
                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),
                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),
                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),
                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),
            );

            $result: k-map-merge($result, $_variations);
        }

        // Classic
        @if ( $theme == 'classic' ) {
            $_variations: (
                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),
                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),
                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),
                #{$name}: $color,
                #{$name}-hover: k-try-shade( $color, 1 ),
                #{$name}-active: k-try-shade( $color, 2 ),
                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),
                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),
                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),
                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),
            );

            $result: k-map-merge($result, $_variations);
        }
    }

    @return $result;
}

/// Takes a color name from the $kendo-colors map as a parameter
/// and returns a CSS variable with the actual color as a fallback
/// @param {String} $key - The name of a color/key in the $kendo-colors map
/// @return {String} - CSS variable with the actual color as a fallback
///
/// @group color-system
@function k-color($key) {
    $_color: k-map-get($kendo-colors, $key);

    @if ($_color) {
        @return var(--kendo-color-#{$key}, $_color);
    } @else {
        @error "Color Variable \`#{$key}\` does not exists in the color collection.";
    }
}
// #endregion
// #region @import "./_custom-properties.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_custom-properties.import.scss
@function k-var( $prefix: kendo-, $var: null, $fallback: null ) {
    $_prefix: $prefix;
    $_var: $var;
    $_fallback: $fallback;

    @if ( k-string-index( $prefix, "--" ) == 1 ) {
        $_prefix: "";
        $_var: k-string-slice( $prefix, 3 );
        $_fallback: $var;
    }

    @if not $_var {
        @return null;
    }

    @if $_prefix == null { // stylelint-disable-line
        $_prefix: "";
    }

    @if ($_fallback != null and $_fallback != "") {
        @return var( --#{$_prefix}#{$_var}, #{$_fallback} );
    }

    @return var( --#{$_prefix}#{$_var} );
}

@function k-vars( $prefix: kendo-, $vars... ) {
    $vars: k-list-reverse( $vars );
    $result: null;

    // @debug $prefix;
    @each $var in $vars {
        $result: k-var( $prefix, $var, $result );
    }

    @return $result;
}

// #endregion
// #region @import "./_escape-string.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_escape-string.import.scss
$_kendo-svg-escaped-characters: (
    ("%", "%25"),
    ("<", "%3c"),
    (">", "%3e"),
    ("#", "%23"),
    ("(", "%28"),
    (")", "%29")
) !default;

/// Escapes SVG characters in a string
/// @param {String} $string - The string to escape
/// @return {String} - The escaped string
///
/// @link https://codepen.io/kevinweber/pen/dXWoRw
@function k-escape-svg($string) {
    @if k-string-index($string, "data:image/svg+xml") {
        @each $char, $encoded in $_kendo-svg-escaped-characters {
            // Do not escape the url brackets
            @if k-string-index($string, "url(") == 1 {
                $string: url("#{k-string-replace(k-string-slice($string, 6, -3), $char, $encoded)}");
            } @else {
                $string: k-string-replace($string, $char, $encoded);
            }
        }
    }

    @return $string;
}



$_kendo-escape-class-name: (
    ".": "\\.",
    "/": "\\/"
);

/// Escapes special characters in a class name
/// @param {String} $text - The string to escape
/// @return {String} - The escaped string
@function k-escape-class-name( $text ) {
    $_text: $text;

    @each $char, $rep in $_kendo-escape-class-name {
        $_text: k-string-replace( $_text, k-string-unquote( $char ), k-string-unquote( $rep ) );
    }

    @return $_text;
}

// #endregion
// #region @import "./_lang.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_lang.import.scss
/// Returns the value of a variable if it is not null,
/// otherwise returns the fallback value.
/// @param {Any} $var - The variable to check.
/// @param {Any} $fallback - The fallback value.
/// @return {Any} - The value of the variable or the fallback value.
///
/// @example scss - Usage
///   $foo: null;
///   @debug k-if-var( $foo, "bar" ); // => "bar"
///   $foo: "baz";
///   @debug k-if-var( $foo, "bar" ); // => "baz"
@function k-if-var( $var, $fallback ) {
    @return if( $var != null, $var, $fallback );
}

// #endregion
// #region @import "./_list.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_list.import.scss
/// Returns a copy of `$list` with `$val` appended to the end.
/// @param {List} $list - The list to process.
/// @param {Any} $val - The value to append to `$list`.
/// @param {String} $separator - The separator to use between `$list` and `$val`.
/// @return {List} - A copy of `$list` with `$val` appended to the end.
///
/// @example scss - Usage
///   @debug k-list-append( ( "foo", "bar" ), "baz" ); // => "foo, bar, baz"
@function k-list-append( $list, $val, $separator: auto ) {
    @return append( $list, $val, $separator );
}

/// Checks whether `$list` contains `$value`.
/// @param {List} $list - The list to check.
/// @param {Any} $value - The value to check for.
/// @return {Boolean} - Whether `$list` contains `$value`.
///
/// @example scss - Usage
///   @debug k-list-includes( ( "foo", "bar" ), "foo" ); // => true
///   @debug k-list-includes( ( "foo", "bar" ), "baz" ); // => false
@function k-list-includes( $list, $value ) {
    @return k-list-index( $list, $value ) != null;
}

/// Returns the index of `$value` in `$list`.
/// @param {List} $list - The list to check.
/// @param {Any} $value - The value to check for.
/// @return {Number} - The index of `$value` in `$list`.
///
/// @example scss - Usage
///   @debug k-list-index( ( "foo", "bar" ), "foo" ); // => 1
@function k-list-index( $list, $value ) {
    @return index( $list, $value );
}

/// Returns whether `$list` is bracketed.
/// @param {List} $list - The list to check.
/// @return {Boolean} - Whether `$list` is bracketed.
///
/// @example scss - Usage
///   @debug k-list-is-bracketed( ( "foo", "bar" ) ); // => false
///   @debug k-list-is-bracketed( [ "foo", "bar" ] ); // => true
@function k-list-is-bracketed( $list ) {
    @return is-bracketed( $list );
}

/// Joins two lists together.
/// @param {List} $list1 - The first list to join.
/// @param {List} $list2 - The second list to join.
/// @param {String} $separator - The separator to use between `$list1` and `$list2`.
/// @param {Boolean} $bracketed - Whether the result should be bracketed.
/// @return {List} - The joined list.
///
/// @example scss - Usage
///   @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ) ); // => "foo, bar, baz, qux"
///   @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ), " " ); // => "foo bar baz qux"
@function k-list-join( $list1, $list2, $separator: auto, $bracketed: auto ) {
    @return join( $list1, $list2, $separator, $bracketed );
}

/// Returns the length of `$list`.
/// @param {List} $list - The list to check.
/// @return {Number} - The length of `$list`.
///
/// @example scss - Usage
///   @debug k-list-length( ( "foo", "bar" ) ); // => 2
@function k-list-length( $list ) {
    @return length( $list );
}

/// Returns the nth item in `$list`.
/// @param {List} $list - The list to check.
/// @param {Number} $n - The index of the item to return.
/// @return {Any} - The nth item in `$list`.
///
/// @example scss - Usage
///   @debug k-list-nth( ( "foo", "bar" ), 1 ); // => "foo"
@function k-list-nth( $list, $n ) {
    @return nth( $list, $n );
}

/// Reverse the order of items in `$list`.
/// @param {List} $list - The list to reverse.
/// @return {List} - The reversed list.
///
/// @example scss - Usage
///   @debug k-list-reverse( ( "foo", "bar" ) ); // => "bar, foo"
@function k-list-reverse( $list: null ) {
    $result: ();

    @if ($list) {
        $len: k-list-length( $list );

        @for $i from $len through 1 {
            $result: k-list-append( $result, k-list-nth( $list, $i ) );
        }

        @return $result;
    }

    @warn "No list passed.";
    @return $result;
}

/// Returns the separator of `$list`.
/// @param {List} $list - The list to check.
/// @return {String} - The separator of `$list`.
///
/// @example scss - Usage
///   @debug k-list-separator( ( "foo", "bar" ) ); // => ","
@function k-list-separator( $list ) {
    @return list-separator( $list );
}

/// Returns a copy of `$list` with `$val` inserted at `$n`.
/// @param {List} $list - The list to process.
/// @param {Number} $n - The index at which to insert `$val`.
/// @param {Any} $val - The value to insert.
/// @return {List} - A copy of `$list` with `$val` inserted at `$n`.
///
/// @example scss - Usage
///   @debug k-list-set-nth( ( "foo", "bar" ), 1, "baz" ); // => "baz, bar"
@function k-list-set-nth( $list, $n, $value ) {
    @return set-nth( $list, $n, $value );
}

/// Combines two lists into a single list of two-item lists.
/// @param {List} $list1 - The first list to combine.
/// @param {List} $list2 - The second list to combine.
/// @return {List} - A list of two-item lists.
///
/// @example scss - Usage
///   @debug k-list-zip( ( "foo", "bar" ), ( "baz", "qux" ) ); // => ((foo, baz), (bar, qux))
@function k-list-zip( $lists... ) {
    @return zip( $lists... );
}

// #endregion
// #region @import "./_math.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_math.import.scss
/// Returns the absolute value of a number.
/// @param {Number} $number - The number to get the absolute value of.
/// @return {Number} - The absolute value of `$number`.
///
/// @example scss - Usage
///   @debug k-math-abs( -10 ); // => 10
@function k-math-abs( $number ) {
    @return abs( $number );
}

/// Returns the smallest integer greater than or equal to a number.
/// @param {Number} $number - The number to get the ceiling of.
/// @return {Number} - The ceiling of `$number`.
///
/// @example scss - Usage
///   @debug k-math-ceil( 10.1 ); // => 11
@function k-math-ceil( $number ) {
    @return ceil( $number );
}

/// Returns the largest integer less than or equal to a number.
/// @param {Number} $number - The number to get the floor of.
/// @return {Number} - The floor of `$number`.
///
/// @example scss - Usage
///   @debug k-math-floor( 10.9 ); // => 10
@function k-math-floor( $number ) {
    @return floor( $number );
}

/// Restricts `$number` to the range between `$min` and `$max`. If `$number` is
/// less than `$min`, `$min` is returned. If `$number` is greater than `$max`,
/// `$max` is returned. Otherwise, `$number` is returned.
/// @param {Number} $number - The number to clamp.
/// @param {Number} $min - The minimum value.
/// @param {Number} $max - The maximum value.
/// @return {Number} - The clamped number.
///
/// @example scss - Usage
///   @debug k-math-clamp( 10, 0, 5 ); // => 5
@function k-math-clamp( $number, $min, $max ) {
    @return k-math-max( $min, k-math-min( $max, $number ) );
}

/// Returns whether two numbers have compatible units.
/// @param {Number} $a - The first number.
/// @param {Number} $b - The second number.
/// @return {Boolean} - Whether the numbers have compatible units.
///
/// @example scss - Usage
///   @debug k-math-compatible( 10px, 10px ); // => true
///   @debug k-math-compatible( 10px, 10em ); // => false
@function k-math-compatible( $a, $b ) {
    @return comparable( $a, $b );
}

/// Returns the quotient of two numbers.
/// @param {Number} $a - The dividend.
/// @param {Number} $b - The divisor.
/// @return {Number} - The quotient of `$a` and `$b`.
///
/// @example scss - Usage
///   @debug k-math-div( 10, 2 ); // => 5
///   @debug k-math-div( 10px, 2 ); // => 5px
@function k-math-div( $a, $b )  {
    @return ( $a / $b );
}

/// Returns whether `$number` has no units.
/// @param {Number} $number - The number to check.
/// @return {Boolean} - Whether `$number` has no units.
///
/// @example scss - Usage
///   @debug k-math-is-unitless( 10 ); // => true
///   @debug k-math-is-unitless( 10px ); // => false
@function k-math-is-unitless( $number ) {
    @return unitless( $number );
}

/// Returns the larger of two numbers.
/// @param {Number} $a - The first number.
/// @param {Number} $b - The second number.
/// @return {Number} - The larger of `$a` and `$b`.
///
/// @example scss - Usage
///   @debug k-math-max( 10, 20 ); // => 20
///   @debug k-math-max( 10px, 20px ); // => 20px
@function k-math-max( $a, $b ) {
    @return max( $a, $b );
}

/// Returns the smaller of two numbers.
/// @param {Number} $a - The first number.
/// @param {Number} $b - The second number.
/// @return {Number} - The smaller of `$a` and `$b`.
///
/// @example scss - Usage
///   @debug k-math-min( 10, 20 ); // => 10
///   @debug k-math-min( 10px, 20px ); // => 10px
@function k-math-min( $a, $b ) {
    @return min( $a, $b );
}

/// Returns the remainder of two numbers.
/// @param {Number} $a - The dividend.
/// @param {Number} $b - The divisor.
/// @return {Number} - The remainder of `$a` and `$b`.
///
/// @example scss - Usage
///   @debug k-math-mod( 10, 3 ); // => 1
///   @debug k-math-mod( 10px, 3 ); // => 1px
@function k-math-mod( $a, $b ) {
    @return ( $a % $b );
}

/// Returns the product of two numbers.
/// @param {Number} $a - The first number.
/// @param {Number} $b - The second number.
/// @return {Number} - The product of `$a` and `$b`.
///
/// @example scss - Usage
///   @debug k-math-mul( 10, 2 ); // => 20
///   @debug k-math-mul( 10px, 2 ); // => 20px
@function k-math-mul( $a, $b ) {
    @return ( $a * $b );
}

/// Converts a unitless number to a percentage.
/// @param {Number} $number - The number to convert.
/// @return {Number} - The percentage.
///
/// @example scss - Usage
///   @debug k-math-percentage( 0.5 ); // => 50%
@function k-math-percentage( $number ) {
    @return percentage( $number );
}

/// Returns the result of raising `$x` to the power of `$n`.
/// @param {Number} $x - The base.
/// @param {Number} $n - The exponent.
/// @return {Number} - The result of raising `$x` to the power of `$n`.
///
/// @example scss - Usage
///   @debug k-math-pow( 2, 3 ); // => 8
@function k-math-pow( $x, $n ) {
    $ret: 1;

    @if ( $n == 0 ) {
        @return $ret;
    }

    @if ( $n > 0 ) {
        @for $i from 1 through $n {
            $ret: $ret * $x;
        }
        @return $ret;
    }

    @for $i from $n to 0 {
        $ret: k-math-div( $ret, $x );
    }
    @return $ret;

}

/// Returns a random number between 0 and 1.
/// @param {Number} $limit - The upper limit of the random number.
/// @return {Number} - A random number between 0 and 1.
///
/// @example scss - Usage
///   @debug k-math-random(); // => 0.123456789
@function k-math-random( $limit: null ) {
    @if ( $limit == null ) { // stylelint-disable-line
        @return random();
    }

    @return random( $limit );
}

/// Returns the result of rounding `$number` to the nearest integer
/// using the specified `$precision`.
/// @param {Number} $number - The number to round.
/// @param {Number} $precision - The number of decimal places to round to.
/// @return {Number} - The rounded number.
///
/// @example scss - Usage
///   @debug k-math-round( 10.123456789, 3 ); // => 10.123
@function k-math-round( $number, $precision: 0 ) {

    @if ( $precision == 0 ) {
        @return round( $number );
    }

    $pow: k-math-pow( 10, $precision );

    @return k-math-div( round( $number * $pow ), $pow );
}

/// Returns a string representation of `$number`'s unit.
/// @param {Number} $number - The number to get the unit of.
/// @return {String} - The unit of `$number`.
///
/// @example scss - Usage
///   @debug k-math-unit( 10px ); // => px
@function k-math-unit( $number ) {
    @return unit( $number );
}

/// Remove the unit from a number.
/// @param {Number} $number - The number to remove the unit from.
/// @return {Number} - The unitless number.
///
/// @example scss - Usage
///   @debug k-math-strip-unit( 10px ); // => 10
@function k-math-strip-unit($number) {
    @if ( k-meta-type-of( $number ) == "number" ) and not k-math-is-unitless( $number ) {
        @return k-math-div( $number, 1 * k-math-unit( $number) );
    }

    @return $number;
}

// #endregion
// #region @import "./_map.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_map.import.scss
/// Returns the value at `$key` in `$map`.
/// @param {Map} $map - The map to get the value from.
/// @param {Any} $key - The key to get the value for.
///
/// @example scss - Usage
///   @debug k-map-get( ( "foo": "bar" ), "foo" ); // => "bar"
@function k-map-get( $map, $keys... ) {
    @each $key in $keys {
        $map: map-get( $map, $key ); // stylelint-disable-line
    }
    @return $map;
}

/// Returns whether `$map` has a value at `$key`.
/// @param {Map} $map - The map to check.
/// @param {Any} $key - The key to check.
/// @return {Boolean} - Whether `$map` has a value at `$key`.
///
/// @example scss - Usage
///   @debug k-map-has( ( "foo": "bar" ), "foo" ); // => true
///   @debug k-map-has( ( "foo": "bar" ), "bar" ); // => false
@function k-map-has-key( $map, $key ) {
    @return map-has-key( $map, $key );
}

/// Returns a comma separated list of the keys in `$map`.
/// @param {Map} $map - The map to get the keys from.
/// @return {List} - A comma separated list of the keys in `$map`.
///
/// @example scss - Usage
///   @debug k-map-keys( ( "foo": "bar", "baz": "qux" ) ); // => "foo, baz"
@function k-map-keys( $map ) {
    @return map-keys( $map );
}

/// Returns a map with the keys and values from `$map` and `$args`.
/// @param {Map} $map - The map to merge.
/// @param {Map} $args - The map to merge into `$map`.
/// @return {Map} - A map with the keys and values from `$map` and `$args`.
///
/// @example scss - Usage
///   @debug k-map-merge( ( "foo": "bar" ), ( "baz": "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
@function k-map-merge( $map, $args... ) {
    @each $arg in $args {
        $map: map-merge( $map, $arg ); // stylelint-disable-line
    }
    @return $map;
}

/// Returns a deep-map with the keys and values from `$map` and `$args`.
/// @param {Map} $maps - The maps to deep-merge.
/// @return {Map} - A map with the keys and values from `$map` and `$args`.
///
/// @example scss - Usage
///   @debug k-map-deep-merge( ( "foo": ("bar": "baz", "baz": "qux" ) ), ( "foo": ("bar": "foo") ) ); // => ( "foo": ("bar": "foo", "baz": "qux" ))
@function k-map-deep-merge($maps...) {
    $merged: ();

    @each $map in $maps {
      @each $key, $val in $map {
        @if (k-meta-type-of($val) == 'map') {
          $current: k-map-get($merged, $key);
          @if (k-meta-type-of($current) == 'map') {
            $val: k-map-deep-merge($current, $val);
            $map: k-map-merge(
              $map,
              (
                $key: $val
              )
            );
          }
        }
      }
      $merged: k-map-merge($merged, $map);
    }

    @return $merged;
  }

/// Returns a map with the keys and values from `$map` except for `$keys`.
/// @param {Map} $map - The map to remove keys from.
/// @param {Any} $keys - The keys to remove from `$map`.
/// @return {Map} - A map with the keys and values from `$map` except for `$keys`.
///
/// @example scss - Usage
///   @debug k-map-remove( ( "foo": "bar", "baz": "qux" ), "foo" ); // => ( "baz": "qux" )
@function k-map-remove( $map, $keys... ) {
    @return map-remove( $map, $keys... );
}

/// Sets a single key and value in `$map`.
/// @param {Map} $map - The map to set the value in.
/// @param {Any} $key - The key to set the value for.
/// @param {Any} $value - The value to set.
/// @return {Map} - A map with the key and value set.
///
/// @example scss - Usage
///   @debug k-map-set( ( "foo": "bar" ), "baz", "qux" ); // => ( "foo": "bar", "baz": "qux" )
@function k-map-set( $map, $key, $value ) {
    @return k-map-merge( $map, ( $key: $value ) );
}

/// Returns a comma separated list of the values in `$map`.
/// @param {Map} $map - The map to get the values from.
/// @return {List} - A comma separated list of the values in `$map`.
///
/// @example scss - Usage
///   @debug k-map-values( ( "foo": "bar", "baz": "qux" ) ); // => "bar, qux"
@function k-map-values( $map ) {
    @return map-values( $map );
}

/// Returns negative values of a number or numbers in a list.
/// @param {Map} $map - The map to get the values from.
/// @return {Map} - A comma separated list of the values in `$map`.
///
/// @example scss - Usage
///   @debug k-map-negate( ( 0: 0, 1: 1px, 2: 2px ) ); // => ("-1": -1px, "-2": -2px)
@function k-map-negate($map) {
    $_map-neg: ();

    @if( k-meta-type-of($map) != map ) {
        @error "expected type of #{$map} is map, was #{k-meta-type-of($map)}";
    };
    @each $key, $value in $map {
        $_key-neg: "-" + $key;

        @if( k-meta-type-of($value) == number and $value != 0) {
            $_map-neg: k-map-set($_map-neg, $_key-neg, -1 * $value );
        }
    }

    @return $_map-neg;

}

// #endregion
// #region @import "./_meta.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_meta.import.scss
// Adapted from https://css-tricks.com/snippets/sass/advanced-type-checking/

/// A wrapper around the `call()` function.
/// Calls the function `$function` with the arguments `$args`.
/// @param {Function} $function - The function to call.
/// @param {List} $args - The arguments to pass to `$function`.
/// @return {Any} - The result of calling `$function` with `$args`.
///
/// @example scss - Usage
///   @debug k-meta-call( k-meta-get-function( "k-string-replace" ), "foo bar", "bar", "baz" ); // => "foo baz"
@function k-meta-call( $function, $args... ) {
    @return call( $function, $args... );
}

/// A wrapper around the `function-exists()` function.
/// Returns whether a function with the name `$name` exists.
/// @param {String} $name - The name of the function to check.
/// @return {Boolean} - Whether a function with the name `$name` exists.
///
/// @example scss - Usage
///   @debug k-meta-function-exists( "k-string-replace" ); // => true
@function k-meta-function-exists( $name ) {
    @if $name == "" {
        @return false;
    }

    @return function-exists( $name );
}

/// A wrapper around the `get-function()` function.
/// Returns the function with the name `$name`.
/// @param {String} $name - The name of the function to get.
/// @param {Boolean} $css - Whether to return the CSS representation of the function.
/// @param {Module} $module - The module to get the function from.
/// @return {Function} - The function with the name `$name`.
///
/// @example scss - Usage
///   @debug k-meta-get-function( "k-string-replace" ); // => Function
@function k-meta-get-function( $name, $args... ) {
    @return get-function( $name, $args... );
}

/// A wrapper around the `inspect()` function.
/// Returns a string representation of `$value`.
/// @param {Any} $value - The value to inspect.
/// @return {String} - A string representation of `$value`.
///
/// @example scss - Usage
///   @debug k-meta-inspect( "foo bar" ); // => "foo bar"
@function k-meta-inspect( $value ) {
    @return inspect( $value );
}

/// A wrapper around the `keywords()` function.
/// Returns a map of the keywords in `$args`.
/// @param {List} $args - The arguments to process.
/// @return {Map} - A map of the keywords in `$args`.
///
/// @example scss - Usage
///   @debug k-meta-keywords( ( "foo" "bar" "baz" "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
@function k-meta-keywords( $args ) {
    @return keywords( $args );
}

/// A wrapper around the `type-of()` function.
/// Returns the type of `$value`.
/// @param {Any} $value - The value to get the type of.
/// @return {String} - The type of `$value`.
///
/// @example scss - Usage
///   @debug k-meta-type-of( "foo bar" ); // => "string"
@function k-meta-type-of( $value ) {
    @return type-of( $value );
}

/// A wrapper around the `variable-exists()` function.
/// Returns whether a variable with the name `$name` exists.
/// @param {String} $name - The name of the variable to check.
/// @return {Boolean} - Whether a variable with the name `$name` exists.
///
/// @example scss - Usage
///   @debug k-meta-variable-exists( "foo" ); // => true
@function k-meta-variable-exists( $name ) {
    @return variable-exists( $name );
}

/// Checks whether `$value` is a <number> CSS data type.
/// @param {Any} $value - The value to check.
/// @return {Boolean} - Whether `$value` is a number.
///
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/number
///
/// @example scss - Usage
///   @debug k-meta-is-number( 1 ); // => true
///   @debug k-meta-is-number( "foo" ); // => false
@function k-meta-is-number( $value ) {
    @return k-meta-type-of( $value ) == "number";
}

/// Checks whether `$value` is a <integer> CSS data type.
/// @param {Any} $value - The value to check.
/// @return {Boolean} - Whether `$value` is a integer.
///
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/integer
///
/// @example scss - Usage
///   @debug k-meta-is-integer( 1 ); // => true
///   @debug k-meta-is-integer( 1.5 ); // => false
@function k-meta-is-integer( $value ) {
    @return k-meta-is-number( $value ) and k-math-round( $value ) == $value;
}

/// Checks whether `$value` is a <time> CSS data type.
/// @param {Any} $value - The value to check.
/// @return {Boolean} - Whether `$value` is a time.
///
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
///
/// @example scss - Usage
///   @debug k-meta-is-time( 1s ); // => true
///   @debug k-meta-is-time( 1 ); // => false
@function k-meta-is-time( $value ) {
    @return k-meta-is-number( $value ) and k-string-index( "ms" "s", k-math-unit( $value ) ) != null;
}

/// Checks whether `$value` is a valid duration period.
/// @param {Any} $value - The value to check.
/// @return {Boolean} - Whether `$value` is a duration.
///
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
///
/// @example scss - Usage
///   @debug k-meta-is-duration( 1s ); // => true
///   @debug k-meta-is-duration( 1 ); // => false
@function k-meta-is-duration( $value ) {
    @return k-meta-is-time( $value );
}

/// Checks whether `$value` is a <angle> CSS data type.
/// @param {Any} $value - The value to check.
/// @return {Boolean} - Whether `$value` is a angle.
///
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/angle
///
/// @example scss - Usage
///   @debug k-meta-is-angle( 1deg ); // => true
///   @debug k-meta-is-angle( 1 ); // => false
@function k-meta-is-angle( $value ) {
    @return k-meta-is-number( $value ) and k-string-index( "deg" "rad" "grad" "turn", k-math-unit( $value ) ) != null;
}

/// Checks whether `$value` is a <frequency> CSS data type.
/// @param {Any} $value - The value to check.
/// @return {Boolean} - Whether `$value` is a frequency.
///
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/frequency
///
/// @example scss - Usage
///   @debug k-meta-is-frequency( 1Hz ); // => true
///   @debug k-meta-is-frequency( 1 ); // => false
@function k-meta-is-frequency( $value ) {
    @return k-meta-is-number( $value ) and k-string-index( "Hz" "kHz", k-math-unit( $value ) ) != null;
}

/// Checks whether `$value` is a relative <length> CSS data type.
/// @param {Any} $value - The value to check.
/// @return {Boolean} - Whether `$value` is a relative length.
///
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_font
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport
///
/// @example scss - Usage
///   @debug k-meta-is-relative-length( 1em ); // => true
///   @debug k-meta-is-relative-length( 1ch ); // => true
///   @debug k-meta-is-relative-length( 1 ); // => false
@function k-meta-is-relative-length( $value ) {
    @return k-meta-is-number( $value ) and k-string-index( "em" "ex" "ch" "rem" "vw" "vh" "vmin" "vmax", k-math-unit( $value ) ) != null;
}

/// Checks whether `$value` is an absolute <length> CSS data type.
/// @param {Any} $value - The value to check.
/// @return {Boolean} - Whether `$value` is an absolute length.
///
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#absolute_length_units
///
/// @example scss - Usage
///   @debug k-meta-is-absolute-length( 1cm ); // => true
///   @debug k-meta-is-absolute-length( 1 ); // => false
@function k-meta-is-absolute-length( $value ) {
    @return k-meta-is-number( $value ) and k-string-index( "cm" "mm" "in" "px" "pt" "pc", k-math-unit( $value ) ) != null;
}

/// Checks whether `$value` is a <percentage> CSS data type.
/// @param {Any} $value - The value to check.
/// @return {Boolean} - Whether `$value` is a percentage.
///
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/percentage
///
/// @example scss - Usage
///   @debug k-meta-is-percentage( 1% ); // => true
///   @debug k-meta-is-percentage( 1 ); // => false
@function k-meta-is-percentage( $value ) {
    @return k-meta-is-number( $value ) and k-math-unit( $value ) == "%";
}

/// Checks whether `$value` is a <length> CSS data type.
/// @param {Any} $value - The value to check.
/// @return {Boolean} - Whether `$value` is a length.
///
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length
///
/// @example scss - Usage
///   @debug k-meta-is-length( 1em ); // => true
///   @debug k-meta-is-length( 1cm ); // => true
///   @debug k-meta-is-length( 1 ); // => false
@function k-meta-is-length( $value ) {
    @return k-meta-is-relative-length( $value ) or k-meta-is-absolute-length( $value );
}

/// Checks whether `$value` is a <resolution> CSS data type.
/// @param {Any} $value - The value to check.
/// @return {Boolean} - Whether `$value` is a resolution.
///
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
///
/// @example scss - Usage
///   @debug k-meta-is-resolution( 1dpi ); // => true
///   @debug k-meta-is-resolution( 1 ); // => false
@function k-meta-is-resolution( $value ) {
    @return k-meta-is-number( $value ) and k-string-index( "dpi" "dpcm" "dppx", k-math-unit( $value ) ) != null;
}

/// Checks whether `$value` is a <position> CSS data type.
/// @param {Any} $value - The value to check.
/// @return {Boolean} - Whether `$value` is a position.
///
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/position
///
/// @example scss - Usage
///   @debug k-meta-is-position( center ); // => true
@function k-meta-is-position( $value ) {
    @return k-meta-is-length( $value ) or k-meta-is-percentage( $value ) or k-string-index( "top" "right" "bottom" "left" "center", $value ) != null;
}

// #endregion
// #region @import "./_string.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_string.import.scss
$svg-escaped-characters: (
    ("%", "%25"),
    ("<", "%3c"),
    (">", "%3e"),
    ("#", "%23"),
    ("(", "%28"),
    (")", "%29")
) !default;

/// Returns the first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
/// @param {String} $string - The string to process.
/// @param {String} $substring - The substring to look for.
/// @return {Number} - The first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
///
/// @example scss - Usage
///   @debug k-string-index( "foo bar", "bar" ); // => 5
@function k-string-index( $string, $substring ) {
    @return str-index( $string, $substring );
}

/// Returns a copy of `$string` with `$insert` inserted at `$index`.
/// @param {String} $string - The string to process.
/// @param {String} $insert - The string to insert.
/// @param {Number} $index - The index at which to insert `$insert`.
/// @return {String} - The resulting string.
///
/// @example scss - Usage
///   @debug k-string-insert( "foo bar", "baz", 5 ); // => "foo baz bar"
@function k-string-insert( $string, $insert, $index ) {
    @return str-insert( $string, $insert, $index );
}

/// Returns the length of `$string`.
/// @param {String} $string - The string to process.
/// @return {Number} - The length of `$string`.
///
/// @example scss - Usage
///   @debug k-string-length( "foo bar" ); // => 7
@function k-string-length( $string ) {
    @return str-length( $string );
}

/// Returns a copy of `$string` with quotes added.
/// @param {String} $string - The string to process.
/// @return {String} - The resulting string.
///
/// @example scss - Usage
///   @debug k-string-quote( "foo bar" ); // => "foo bar"
@function k-string-quote( $string ) {
    @return quote( $string );
}

/// Returns a copy of `$string` with all occurrences of `$search`
/// replaced by `$replace`.
/// @param {String} $string - The string to process.
/// @param {String} $search - The substring to look for.
/// @param {String} $replace - The replacement string.
/// @return {String} - The resulting string.
///
/// @link https://www.sassmeister.com/gist/1b4f2da5527830088e4d
///
/// @example scss - Usage
///   @debug k-string-replace( "foo bar", "bar", "baz" ); // => "foo baz"
@function k-string-replace( $string, $search, $replace: "" ) {
    @if k-meta-type-of( $string ) == number {
        $string: $string + "";
    }

    $index: k-string-index( $string, $search );

    @if $index {
        @return k-string-slice( $string, 1, $index - 1 ) + $replace + k-string-replace( k-string-slice( $string, $index + k-string-length( $search ) ), $search, $replace );
    }

    @return $string;
}

/// Returns a substring of `$string` starting at `$start-at` and ending at `$end-at`.
/// @param {String} $string - The string to process.
/// @param {Number} $start-at - The index at which to start the substring.
/// @param {Number} $end-at - The index at which to end the substring.
/// @return {String} - The resulting string.
///
/// @example scss - Usage
///   @debug k-string-slice( "foo bar", 5 ); // => "bar"
@function k-string-slice( $string, $start-at, $end-at: -1 ) {
    @return str-slice( $string, $start-at, $end-at );
}

/// Returns a copy of `$string` with all uppercase letters converted to lowercase.
/// @param {String} $string - The string to process.
/// @return {String} - The resulting string.
///
/// @example scss - Usage
///   @debug k-string-to-lower-case( "FOO BAR" ); // => "foo bar"
@function k-string-to-lower-case( $string ) {
    @return to-lower-case( $string );
}

/// Returns a copy of `$string` with all lowercase letters converted to uppercase.
/// @param {String} $string - The string to process.
/// @return {String} - The resulting string.
///
/// @example scss - Usage
///   @debug k-string-to-upper-case( "foo bar" ); // => "FOO BAR"
@function k-string-to-upper-case( $string ) {
    @return to-upper-case( $string );
}

/// Returns a unique identifier.
/// @return {String} - The unique identifier.
///
/// @example scss - Usage
///   @debug k-string-unique-id(); // => UNIQUE_ID
@function k-string-unique-id() {
    @return unique-id();
}

/// Returns a copy of `$string` with quotes removed.
/// @param {String} $string - The string to process.
/// @return {String} - The resulting string.
///
/// @example scss - Usage
///   @debug k-string-unquote( "foo bar" ); // => foo bar
@function k-string-unquote( $string ) {
    @return unquote( $string );
}


// See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
@function str-replace($string, $search, $replace: "") {
    $index: k-string-index($string, $search);

    @if $index {
        @return k-string-slice($string, 1, $index - 1) + $replace + str-replace(k-string-slice($string, $index + k-string-length($search)), $search, $replace);
    }

    @return $string;
}

// See https://codepen.io/kevinweber/pen/dXWoRw
@function escape-svg($string) {
    @if k-string-index($string, "data:image/svg+xml") {
        @each $char, $encoded in $svg-escaped-characters {
            // Do not escape the url brackets
            @if k-string-index($string, "url(") == 1 {
                $string: url("#{str-replace(k-string-slice($string, 6, -3), $char, $encoded)}");
            } @else {
                $string: str-replace($string, $char, $encoded);
            }
        }
    }

    @return $string;
}

// #endregion

// #endregion

// #endregion

// Options
$kendo-enable-rounded: true !default;
$kendo-enable-shadows: true !default;
$kendo-enable-gradients: true !default;
$kendo-enable-transitions: true !default;
$kendo-enable-focus-contrast: false !default;
$kendo-enable-typography: false !default;

$kendo-use-input-button-width: true !default;
$kendo-use-input-spinner-width: true !default;
$kendo-use-input-spinner-icon-offset: false !default;

$kendo-auto-bootstrap: true !default;

$kendo-nested-disabled: true !default;

/// Icon size.
/// @group common
$kendo-icon-size: 16px !default;
/// xtra small icon size.
/// @group common
$kendo-icon-size-xs: calc( #{$kendo-icon-size} * .75 ) !default;
/// Small icon size.
/// @group common
$kendo-icon-size-sm: calc( #{$kendo-icon-size} * .875 ) !default;
/// Medium icon size.
/// @group common
$kendo-icon-size-md: $kendo-icon-size !default;
/// Large icon size.
/// @group common
$kendo-icon-size-lg: calc( #{$kendo-icon-size} * 1.25 ) !default;
/// Extra large icon size.
/// @group common
$kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
/// Double extra large icon size.
/// @group common
$kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
/// Triple extra large icon size.
/// @group common
$kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;

$kendo-zindex-popup: 1 !default;
$kendo-zindex-window: 2 !default;


// Color settings
$kendo-is-dark-theme: false !default;


// TODO: refactor
/// Box shadow of focused items.
$kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

/// Transition used across all components.
$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;



// #endregion

// Color System
// #region @import "./color-system/_swatch.scss"; -> scss/core/color-system/_swatch.scss
// #region @import "@progress/kendo-theme-core/scss/functions/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "@progress/kendo-theme-core/scss/color-system/_constants.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_constants.scss
// Color constants

/// The color white.
/// Note: you cannot change this value.
/// @type Color
/// @group color-system
$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default

/// The color black.
/// Note: you cannot change this value.
/// @type Color
/// @group color-system
$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default

/// The color transparent.
/// Note: you cannot change this value.
/// @type Color
/// @group color-system
$kendo-color-rgba-transparent: rgba(0, 0, 0, 0); // stylelint-disable-line scss/dollar-variable-default

/// A gradient that goes from transparent to black.
/// Note: you cannot change this value.
/// @type Gradient
/// @group color-system
$kendo-gradient-transparent-to-black: rgba(black, 0), black; // stylelint-disable-line scss/dollar-variable-default

/// A gradient that goes from transparent to white.
/// Note: you cannot change this value.
/// @type Gradient
/// @group color-system
$kendo-gradient-transparent-to-white: rgba(white, 0), white; // stylelint-disable-line scss/dollar-variable-default

/// A gradient that goes from black to transparent.
/// Note: you cannot change this value.
/// @type Gradient
/// @group color-system
$kendo-gradient-black-to-transparent: black, rgba(black, 0); // stylelint-disable-line scss/dollar-variable-default

/// A gradient that goes from white to transparent.
/// Note: you cannot change this value.
/// @type Gradient
/// @group color-system
$kendo-gradient-white-to-transparent: white, rgba(white, 0); // stylelint-disable-line scss/dollar-variable-default

/// A gradient that cycles through the colors of the rainbow.
/// Note: you cannot change this value.
/// @type Gradient
/// @group color-system
$kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default

// #endregion
// #region @import "./_palettes.scss"; -> scss/core/color-system/_palettes.scss
$_default-palette-gray: (
    white: #ffffff,
    1: #fafafa,
    2: #f5f5f5,
    3: #ebebeb,
    4: #e0e0e0,
    5: #d6d6d6,
    6: #c2c2c2,
    7: #adadad,
    8: #999999,
    9: #808080,
    10: #666666,
    11: #525252,
    12: #3d3d3d,
    13: #292929,
    14: #1f1f1f,
    15: #141414,
    black: #000000,
);

$_default-palette-coral: (
    1: #fff6f5,
    2: #ffeceb,
    3: #ffdedb,
    4: #ffc8c4,
    5: #ffb1ac,
    6: #ff9d97,
    7: #ff8a82,
    8: #ff766d,
    9: #ff6358,
    10: #ea5a51,
    11: #d45349,
    12: #bf4a42,
    13: #a33f38,
    14: #80322c,
    15: #5c201c,
);

$_default-palette-sky-blue: (
    1: #ebf8fe,
    2: #d8f1fd,
    3: #c5eafc,
    4: #a3dffb,
    5: #81d4fA,
    6: #61c9f9,
    7: #42bff7,
    8: #22b3f5,
    9: #03a9f4,
    10: #039ae0,
    11: #028ccb,
    12: #027fb7,
    13: #026999,
    14: #02557a,
    15: #023f5c,
);

$_default-palette-green: (
    1: #edf8e9,
    2: #dcf0d3,
    3: #cbe9bf,
    4: #b7e1a5,
    5: #9bda80,
    6: #81d15f,
    7: #69c740,
    8: #4ebe1f,
    9: #37b400,
    10: #32a500,
    11: #2d9600,
    12: #298700,
    13: #227100,
    14: #1c5a00,
    15: #1c5a00,
);

$_default-palette-blue: (
    1: #e9f0fd,
    2: #d2e2fb,
    3: #bdd4f8,
    4: #9ec0f6,
    5: #80acf4,
    6: #6098f2,
    7: #4082ef,
    8: #206eec,
    9: #0058e9,
    10: #0052d6,
    11: #004ac2,
    12: #0042af,
    13: #003892,
    14: #002c75,
    15: #002259,
);

$_default-palette-yellow: (
    1: #fffae9,
    2: #fff4d3,
    3: #ffeebd,
    4: #ffe79e,
    5: #ffe080,
    6: #ffd760,
    7: #ffd040,
    8: #ffc720,
    9: #ffc000,
    10: #eaaf00,
    11: #d49f00,
    12: #bf9000,
    13: #a07800,
    14: #806000,
    15: #5e4700,
);

$_default-palette-red: (
    1: #feeeed,
    2: #fcddda,
    3: #fbc8c3,
    4: #faaaa2,
    5: #f98b80,
    6: #f76f60,
    7: #f65140,
    8: #f43520,
    9: #f31700,
    10: #df1600,
    11: #ca1400,
    12: #b61100,
    13: #980f00,
    14: #7a0c00,
    15: #7a0c00,
);

$_default-palette-lemon-yellow: (
    1: #fffcf1,
    2: #fffae2,
    3: #fff7d4,
    4: #fff4c2,
    5: #fff0b1,
    6: #ffed9d,
    7: #ffe989,
    8: #ffe676,
    9: #ffe162,
    10: #ead05a,
    11: #d4bc52,
    12: #bfa94a,
    13: #a3913f,
    14: #807131,
    15: #5c5223,
);

$_default-palette-spring-green: (
    1: #effaf3,
    2: #e0f6e8,
    3: #d1f1dd,
    4: #c0edd1,
    5: #a6e8c0,
    6: #8fe2af,
    7: #79dda0,
    8: #62d78f,
    9: #4cd180,
    10: #46c074,
    11: #3fae6a,
    12: #399d60,
    13: #2f834f,
    14: #266940,
    15: #1c4f30,
);

$_default-palette-royal-blue: (
    1: #f0f2ff,
    2: #e1e4fe,
    3: #d2d7fe,
    4: #bbc3fd,
    5: #a5affd,
    6: #8e9bfc,
    7: #7887fb,
    8: #6173fb,
    9: #4b5ffa,
    10: #4558e5,
    11: #3f50d1,
    12: #3847bc,
    13: #2f3c9d,
    14: #26307d,
    15: #1c245e,
);

$_default-palette-lavender-purple: (
    1: #f7f0ff,
    2: #f0e0ff,
    3: #e8d1ff,
    4: #dfbfff,
    5: #d6acff,
    6: #cc97ff,
    7: #c182ff,
    8: #b76dff,
    9: #ac58ff,
    10: #9e51ea,
    11: #8f49d4,
    12: #8142bf,
    13: #6b37a0,
    14: #562c80,
    15: #3f205e,
);

$_default-palette-flamingo-pink: (
    1: #fff0f5,
    2: #ffe1eb,
    3: #ffd1e1,
    4: #ffbfd6,
    5: #ffacc9,
    6: #ff97bb,
    7: #ff82ae,
    8: #ff6da0,
    9: #ff5892,
    10: #ea5186,
    11: #d4497a,
    12: #bf426e,
    13: #a0375c,
    14: #802c49,
    15: #5e2036,
);


// stylelint-disable scss/no-global-function-names
/// The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
/// @group palette
$kendo-palette-gray: $_default-palette-gray !default;
$kendo-palette-gray: map-merge($_default-palette-gray, $kendo-palette-gray);

/// The Coral Palette provides colors to the Primary and Series A variable groups.
/// @group palette
$kendo-palette-coral: $_default-palette-coral !default;
$kendo-palette-coral: map-merge($_default-palette-coral, $kendo-palette-coral);

/// The Sky Blue Palette provides colors to the Tertiary variable group.
/// @group palette
$kendo-palette-sky-blue: $_default-palette-sky-blue !default;
$kendo-palette-sky-blue: map-merge($_default-palette-sky-blue, $kendo-palette-sky-blue);

/// The Green Palette provides colors to the Success variable group.
/// @group palette
$kendo-palette-green: $_default-palette-green !default;
$kendo-palette-green: map-merge($_default-palette-green, $kendo-palette-green);

/// The Blue Palette provides colors to the Info variable group.
/// @group palette
$kendo-palette-blue: $_default-palette-blue !default;
$kendo-palette-blue: map-merge($_default-palette-blue, $kendo-palette-blue);

/// The Yellow Palette provides colors to the Warning variable group.
/// @group palette
$kendo-palette-yellow: $_default-palette-yellow !default;
$kendo-palette-yellow: map-merge($_default-palette-yellow, $kendo-palette-yellow);

/// The Red Palette provides colors to the Error variable group.
/// @group palette
$kendo-palette-red: $_default-palette-red !default;
$kendo-palette-red: map-merge($_default-palette-red, $kendo-palette-red);

/// The Lemon Yellow Palette provides colors to the Series B variable group.
/// @group palette
$kendo-palette-lemon-yellow: $_default-palette-lemon-yellow !default;
$kendo-palette-lemon-yellow: map-merge($_default-palette-lemon-yellow, $kendo-palette-lemon-yellow);

/// The Spring Green Palette provides colors to the Series C variable group.
/// @group palette
$kendo-palette-spring-green: $_default-palette-spring-green !default;
$kendo-palette-spring-green: map-merge($_default-palette-spring-green, $kendo-palette-spring-green);

/// The Royal Blue Palette provides colors to the Series D variable group.
/// @group palette
$kendo-palette-royal-blue: $_default-palette-royal-blue !default;
$kendo-palette-royal-blue: map-merge($_default-palette-royal-blue, $kendo-palette-royal-blue);

/// The Lavender Purple Palette provides colors to the Series E variable group.
/// @group palette
$kendo-palette-lavender-purple: $_default-palette-lavender-purple !default;
$kendo-palette-lavender-purple: map-merge($_default-palette-lavender-purple, $kendo-palette-lavender-purple);

/// The Flamingo Pink Palette provides colors to the Series F variable group.
/// @group palette
$kendo-palette-flamingo-pink: $_default-palette-flamingo-pink !default;
$kendo-palette-flamingo-pink: map-merge($_default-palette-flamingo-pink, $kendo-palette-flamingo-pink);
// stylelint-enable scss/no-global-function-names

// #endregion

// Config
$kendo-enable-color-system: true !default;

// Colors
$_default-colors: (
    // Misc
    app-surface: k-map-get( $kendo-palette-gray, white ),
    on-app-surface: k-map-get( $kendo-palette-gray, 12 ),
    subtle: k-map-get( $kendo-palette-gray, 10 ),
    surface: k-map-get( $kendo-palette-gray, 1 ),
    surface-alt: k-map-get( $kendo-palette-gray, white ),
    border: rgba( k-map-get( $kendo-palette-gray, black ), .08),
    border-alt: rgba( k-map-get( $kendo-palette-gray, black ), .16),
    // Base
    base-subtle: k-map-get( $kendo-palette-gray, 3 ),
    base-subtle-hover: k-map-get( $kendo-palette-gray, 4 ),
    base-subtle-active: k-map-get( $kendo-palette-gray, 5 ),
    base: k-map-get( $kendo-palette-gray, 2 ),
    base-hover: k-map-get( $kendo-palette-gray, 3 ),
    base-active: k-map-get( $kendo-palette-gray, 5 ),
    base-emphasis: k-map-get( $kendo-palette-gray, 6 ),
    base-on-subtle: k-map-get( $kendo-palette-gray, 12 ),
    on-base: k-map-get( $kendo-palette-gray, 12 ),
    base-on-surface: k-map-get( $kendo-palette-gray, 12 ),
    // Primary
    primary-subtle: k-map-get( $kendo-palette-coral, 2 ),
    primary-subtle-hover: k-map-get( $kendo-palette-coral, 3 ),
    primary-subtle-active: k-map-get( $kendo-palette-coral, 4 ),
    primary: k-map-get( $kendo-palette-coral, 9 ),
    primary-hover: k-map-get( $kendo-palette-coral, 10 ),
    primary-active: k-map-get( $kendo-palette-coral, 11 ),
    primary-emphasis: k-map-get( $kendo-palette-coral, 6 ),
    primary-on-subtle: k-map-get( $kendo-palette-coral, 15 ),
    on-primary: k-map-get( $kendo-palette-gray, white ),
    primary-on-surface: k-map-get( $kendo-palette-coral, 9 ),
    // Secondary
    secondary-subtle: k-map-get( $kendo-palette-gray, 1 ),
    secondary-subtle-hover: k-map-get( $kendo-palette-gray, 2 ),
    secondary-subtle-active: k-map-get( $kendo-palette-gray, 3 ),
    secondary: k-map-get( $kendo-palette-gray, 10 ),
    secondary-hover: k-map-get( $kendo-palette-gray, 11 ),
    secondary-active: k-map-get( $kendo-palette-gray, 12 ),
    secondary-emphasis: k-map-get( $kendo-palette-gray, 4 ),
    secondary-on-subtle: k-map-get( $kendo-palette-gray, 15 ),
    on-secondary: k-map-get( $kendo-palette-gray, white ),
    secondary-on-surface: k-map-get( $kendo-palette-gray, 13 ),
    // Tertiary
    tertiary-subtle: k-map-get( $kendo-palette-sky-blue, 2 ),
    tertiary-subtle-hover: k-map-get( $kendo-palette-sky-blue, 3 ),
    tertiary-subtle-active: k-map-get( $kendo-palette-sky-blue, 4 ),
    tertiary: k-map-get( $kendo-palette-sky-blue, 9 ),
    tertiary-hover: k-map-get( $kendo-palette-sky-blue, 10 ),
    tertiary-active: k-map-get( $kendo-palette-sky-blue, 11 ),
    tertiary-emphasis: k-map-get( $kendo-palette-sky-blue, 6 ),
    tertiary-on-subtle: k-map-get( $kendo-palette-sky-blue, 15 ),
    on-tertiary: k-map-get( $kendo-palette-gray, white ),
    tertiary-on-surface: k-map-get( $kendo-palette-sky-blue, 11 ),
    // Info
    info-subtle: k-map-get( $kendo-palette-blue, 2 ),
    info-subtle-hover: k-map-get( $kendo-palette-blue, 3 ),
    info-subtle-active: k-map-get( $kendo-palette-blue, 5 ),
    info: k-map-get( $kendo-palette-blue, 9 ),
    info-hover: k-map-get( $kendo-palette-blue, 10 ),
    info-active: k-map-get( $kendo-palette-blue, 11 ),
    info-emphasis: k-map-get( $kendo-palette-blue, 6 ),
    info-on-subtle: k-map-get( $kendo-palette-blue, 15 ),
    on-info: k-map-get( $kendo-palette-gray, white ),
    info-on-surface: k-map-get( $kendo-palette-blue, 11 ),
    // Success
    success-subtle: k-map-get( $kendo-palette-green, 2 ),
    success-subtle-hover: k-map-get( $kendo-palette-green, 3 ),
    success-subtle-active: k-map-get( $kendo-palette-green, 4 ),
    success: k-map-get( $kendo-palette-green, 9 ),
    success-hover: k-map-get( $kendo-palette-green, 10 ),
    success-active: k-map-get( $kendo-palette-green, 11 ),
    success-emphasis: k-map-get( $kendo-palette-green, 6 ),
    success-on-subtle: k-map-get( $kendo-palette-green, 15 ),
    on-success: k-map-get( $kendo-palette-gray, white ),
    success-on-surface: k-map-get( $kendo-palette-green, 11 ),
    // Warning
    warning-subtle: k-map-get( $kendo-palette-yellow, 2 ),
    warning-subtle-hover: k-map-get( $kendo-palette-yellow, 3 ),
    warning-subtle-active: k-map-get( $kendo-palette-yellow, 4 ),
    warning: k-map-get( $kendo-palette-yellow, 9 ),
    warning-hover: k-map-get( $kendo-palette-yellow, 10 ),
    warning-active: k-map-get( $kendo-palette-yellow, 11 ),
    warning-emphasis: k-map-get( $kendo-palette-yellow, 6 ),
    warning-on-subtle: k-map-get( $kendo-palette-yellow, 15 ),
    on-warning: k-map-get( $kendo-palette-gray, 12 ),
    warning-on-surface: k-map-get( $kendo-palette-yellow, 9 ),
    // Error
    error-subtle: k-map-get( $kendo-palette-red, 2 ),
    error-subtle-hover: k-map-get( $kendo-palette-red, 3 ),
    error-subtle-active: k-map-get( $kendo-palette-red, 5 ),
    error: k-map-get( $kendo-palette-red, 9 ),
    error-hover: k-map-get( $kendo-palette-red, 10 ),
    error-active: k-map-get( $kendo-palette-red, 11 ),
    error-emphasis: k-map-get( $kendo-palette-red, 6 ),
    error-on-subtle: k-map-get( $kendo-palette-red, 15 ),
    on-error: k-map-get( $kendo-palette-gray, white ),
    error-on-surface: k-map-get( $kendo-palette-red, 11 ),
    // Light
    light-subtle: k-map-get( $kendo-palette-gray, 1 ),
    light-subtle-hover: k-map-get( $kendo-palette-gray, 2 ),
    light-subtle-active: k-map-get( $kendo-palette-gray, 3 ),
    light: k-map-get( $kendo-palette-gray, 3 ),
    light-hover: k-map-get( $kendo-palette-gray, 4 ),
    light-active: k-map-get( $kendo-palette-gray, 5 ),
    light-emphasis: k-map-get( $kendo-palette-gray, 5 ),
    light-on-subtle: k-map-get( $kendo-palette-gray, 15 ),
    on-light: k-map-get( $kendo-palette-gray, black ),
    light-on-surface: k-map-get( $kendo-palette-gray, 4 ),
    // Dark
    dark-subtle: k-map-get( $kendo-palette-gray, 6 ),
    dark-subtle-hover: k-map-get( $kendo-palette-gray, 7 ),
    dark-subtle-active: k-map-get( $kendo-palette-gray, 8 ),
    dark: k-map-get( $kendo-palette-gray, 12 ),
    dark-hover: k-map-get( $kendo-palette-gray, 13 ),
    dark-active: k-map-get( $kendo-palette-gray, 14 ),
    dark-emphasis: k-map-get( $kendo-palette-gray, 10 ),
    dark-on-subtle: k-map-get( $kendo-palette-gray, 14 ),
    on-dark: k-map-get( $kendo-palette-gray, white ),
    dark-on-surface: k-map-get( $kendo-palette-gray, 15 ),
    // Inverse
    inverse-subtle: k-map-get( $kendo-palette-gray, 6 ),
    inverse-subtle-hover: k-map-get( $kendo-palette-gray, 7 ),
    inverse-subtle-active: k-map-get( $kendo-palette-gray, 8 ),
    inverse: k-map-get( $kendo-palette-gray, 12 ),
    inverse-hover: k-map-get( $kendo-palette-gray, 13 ),
    inverse-active: k-map-get( $kendo-palette-gray, 14 ),
    inverse-emphasis: k-map-get( $kendo-palette-gray, 10 ),
    inverse-on-subtle: k-map-get( $kendo-palette-gray, 14 ),
    on-inverse: k-map-get( $kendo-palette-gray, white ),
    inverse-on-surface: k-map-get( $kendo-palette-gray, 15 ),
    // Series A
    series-a: k-map-get( $kendo-palette-coral, 9 ),
    series-a-bold: k-map-get( $kendo-palette-coral, 12 ),
    series-a-bolder: k-map-get( $kendo-palette-coral, 14 ),
    series-a-subtle: k-map-get( $kendo-palette-coral, 5 ),
    series-a-subtler: k-map-get( $kendo-palette-coral, 7 ),
    // Series B
    series-b: k-map-get( $kendo-palette-lemon-yellow, 9 ),
    series-b-bold: k-map-get( $kendo-palette-lemon-yellow, 12 ),
    series-b-bolder: k-map-get( $kendo-palette-lemon-yellow, 14 ),
    series-b-subtle: k-map-get( $kendo-palette-lemon-yellow, 5 ),
    series-b-subtler: k-map-get( $kendo-palette-lemon-yellow, 7 ),
    // Series C
    series-c: k-map-get( $kendo-palette-spring-green, 9 ),
    series-c-bold: k-map-get( $kendo-palette-spring-green, 12 ),
    series-c-bolder: k-map-get( $kendo-palette-spring-green, 14 ),
    series-c-subtle: k-map-get( $kendo-palette-spring-green, 5 ),
    series-c-subtler: k-map-get( $kendo-palette-spring-green, 7 ),
    // Series D
    series-d: k-map-get( $kendo-palette-royal-blue, 9 ),
    series-d-bold: k-map-get( $kendo-palette-royal-blue, 12 ),
    series-d-bolder: k-map-get( $kendo-palette-royal-blue, 14 ),
    series-d-subtle: k-map-get( $kendo-palette-royal-blue, 5 ),
    series-d-subtler: k-map-get( $kendo-palette-royal-blue, 7 ),
    // Series Е
    series-e: k-map-get( $kendo-palette-lavender-purple, 9 ),
    series-e-bold: k-map-get( $kendo-palette-lavender-purple, 12 ),
    series-e-bolder: k-map-get( $kendo-palette-lavender-purple, 14 ),
    series-e-subtle: k-map-get( $kendo-palette-lavender-purple, 5 ),
    series-e-subtler: k-map-get( $kendo-palette-lavender-purple, 7 ),
    // Series F
    series-f: k-map-get( $kendo-palette-flamingo-pink, 9 ),
    series-f-bold: k-map-get( $kendo-palette-flamingo-pink, 12 ),
    series-f-bolder: k-map-get( $kendo-palette-flamingo-pink, 14 ),
    series-f-subtle: k-map-get( $kendo-palette-flamingo-pink, 5 ),
    series-f-subtler: k-map-get( $kendo-palette-flamingo-pink, 7 ),
) !default;

/// The global default Colors map.
/// @group color-system
///
/// @subgroup {misc}
/// [app-surface, on-app-surface, subtle,
/// surface, surface-alt, border, border-alt]
/// The Misc variable group.
/// @prop {Color} app-surface - The background color of the application.
/// @prop {Color} on-app-surface - The text color of the application.
/// @prop {Color} subtle - The subtle text color.
/// @prop {Color} surface - The background color of the components' chrome area.
/// @prop {Color} surface-alt - The alternative background color of the components' chrome area.
/// @prop {Color} border - Тhe border color of the application.
/// @prop {Color} border-alt - Тhe alternative border color of the application.
///
/// @subgroup {base}
/// [base-subtle, base-subtle-hover, base-subtle-active,
/// base, base-hover, base-active, base-emphasis,
/// base-on-subtle, on-base, base-on-surface]
/// The Base variable group.
/// @prop {Color} base-subtle - The base subtle background color variable.
/// @prop {Color} base-subtle-hover - The base subtle background color variable for the hover state.
/// @prop {Color} base-subtle-active - The base subtle background color variable for the active state.
/// @prop {Color} base - The base background color variable.
/// @prop {Color} base-hover - The base background color variable for the hover state.
/// @prop {Color} base-active - The base background color variable for the active state.
/// @prop {Color} base-emphasis - The emphasized base color variable.
/// @prop {Color} base-on-subtle - The text color variable for content on base subtle.
/// @prop {Color} on-base - The text color variable for content on base.
/// @prop {Color} base-on-surface - The text color variable for content on surface.
///
/// @subgroup {primary}
/// [primary-subtle, primary-subtle-hover, primary-subtle-active,
/// primary, primary-hover, primary-active, primary-emphasis,
/// primary-on-subtle, on-primary, primary-on-surface]
/// The Primary variable group.
/// @prop {Color} primary-subtle - The primary subtle background color variable.
/// @prop {Color} primary-subtle-hover - The primary subtle background color variable for the hover state.
/// @prop {Color} primary-subtle-active - The primary subtle background color variable for the active state.
/// @prop {Color} primary - The primary background color variable.
/// @prop {Color} primary-hover - The primary background color variable for the hover state.
/// @prop {Color} primary-active - The primary background color variable for the active state.
/// @prop {Color} primary-emphasis - The emphasized primary color variable.
/// @prop {Color} primary-on-subtle - The text color variable for content on primary subtle.
/// @prop {Color} on-primary - The text color variable for content on primary.
/// @prop {Color} primary-on-surface - The text color variable for content on surface.
///
/// @subgroup {secondary}
/// [secondary-subtle, secondary-subtle-hover, secondary-subtle-active,
/// secondary, secondary-hover, secondary-active, secondary-emphasis,
/// secondary-on-subtle, on-secondary, secondary-on-surface]
/// The Secondary variable group.
/// @prop {Color} secondary-subtle - The secondary subtle background color variable.
/// @prop {Color} secondary-subtle-hover - The secondary subtle background color variable for the hover state.
/// @prop {Color} secondary-subtle-active - The secondary subtle background color variable for the active state.
/// @prop {Color} secondary - The secondary background color variable.
/// @prop {Color} secondary-hover - The secondary background color variable for the hover state.
/// @prop {Color} secondary-active - The secondary background color variable for the active state.
/// @prop {Color} secondary-emphasis - The emphasized secondary color variable.
/// @prop {Color} secondary-on-subtle - The text color variable for content on secondary subtle.
/// @prop {Color} on-secondary - The text color variable for content on secondary.
/// @prop {Color} secondary-on-surface - The text color variable for content on surface.
///
/// @subgroup {tertiary}
/// [tertiary-subtle, tertiary-subtle-hover, tertiary-subtle-active,
/// tertiary, tertiary-hover, tertiary-active, tertiary-emphasis,
/// tertiary-on-subtle, on-tertiary, tertiary-on-surface]
/// The Tertiary variable group.
/// @prop {Color} tertiary-subtle - The tertiary subtle background color variable.
/// @prop {Color} tertiary-subtle-hover - The tertiary subtle background color variable for the hover state.
/// @prop {Color} tertiary-subtle-active - The tertiary subtle background color variable for the active state.
/// @prop {Color} tertiary - The tertiary background color variable.
/// @prop {Color} tertiary-hover - The tertiary background color variable for the hover state.
/// @prop {Color} tertiary-active - The tertiary background color variable for the active state.
/// @prop {Color} tertiary-emphasis - The emphasized tertiary color variable.
/// @prop {Color} tertiary-on-subtle - The text color variable for content on tertiary subtle.
/// @prop {Color} on-tertiary - The text color variable for content on tertiary.
/// @prop {Color} tertiary-on-surface - The text color variable for content on surface.
///
/// @subgroup {info}
/// [info-subtle, info-subtle-hover, info-subtle-active,
/// info, info-hover, info-active, info-emphasis,
/// info-on-subtle, on-info, info-on-surface]
/// The Info variable group.
/// @prop {Color} info-subtle - The info subtle background color variable.
/// @prop {Color} info-subtle-hover - The info subtle background color variable for the hover state.
/// @prop {Color} info-subtle-active - The info subtle background color variable for the active state.
/// @prop {Color} info - The info background color variable.
/// @prop {Color} info-hover - The info background color variable for the hover state.
/// @prop {Color} info-active - The info background color variable for the active state.
/// @prop {Color} info-emphasis - The emphasized info color variable.
/// @prop {Color} info-on-subtle - The text color variable for content on info subtle.
/// @prop {Color} on-info - The text color variable for content on info.
/// @prop {Color} info-on-surface - The text color variable for content on surface.
///
/// @subgroup {success}
/// [success-subtle, success-subtle-hover, success-subtle-active,
/// success, success-hover, success-active, success-emphasis,
/// success-on-subtle, on-success, success-on-surface]
/// The Success variable group.
/// @prop {Color} success-subtle - The success subtle background color variable.
/// @prop {Color} success-subtle-hover - The success subtle background color variable for the hover state.
/// @prop {Color} success-subtle-active - The success subtle background color variable for the active state.
/// @prop {Color} success - The success background color variable.
/// @prop {Color} success-hover - The success background color variable for the hover state.
/// @prop {Color} success-active - The success background color variable for the active state.
/// @prop {Color} success-emphasis - The emphasized success color variable.
/// @prop {Color} success-on-subtle - The text color variable for content on success subtle.
/// @prop {Color} on-success - The text color variable for content on success.
/// @prop {Color} success-on-surface - The text color variable for content on surface.
///
/// @subgroup {warning}
/// [warning-subtle, warning-subtle-hover, warning-subtle-active,
/// warning, warning-hover, warning-active, warning-emphasis,
/// warning-on-subtle, on-warning, warning-on-surface]
/// The Warning variable group.
/// @prop {Color} warning-subtle - The warning subtle background color variable.
/// @prop {Color} warning-subtle-hover - The warning subtle background color variable for the hover state.
/// @prop {Color} warning-subtle-active - The warning subtle background color variable for the active state.
/// @prop {Color} warning - The warning background color variable.
/// @prop {Color} warning-hover - The warning background color variable for the hover state.
/// @prop {Color} warning-active - The warning background color variable for the active state.
/// @prop {Color} warning-emphasis - The emphasized warning color variable.
/// @prop {Color} warning-on-subtle - The text color variable for content on warning subtle.
/// @prop {Color} on-warning - The text color variable for content on warning.
/// @prop {Color} warning-on-surface - The text color variable for content on surface.
///
/// @subgroup {error}
/// [error-subtle, error-subtle-hover, error-subtle-active,
/// error, error-hover, error-active, error-emphasis,
/// error-on-subtle, on-error, error-on-surface]
/// The Error variable group.
/// @prop {Color} error-subtle - The error subtle background color variable.
/// @prop {Color} error-subtle-hover - The error subtle background color variable for the hover state.
/// @prop {Color} error-subtle-active - The error subtle background color variable for the active state.
/// @prop {Color} error - The error background color variable.
/// @prop {Color} error-hover - The error background color variable for the hover state.
/// @prop {Color} error-active - The error background color variable for the active state.
/// @prop {Color} error-emphasis - The emphasized error color variable.
/// @prop {Color} error-on-subtle - The text color variable for content on error subtle.
/// @prop {Color} on-error - The text color variable for content on error.
/// @prop {Color} error-on-surface - The text color variable for content on surface.
///
/// @subgroup {light}
/// [light-subtle, light-subtle-hover, light-subtle-active,
/// light, light-hover, light-active, light-emphasis,
/// light-on-subtle, on-light, light-on-surface]
/// The Light variable group.
/// @prop {Color} light-subtle - The light subtle background color variable.
/// @prop {Color} light-subtle-hover - The light subtle background color variable for the hover state.
/// @prop {Color} light-subtle-active - The light subtle background color variable for the active state.
/// @prop {Color} light - The light background color variable.
/// @prop {Color} light-hover - The light background color variable for the hover state.
/// @prop {Color} light-active - The light background color variable for the active state.
/// @prop {Color} light-emphasis - The emphasized light color variable.
/// @prop {Color} light-on-subtle - The text color variable for content on light subtle.
/// @prop {Color} on-light - The text color variable for content on light.
/// @prop {Color} light-on-surface - The text color variable for content on surface.
///
/// @subgroup {dark}
/// [dark-subtle, dark-subtle-hover, dark-subtle-active,
/// dark, dark-hover, dark-active, dark-emphasis,
/// dark-on-subtle, on-dark, dark-on-surface]
/// The Dark variable group.
/// @prop {Color} dark-subtle - The dark subtle background color variable.
/// @prop {Color} dark-subtle-hover - The dark subtle background color variable for the hover state.
/// @prop {Color} dark-subtle-active - The dark subtle background color variable for the active state.
/// @prop {Color} dark - The dark background color variable.
/// @prop {Color} dark-hover - The dark background color variable for the hover state.
/// @prop {Color} dark-active - The dark background color variable for the active state.
/// @prop {Color} dark-emphasis - The emphasized dark color variable.
/// @prop {Color} dark-on-subtle - The text color variable for content on dark subtle.
/// @prop {Color} on-dark - The text color variable for content on dark.
/// @prop {Color} dark-on-surface - The text color variable for content on surface.
///
/// @subgroup {inverse}
/// [inverse-subtle, inverse-subtle-hover, inverse-subtle-active,
/// inverse, inverse-hover, inverse-active, inverse-emphasis,
/// inverse-on-subtle, on-inverse, inverse-on-surface]
/// The Inverse variable group.
/// @prop {Color} inverse-subtle - The inverse subtle background color variable.
/// @prop {Color} inverse-subtle-hover - The inverse subtle background color variable for the hover state.
/// @prop {Color} inverse-subtle-active - The inverse subtle background color variable for the active state.
/// @prop {Color} inverse - The inverse background color variable.
/// @prop {Color} inverse-hover - The inverse background color variable for the hover state.
/// @prop {Color} inverse-active - The inverse background color variable for the active state.
/// @prop {Color} inverse-emphasis - The emphasized inverse color variable.
/// @prop {Color} inverse-on-subtle - The text color variable for content on inverse subtle.
/// @prop {Color} on-inverse - The text color variable for content on inverse.
/// @prop {Color} inverse-on-surface - The text color variable for content on surface.
///
/// @subgroup {series-a}
/// [series-a, series-a-bold, series-a-bolder,
/// series-a-subtle, series-a-subtler]
/// The Series A variable group.
/// @prop {Color} series-a - The series A color variable.
/// @prop {Color} series-a-bold - The bold series A color variable.
/// @prop {Color} series-a-bolder - The bolder series A color variable.
/// @prop {Color} series-a-subtle - The subtle series A color variable.
/// @prop {Color} series-a-subtler - The subtler series A color variable.
///
/// @subgroup {series-b}
/// [series-b, series-b-bold, series-b-bolder,
/// series-b-subtle, series-b-subtler]
/// The Series B variable group.
/// @prop {Color} series-b - The series B color variable.
/// @prop {Color} series-b-bold - The bold series B color variable.
/// @prop {Color} series-b-bolder - The bolder series B color variable.
/// @prop {Color} series-b-subtle - The subtle series B color variable.
/// @prop {Color} series-b-subtler - The subtler series B color variable.
///
/// @subgroup {series-c}
/// [series-c, series-c-bold, series-c-bolder,
/// series-c-subtle, series-c-subtler]
/// The Series C variable group.
/// @prop {Color} series-c - The series C color variable.
/// @prop {Color} series-c-bold - The bold series C color variable.
/// @prop {Color} series-c-bolder - The bolder series C color variable.
/// @prop {Color} series-c-subtle - The subtle series C color variable.
/// @prop {Color} series-c-subtler - The subtler series C color variable.
///
/// @subgroup {series-d}
/// [series-d, series-d-bold, series-d-bolder,
/// series-d-subtle, series-d-subtler]
/// The Series D variable group.
/// @prop {Color} series-d - The series D color variable.
/// @prop {Color} series-d-bold - The bold series D color variable.
/// @prop {Color} series-d-bolder - The bolder series D color variable.
/// @prop {Color} series-d-subtle - The subtle series D color variable.
/// @prop {Color} series-d-subtler - The subtler series D color variable.
///
/// @subgroup {series-e}
/// [series-e, series-e-bold, series-e-bolder,
/// series-e-subtle, series-e-subtler]
/// The Series E variable group.
/// @prop {Color} series-e - The series E color variable.
/// @prop {Color} series-e-bold - The bold series E color variable.
/// @prop {Color} series-e-bolder - The bolder series E color variable.
/// @prop {Color} series-e-subtle - The subtle series E color variable.
/// @prop {Color} series-e-subtler - The subtler series E color variable.
///
/// @subgroup {series-f}
/// [series-f, series-f-bold, series-f-bolder,
/// series-f-subtle, series-f-subtler]
/// The Series F variable group.
/// @prop {Color} series-f - The series F color variable.
/// @prop {Color} series-f-bold - The bold series F color variable.
/// @prop {Color} series-f-bolder - The bolder series F color variable.
/// @prop {Color} series-f-subtle - The subtle series F color variable.
/// @prop {Color} series-f-subtler - The subtler series F color variable.
$kendo-colors: $_default-colors !default;

$kendo-is-dark-theme: false !default;

// Theme colors
/// The color that focuses the user attention.
/// Used for primary buttons and for elements of primary importance across the theme.
/// @group color-system
/// @type Color
$kendo-color-primary: #ff6358 !default;
$kendo-color-primary-lighter: k-color-tint($kendo-color-primary, 2) !default;
$kendo-color-primary-darker: k-color-shade($kendo-color-primary, 2) !default;
/// The color used along with the primary color denoted by $kendo-color-primary.
/// Used to provide contrast between the background and foreground colors.
/// @group color-system
/// @type Color
$kendo-color-primary-contrast: k-contrast-legacy($kendo-color-primary) !default;

/// The secondary color of the theme.
/// @group color-system
/// @type Color
$kendo-color-secondary: #666666 !default;
$kendo-color-secondary-lighter: k-color-tint($kendo-color-secondary, 2) !default;
$kendo-color-secondary-darker: k-color-shade($kendo-color-secondary, 2) !default;

/// The color used along with the secondary color denoted by $kendo-color-secondary.
/// Used to provide contrast between the background and foreground colors.
/// @group color-system
/// @type Color
$kendo-color-secondary-contrast: k-contrast-legacy($kendo-color-secondary) !default;

/// The tertiary color of the theme.
/// @group color-system
/// @type Color
$kendo-color-tertiary: #03a9f4 !default;
$kendo-color-tertiary-lighter: k-color-tint($kendo-color-tertiary, 2) !default;
$kendo-color-tertiary-darker: k-color-shade($kendo-color-tertiary, 2) !default;

/// The color used along with the tertiary color denoted by $kendo-color-tertiary.
/// Used to provide contrast between the background and foreground colors.
/// @group color-system
/// @type Color
$kendo-color-tertiary-contrast: k-contrast-legacy($kendo-color-tertiary) !default;

/// The color for informational messages and states.
/// @group color-system
/// @type Color
$kendo-color-info: #0058e9 !default;
$kendo-color-info-lighter: k-color-tint($kendo-color-info, 2) !default;
$kendo-color-info-darker: k-color-shade($kendo-color-info, 2) !default;

/// The color for success messages and states.
/// @group color-system
/// @type Color
$kendo-color-success: #37b400 !default;
$kendo-color-success-lighter: k-color-tint($kendo-color-success, 2) !default;
$kendo-color-success-darker: k-color-shade($kendo-color-success, 2) !default;

/// The color for warning messages and states.
/// @group color-system
/// @type Color
$kendo-color-warning: #ffc000 !default;
$kendo-color-warning-lighter: k-color-tint($kendo-color-warning, 2) !default;
$kendo-color-warning-darker: k-color-shade($kendo-color-warning, 2) !default;

/// The color for error messages and states.
/// @group color-system
/// @type Color
$kendo-color-error: #f31700 !default;
$kendo-color-error-lighter: k-color-tint($kendo-color-error, 2) !default;
$kendo-color-error-darker: k-color-shade($kendo-color-error, 2) !default;

/// The dark color of the theme.
/// @group color-system
/// @type Color
$kendo-color-dark: #424242 !default;

/// The light color of the theme.
/// @group color-system
/// @type Color
$kendo-color-light: #ebebeb !default;

/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
/// @group color-system
$kendo-color-inverse: if($kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark) !default;

$kendo-theme-colors: (
    "primary": $kendo-color-primary,
    "secondary": $kendo-color-secondary,
    "tertiary": $kendo-color-tertiary,
    "info": $kendo-color-info,
    "success": $kendo-color-success,
    "warning": $kendo-color-warning,
    "error": $kendo-color-error,
    "dark": $kendo-color-dark,
    "light": $kendo-color-light,
    "inverse": $kendo-color-inverse,
); // todo: add !default;

// Generic styles

/// Background color of the body.
/// @group common
$kendo-body-bg: $kendo-color-white !default;
/// Text color of the body.
/// @group common
$kendo-body-text: #424242 !default;

/// Subtle text color.
/// @group common
$kendo-subtle-text: #666666 !default;

$kendo-app-bg: k-try-shade($kendo-body-bg, 0.25) !default;
$kendo-app-text: $kendo-body-text !default;
$kendo-app-border: rgba($kendo-color-black, 0.08) !default;

// Link
/// Text color of the links.
/// @group common
$kendo-link-text: $kendo-color-primary !default;
/// Text color of the links on hover.
/// @group common
$kendo-link-hover-text: $kendo-color-primary-darker !default;

// Components

// Component
/// Background color of a component.
/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
/// @group component
$kendo-component-bg: $kendo-body-bg !default;
/// Text color of a component.
/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
/// @group component
$kendo-component-text: $kendo-body-text !default;
/// Border color of a component.
/// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
/// @group component
$kendo-component-border: rgba(if($kendo-is-dark-theme, $kendo-color-white, $kendo-color-black), 0.08) !default;

/// The background of the components' chrome area.
$kendo-base-bg: #fafafa !default;
/// The text color of the components' chrome area.
$kendo-base-text: $kendo-body-text !default;
/// The border color of the components' chrome area.
$kendo-base-border: rgba(black, 0.08) !default;
/// The gradient background of the components' chrome area.
$kendo-base-gradient: rgba(black, 0), rgba(black, 0.02) !default;

/// The background of hovered items.
$kendo-hover-bg: k-try-shade($kendo-base-bg, 0.5) !default;
/// The text color of hovered items.
$kendo-hover-text: $kendo-base-text !default;
/// The border color of hovered items.
$kendo-hover-border: $kendo-base-border !default;
/// The gradient background of hovered items.
$kendo-hover-gradient: $kendo-base-gradient !default;

/// The background of selected items.
$kendo-selected-bg: $kendo-color-primary !default;
/// The text color of selected items.
$kendo-selected-text: k-contrast-legacy($kendo-selected-bg) !default;
/// The border color of selected items.
$kendo-selected-border: $kendo-base-border !default;
/// The gradient background of selected items.
$kendo-selected-gradient: $kendo-base-gradient !default;

/// The background of selected and hovered items.
$kendo-selected-hover-bg: k-try-shade($kendo-selected-bg, 0.5) !default;
/// The text color of selected and hovered items.
$kendo-selected-hover-text: $kendo-selected-text !default;
/// The border of selected and hovered items.
$kendo-selected-hover-border: $kendo-base-border !default;
/// The gradient of selected and hovered items.
$kendo-selected-hover-gradient: $kendo-base-gradient !default;

// Generic styles

/// Background color of the component header.
/// @group component
$kendo-component-header-bg: $kendo-base-bg !default;
/// Text color of the component header.
/// @group component
$kendo-component-header-text: $kendo-base-text !default;
/// Border color of the component header.
/// @group component
$kendo-component-header-border: $kendo-base-border !default;
/// Gradient of the component header.
/// @group component
$kendo-component-header-gradient: null !default;

/// Background color of the invalid items.
/// @group component
$kendo-invalid-bg: null !default;
/// Text color of the invalid items.
/// @group component
$kendo-invalid-text: $kendo-color-error !default;
/// Border color of the invalid items.
/// @group component
$kendo-invalid-border: $kendo-color-error !default;
/// Shadow of the invalid items.
/// @group component
$kendo-invalid-shadow: null !default;

/// Background color of the valid items.
/// @group component
$kendo-valid-bg: null !default;
/// Text color of the valid items.
/// @group component
$kendo-valid-text: $kendo-color-success !default;
/// Border color of the valid items.
/// @group component
$kendo-valid-border: $kendo-color-success !default;
/// Shadow of the valid items.
/// @group component
$kendo-valid-shadow: null !default;

// #endregion

// Typography
// #region @import "./typography/index.import.scss"; -> scss/core/typography/index.import.scss
// #region @import "@progress/kendo-theme-core/scss/typography/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/typography/index.import.scss
// #region @import "../functions/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
// File already imported_once. Skipping output.
// #endregion

/// The base font size across all components.
/// @group typography
$kendo-font-size: 0.875rem !default;
/// The extra extra small font size across all components.
/// @group typography
$kendo-font-size-xxs: 0.5rem !default;
/// The extra small font size across all components.
/// @group typography
$kendo-font-size-xs: 0.625rem !default;
/// The small font size across all components.
/// @group typography
$kendo-font-size-sm: 0.75rem !default;
/// The medium font size across all components.
/// @group typography
$kendo-font-size-md: $kendo-font-size !default;
/// The large font size across all components.
/// @group typography
$kendo-font-size-lg: 1rem !default;
/// The extra large font size across all components.
/// @group typography
$kendo-font-size-xl: 1.25rem !default;

/// The base line height across all components.
/// @group typography
$kendo-line-height: k-math-div( 20, 14 ) !default;
/// The extra small line height across all components.
/// @group typography
$kendo-line-height-xs: 1 !default;
/// The small line height across all components.
/// @group typography
$kendo-line-height-sm: 1.25 !default;
/// The medium line height across all components.
/// @group typography
$kendo-line-height-md: $kendo-line-height !default;
/// The large line height across all components.
/// @group typography
$kendo-line-height-lg: 1.5 !default;
/// The base line height in ems across all components.
/// @group typography
$kendo-line-height-em: calc( #{$kendo-line-height-md} * 1em ) !default;

/// The base font weight across all components.
/// @group typography
$kendo-font-weight: 400 !default;
/// The thin font weight across all components.
/// @group typography
$kendo-font-weight-thin: 100 !default;
/// The extra light font weight across all components.
/// @group typography
$kendo-font-weight-extra-light: 200 !default;
/// The light font weight across all components.
/// @group typography
$kendo-font-weight-light: 300 !default;
/// The normal font weight across all components.
/// @group typography
$kendo-font-weight-normal: $kendo-font-weight !default;
/// The medium font weight across all components.
/// @group typography
$kendo-font-weight-medium: 500 !default;
/// The semibold font weight across all components.
/// @group typography
$kendo-font-weight-semibold: 600 !default;
/// The bold font weight across all components.
/// @group typography
$kendo-font-weight-bold: 700 !default;
/// The extra bold font weight across all components.
/// @group typography
$kendo-font-weight-extra-bold: 800 !default;
/// The most pronounced font weight across all components.
/// @group typography
$kendo-font-weight-black: 900 !default;

/// The base letter spacing across all components.
/// @group typography
$kendo-letter-spacing: null !default;
/// The tightest letter spacing across all components.
/// @group typography
$kendo-letter-spacing-tightest: -.15px !default;
/// Slightly looser than the tighter letter spacing across all components.
/// @group typography
$kendo-letter-spacing-tighter: -.10px !default;
/// Moderately tight letter spacing across all components.
/// @group typography
$kendo-letter-spacing-tight: -.5px !default;
/// The normal letter spacing across all components.
/// @group typography
$kendo-letter-spacing-normal: 0px !default;
/// Wide letter spacing across all components.
/// @group typography
$kendo-letter-spacing-wide: .5px !default;
/// Slightly wider than the wide letter spacing across all components.
/// @group typography
$kendo-letter-spacing-wider: .10px !default;
/// The widest letter spacing across all components.
/// @group typography
$kendo-letter-spacing-widest: .15px !default;

/// The sans font family across all components.
/// @group typography
$kendo-font-family-sans: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans !default;
/// The serif font family across all components.
/// @group typography
$kendo-font-family-serif: "Times New Roman", Georgia, Garamond, Palatino, Baskerville !default;
/// The sans-serif font family across all components.
/// @group typography
$kendo-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
/// The monospace font family across all components.
/// @group typography
$kendo-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;

/// The base font family across all components.
/// @group typography
$kendo-font-family: inherit !default;

$_default-font-sizes: (
    xxs: $kendo-font-size-xxs,
    xs: $kendo-font-size-xs,
    sm: $kendo-font-size-sm,
    md: $kendo-font-size-md,
    lg: $kendo-font-size-lg,
    xl: $kendo-font-size-xl
) !default;

$_default-line-heights: (
    xs: $kendo-line-height-xs,
    sm: $kendo-line-height-sm,
    md: $kendo-line-height-md,
    lg: $kendo-line-height-lg,
) !default;

$_default-font-weights: (
    thin: $kendo-font-weight-thin,
    extra-light: $kendo-font-weight-extra-light,
    light: $kendo-font-weight-light,
    normal: $kendo-font-weight-normal,
    medium: $kendo-font-weight-medium,
    semibold: $kendo-font-weight-semibold,
    bold: $kendo-font-weight-bold
) !default;

$_default-letter-spacings: (
    tightest: $kendo-letter-spacing-tightest,
    tighter: $kendo-letter-spacing-tighter,
    tight: $kendo-letter-spacing-tight,
    normal: $kendo-letter-spacing-normal,
    wide: $kendo-letter-spacing-wide,
    wider: $kendo-letter-spacing-wider,
    widest: $kendo-letter-spacing-widest
) !default;

$_default-font-families: (
    sans: $kendo-font-family-sans,
    serif: $kendo-font-family-serif,
    sans-serif: $kendo-font-family-sans-serif,
    monospace: $kendo-font-family-monospace
) !default;

$kendo-font-sizes: $_default-font-sizes !default;

/// The font sizes map
/// @group typography
$kendo-font-sizes: k-map-merge( $_default-font-sizes, $kendo-font-sizes );

$kendo-line-heights: $_default-line-heights !default;

/// The line heights map
/// @group typography
$kendo-line-heights: k-map-merge( $_default-line-heights, $kendo-line-heights );

$kendo-font-weights: $_default-font-weights !default;

/// The font weights map
/// @group typography
$kendo-font-weights: k-map-merge( $_default-font-weights, $kendo-font-weights );

$kendo-letter-spacings: $_default-letter-spacings !default;

/// The letter spacings map
/// @group typography
$kendo-letter-spacings: k-map-merge( $_default-letter-spacings, $kendo-letter-spacings );

$kendo-font-families: $_default-font-families !default;

/// The font families map
/// @group typography
$kendo-font-families: k-map-merge( $_default-font-families, $kendo-font-families );

@mixin typography( $font-size: null, $font-family: null, $line-height: null, $font-weight: null, $letter-spacing: null ) {
    font-size: $font-size;
    font-family: $font-family;
    line-height: $line-height;
    font-weight: $font-weight;
    letter-spacing: $letter-spacing;
}


@mixin kendo-core--typography--styles() {
    :root {

        --kendo-font-family: #{k-meta-inspect($kendo-font-family)};
        --kendo-font-size: #{$kendo-font-size};
        --kendo-line-height: #{$kendo-line-height};
        --kendo-font-weight: #{$kendo-font-weight};
        --kendo-letter-spacing: #{$kendo-letter-spacing};

        @each $size, $value in $kendo-font-sizes {
            --kendo-font-size-#{$size}: #{$value};
        }

        @each $size, $value in $kendo-line-heights {
            --kendo-line-height-#{$size}: #{$value};
        }

        @each $weight, $value in $kendo-font-weights {
            --kendo-font-weight-#{$weight}: #{$value};
        }

        @each $spacing, $value in $kendo-letter-spacings {
            --kendo-letter-spacing-#{$spacing}: #{$value};
        }

        @each $family, $value in $kendo-font-families {
            --kendo-font-family-#{$family}: #{$value};
        }
    }
}

// #endregion

// #endregion

// Spacing
// #region @import "./spacing/index.import.scss"; -> scss/core/spacing/index.import.scss
// #region @import "@progress/kendo-theme-core/scss/spacing/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/spacing/index.import.scss
// #region @import "../functions/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
// File already imported_once. Skipping output.
// #endregion

$_default-spacing: (
    0: 0px,
    1px: 1px,
    0.5: .125rem,
    1: .25rem,
    1.5: .375rem,
    2: .5rem,
    2.5: .625rem,
    3: .75rem,
    3.5: .875rem,
    4: 1rem,
    4.5: 1.125rem,
    5: 1.25rem,
    5.5: 1.375rem,
    6: 1.5rem,
    6.5: 1.625rem,
    7: 1.75rem,
    7.5: 1.875rem,
    8: 2rem,
    9: 2.25rem,
    10: 2.5rem,
    11: 2.75rem,
    12: 3rem,
    13: 3.25rem,
    14: 3.5rem,
    15: 3.75rem,
    16: 4rem,
    17: 4.25rem,
    18: 4.5rem,
    19: 4.75rem,
    20: 5rem,
    21: 5.25rem,
    22: 5.5rem,
    23: 5.75rem,
    24: 6rem,
    25: 7rem,
    26: 8rem,
    27: 9rem,
    28: 10rem,
    29: 11rem,
    30: 12rem
) !default;

/// The global default Spacing map.
/// @group spacing
$kendo-spacing: $_default-spacing !default;

$kendo-spacing: k-map-merge($_default-spacing, $kendo-spacing);


@function k-spacing($step) {
    $spacing: k-map-get($kendo-spacing, $step);
    $_step: k-escape-class-name( $step );
    @return var(--kendo-spacing-#{$_step}, #{$spacing});
}

// Generate a CSS variable for each value in the Spacing map
@mixin kendo-spacing--styles() {
    :root {
        @each $step, $spacing in $kendo-spacing {
            $_step: k-escape-class-name( $step );
            --kendo-spacing-#{$_step}: #{$spacing};
        }
    }
}

$kendo-sizing: k-map-merge( $kendo-spacing, (
    "auto": auto,
    "1/2": 50%,
    "1/3": 33.333333%,
    "2/3": 66.666667%,
    "1/4": 25%,
    "2/4": 50%,
    "3/4": 75%,
    "1/5": 20%,
    "2/5": 40%,
    "3/5": 60%,
    "4/5": 80%,
    "1/6": 16.666667%,
    "2/6": 33.333333%,
    "3/6": 50%,
    "4/6": 66.666667%,
    "5/6": 83.333333%,
    "1/12": 8.333333%,
    "2/12": 16.666667%,
    "3/12": 25%,
    "4/12": 33.333333%,
    "5/12": 41.666667%,
    "6/12": 50%,
    "7/12": 58.333333%,
    "8/12": 66.666667%,
    "9/12": 75%,
    "10/12": 83.333333%,
    "11/12": 91.666667%,
    "full": 100%,
    "min": min-content,
    "max": max-content,
    "fit": fit-content
)) !default;

// #endregion

$kendo-icon-spacing: k-spacing(1) !default;
$kendo-icon-padding: k-spacing(1) !default;

/// Horizontal padding.
/// @group common
$kendo-padding-x: k-spacing(2) !default;
/// Vertical padding.
/// @group common
$kendo-padding-y: k-spacing(1) !default;
/// Small horizontal padding.
/// @group common
$kendo-padding-sm-x: k-spacing(1) !default;
/// Small vertical padding.
/// @group common
$kendo-padding-sm-y: k-spacing(0.5) !default;
/// Medium horizontal padding.
/// @group common
$kendo-padding-md-x: k-spacing(2) !default;
/// Medium vertical padding.
/// @group common
$kendo-padding-md-y: k-spacing(1) !default;
/// Large horizontal padding.
/// @group common
$kendo-padding-lg-x: k-spacing(3) !default;
/// Large vertical padding.
/// @group common
$kendo-padding-lg-y: k-spacing(1.5) !default;

// #endregion

// #region @import "@progress/kendo-theme-core/scss/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/index.import.scss
// #region @import "./functions/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./color-system/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/index.import.scss
// #region @import "./_functions.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_functions.import.scss
// #region @import "./_palettes.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_palettes.scss
/// Color palettes to be used in the Kendo UI themes.
/// @access private
/// @type Record<String, ColorMap>
/// @prop {ColorMap} neutral - The neutral palette
/// @prop {ColorMap} marsala - The marsala palette
/// @prop {ColorMap} bootstrapGray - The Bootstrap gray palette
/// @prop {ColorMap} bootstrapBlue - The Bootstrap blue palette
/// @prop {ColorMap} bootstrapIndigo - The Bootstrap indigo palette
/// @prop {ColorMap} bootstrapPurple - The Bootstrap purple palette
/// @prop {ColorMap} bootstrapPink - The Bootstrap pink palette
/// @prop {ColorMap} bootstrapRed - The Bootstrap red palette
/// @prop {ColorMap} bootstrapOrange - The Bootstrap orange palette
/// @prop {ColorMap} bootstrapYellow - The Bootstrap yellow palette
/// @prop {ColorMap} bootstrapGreen - The Bootstrap green palette
/// @prop {ColorMap} bootstrapTeal - The Bootstrap teal palette
/// @prop {ColorMap} bootstrapCyan - The Bootstrap cyan palette
/// @prop {ColorMap} fluentNeutral - The Fluent neutral palette
/// @prop {ColorMap} materialGray - The Material gray palette
/// @prop {ColorMap} materialBlueGray - The Material blue gray palette
/// @prop {ColorMap} materialRed - The Material red palette
/// @prop {ColorMap} materialPink - The Material pink palette
/// @prop {ColorMap} materialPurple - The Material purple palette
/// @prop {ColorMap} materialDeepPurple - The Material deep purple palette
/// @prop {ColorMap} materialIndigo - The Material indigo palette
/// @prop {ColorMap} materialBlue - The Material blue palette
/// @prop {ColorMap} materialLightBlue - The Material light blue palette
/// @prop {ColorMap} materialCyan - The Material cyan palette
/// @prop {ColorMap} materialTeal - The Material teal palette
/// @prop {ColorMap} materialGreen - The Material green palette
/// @prop {ColorMap} materialLightGreen - The Material light green palette
/// @prop {ColorMap} materialLime - The Material lime palette
/// @prop {ColorMap} materialYellow - The Material yellow palette
/// @prop {ColorMap} materialAmber - The Material amber palette
/// @prop {ColorMap} materialOrange - The Material orange palette
/// @prop {ColorMap} materialDeepOrange - The Material deep orange palette
/// @prop {ColorMap} materialBrown - The Material brown palette
/// @prop {ColorMap} primerGray - The Primer gray palette
/// @prop {ColorMap} primerBlue - The Primer blue palette
/// @prop {ColorMap} primerGreen - The Primer green palette
/// @prop {ColorMap} primerYellow - The Primer yellow palette
/// @prop {ColorMap} primerOrange - The Primer orange palette
/// @prop {ColorMap} primerRed - The Primer red palette
/// @prop {ColorMap} primerPurple - The Primer purple palette
/// @prop {ColorMap} primerPink - The Primer pink palette
/// @prop {ColorMap} primerCoral - The Primer coral palette
/// @prop {ColorMap} tailwindNeutral - The Tailwind neutral palette
/// @prop {ColorMap} tailwindSlate - The Tailwind slate palette
/// @prop {ColorMap} tailwindGray - The Tailwind gray palette
/// @prop {ColorMap} tailwindZinc - The Tailwind zinc palette
/// @prop {ColorMap} tailwindStone - The Tailwind stone palette
/// @prop {ColorMap} tailwindRed - The Tailwind red palette
/// @prop {ColorMap} tailwindOrange - The Tailwind orange palette
/// @prop {ColorMap} tailwindAmber - The Tailwind amber palette
/// @prop {ColorMap} tailwindYellow - The Tailwind yellow palette
/// @prop {ColorMap} tailwindLime - The Tailwind lime palette
/// @prop {ColorMap} tailwindGreen - The Tailwind green palette
/// @prop {ColorMap} tailwindEmerald - The Tailwind emerald palette
/// @prop {ColorMap} tailwindTeal - The Tailwind teal palette
/// @prop {ColorMap} tailwindCyan - The Tailwind cyan palette
/// @prop {ColorMap} tailwindSky - The Tailwind sky palette
/// @prop {ColorMap} tailwindBlue - The Tailwind blue palette
/// @prop {ColorMap} tailwindIndigo - The Tailwind indigo palette
/// @prop {ColorMap} tailwindViolet - The Tailwind violet palette
/// @prop {ColorMap} tailwindPurple - The Tailwind purple palette
/// @prop {ColorMap} tailwindFuchsia - The Tailwind fuchsia palette
/// @prop {ColorMap} tailwindPink - The Tailwind pink palette
/// @prop {ColorMap} tailwindRose - The Tailwind rose palette
///
/// @group color-system
$kendo-palettes: (

    // Kendo
    neutral: (
        0: #ffffff,
        50: #f8f8f8,
        100: #ededed,
        200: #d6d6d6,
        300: #b7b7b7,
        400: #949494,
        500: #767676,
        600: #5f5f5f,
        700: #494949,
        800: #373737,
        900: #282828,
        1000: #000000
    ),
    marsala: (
        0: #ffffff,
        50: #faf0f2,
        100: #f3dde0,
        200: #e197a3,
        300: #c54e69,
        400: #8b3548,
        500: #622331,
        600: #551d2a,
        700: #441620,
        800: #340f17,
        900: #23080e,
        1000: #000000
    ),


    // Bootstrap
    bootstrapGray: (
        0: #ffffff,
        100: #f8f9fa,
        200: #e9ecef,
        300: #dee2e6,
        400: #ced4da,
        500: #adb5bd,
        600: #6c757d,
        700: #495057,
        800: #343a40,
        900: #212529,
        1000: #000000
    ),
    bootstrapBlue: (
        0: #ffffff,
        100: #cfe2ff,
        200: #9ec5fe,
        300: #6ea8fe,
        400: #3d8bfd,
        500: #0d6efd,
        600: #0a58ca,
        700: #084298,
        800: #052c65,
        900: #031633,
        1000: #000000
    ),
    bootstrapIndigo: (
        0: #ffffff,
        100: #e0cffc,
        200: #c29ffa,
        300: #a370f7,
        400: #8540f5,
        500: #6610f2,
        600: #520dc2,
        700: #3d0a91,
        800: #290661,
        900: #140330,
        1000: #000000
    ),
    bootstrapPurple: (
        0: #ffffff,
        100: #e2d9f3,
        200: #c5b3e6,
        300: #a98eda,
        400: #8c68cd,
        500: #6f42c1,
        600: #59359a,
        700: #432874,
        800: #2c1a4d,
        900: #160d27,
        1000: #000000
    ),
    bootstrapPink: (
        0: #ffffff,
        100: #f7d6e6,
        200: #efadce,
        300: #e685b5,
        400: #de5c9d,
        500: #d63384,
        600: #ab296a,
        700: #801f4f,
        800: #561435,
        900: #2b0a1a,
        1000: #000000
    ),
    bootstrapRed: (
        0: #ffffff,
        100: #f8d7da,
        200: #f1aeb5,
        300: #ea868f,
        400: #e35d6a,
        500: #dc3545,
        600: #b02a37,
        700: #842029,
        800: #58151c,
        900: #2c0b0e,
        1000: #000000
    ),
    bootstrapOrange: (
        0: #ffffff,
        100: #ffe5d0,
        200: #fecba1,
        300: #feb272,
        400: #fd9843,
        500: #fd7e14,
        600: #ca6510,
        700: #984c0c,
        800: #653208,
        900: #331904,
        1000: #000000
    ),
    bootstrapYellow: (
        0: #ffffff,
        100: #fff3cd,
        200: #ffe69c,
        300: #ffda6a,
        400: #ffcd39,
        500: #ffc107,
        600: #cc9a06,
        700: #997404,
        800: #664d03,
        900: #332701,
        1000: #000000
    ),
    bootstrapGreen: (
        0: #ffffff,
        100: #d1e7dd,
        200: #a3cfbb,
        300: #75b798,
        400: #479f76,
        500: #198754,
        600: #146c43,
        700: #0f5132,
        800: #0a3622,
        900: #051b11,
        1000: #000000
    ),
    bootstrapTeal: (
        0: #ffffff,
        100: #d2f4ea,
        200: #a6e9d5,
        300: #79dfc1,
        400: #4dd4ac,
        500: #20c997,
        600: #1aa179,
        700: #13795b,
        800: #0d503c,
        900: #06281e,
        1000: #000000
    ),
    bootstrapCyan: (
        0: #ffffff,
        100: #cff4fc,
        200: #9eeaf9,
        300: #6edff6,
        400: #3dd5f3,
        500: #0dcaf0,
        600: #0aa2c0,
        700: #087990,
        800: #055160,
        900: #032830,
        1000: #000000
    ),


    // Fluent
    fluentNeutral: (
        0: #ffffff,
        50: #faf9f8,
        100: #edebe9,
        150: #e1dfdd,
        200: #d2d0ce,
        250: #c8c6c4,
        300: #bdbbb8,
        350: #b3b0ad,
        400: #a19f9d,
        450: #8a8886,
        500: #797775,
        550: #605e5c,
        600: #484644,
        650: #3b3a39,
        700: #323130,
        750: #292827,
        800: #201f1e,
        850: #1b1a19,
        900: #161514,
        950: #11100f,
        1000: #000000
    ),


    // Material
    materialGray: (
        0: #ffffff,
        50: #fafafa,
        100: #f5f5f5,
        200: #eeeeee,
        300: #e0e0e0,
        400: #bdbdbd,
        500: #9e9e9e,
        600: #757575,
        700: #616161,
        800: #424242,
        900: #212121,
        1000: #000000
    ),
    materialBlueGray: (
        0: #ffffff,
        50: #eceff1,
        100: #cfd8dc,
        200: #b0bec5,
        300: #90a4ae,
        400: #78909c,
        500: #607d8b,
        600: #546e7a,
        700: #455a64,
        800: #37474f,
        900: #263238,
        1000: #000000
    ),
    materialRed: (
        0: #ffffff,
        50: #ffebee,
        100: #ffcdd2,
        200: #ef9a9a,
        300: #e57373,
        400: #ef5350,
        500: #f44336,
        600: #e53935,
        700: #d32f2f,
        800: #c62828,
        900: #b71c1c,
        1000: #000000
    ),
    materialPink: (
        0: #ffffff,
        50: #fce4ec,
        100: #f8bbd0,
        200: #f48fb1,
        300: #f06292,
        400: #ec407a,
        // 500 was #e91e63, but changed for better contrast against white
        500: #e51a5f,
        600: #d81b60,
        700: #c2185b,
        800: #ad1457,
        900: #880e4f,
        1000: #000000
    ),
    materialPurple: (
        0: #ffffff,
        50: #f3e5f5,
        100: #e1bee7,
        200: #ce93d8,
        300: #ba68c8,
        400: #ab47bc,
        500: #9c27b0,
        600: #8e24aa,
        700: #7b1fa2,
        800: #6a1b9a,
        900: #4a148c,
        1000: #000000
    ),
    materialDeepPurple: (
        0: #ffffff,
        50: #ede7f6,
        100: #d1c4e9,
        200: #b39ddb,
        300: #9575cd,
        400: #7e57c2,
        500: #673ab7,
        600: #5e35b1,
        700: #512da8,
        800: #4527a0,
        900: #311b92,
        1000: #000000
    ),
    materialIndigo: (
        0: #ffffff,
        50: #e8eaf6,
        100: #c5cae9,
        200: #9fa8da,
        300: #7986cb,
        400: #5c6bc0,
        500: #3f51b5,
        600: #3949ab,
        700: #303f9f,
        800: #283593,
        900: #1a237e,
        1000: #000000
    ),
    materialBlue: (
        0: #ffffff,
        50: #e3f2fd,
        100: #bbdefb,
        200: #90caf9,
        300: #64b5f6,
        400: #42a5f5,
        500: #2196f3,
        600: #1e88e5,
        700: #1976d2,
        800: #1565c0,
        900: #0d47a1,
        1000: #000000
    ),
    materialLightBlue: (
        0: #ffffff,
        50: #e1f5fe,
        100: #b3e5fc,
        200: #81d4fa,
        300: #4fc3f7,
        400: #29b6f6,
        500: #03a9f4,
        600: #039be5,
        700: #0288d1,
        800: #0277bd,
        900: #01579b,
        1000: #000000
    ),
    materialCyan: (
        0: #ffffff,
        50: #e0f7fa,
        100: #b2ebf2,
        200: #80deea,
        300: #4dd0e1,
        400: #26c6da,
        500: #00bcd4,
        600: #00acc1,
        700: #0097a7,
        800: #00838f,
        900: #006064,
        1000: #000000
    ),
    materialTeal: (
        0: #ffffff,
        50: #e0f2f1,
        100: #b2dfdb,
        200: #80cbc4,
        300: #4db6ac,
        400: #26a69a,
        500: #009688,
        600: #00897b,
        700: #00796b,
        800: #00695c,
        900: #004d40,
        1000: #000000
    ),
    materialGreen: (
        0: #ffffff,
        50: #e8f5e9,
        100: #c8e6c9,
        200: #a5d6a7,
        300: #81c784,
        400: #66bb6a,
        500: #4caf50,
        600: #43a047,
        700: #388e3c,
        800: #2e7d32,
        900: #1b5e20,
        1000: #000000
    ),
    materialLightGreen: (
        0: #ffffff,
        50: #f1f8e9,
        100: #dcedc8,
        200: #c5e1a5,
        300: #aed581,
        400: #9ccc65,
        500: #8bc34a,
        600: #7cb342,
        700: #689f38,
        800: #558b2f,
        900: #33691e,
        1000: #000000
    ),
    materialLime: (
        0: #ffffff,
        50: #f9fbe7,
        100: #f0f4c3,
        200: #e6ee9c,
        300: #dce775,
        400: #d4e157,
        500: #cddc39,
        600: #c0ca33,
        700: #afb42b,
        800: #9e9d24,
        900: #827717,
        1000: #000000
    ),
    materialYellow: (
        0: #ffffff,
        50: #fffde7,
        100: #fff9c4,
        200: #fff59d,
        300: #fff176,
        400: #ffee58,
        500: #ffeb3b,
        600: #fdd835,
        700: #fbc02d,
        800: #f9a825,
        900: #f57f17,
        1000: #000000
    ),
    materialAmber: (
        0: #ffffff,
        50: #fff8e1,
        100: #ffecb3,
        200: #ffe082,
        300: #ffd54f,
        400: #ffca28,
        500: #ffc107,
        600: #ffb300,
        700: #ffa000,
        800: #ff8f00,
        900: #ff6f00,
        1000: #000000
    ),
    materialOrange: (
        0: #ffffff,
        50: #fff3e0,
        100: #ffe0b2,
        200: #ffcc80,
        300: #ffb74d,
        400: #ffa726,
        500: #ff9800,
        600: #fb8c00,
        700: #f57c00,
        800: #ef6c00,
        900: #e65100,
        1000: #000000
    ),
    materialDeepOrange: (
        0: #ffffff,
        50: #fbe9e7,
        100: #ffccbc,
        200: #ffab91,
        300: #ff8a65,
        400: #ff7043,
        500: #ff5722,
        600: #f4511e,
        700: #e64a19,
        800: #d84315,
        900: #bf360c,
        1000: #000000
    ),
    materialBrown: (
        0: #ffffff,
        50: #efebe9,
        100: #d7ccc8,
        200: #bcaaa4,
        300: #a1887f,
        400: #8d6e63,
        500: #795548,
        600: #6d4c41,
        700: #5d4037,
        800: #4e342e,
        900: #3e2723,
        1000: #000000
    ),


    // Primer
    primerGray: (
        0: #ffffff,
        50: #f6f8fa,
        100: #eaeef2,
        200: #d0d7de,
        300: #afb8c1,
        400: #8c959f,
        500: #6e7781,
        600: #57606a,
        700: #424a53,
        800: #32383f,
        900: #24292f,
        1000: #000000
    ),
    primerBlue: (
        0: #ffffff,
        50: #ddf4ff,
        100: #b6e3ff,
        200: #80ccff,
        300: #54aeff,
        400: #218bff,
        500: #0969da,
        600: #0550ae,
        700: #033d8b,
        800: #0a3069,
        900: #002155,
        1000: #000000
    ),
    primerGreen: (
        0: #ffffff,
        50: #dafbe1,
        100: #aceebb,
        200: #6fdd8b,
        300: #4ac26b,
        400: #2da44e,
        500: #1a7f37,
        600: #116329,
        700: #044f1e,
        800: #003d16,
        900: #002d11,
        1000: #000000
    ),
    primerYellow: (
        0: #ffffff,
        50: #fff8c5,
        100: #fae17d,
        200: #eac54f,
        300: #d4a72c,
        400: #bf8700,
        500: #9a6700,
        600: #7d4e00,
        700: #633c01,
        800: #4d2d00,
        900: #3b2300,
        1000: #000000
    ),
    primerOrange: (
        0: #ffffff,
        50: #fff1e5,
        100: #ffd8b5,
        200: #ffb77c,
        300: #fb8f44,
        400: #e16f24,
        500: #bc4c00,
        600: #953800,
        700: #762c00,
        800: #5c2200,
        900: #471700,
        1000: #000000
    ),
    primerRed: (
        0: #ffffff,
        50: #ffebe9,
        100: #ffcecb,
        200: #ffaba8,
        300: #ff8182,
        400: #fa4549,
        500: #cf222e,
        600: #a40e26,
        700: #82071e,
        800: #660018,
        900: #4c0014,
        1000: #000000
    ),
    primerPurple: (
        0: #ffffff,
        50: #fbefff,
        100: #ecd8ff,
        200: #d8b9ff,
        300: #c297ff,
        400: #a475f9,
        500: #8250df,
        600: #6639ba,
        700: #512a97,
        800: #3e1f79,
        900: #2e1461,
        1000: #000000
    ),
    primerPink: (
        0: #ffffff,
        50: #ffeff7,
        100: #ffd3eb,
        200: #ffadda,
        300: #ff80c8,
        400: #e85aad,
        500: #bf3989,
        600: #99286e,
        700: #772057,
        800: #611347,
        900: #4d0336,
        1000: #000000
    ),
    primerCoral: (
        0: #ffffff,
        50: #fff0eb,
        100: #ffd6cc,
        200: #ffb4a1,
        300: #fd8c73,
        400: #ec6547,
        500: #c4432b,
        600: #9e2f1c,
        700: #801f0f,
        800: #691105,
        900: #510901,
        1000: #000000
    ),


    // Tailwind
    tailwindNeutral: (
        0: #ffffff,
        50: #fafafa,
        100: #f5f5f5,
        200: #e5e5e5,
        300: #d4d4d4,
        400: #a3a3a3,
        500: #737373,
        600: #525252,
        700: #404040,
        800: #262626,
        900: #171717,
        1000: #000000
    ),
    tailwindSlate: (
        0: #ffffff,
        50: #f8fafc,
        100: #f1f5f9,
        200: #e2e8f0,
        300: #cbd5e1,
        400: #94a3b8,
        500: #64748b,
        600: #475569,
        700: #334155,
        800: #1e293b,
        900: #0f172a,
        1000: #000000
    ),
    tailwindGray: (
        0: #ffffff,
        50: #f9fafb,
        100: #f3f4f6,
        200: #e5e7eb,
        300: #d1d5db,
        400: #9ca3af,
        500: #6b7280,
        600: #4b5563,
        700: #374151,
        800: #1f2937,
        900: #111827,
        1000: #000000
    ),
    tailwindZinc: (
        0: #ffffff,
        50: #fafafa,
        100: #f4f4f5,
        200: #e4e4e7,
        300: #d4d4d8,
        400: #a1a1aa,
        500: #71717a,
        600: #52525b,
        700: #3f3f46,
        800: #27272a,
        900: #18181b,
        1000: #000000
    ),
    tailwindStone: (
        0: #ffffff,
        50: #fafaf9,
        100: #f5f5f4,
        200: #e7e5e4,
        300: #d6d3d1,
        400: #a8a29e,
        500: #78716c,
        600: #57534e,
        700: #44403c,
        800: #292524,
        900: #1c1917,
        1000: #000000
    ),
    tailwindRed: (
        0: #ffffff,
        50: #fef2f2,
        100: #fee2e2,
        200: #fecaca,
        300: #fca5a5,
        400: #f87171,
        500: #ef4444,
        600: #dc2626,
        700: #b91c1c,
        800: #991b1b,
        900: #7f1d1d,
        1000: #000000
    ),
    tailwindOrange: (
        0: #ffffff,
        50: #fff7ed,
        100: #ffedd5,
        200: #fed7aa,
        300: #fdba74,
        400: #fb923c,
        500: #f97316,
        600: #ea580c,
        700: #c2410c,
        800: #9a3412,
        900: #7c2d12,
        1000: #000000
    ),
    tailwindAmber: (
        0: #ffffff,
        50: #fffbeb,
        100: #fef3c7,
        200: #fde68a,
        300: #fcd34d,
        400: #fbbf24,
        500: #f59e0b,
        600: #d97706,
        700: #b45309,
        800: #92400e,
        900: #78350f,
        1000: #000000
    ),
    tailwindYellow: (
        0: #ffffff,
        50: #fefce8,
        100: #fef9c3,
        200: #fef08a,
        300: #fde047,
        400: #facc15,
        500: #eab308,
        600: #ca8a04,
        700: #a16207,
        800: #854d0e,
        900: #713f12,
        1000: #000000
    ),
    tailwindLime: (
        0: #ffffff,
        50: #f7fee7,
        100: #ecfccb,
        200: #d9f99d,
        300: #bef264,
        400: #a3e635,
        500: #84cc16,
        600: #65a30d,
        700: #4d7c0f,
        800: #3f6212,
        900: #365314,
        1000: #000000
    ),
    tailwindGreen: (
        0: #ffffff,
        50: #f0fdf4,
        100: #dcfce7,
        200: #bbf7d0,
        300: #86efac,
        400: #4ade80,
        500: #22c55e,
        600: #16a34a,
        700: #15803d,
        800: #166534,
        900: #14532d,
        1000: #000000
    ),
    tailwindEmerald: (
        0: #ffffff,
        50: #ecfdf5,
        100: #d1fae5,
        200: #a7f3d0,
        300: #6ee7b7,
        400: #34d399,
        500: #10b981,
        600: #059669,
        700: #047857,
        800: #065f46,
        900: #064e3b,
        1000: #000000
    ),
    tailwindTeal: (
        0: #ffffff,
        50: #f0fdfa,
        100: #ccfbf1,
        200: #99f6e4,
        300: #5eead4,
        400: #2dd4bf,
        500: #14b8a6,
        600: #0d9488,
        700: #0f766e,
        800: #115e59,
        900: #134e4a,
        1000: #000000
    ),
    tailwindCyan: (
        0: #ffffff,
        50: #ecfeff,
        100: #cffafe,
        200: #a5f3fc,
        300: #67e8f9,
        400: #22d3ee,
        500: #06b6d4,
        600: #0891b2,
        700: #0e7490,
        800: #155e75,
        900: #164e63,
        1000: #000000
    ),
    tailwindSky: (
        0: #ffffff,
        50: #f0f9ff,
        100: #e0f2fe,
        200: #bae6fd,
        300: #7dd3fc,
        400: #38bdf8,
        500: #0ea5e9,
        600: #0284c7,
        700: #0369a1,
        800: #075985,
        900: #0c4a6e,
        1000: #000000
    ),
    tailwindBlue: (
        0: #ffffff,
        50: #eff6ff,
        100: #dbeafe,
        200: #bfdbfe,
        300: #93c5fd,
        400: #60a5fa,
        500: #3b82f6,
        600: #2563eb,
        700: #1d4ed8,
        800: #1e40af,
        900: #1e3a8a,
        1000: #000000
    ),
    tailwindIndigo: (
        0: #ffffff,
        50: #eef2ff,
        100: #e0e7ff,
        200: #c7d2fe,
        300: #a5b4fc,
        400: #818cf8,
        500: #6366f1,
        600: #4f46e5,
        700: #4338ca,
        800: #3730a3,
        900: #312e81,
        1000: #000000
    ),
    tailwindViolet: (
        0: #ffffff,
        50: #f5f3ff,
        100: #ede9fe,
        200: #ddd6fe,
        300: #c4b5fd,
        400: #a78bfa,
        500: #8b5cf6,
        600: #7c3aed,
        700: #6d28d9,
        800: #5b21b6,
        900: #4c1d95,
        1000: #000000
    ),
    tailwindPurple: (
        0: #ffffff,
        50: #faf5ff,
        100: #f3e8ff,
        200: #e9d5ff,
        300: #d8b4fe,
        400: #c084fc,
        500: #a855f7,
        600: #9333ea,
        700: #7e22ce,
        800: #6b21a8,
        900: #581c87,
        1000: #000000
    ),
    tailwindFuchsia: (
        0: #ffffff,
        50: #fdf4ff,
        100: #fae8ff,
        200: #f5d0fe,
        300: #f0abfc,
        400: #e879f9,
        500: #d946ef,
        600: #c026d3,
        700: #a21caf,
        800: #86198f,
        900: #701a75,
        1000: #000000
    ),
    tailwindPink: (
        0: #ffffff,
        50: #fdf2f8,
        100: #fce7f3,
        200: #fbcfe8,
        300: #f9a8d4,
        400: #f472b6,
        500: #ec4899,
        600: #db2777,
        700: #be185d,
        800: #9d174d,
        900: #831843,
        1000: #000000
    ),
    tailwindRose: (
        0: #ffffff,
        50: #fff1f2,
        100: #ffe4e6,
        200: #fecdd3,
        300: #fda4af,
        400: #fb7185,
        500: #f43f5e,
        600: #e11d48,
        700: #be123c,
        800: #9f1239,
        900: #881337,
        1000: #000000
    )

) !default;

// #endregion

@function k-generate-theme-variant( $variant, $matrix, $src-palette-name ) {
    $result: ();

    @each $ui-state, $indices in $matrix {
        $prefix: if( $ui-state == DEFAULT, "", "#{$ui-state}-" );
        $indices-count: k-list-length( $indices );

        $bg-prop: k-list-nth( $indices, 1 );
        $text-prop: k-list-nth( $indices, 2 );
        $border-prop: k-list-nth( $indices, 3 );
        $gradient-prop: if( $indices-count > 3, k-list-nth( $indices, 4 ), null );
        $shadow-prop: if( $indices-count > 4, k-list-nth( $indices, 5 ), null );
        $outline-prop: if( $indices-count > 5, k-list-nth( $indices, 6 ), null );

        // Take value from the palette only if it is a number
        $bg: if( k-meta-type-of( $bg-prop ) == number, k-get-theme-color( $src-palette-name, $bg-prop ), $bg-prop );
        $text: if( k-meta-type-of( $text-prop ) == number, k-get-theme-color( $src-palette-name, $text-prop ), $text-prop );
        $border: if( k-meta-type-of( $border-prop ) == number, k-get-theme-color( $src-palette-name, $border-prop ), $border-prop );
        $gradient: $gradient-prop;
        $shadow: $shadow-prop;
        $outline: $outline-prop;

        $result: k-map-merge($result, (
            #{$prefix}bg: $bg,
            #{$prefix}text: $text,
            #{$prefix}border: $border,
            #{$prefix}gradient: $gradient,
            #{$prefix}shadow: $shadow,
            #{$prefix}outline: $outline
        ));
    }

    $result: (
        #{$variant}: $result
    );

    @return $result;

};


@function k-process-variant-matrices( $theme-matrix, $palette-matrix: () ) {
    $result: ();

    // @debug $theme-matrix;
    // @debug $palette-matrix;

    @each $variant, $definition in $theme-matrix {
        $tc-index: k-string-index( $variant, "THEME_COLOR" );
        $src-palette-name: k-map-get( $definition, PALETTE );
        $matrix: k-map-remove( $definition, PALETTE );

        @if ($tc-index == null ) { // stylelint-disable-line
            $tmp-result: k-generate-theme-variant( $variant, $matrix, $src-palette-name );
            $result: k-map-merge( $result, $tmp-result);
        } @else {
            @each $color, $palette in $palette-matrix {
                $variant-name: k-string-replace( $variant, THEME_COLOR, $color);
                $palette-name: k-string-unquote($src-palette-name + "");

                @if ($palette-name == THEME_COLOR) {
                    $palette-name: k-string-replace( $palette-name, THEME_COLOR, $color );
                    $palette-name: k-map-get( $palette-matrix, $palette-name );
                }

                $tmp-result: k-generate-theme-variant( $variant-name, $matrix, $palette-name );
                $result: k-map-merge( $result, $tmp-result );
            }
        }
    }

    @return $result;
}


@function k-get-theme-palette( $name ) {
    @return k-map-get( $kendo-palettes, $name );
}

@function k-get-theme-color( $palette, $hue ) {
    @if ( k-meta-type-of( $palette ) == "map" ) {
        @return k-map-get( $palette, $hue );
    }

    @return k-map-get( k-get-theme-palette( $palette ), $hue );
}

@function k-get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo-" ) {
    @return var( --#{$prefix}#{$name}, #{$fallback} );
}

@function k-get-swatch-color( $name, $color ) {
    $map: (
        app-surface: k-color( app-surface ),
        on-app-surface: k-color( on-app-surface ),
        subtle: k-color( subtle ),
        surface: k-color( surface ),
        surface-alt: k-color( surface-alt ),
        border: k-color( border ),
        border-alt: k-color( border-alt ),
        color-subtle: k-color( #{$color}-subtle ),
        color-subtle-hover: k-color( #{$color}-subtle-hover ),
        color-subtle-active: k-color( #{$color}-subtle-active ),
        color: k-color( #{$color} ),
        color-hover: k-color( #{$color}-hover ),
        color-active: k-color( #{$color}-active ),
        color-emphasis: k-color( #{$color}-emphasis ),
        color-on-subtle: k-color( #{$color}-on-subtle ),
        on-color: k-color( on-#{$color} ),
        color-on-surface: k-color( #{$color}-on-surface ),
        on-color-disabled: color-mix(in srgb, k-color( on-#{$color} ) 46%, transparent)
    );

    @return if( k-map-has-key( $map, $name ), k-map-get( $map, $name ), $name );
};

@function k-generate-theme-variation( $theme-color, $source-palette-name, $mapping ) {
    $temp: ( );

    @each $ui-state, $indices in $mapping {
        $prefix: if( $ui-state == normal, '', '#{$ui-state}-' );

        $bg-prop: k-list-nth($indices, 1);
        $text-prop: k-list-nth($indices, 2);
        $border-prop: k-list-nth($indices, 3);

        // Take value from the palette only if it is a number
        $bg: if($kendo-enable-color-system, k-get-swatch-color( $bg-prop, $source-palette-name ), if( k-meta-type-of($bg-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop ));
        $text: if($kendo-enable-color-system, k-get-swatch-color( $text-prop, $source-palette-name ), if( k-meta-type-of($text-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop ));
        $border: if($kendo-enable-color-system, k-get-swatch-color( $border-prop, $source-palette-name ), if( k-meta-type-of($border-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop ));


        $temp: k-map-deep-merge( $temp, (
            #{$prefix}bg: $bg,
            #{$prefix}text: $text,
            #{$prefix}border: $border
        ));

        // Add outline if provided in the map
        @if ( k-list-length($indices) > 3 ) {
            $outline-prop: k-list-nth($indices, 4);
            $outline: if($kendo-enable-color-system, k-get-swatch-color( $outline-prop, $source-palette-name ), if( k-meta-type-of($outline-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop ));

            $temp: k-map-deep-merge( $temp, (
                #{$prefix}outline: $outline
            ));
        }
    }

    $map: (
        #{$theme-color}: $temp
    );

    @return $map;

};

@function k-generate-fill-mode-theme-variation( $fill-mode, $theme-color, $source-palette-name, $mapping ) {

    $map: k-generate-theme-variation( $theme-color, $source-palette-name, $mapping );

    $result: (
       #{$fill-mode}: $map
    );

    @return $result;
}

@function k-hex-to-rgb( $color ) {
    @if($color) {
        $r: k-color-red($color);
        $g: k-color-green($color);
        $b: k-color-blue($color);

        @return $r, $g, $b;
    } @else {
        @return null;
    }
}

// #endregion
// #region @import "./_mixins.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_mixins.import.scss
@mixin k-css-vars($map) {
    @each $group, $values in $map {
        @each $key, $value in $values {
            --kendo-#{k-meta-inspect($group)}-#{$key}: #{$value};
        }
    }
}

// #endregion
// #region @import "./_swatch.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_swatch.scss
// #region @import "./_functions.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_functions.import.scss
// File already imported_once. Skipping output.
// #endregion

// Config
$kendo-enable-color-system: false !default;

// Colors
$_default-colors: (
    // Misc
    app-surface: null,
    on-app-surface: null,
    subtle: null,
    surface: null,
    surface-alt: null,
    border: null,
    border-alt: null,
    // Base
    base-subtle: null,
    base-subtle-hover: null,
    base-subtle-active: null,
    base: null,
    base-hover: null,
    base-active: null,
    base-emphasis: null,
    base-on-subtle: null,
    on-base: null,
    base-on-surface: null,
    // Primary
    primary-subtle: null,
    primary-subtle-hover: null,
    primary-subtle-active: null,
    primary: null,
    primary-hover: null,
    primary-active: null,
    primary-emphasis: null,
    primary-on-subtle: null,
    on-primary: null,
    primary-on-surface: null,
    // Secondary
    secondary-subtle: null,
    secondary-subtle-hover: null,
    secondary-subtle-active: null,
    secondary: null,
    secondary-hover: null,
    secondary-active: null,
    secondary-emphasis: null,
    secondary-on-subtle: null,
    on-secondary: null,
    secondary-on-surface: null,
    // Tertiary
    tertiary-subtle: null,
    tertiary-subtle-hover: null,
    tertiary-subtle-active: null,
    tertiary: null,
    tertiary-hover: null,
    tertiary-active: null,
    tertiary-emphasis: null,
    tertiary-on-subtle: null,
    on-tertiary: null,
    tertiary-on-surface: null,
    // Info
    info-subtle: null,
    info-subtle-hover: null,
    info-subtle-active: null,
    info: null,
    info-hover: null,
    info-active: null,
    info-emphasis: null,
    info-on-subtle: null,
    on-info: null,
    info-on-surface: null,
    // Success
    success-subtle: null,
    success-subtle-hover: null,
    success-subtle-active: null,
    success: null,
    success-hover: null,
    success-active: null,
    success-emphasis: null,
    success-on-subtle: null,
    on-success: null,
    success-on-surface: null,
    // Warning
    warning-subtle: null,
    warning-subtle-hover: null,
    warning-subtle-active: null,
    warning: null,
    warning-hover: null,
    warning-active: null,
    warning-emphasis: null,
    warning-on-subtle: null,
    on-warning: null,
    warning-on-surface: null,
    // Error
    error-subtle: null,
    error-subtle-hover: null,
    error-subtle-active: null,
    error: null,
    error-hover: null,
    error-active: null,
    error-emphasis: null,
    error-on-subtle: null,
    on-error: null,
    error-on-surface: null,
    // Light
    light-subtle: null,
    light-subtle-hover: null,
    light-subtle-active: null,
    light: null,
    light-hover: null,
    light-active: null,
    light-emphasis: null,
    light-on-subtle: null,
    on-light: null,
    light-on-surface: null,
    // Dark
    dark-subtle: null,
    dark-subtle-hover: null,
    dark-subtle-active: null,
    dark: null,
    dark-hover: null,
    dark-active: null,
    dark-emphasis: null,
    dark-on-subtle: null,
    on-dark: null,
    dark-on-surface: null,
    // Inverse
    inverse-subtle: null,
    inverse-subtle-hover: null,
    inverse-subtle-active: null,
    inverse: null,
    inverse-hover: null,
    inverse-active: null,
    inverse-emphasis: null,
    inverse-on-subtle: null,
    on-inverse: null,
    inverse-on-surface: null,
    // Series A
    series-a: null,
    series-a-bold: null,
    series-a-bolder: null,
    series-a-subtle: null,
    series-a-subtler: null,
    // Series B
    series-b: null,
    series-b-bold: null,
    series-b-bolder: null,
    series-b-subtle: null,
    series-b-subtler: null,
    // Series C
    series-c: null,
    series-c-bold: null,
    series-c-bolder: null,
    series-c-subtle: null,
    series-c-subtler: null,
    // Series D
    series-d: null,
    series-d-bold: null,
    series-d-bolder: null,
    series-d-subtle: null,
    series-d-subtler: null,
    // Series Е
    series-e: null,
    series-e-bold: null,
    series-e-bolder: null,
    series-e-subtle: null,
    series-e-subtler: null,
    // Series F
    series-f: null,
    series-f-bold: null,
    series-f-bolder: null,
    series-f-subtle: null,
    series-f-subtler: null,
) !default;

/// The global default Colors map.
/// @group color-system
$kendo-colors: $_default-colors !default;
$kendo-colors: k-map-merge($_default-colors, $kendo-colors);

@mixin color-system--styles() {
    :root {
        @each $key, $value in $kendo-colors {
            @if($value) {
                --kendo-color-#{$key}: #{$value};
            }
        }
    }
}

// #endregion
// #region @import "./_constants.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_constants.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./_swatch-legacy.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_swatch-legacy.scss
$kendo-is-dark-theme: false !default;

// Root styles
$kendo-body-bg: null !default;
$kendo-body-text: null !default;

// Component styles
$kendo-component-bg: null !default;
$kendo-component-text: null !default;
$kendo-component-border: null !default;

// States styles
$kendo-hover-bg: null !default;
$kendo-hover-text: null !default;
$kendo-hover-border: null !default;

$kendo-selected-bg: null !default;
$kendo-selected-text: null !default;
$kendo-selected-border: null !default;

$kendo-selected-hover-bg: null !default;
$kendo-selected-hover-text: null !default;
$kendo-selected-hover-border: null !default;

$kendo-focus-outline: null !default;

$kendo-subtle-text: null !default;

// Link
$kendo-link-text: null !default;
$kendo-link-hover-text: null !default;

// Validator
$kendo-invalid-bg: null !default;
$kendo-invalid-text: null !default;
$kendo-invalid-border: null !default;
$kendo-invalid-shadow: null !default;

// Disabled Styling

/// The background color of disabled items.
$kendo-disabled-bg: null !default;
/// The text color of disabled items.
$kendo-disabled-text: null !default;
/// The border color of disabled items.
$kendo-disabled-border: null !default;
/// The opacity of disabled items.
$kendo-disabled-opacity: null !default;
/// The filter of disabled items.
$kendo-disabled-filter: null !default;

$kendo-disabled-styling: (
    bg: $kendo-disabled-bg,
    color: $kendo-disabled-text,
    border: $kendo-disabled-border,
    opacity: $kendo-disabled-opacity,
    filter: $kendo-disabled-filter
) !default;


$kendo-palettes: () !default;
$kendo-theme-colors: () !default;

@mixin color-system-styles() {
    :root {
        @include k-css-vars($kendo-palettes);
        @include k-css-vars($kendo-theme-colors);

        // Text colors
        @each $theme-color, $color-props in $kendo-theme-colors {
            $_color: k-map-get($color-props, text);

            .k-text-#{$theme-color},
            .k-color-#{$theme-color} {
                color: var(--kendo-text-#{$theme-color}, #{$_color});
            }
            .\!k-text-#{$theme-color},
            .\!k-color-#{$theme-color} {
                color: var(--kendo-text-#{$theme-color}, #{$_color}) !important; // stylelint-disable-line declaration-no-important
            }

            .k-bg-#{$theme-color} {
                background-color: var(--kendo-bg-#{$theme-color}, #{$_color});
            }
            .\!k-bg-#{$theme-color} {
                background-color: var(--kendo-bg-#{$theme-color}, #{$_color}) !important; // stylelint-disable-line declaration-no-important
            }
        }
    }
}

// #endregion
// @import "./_palettes.scss";

// #endregion
// #region @import "./mixins/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/mixins/index.import.scss
// #region @import "./_border-radius.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/mixins/_border-radius.scss
// Border radius
@mixin border-radius( $radius: null ) {
    @if $kendo-enable-rounded {
        border-radius: $radius;
    }
}

@mixin border-top-radius( $radius: null ) {
    @if $kendo-enable-rounded {
        border-top-left-radius: $radius;
        border-top-right-radius: $radius;
    }
}

@mixin border-right-radius( $radius: null ) {
    @if $kendo-enable-rounded {
        border-top-right-radius: $radius;
        border-bottom-right-radius: $radius;
    }
}

@mixin border-bottom-radius( $radius: null ) {
    @if $kendo-enable-rounded {
        border-bottom-right-radius: $radius;
        border-bottom-left-radius: $radius;
    }
}

@mixin border-left-radius( $radius: null ) {
    @if $kendo-enable-rounded {
        border-top-left-radius: $radius;
        border-bottom-left-radius: $radius;
    }
}

@mixin border-top-radius-only( $radius: null ) {
    @if $kendo-enable-rounded {
        border-radius: $radius $radius 0 0;
    }
}

@mixin border-right-radius-only( $radius: null ) {
    @if $kendo-enable-rounded {
        border-radius: 0 $radius $radius 0;
    }
}

@mixin border-bottom-radius-only( $radius: null ) {
    @if $kendo-enable-rounded {
        border-radius: 0 0 $radius $radius;
    }
}

@mixin border-left-radius-only( $radius: null ) {
    @if $kendo-enable-rounded {
        border-radius: $radius 0 0 $radius;
    }
}

// #endregion
// #region @import "./_box-shadow.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/mixins/_box-shadow.scss
@mixin box-shadow( $shadow... ) {
    @if $kendo-enable-shadows and k-list-nth($shadow, 1) {
        box-shadow: $shadow;
    }
}

// #endregion
// #region @import "./_data-uri.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/mixins/_data-uri.scss
/// A list of files converted to data URIs
/// @access private
$_kendo-data-uris: () !default;

/// Saves a data URI that can be used from the $_kendo-data-uris map instead of a file reference.
/// @access private
/// @param {String} $name - The name of the resource.
/// @param {String} $content - The data URI of the resource.
/// @require $_kendo-data-uris
@mixin register-data-uri( $name, $content ) {
    @if ( k-map-has-key( $_kendo-data-uris, $name ) ) {
        @warn "Attempt to redefine data URI of file `#{$name}`.";
    }

    $_kendo-data-uris: k-map-merge( $_kendo-data-uris, ( $name: $content ) ) !global;
}

// #endregion
// #region @import "./_disabled.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/mixins/_disabled.scss
// Disabled

@mixin disabled( $color: null, $bg: null, $border: null, $opacity: null, $filter: null ) {
    outline: none;
    cursor: default;
    color: $color;
    background-color: $bg;
    border-color: $border;
    opacity: $opacity;
    filter: $filter;
    pointer-events: none;
    box-shadow: none;
}

// #endregion
// #region @import "./_decoration.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/mixins/_decoration.scss
@mixin fill( $color: null, $bg: null, $border: null, $gradient: null ) {
    @if $border {
        border-color: $border;
    }
    @if $color {
        color: $color;
    }
    @if $bg {
        background-color: $bg;
    }
    @if $gradient {
        @include linear-gradient( $gradient );
    }
}

@mixin linear-gradient( $gradient: null ) {
    @if $gradient and $kendo-enable-gradients {
        @if $gradient == none {
            background-image: none;
        } @else {
            background-image: linear-gradient( $gradient );
        }
    }
}

@mixin repeating-striped-gradient( $color: rgba(255,255,255,.15), $background: #FFF, $angle: 45deg, $largeStep: 2px, $smallStep: 1px) {
    background-image: repeating-linear-gradient($angle, $background, $background $smallStep, $color $smallStep, $color $largeStep);
}

// #endregion
// #region @import "./_focus-indicator.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/mixins/_focus-indicator.scss
@mixin focus-indicator( $indicator, $inset: false, $themeable: false, $type: "box-shadow" ) {
    @if $kendo-enable-focus-contrast and k-list-nth($indicator, 1) {
        @include box-shadow( if( $inset, inset, null ) 0 0 0 2px if( $themeable, currentColor, rgb( 0, 0, 0 ) ) );
    } @else {
        @include box-shadow( $indicator... );
    }
}

// #endregion
// #region @import "./_gradient.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/mixins/_gradient.scss
@mixin linear-gradient( $gradient: null ) {
    @if $gradient and $kendo-enable-gradients {
        @if $gradient == none {
            background-image: none;
        } @else {
            background-image: linear-gradient( $gradient );
        }
    }
}

@mixin striped-gradient( $color: rgba( white, .15 ), $angle: 45deg ) {
    background-image: linear-gradient( $angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent );
}

@mixin repeating-striped-gradient( $color: rgba( white, .15), $background: white, $angle: 45deg, $large-step: 2px, $small-step: 1px ) {
    background-image: repeating-linear-gradient( $angle, $background, $background $small-step, $color $small-step, $color $large-step );
}

@mixin checkerboard-gradient( $primary-color: white, $secondary-color: rgba( black, .09 ), $size: 10px ) {
    $_position: calc( #{$size} / 2 );

    background:
        linear-gradient( 45deg, $secondary-color 25%, transparent 25%, transparent 75%, $secondary-color 75%, $secondary-color ),
        linear-gradient( 45deg, $secondary-color 25%, transparent 25%, transparent 75%, $secondary-color 75%, $secondary-color ),
        $primary-color;
    background-repeat: repeat, repeat;
    background-position: 0px 0px, $_position $_position;
    transform-origin: 0 0 0;
    background-origin: padding-box, padding-box;
    background-size: $size $size, $size $size;
    box-shadow: none;
    text-shadow: none;
    transition: none;
    transform: scaleX(1) scaleY(1) scaleZ(1);
}

// #endregion
// #region @import "./_hide-scrollbar.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/mixins/_hide-scrollbar.scss
$kendo-scrollbar-width: 17px !default;

@mixin hide-scrollbar( $dir: "right", $max-scrollbar: 100px) {
    // anything larger than the scrollbar width will do
    $scrollbar-size: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
    $margin: calc( -#{$max-scrollbar} - #{$scrollbar-size} );

    padding-right: $max-scrollbar;
    padding-left: $max-scrollbar;

    @if ( $dir == "right" ) {
        margin-left: -$max-scrollbar;
        margin-right: $margin;
    } @else {
        margin-left: $margin;
        margin-right: -$max-scrollbar;
    }
}

@mixin hide-scrollbar-dir-agnostic($max-scrollbar: 100px) {
    // anything larger than the scrollbar width will do
    $scrollbar-size: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
    $margin: calc( -#{$max-scrollbar} - #{$scrollbar-size} );

    padding-inline-end: $max-scrollbar;
    padding-inline-start: $max-scrollbar;

    margin-inline-start: -$max-scrollbar;
    margin-inline-end: $margin;
}

// #endregion
// #region @import "./_import-once.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/mixins/_import-once.scss
/// A list of exported modules.
/// @access private
$_kendo-imported-modules: () !default;

/// Outputs a module once, no matter how many times it is included.
/// @access public
/// @param {String} $name - The name of the exported module.
/// @require $_kendo-imported-modules
@mixin exports( $name ) {
    @if (k-list-index( $_kendo-imported-modules, $name ) == null) { // stylelint-disable-line
        $_kendo-imported-modules: k-list-append( $_kendo-imported-modules, $name ) !global;
        @content;
    }
}

// #endregion

@mixin background-image( $background-image: null ) {
    @if $background-image {
        background-image: url(#{$background-image});
    }
}

// #endregion
// #region @import "./module-system/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/module-system/index.import.scss
// #region @import "./_components.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/module-system/_components.scss
$kendo-components: (
    // Typography and utils
    "typography",
    "utils",
    "draggable",

    // Generic content
    "table",
    "icon",
    "chip",
    "messagebox",

    // Primitive components
    "input",
    "list",
    "listgroup",
    "overlay",
    "ripple",
    "virtual-scroller",

    // Indicators
    "avatar",
    "badge",
    "color-preview",
    "loader",
    "skeleton",
    "tooltip",
    "time-marker",

    // Native forms
    "button",
    "split-button",
    "menu-button",
    "textbox",
    "textarea",
    "checkbox",
    "listbox",
    "progressbar",
    "radio",
    "slider",

    // Form helpers
    "form",
    "validator",
    "floating-label",

    // Form requirements
    "calendar",
    "popup",
    "time-selector",

    // Augmented inputs
    "autocomplete",
    "captcha",
    "color-palette",
    "color-gradient",
    "color-editor",
    "color-picker",
    "combobox",
    "date-input",
    "date-picker",
    "time-picker",
    "date-time-picker",
    "date-range-picker",
    "dropdown-grid",
    "dropdown-list",
    "dropdown-tree",
    "masked-textbox",
    "multiselect",
    "numeric-textbox",
    "rating",
    "searchbox",
    "switch",
    "upload",
    "dropzone",

    // Command interfaces
    "actions",
    "appbar",
    "fab",
    "menu",
    "toolbar",

    // Popups and modals
    "action-sheet",
    "dialog",
    "drawer",
    "notification",
    "popover",
    "responsive-panel",
    "window",

    // Navigation
    "bottom-navigation",
    "breadcrumb",
    "pager",
    "stepper",
    "tabstrip",
    "treeview",
    "wizard",

    // Layout & containers
    "card",
    "expander",
    "panel",
    "panelbar",
    "splitter",
    "tile-layout",
    "dock-manager",
    "chart-wizard",

    // Data management
    "grid",
    "listview",
    "spreadsheet",
    "pivotgrid",
    "treelist",
    "filter",
    "file-manager",
    "task-board",

    // Editors
    "editor",
    "image-editor",

    // Scheduling
    "gantt",
    "scheduler",

    // Misc
    "adaptive",
    "chat",
    "media-player",
    "timeline",
    "pdf-viewer",
    "scroller",
    "scrollview",
    "prompt",

    // Dataviz
    "dataviz",
    "map",
    "orgchart",
    "signature"
) !default;

// #endregion
// #region @import "./_dependencies.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/module-system/_dependencies.scss
$_kendo-dependencies: (
    action-sheet: (
        "icon",
        "listgroup",
        "popup"
    ),
    actions: (),
    adaptive: (),
    appbar: (),
    autocomplete: (
        "button",
        "icon",
        "input",
        "list",
        "popup"
    ),
    avatar: (),
    badge: (),
    bottom-navigation: (
        "icon"
    ),
    breadcrumb: (
        "icon",
        "textbox"
    ),
    button: (
        "badge",
        "icon"
    ),
    calendar: (
        "button",
        "list"
    ),
    captcha: (
        "button",
        "slider",
        "textbox"
    ),
    card: (
        "actions",
        "button",
        // "utils/flex",
        // "utils/grid"
    ),
    chat: (
        "avatar",
        "card",
        "textbox",
        "toolbar"
    ),
    checkbox: (),
    chip: (),
    color-editor: (
        "actions",
        "color-palette",
        "color-preview",
        "color-gradient"
    ),
    color-gradient: (
        "button",
        "numeric-textbox",
        "slider",
        "textbox",
        // "utils/flex"
    ),
    color-palette: (
        "color-preview",
        // "utils/flex"
    ),
    color-preview: (),
    color-picker: (
        "button",
        "color-editor",
        "input",
        "popup"
    ),
    combobox: (
        "button",
        "input",
        "popup",
        "list"
    ),
    cursor: (),
    dataviz: (
        "popup",
        "tooltip"
    ),
    date-input: (
        "input"
    ),
    date-picker: (
        "button",
        "calendar",
        "icon",
        "input",
        "popup"
    ),
    date-range-picker: (
        "date-picker"
    ),
    date-time-picker: (
        "date-picker",
        "time-picker"
    ),
    dialog: (
        "window"
    ),
    draggable: (),
    drawer: (
        "list",
        "overlay"
    ),
    dropdown-grid: (
        "button",
        "grid",
        "icon",
        "input",
        "popup",
        "table"
    ),
    dropdown-list: (
        "button",
        "icon",
        "input",
        "list",
        "popup"
    ),
    dropdown-tree: (
        "button",
        "icon",
        "input",
        "popup",
        "treeview"
    ),
    dropzone: (),
    dock-manager: (
        "splitter",
        "toolbar",
        "tabstrip"
    ),
    chart-wizard: (
        "icon",
        "window",
        "splitter",
        "dataviz",
        "expansion-panel",
        "grid",
        "tabstrip",
        "listview",
        "forms",
        "combobox"
    ),
    editor: (
        "button",
        "checkbox",
        "color-picker",
        "combobox",
        "dropdown-list",
        "toolbar",
        "upload",
        "window"
    ),
    expander: (
        "icon",
        "list",
        // "utils/display",
        // "utils/flex"
    ),
    fab: (
        "button",
        "badge",
        // "utils/position"
    ),
    file-manager: (
        "breadcrumb",
        "dialog",
        "grid",
        "icon",
        "input",
        "listview",
        "menu",
        "splitter",
        "switch",
        "toolbar",
        "treeview",
        "upload"
    ),
    filter: (
        "button",
        "checkbox",
        "date-time-picker",
        "dropdown-list",
        "input",
        "numeric-textbox",
        "textbox",
        "toolbar"
    ),
    floating-label: (
        "input"
    ),
    form: (
        "actions",
        "button",
        "toolbar"
    ),
    gantt: (
        "button",
        "date-time-picker",
        "input",
        "numeric-textbox",
        "splitter",
        "treelist",
        "validator",
        "window",
        "time-marker"
    ),
    grid: (
        "actions",
        "button",
        "checkbox",
        "dialog",
        "input",
        "list",
        "menu",
        "pager",
        "popup",
        "radio",
        "skeleton",
        "toolbar",
        "validator"
    ),
    icon: (),
    image-editor: (
        "checkbox",
        "dropdown-list",
        "form",
        "numeric-textbox",
        "toolbar"
    ),
    input: (
        "button",
        "icon"
    ),
    list: (),
    listbox: (
        "button",
        "list"
    ),
    listgroup: (),
    listview: (
        "pager",
        // "utils/grid",
        // "utils/flex"
    ),
    loader: (),
    map: (
        "button",
        "scroller",
        // "utils/position"
    ),
    masked-textbox: (
        "button",
        "input"
    ),
    media-player: (
        "slider",
        "toolbar"
    ),
    menu: (
        "button",
        "icon",
        "popup"
    ),
    menu-button: (
        "button",
        "menu"
    ),
    messagebox: (),
    multiselect: (
        "button",
        "chip",
        "icon",
        "input",
        "list",
        "popup"
    ),
    notification: (
        "button",
        "icon",
        "popup"
    ),
    numeric-textbox: (
        "button",
        "icon",
        "input"
    ),
    orgchart: (
        "button",
        "card",
        "dropdown-list",
        "icon",
        "menu",
        "textbox",
        "upload",
        "window"
    ),
    overlay: (),
    pager: (
        "dropdown-list",
        "icon",
        "list",
        "toolbar"
    ),
    panel: (),
    panelbar: (
        "icon"
    ),
    pdf-viewer: (
        "button",
        "combobox",
        "dialog",
        "dropzone",
        "pager",
        "textbox",
        "toolbar",
        "window"
    ),
    pivotgrid: (
        "dialog",
        "grid",
        "list",
        "treeview",
        // "utils/flex",
        // "utils/grid",
        // "utils/position"
    ),
    popover: (
        "card",
        "popup"
    ),
    popup: (),
    progressbar: (),
    prompt: (),
    radio: (),
    rating: (
        "icon"
    ),
    responsive-panel: (),
    ripple: (),
    scheduler: (
        "button",
        "date-time-picker",
        "dialog",
        "dropdown-list",
        "toolbar",
        "tooltip",
        "time-marker"
    ),
    scroller: (),
    scrollview: (
        "button"
    ),
    searchbox: (
        "button",
        "input"
    ),
    signature: (
        "button",
        "input"
    ),
    skeleton: (),
    slider: (
        "button",
        "tooltip"
    ),
    split-button: (
        "button",
        "menu"
    ),
    splitter: (
        "icon"
    ),
    spreadsheet: (
        "button",
        "checkbox",
        "color-picker",
        "combobox",
        "date-time-picker",
        "dropdown-list",
        "list",
        "menu",
        "radio",
        "tabstrip",
        "toolbar",
        "treeview",
        "upload",
        "window"
    ),
    stepper: (
        "icon",
        "progressbar"
    ),
    switch: (),
    table: (),
    tabstrip: (
        "button",
        "icon"
    ),
    task-board: (
        "card",
        "form",
        "searchbox",
        "textbox",
        "toolbar"
    ),
    textarea: (
        "button",
        "icon",
        "input"
    ),
    textbox: (
        "button",
        "icon",
        "input"
    ),
    tile-layout: (
        "card"
    ),
    time-marker: (),
    time-duration-picker: (
        "button",
        "icon",
        "input",
        "list",
        "popup",
        "time-selector"
    ),
    time-selector: (
        "actions",
        "button",
        "list"
    ),
    timeline: (
        "button",
        "card",
        "icon"
    ),
    time-picker: (
        "button",
        "icon",
        "input",
        "list",
        "popup",
        "time-selector"
    ),
    toolbar: (
        "button",
        "icon",
        "menu",
        "popup"
    ),
    tooltip: (
        "button",
        "icon",
        "popup"
    ),
    treelist: (
        "grid"
    ),
    treeview: (
        "checkbox",
        "icon"
    ),
    typography: (),
    upload: (
        "actions",
        "button",
        "dropzone",
        "icon",
        "listgroup",
        "toolbar"
    ),
    utils: (),
    validator: (
        "tooltip"
    ),
    virtual-scroller: (),
    window: (
        "actions",
        "button",
        "icon",
        "overlay"
    ),
    wizard: (
        "button",
        "form",
        "stepper"
    )
);

// #endregion

$_deps: () !default;
$_imported: () !default;

// stylelint-disable scss/at-if-no-null
@mixin module-register( $name: null, $dependencies: null ) {
    @if (k-list-index( $kendo-components, $name) != null) {
        $_deps: k-map-merge( $_deps, ( $name: $dependencies ) );

        @if $dependencies {
            @each $dep in $dependencies {
                @if ( k-list-index( $kendo-components, $dep ) == null ) {
                    @warn "The module \"#{$name}\" depends on module \"#{$dep}\", but the styles will not be loaded!";
                }
            }
        }
    }
}

@mixin module-render( $name: null ) {
    $dependencies: k-map-get( $_deps, $name );

    @if $dependencies {
        @each $dep in $dependencies {
            @if ( k-list-index( $_imported, $dep ) == null ) {
                @warn "The module \"#{$name}\" depends on module \"#{$dep}\", but the styles have not been loaded yet!";
            }
        }
    }

    @if ( k-list-index( $kendo-components, $name ) != null ) and ( k-list-index( $_imported, $name ) == null ) {
        $_imported: k-list-append( $_imported, $name ) !global;
        @content;
    }
}

@mixin verify-dependencies() {
    @each $component in $kendo-components {
        @if (k-map-has-key( $_kendo-dependencies, $component ) == false) {
            @error "Module '#{$component}' is not defined.";
        }
    }
}
@include verify-dependencies();

@mixin verify-rendered() {
    @each $component in $kendo-components {
        @if (k-list-index( $_imported, $component ) == null) {
            @error "Module '#{$component}' has not been rendered.";
        }
    }
}
// stylelint-enable scss/at-if-no-null

// #endregion
// #region @import "./styles/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/styles/index.import.scss
// #region @import "./_accessibility.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/styles/_accessibility.scss
@mixin kendo-core--styles--accessibility() {

    /// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
    /// @name .k-sr-only
    /// @group accessibility
    .k-sr-only {
        position: absolute;
        left: -1px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

}

// #endregion
// #region @import "./_animations.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/styles/_animations.scss
@mixin kendo-core--styles--animations() {

    // Animations
    .k-push-right {
        &-enter,
        &-appear {
            transform: translate(-100%, 0);
        }

        &-enter-active,
        &-appear-active {
            transform: translate(0, 0);
            transition: transform 300ms ease-in-out;
        }

        &-exit {
            transform: translate(0, 0);
        }

        &-exit-active {
            transform: translate(100%, 0);
            transition: transform 300ms ease-in-out;
        }
    }

    .k-push-left {
        &-enter,
        &-appear {
            transform: translate(100%, 0);
        }

        &-enter-active,
        &-appear-active {
            transform: translate(0, 0);
            transition: transform 300ms ease-in-out;
        }

        &-exit {
            transform: translate(0, 0);
        }

        &-exit-active {
            transform: translate(-100%, 0);
            transition: transform 300ms ease-in-out;
        }
    }

    .k-push-down {
        &-enter,
        &-appear {
            transform: translate(0, -100%);
        }

        &-enter-active,
        &-appear-active {
            transform: translate(0, 0);
            transition: transform 300ms ease-in-out;
        }

        &-exit {
            transform: translate(0, 0);
        }

        &-exit-active {
            transform: translate(0, 100%);
            transition: transform 300ms ease-in-out;
        }
    }

    .k-push-up {
        &-enter,
        &-appear {
            transform: translate(0, 100%);
        }

        &-enter-active,
        &-appear-active {
            transform: translate(0, 0);
            transition: transform 300ms ease-in-out;
        }

        &-exit {
            transform: translate(0, 0);
        }

        &-exit-active {
            transform: translate(0, -100%);
            transition: transform 300ms ease-in-out;
        }
    }

    .k-expand-vertical {
        &-enter,
        &-appear {
            transform: scaleY(0);
        }

        &-enter-active,
        &-appear-active {
            transform: scaleY(1);
            transition: transform 300ms ease-in-out;
        }

        &-exit {
            transform: scaleY(1);
        }

        &-exit-active {
            transform: scaleY(0);
            transition: transform 300ms ease-in-out;
        }
    }

    .k-expand-horizontal {
        &-enter,
        &-appear {
            transform: scaleX(0);
        }

        &-enter-active,
        &-appear-active {
            transform: scaleX(1);
            transition: transform 300ms ease-in-out;
        }

        &-exit {
            transform: scaleX(1);
        }

        &-exit-active {
            transform: scaleX(0);
            transition: transform 300ms ease-in-out;
        }
    }

    .k-fade {
        &-enter,
        &-appear {
            opacity: 0;
        }

        &-enter-active,
        &-appear-active {
            opacity: 1;
            transition: opacity 500ms ease-in-out;
        }

        &-exit {
            opacity: 1;
        }

        &-exit-active {
            opacity: 0;
            transition: opacity 500ms ease-in-out;
        }

        &-exit-active + &-exit-active,
        &-enter-active + &-enter-active {
            display: none;
        }
    }

    .k-zoom-in {
        &-enter,
        &-appear {
            opacity: 0;
            transform: scale(0);
        }

        &-enter-active,
        &-appear-active {
            opacity: 1;
            transform: scale(1);
            transition: transform, opacity 300ms ease-in-out;
        }

        &-exit {
            opacity: 1;
            transform: scale(1);
        }

        &-exit-active {
            opacity: 0;
            transform: scale(2);
            transition: transform, opacity 300ms ease-in-out;
        }
    }

    .k-zoom-out {
        &-enter,
        &-appear {
            opacity: 0;
            transform: scale(2);
        }

        &-enter-active,
        &-appear-active {
            opacity: 1;
            transform: scale(1);
            transition: transform, opacity 300ms ease-in-out;
        }

        &-exit {
            opacity: 1;
            transform: scale(1);
        }

        &-exit-active {
            opacity: 0;
            transform: scale(0);
            transition: transform, opacity 300ms ease-in-out;
        }
    }

    .k-slide-in {
        &-appear {
            opacity: .1;
            transform: translate(0, -3em);

            .k-centered {
                transform: translate(-50%, -60%);
            }
        }

        &-appear-active {
            opacity: 1;
            transform: translate(0, 0);
            transition: transform .3s cubic-bezier(.2, .6, .4, 1), opacity .3s cubic-bezier(.2, 1, .2, 1);

            .k-centered {
                transform: translate(-50%, -50%);
            }
        }
    }

    .k-slide-down {
        &-enter,
        &-appear {
            transform: translateY(-100%);
        }

        &-enter-active,
        &-appear-active {
            transform: translateY(0);
            transition: transform 300ms ease-in-out;
        }

        &-exit {
            transform: translateY(0);
        }

        &-exit-active {
            transform: translateY(-100%);
            transition: transform 300ms ease-in-out;
        }
    }

    .k-slide-up {
        &-enter,
        &-appear {
            transform: translateY(100%);
        }

        &-enter-active,
        &-appear-active {
            transform: translateY(0);
            transition: transform 300ms ease-in-out;
        }

        &-exit {
            transform: translateY(0);
        }

        &-exit-active {
            transform: translateY(100%);
            transition: transform 300ms ease-in-out;
        }
    }

    .k-slide-right {
        &-enter,
        &-appear {
            transform: translateX(-100%);
        }

        &-enter-active,
        &-appear-active {
            transform: translateX(0);
            transition: transform 300ms ease-in-out;
        }

        &-exit {
            transform: translateX(0);
        }

        &-exit-active {
            transform: translateX(-100%);
            transition: transform 300ms ease-in-out;
        }
    }

    .k-slide-left {
        &-enter,
        &-appear {
            transform: translateX(100%);
        }

        &-enter-active,
        &-appear-active {
            transform: translateX(0);
            transition: transform 300ms ease-in-out;
        }

        &-exit {
            transform: translateX(0);
        }

        &-exit-active {
            transform: translateX(100%);
            transition: transform 300ms ease-in-out;
        }
    }

    .k-reveal-vertical {
        &-enter,
        &-appear {
            max-height: 0;
        }

        &-enter-active,
        &-appear-active {
            transition: max-height 300ms ease-in-out;
        }

        &-exit-active {
            // override any max-height set to element to allow animation
            max-height: 0 !important; // stylelint-disable-line declaration-no-important
            transition: max-height 300ms ease-in-out;
        }
    }

    .k-reveal-horizontal {
        &-enter,
        &-appear {
            max-width: 0;
        }

        &-enter-active,
        &-appear-active {
            transition: max-width 300ms ease-in-out;
        }

        &-exit-active {
            // override any max-height set to element to allow animation
            max-width: 0 !important; // stylelint-disable-line declaration-no-important
            transition: max-width 300ms ease-in-out;
        }
    }


    // FX
    $fx-duration: 350ms;

    .k-fx-end .k-fx-next,
    .k-fx-end .k-fx-current {
        transition: all $fx-duration ease-out;
    }

    .k-fx {
        position: relative;

        .k-fx-current {
            z-index: 0;
        }

        .k-fx-next {
            z-index: 1;
        }
    }

    .k-fx-hidden,
    .k-fx-hidden * {
        visibility: hidden !important; // stylelint-disable-line declaration-no-important
    }

    .k-fx-reverse {
        .k-fx-current {
            z-index: 1;
        }

        .k-fx-next {
            z-index: 0;
        }
    }

    // Zoom
    // stylelint-disable declaration-no-important
    .k-fx-zoom {
        &.k-fx-start .k-fx-next {
            transform: scale(0) !important;
        }

        &.k-fx-end .k-fx-next {
            transform: scale(1) !important;
        }

        &.k-fx-reverse {
            &.k-fx-start .k-fx-next,
            &.k-fx-end .k-fx-next {
                transform: scale(1) !important;
            }

            &.k-fx-start .k-fx-current {
                transform: scale(1) !important;
            }

            &.k-fx-end .k-fx-current {
                transform: scale(0) !important;
            }
        }
    }
    // stylelint-enable declaration-no-important

    // Fade
    .k-fx-fade {
        &.k-fx-start .k-fx-next {
            will-change: opacity;
            opacity: 0;
        }

        &.k-fx-end .k-fx-next {
            opacity: 1;
        }

        &.k-fx-reverse {
            &.k-fx-start .k-fx-current {
                will-change: opacity;
                opacity: 1;
            }

            &.k-fx-end .k-fx-current {
                opacity: 0;
            }
        }
    }

    // Slide
    .k-fx-slide {
        &.k-fx-end .k-fx-next .k-content,
        &.k-fx-end .k-fx-next .k-header,
        &.k-fx-end .k-fx-next .k-footer,
        &.k-fx-end .k-fx-current .k-content,
        &.k-fx-end .k-fx-current .k-header,
        &.k-fx-end .k-fx-current .k-footer,
        &.k-fx-end .k-fx-next .km-content,
        &.k-fx-end .k-fx-next .km-header,
        &.k-fx-end .k-fx-next .km-footer,
        &.k-fx-end .k-fx-current .km-content,
        &.k-fx-end .k-fx-current .km-header,
        &.k-fx-end .k-fx-current .km-footer {
            transition: all $fx-duration ease-out;
        }

        // left
        &.k-fx-start .k-fx-next .k-content,
        &.k-fx-start .k-fx-next .km-content {
            will-change: transform;
            transform: translateX(100%);
        }

        &.k-fx-start .k-fx-next .k-header,
        &.k-fx-start .k-fx-next .k-footer,
        &.k-fx-start .k-fx-next .km-header,
        &.k-fx-start .k-fx-next .km-footer {
            will-change: opacity;
            opacity: 0;
        }

        &.k-fx-end .k-fx-current .k-content,
        &.k-fx-end .k-fx-current .km-content {
            transform: translateX(-100%);
        }

        &.k-fx-end .k-fx-next .k-header,
        &.k-fx-end .k-fx-next .k-footer,
        &.k-fx-end .k-fx-next .km-header,
        &.k-fx-end .k-fx-next .km-footer {
            opacity: 1;
        }

        // left reverse
        &.k-fx-reverse {
            &.k-fx-start .k-fx-current .k-content,
            &.k-fx-start .k-fx-current .km-content {
                will-change: transform;
                transform: translateX(0);
            }

            &.k-fx-end .k-fx-current .k-content,
            &.k-fx-end .k-fx-current .km-content {
                transform: translateX(100%);
            }

            &.k-fx-start .k-fx-next .k-content,
            &.k-fx-start .k-fx-next .km-content {
                transform: translateX(-100%);
            }

            &.k-fx-end .k-fx-next .k-content,
            &.k-fx-end .k-fx-next .km-content {
                transform: translateX(0);
            }

            &.k-fx-start .k-fx-current .k-header,
            &.k-fx-start .k-fx-current .k-footer,
            &.k-fx-start .k-fx-current .km-header,
            &.k-fx-start .k-fx-current .km-footer {
                will-change: opacity;
                opacity: 1;
            }

            &.k-fx-start .k-fx-next .k-header,
            &.k-fx-start .k-fx-next .k-footer,
            &.k-fx-start .k-fx-next .km-header,
            &.k-fx-start .k-fx-next .km-footer {
                opacity: 1;
            }

            &.k-fx-end .k-fx-current .k-header,
            &.k-fx-end .k-fx-current .k-footer,
            &.k-fx-end .k-fx-current .km-header,
            &.k-fx-end .k-fx-current .km-footer {
                opacity: 0;
            }

            &.k-fx-end .k-fx-next .k-header,
            &.k-fx-end .k-fx-next .k-footer,
            &.k-fx-end .k-fx-next .km-header,
            &.k-fx-end .k-fx-next .km-footer {
                opacity: 1;
            }
        }

        // right
        &.k-fx-right {
            &.k-fx-start .k-fx-next .k-content,
            &.k-fx-start .k-fx-next .km-content {
                transform: translateX(-100%);
            }

            &.k-fx-end .k-fx-current .k-content,
            &.k-fx-end .k-fx-current .km-content {
                transform: translateX(100%);
            }

            // right reverse
            &.k-fx-reverse {
                &.k-fx-start .k-fx-current .k-content,
                &.k-fx-start .k-fx-current .km-content {
                    transform: translateX(0);
                }

                &.k-fx-end .k-fx-current .k-content,
                &.k-fx-end .k-fx-current .km-content {
                    transform: translateX(-100%);
                }

                &.k-fx-start .k-fx-next .k-content,
                &.k-fx-start .k-fx-next .km-content {
                    transform: translateX(100%);
                }

                &.k-fx-end .k-fx-next .k-content,
                &.k-fx-end .k-fx-next .km-content {
                    transform: translateX(0%);
                }
            }
        }
    }

    // Tile
    .k-fx-tile {
        // left
        &.k-fx-start .k-fx-next {
            will-change: transform;
            transform: translateX(100%);
        }

        &.k-fx-end .k-fx-current {
            transform: translateX(-100%);
        }

        // left reverse
        &.k-fx-reverse {
            &.k-fx-start .k-fx-current {
                will-change: transform;
                transform: translateX(0);
            }

            &.k-fx-end .k-fx-current {
                transform: translateX(100%);
            }

            &.k-fx-start .k-fx-next {
                transform: translateX(-100%);
            }

            &.k-fx-end .k-fx-next {
                transform: translateX(0);
            }
        }

        // right
        &.k-fx-right {
            &.k-fx-start .k-fx-next {
                transform: translateX(-100%);
            }

            &.k-fx-end .k-fx-current {
                transform: translateX(100%);
            }

            // right reverse
            &.k-fx-reverse {
                &.k-fx-start .k-fx-current {
                    transform: translateX(0);
                }

                &.k-fx-end .k-fx-current {
                    transform: translateX(-100%);
                }

                &.k-fx-start .k-fx-next {
                    transform: translateX(100%);
                }

                &.k-fx-end .k-fx-next {
                    transform: translateX(0%);
                }
            }
        }
    }

    // Overlay
    .k-fx.k-fx-overlay {
        &.k-fx-start .k-fx-next,
        &.k-fx-left.k-fx-start .k-fx-next {
            will-change: transform;
            transform: translateX(100%);
        }

        &.k-fx-right.k-fx-start .k-fx-next {
            transform: translateX(-100%);
        }

        &.k-fx-up.k-fx-start .k-fx-next {
            transform: translateY(100%);
        }

        &.k-fx-down.k-fx-start .k-fx-next {
            transform: translateY(-100%);
        }

        &.k-fx-reverse {
            &.k-fx-start .k-fx-next {
                transform: none;
            }

            &.k-fx-start .k-fx-current {
                will-change: transform;
                transform: none;
            }

            &.k-fx-end .k-fx-current,
            &.k-fx-left.k-fx-end .k-fx-current {
                transform: translateX(100%);
            }

            &.k-fx-right.k-fx-end .k-fx-current {
                transform: translateX(-100%);
            }

            &.k-fx-up.k-fx-end .k-fx-current {
                transform: translateY(100%);
            }

            &.k-fx-down.k-fx-end .k-fx-current {
                transform: translateY(-100%);
            }
        }
    }

}

// #endregion
// #region @import "./_asp-fallback.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/styles/_asp-fallback.scss
@mixin kendo-core--styles--asp-fallback() {

    .k-theme-test-class,
    .k-common-test-class {
        opacity: 0;
    }

}

// #endregion
// #region @import "./_layout.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/styles/_layout.scss
@mixin kendo-core--styles--layout() {
    // Basic layout
    .k-hstack {
        display: flex;
        flex-flow: row nowrap;
    }
    .k-vstack {
        display: flex;
        flex-flow: column nowrap;
    }

    // Spacer
    .k-spacer {
        flex: 1 1 auto;
    }
    .k-spacer-sized {
        flex: none;
    }


    // Float wrap
    .k-float-wrap::after {
        content: "";
        display: block;
        clear: both;
    }


    // Stack layout
    .k-stack-layout {}


    // Flex layout
    .k-flex-layout {
        display: flex;
    }


    // Grid layout
    .k-grid-layout {
        display: grid;
    }


    // Separator
    .k-separator {
        width: auto;
        height: 0;
        border-width: 1px 0 0;
        border-style: solid;
        border-color: inherit;
        display: block;
        flex-grow: 0 !important; // stylelint-disable-line declaration-no-important
        flex-shrink: 0 !important; // stylelint-disable-line declaration-no-important
        align-self: stretch;
    }
    .k-separator-horizontal,
    .k-vstack > .k-separator {
        width: auto;
        height: 0;
        border-width: 1px 0 0;
    }
    .k-separator-vertical,
    .k-hstack > .k-separator {
        width: 0;
        height: auto;
        border-width: 0 0 0 1px;
    }

    hr.k-separator {
        margin: 0;
        padding: 0;
    }


    // Hidden
    .k-hidden {
        display: none !important; // stylelint-disable-line declaration-no-important
    }


    // RTL
    .k-rtl {
        direction: rtl;
    }


    // Legacy aliases
    .k-hbox { @extend .k-hstack !optional; }
    .k-vbox { @extend .k-vstack !optional; }
    .k-floatwrap { @extend .k-float-wrap !optional; }
    .k-flex { @extend .k-spacer !optional; }

}

// #endregion
// #region @import "./_normalize.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/styles/_normalize.scss
@mixin kendo-core--styles--normalize() {

    // Hidden attribute
    [hidden] {
        display: none !important; // stylelint-disable-line declaration-no-important
    }


    // Hide script tags
    // see https://github.com/telerik/kendo-themes/issues/2360
    script {
        display: none !important; // stylelint-disable-line declaration-no-important
    }

}

// #endregion
// #region @import "./_base.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/styles/_base.scss
@mixin kendo-core--styles--base() {

    // Disabled state
    .k-disabled,
    .k-widget[disabled],
    .k-disabled {
        @include disabled(
            $color: var( --kendo-disabled-text, #{$kendo-disabled-text}),
            $bg: var( --kendo-disabled-bg, #{$kendo-disabled-bg}),
            $border: var( --kendo-disabled-border, #{$kendo-disabled-border}),
            $opacity: var( --kendo-disabled-opacity, #{$kendo-disabled-opacity}),
            $filter: var( --kendo-disabled-filter, #{$kendo-disabled-filter})
        );

        .k-link {
            cursor: default;
            outline: 0;
        }

        // Nested disabled
        [disabled],
        .k-disabled {
            @if $kendo-nested-disabled {
                --kendo-disabled-opacity: 1;
                --kendo-disabled-filter: grayscale(0);
            }
        }
    }

    // Horizontal line
    .k-hr {
        margin-block: k-spacing(4);
        padding: 0;
        height: 0;
        border-width: 1px 0 0;
        border-style: solid;
        border-color: var( --kendo-component-border, #{$kendo-component-border} );
        display: block;
        float: none;
        clear: both;
    }

    // Horizontal rule
    .k-d-flex-row > .k-hr {
        margin: 0;
        width: 0;
        height: auto;
        border-width: 0 0 0 1px;
        flex: 0 0 auto;
    }

    // Vertical rule
    .k-d-flex-col > .k-hr {
        margin: 0;
        flex: 0 0 auto;
    }

    .k-sprite {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        overflow: hidden;
        background-repeat: no-repeat;
        font-size: 0;
        line-height: 0;
        text-align: center;
    }

    .k-image {
        display: inline-block;
    }

    // Layout
    .k-reset {
        margin: 0;
        padding: 0;
        border-width: 0;
        outline: 0;
        text-decoration: none;
        font: inherit;
        list-style: none;
    }

    kendo-sortable {
        display: block;
    }


    // Links
    .k-link,
    .k-link:hover {
        color: inherit;
        text-decoration: none;
        outline: 0;
        cursor: pointer;
    }

    // Outline
    .k-content {
        outline: 0;
    }

    // Centering
    .k-centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    // Disable mouse events
    .k-no-click {
        pointer-events: none;
    }

    // Off-screen container used during PDF export
    .k-pdf-export-shadow {
        position: absolute;
        overflow: hidden;
        left: -15000px;
        width: 14400px;
    }

    // PDF export icons fix
    .kendo-pdf-hide-pseudo-elements::before,
    .kendo-pdf-hide-pseudo-elements::after {
        display: none !important; // stylelint-disable-line declaration-no-important
    }

    // Dirty indicator
    .k-dirty {
        margin: 0;
        padding: 0;
        width: 0;
        height: 0;
        border-width: 3px;
        border-style: solid;
        border-block-start-color: currentColor;
        border-block-end-color: transparent;
        border-inline-start-color: transparent;
        border-inline-end-color: currentColor;
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
    }
}

// #endregion
// #region @import "./_selection.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/styles/_selection.scss
@mixin kendo-core--styles--selection() {

    // Marquee
    .k-marquee {
        position: absolute;
        z-index: 100000;
    }

    .k-marquee-color,
    .k-marquee-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .k-marquee-color {
        color: k-get-theme-color-var( neutral-160, #{$kendo-selected-text} );
        background-color: k-get-theme-color-var( primary-60, #{$kendo-selected-bg} );
        border-color: k-get-theme-color-var( primary-100, #{$kendo-selected-border} );
        opacity: .6;
    }
    .k-marquee-text {
        color: k-get-theme-color-var( neutral-160, #{$kendo-selected-text} );
    }

    // Text selection
    .k-text-selection {
        ::selection {
            background-color:  if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ));
            color: if($kendo-enable-color-system, k-color( on-primary ), $kendo-selected-text);
        }
    }

}

// #endregion
// #region @import "./_scrollbar.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/styles/_scrollbar.scss
@mixin kendo-core--styles--scrollbar() {

    // virtual scrollbar
    .k-scrollbar {
        position: absolute;
        overflow: scroll;
    }

    .k-scrollbar-vertical {
        top: 0;
        right: 0;
        width: 17px; // scrollbar width
        height: 100%;
        overflow-x: hidden;
    }

    .k-touch-scrollbar {
        display: none;
        position: absolute;
        z-index: 200000;
        height: 8px;
        width: 8px;
        border: 1px solid #8a8a8a;
        background-color: #858585;
    }

}

// #endregion
// #region @import "./_resizing.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/styles/_resizing.scss
@mixin kendo-core--styles--resizing() {

    // Resize handle
    .k-resize-handle,
    .k-resize-hint {
        position: absolute;
        border-color: inherit;
        z-index: 200;
    }
    .k-resize-handle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .k-resize-handle::before {
        content: "";
        border: 0 solid;
        border-color: inherit;
    }
    .k-resize-n {
        width: 100%;
        height: 6px;
        flex-direction: row;
        left: 0;
        top: -3px;
        cursor: n-resize;
    }
    .k-resize-s {
        width: 100%;
        height: 6px;
        flex-direction: row;
        left: 0;
        bottom: -3px;
        cursor: s-resize;
    }
    .k-resize-w {
        width: 6px;
        height: 100%;
        flex-direction: column;
        top: 0;
        left: -3px;
        cursor: w-resize;
    }
    .k-resize-e {
        width: 6px;
        height: 100%;
        flex-direction: column;
        top: 0;
        right: -3px;
        cursor: e-resize;
    }

    .k-resize-sw,
    .k-resize-se,
    .k-resize-nw,
    .k-resize-ne {
        width: 5px;
        height: 5px;
    }

    .k-resize-sw {
        cursor: sw-resize;
        bottom: 0;
        left: 0;
    }
    .k-resize-se {
        cursor: se-resize;
        bottom: 0;
        right: 0;
    }
    .k-resize-nw {
        cursor: nw-resize;
        top: 0;
        left: 0;
    }
    .k-resize-ne {
        cursor: ne-resize;
        top: 0;
        right: 0;
    }

    .k-vertical-resize {
        cursor: row-resize;
    }
    .k-horizontal-resize {
        cursor: col-resize;
    }

    // Resize hint
    .k-resize-hint {
        display: flex;
        flex-direction: column;
        align-items: center;

        .k-resize-hint-handle {
            width: auto;
            height: 20px;
            align-self: stretch;
        }
        .k-resize-hint-marker {
            width: 2px;
            height: auto;
            flex: 1 1 auto;
        }
    }
    .k-resize-hint-vertical {
        display: flex;
        flex-direction: row;
        align-items: center;

        .k-resize-hint-handle {
            width: 20px;
            height: auto;
            align-self: stretch;
        }

        .k-resize-hint-marker {
            width: auto;
            height: 2px;
            flex: 1 1 auto;
        }
    }

}

// #endregion
// #region @import "./_colors.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/styles/_colors.scss
@mixin kendo-core--styles--colors() {
    @if ($kendo-enable-color-system) {
        @include color-system--styles();
    }
}

// #endregion

@mixin kendo-core--styles() {
    @include kendo-core--styles--colors();
    @include kendo-core--styles--accessibility();
    @include kendo-core--styles--animations();
    @include kendo-core--styles--asp-fallback();
    @include kendo-core--styles--layout();
    @include kendo-core--styles--normalize();
    @include kendo-core--styles--base();
    @include kendo-core--styles--selection();
    @include kendo-core--styles--scrollbar();
    @include kendo-core--styles--resizing();
}

// #endregion
// #region @import "./elevation/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/elevation/index.import.scss
// #region @import "../functions/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
// File already imported_once. Skipping output.
// #endregion

$_default-elevation: (
    1: (
        0 2px 3px rgba(0, 0, 0, .04),
        0 4px 16px rgba(0, 0, 0, .12)
    ),
    2: (
        0 4px 6px rgba(0, 0, 0, .06),
        0 4px 16px rgba(0, 0, 0, .12)
    ),
    3: (
        0 6px 8px rgba(0, 0, 0, .08),
        0 4px 16px rgba(0, 0, 0, .12)
    ),
    4: (
        0 8px 10px rgba(0, 0, 0, .12),
        0 4px 16px rgba(0, 0, 0, .12)
    ),
    5: (
        0 10px 12px rgba(0, 0, 0, .16),
        0 4px 16px rgba(0, 0, 0, .12)
    ),
    6: (
        0 12px 14px rgba(0, 0, 0, .2),
        0 4px 16px rgba(0, 0, 0, .12)
    ),
    7: (
        0 14px 16px rgba(0, 0, 0, .24),
        0 4px 16px rgba(0, 0, 0, .12)
    ),
    8: (
        0 16px 18px rgba(0, 0, 0, .28),
        0 4px 16px rgba(0, 0, 0, .12)
    ),
    9: (
        0 32px 34px rgba(0, 0, 0, .32),
        0 4px 16px rgba(0, 0, 0, .12)
    )
) !default;

/// The global default Elevation map.
/// @group elevation
$kendo-elevation: $_default-elevation !default;

$kendo-elevation: k-map-merge($_default-elevation, $kendo-elevation);

@function k-shadow-filter($shadow) {
    $result: '';
    @each $value in $shadow {
        $result: $result + "drop-shadow(" + $value + ") ";
    }
    @return #{$result};
}

@function k-elevation($level) {
    @return var(--kendo-elevation-#{$level}, k-map-get($kendo-elevation, $level));
}


@mixin kendo-elevation--styles() {
    :root {
        @each $level, $shadow in $kendo-elevation {
            --kendo-elevation-#{$level}: #{$shadow};
        }
    }
}

// #endregion
// #region @import "./typography/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/typography/index.import.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./spacing/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/spacing/index.import.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./border-radii/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/border-radii/index.import.scss
/// The none border radius used across the Components.
/// @group radii
$kendo-border-radius-none: k-map-get($kendo-spacing, 0) !default;
/// The extra small border radius used across the Components.
/// @group radii
$kendo-border-radius-xs: k-map-get($kendo-spacing, 1px) !default;
/// The small border radius used across the Components.
/// @group radii
$kendo-border-radius-sm: k-map-get($kendo-spacing, 0.5) !default;
/// The medium border radius used across the Components.
/// @group radii
$kendo-border-radius-md: k-map-get($kendo-spacing, 1) !default;
/// The large border radius used across the Components.
/// @group radii
$kendo-border-radius-lg: k-map-get($kendo-spacing, 1.5) !default;
/// The extra large border radius used across the Components.
/// @group radii
$kendo-border-radius-xl: k-map-get($kendo-spacing, 2) !default;
/// The third largest border radius used across the Components.
/// @group radii
$kendo-border-radius-xxl: k-map-get($kendo-spacing, 3) !default;
/// The second largest border radius used across the Components.
/// @group radii
$kendo-border-radius-xxxl: k-map-get($kendo-spacing, 4) !default;
/// The largest border radius used across the Components.
/// @group radii
$kendo-border-radius-full: 9999px !default;


$_default-border-radii: (
    none: $kendo-border-radius-none,
    xs: $kendo-border-radius-xs,
    sm: $kendo-border-radius-sm,
    md: $kendo-border-radius-md,
    lg: $kendo-border-radius-lg,
    xl: $kendo-border-radius-xl,
    xxl: $kendo-border-radius-xxl,
    xxxl: $kendo-border-radius-xxxl,
    full: $kendo-border-radius-full

) !default;

$kendo-border-radii: $_default-border-radii !default;

/// The global radii Map.
/// @group radii
$kendo-border-radii: k-map-merge($_default-border-radii, $kendo-border-radii);


@function k-border-radius($key) {
    $_border-radius: k-map-get($kendo-border-radii, $key);
    @return var(--kendo-border-radius-#{$key}, $_border-radius);
}

@mixin kendo-border-radius--styles() {
    :root {
        @each $key, $value in $kendo-border-radii {
            --kendo-border-radius-#{$key}: #{$value};
        }
    }
}

// #endregion
// #region @import "./_variables.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/_variables.scss
// #region @import "./functions/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
// File already imported_once. Skipping output.
// #endregion

// Options
$kendo-enable-shadows: true !default;
$kendo-enable-rounded: true !default;
$kendo-enable-gradients: true !default;
$kendo-enable-transitions: true !default;
$kendo-nested-disabled: false !default;

// Equilateral triangle variables
// stylelint-disable number-max-precision
$equilateral-index: 1.7320508076 !default;
$equilateral-height: 0.8660254038 !default;
// stylelint-enable number-max-precision

// #endregion

// #endregion

// Backward compatibility
// #region @import "./color-system/_swatch-legacy.scss"; -> scss/core/color-system/_swatch-legacy.scss
@if ($kendo-enable-color-system) {
    $kendo-color-primary: k-color( primary );
    $kendo-color-primary-contrast: k-color( on-primary );
    $kendo-color-secondary: k-color( secondary );
    $kendo-color-tertiary: k-color( tertiary );
    $kendo-color-info: k-color( info );
    $kendo-color-success: k-color( success );
    $kendo-color-warning: k-color( warning );
    $kendo-color-error: k-color( error );
    $kendo-color-dark: k-color( dark );
    $kendo-color-light: k-color( light );
    $kendo-color-inverse: $kendo-color-dark;
    $kendo-body-bg: k-color( app-surface );
    $kendo-body-text: k-color( on-app-surface );
    $kendo-subtle-text: k-color( subtle );
    $kendo-app-bg: k-color( surface );
    $kendo-app-text: $kendo-body-text;
    $kendo-app-border: k-color( border );
    $kendo-link-text: $kendo-color-primary;
    $kendo-link-hover-text: k-color( primary-hover );
    $kendo-component-bg: k-color( surface-alt );
    $kendo-component-text: $kendo-body-text;
    $kendo-component-border: $kendo-app-border;
    $kendo-base-bg: k-color( surface );
    $kendo-base-text: $kendo-body-text;
    $kendo-base-border: $kendo-app-border;
    $kendo-base-gradient: null;
    $kendo-hover-bg: k-color( base-hover );
    $kendo-hover-text: $kendo-base-text;
    $kendo-hover-border: $kendo-base-border;
    $kendo-hover-gradient: null;
    $kendo-selected-bg: $kendo-color-primary;
    $kendo-selected-text: $kendo-color-primary-contrast;
    $kendo-selected-border: $kendo-base-border;
    $kendo-selected-gradient: $kendo-base-gradient;
    $kendo-selected-hover-bg: k-color( primary-hover );
    $kendo-selected-hover-text: $kendo-selected-text;
    $kendo-selected-hover-border: $kendo-base-border;
    $kendo-selected-hover-gradient: $kendo-base-gradient;
    $kendo-disabled-text: null;
    $kendo-disabled-bg: null;
    $kendo-disabled-border: null;
    $kendo-disabled-opacity: .6;
    $kendo-disabled-filter: grayscale(.1);
    $kendo-component-header-bg: $kendo-base-bg;
    $kendo-component-header-text: $kendo-base-text;
    $kendo-component-header-border: $kendo-base-border;
    $kendo-component-header-gradient: null;
    $kendo-invalid-bg: null;
    $kendo-invalid-text: $kendo-color-error;
    $kendo-invalid-border: $kendo-color-error;
    $kendo-invalid-shadow: null;

    $kendo-theme-colors: (
        "primary": $kendo-color-primary,
        "secondary": $kendo-color-secondary,
        "tertiary": $kendo-color-tertiary,
        "info": $kendo-color-info,
        "success": $kendo-color-success,
        "warning": $kendo-color-warning,
        "error": $kendo-color-error,
        "dark": $kendo-color-dark,
        "light": $kendo-color-light,
        "inverse": $kendo-color-inverse,
    );

    $kendo-disabled-styling: (
        bg: $kendo-disabled-bg,
        color: $kendo-disabled-text,
        border: $kendo-disabled-border,
        opacity: $kendo-disabled-opacity,
        filter: $kendo-disabled-filter
    );
}

// #endregion

// Expose
@include exports("kendo-core-styles") {
    @include kendo-core--styles();

    // Elevation System
    @include kendo-elevation--styles();
    // Typography
    @include kendo-core--typography--styles();
    // Spacing
    @include kendo-spacing--styles();
    // Radii
    @include kendo-border-radius--styles();
}

// #endregion


// Typography and utils
// #region @import "./typography/_index.scss"; -> scss/typography/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "utils",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "@progress/kendo-theme-utils/scss/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/index.import.scss
// #region @import "./_functions.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/_functions.scss
// #region @import "@progress/kendo-theme-core/scss/functions/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
// File already imported_once. Skipping output.
// #endregion

// #endregion
// #region @import "./_variables.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/_variables.scss
// #region @import "@progress/kendo-theme-core/scss/color-system/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion

// #region @import "./spacing/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/spacing/index.import.scss
// #region @import "@progress/kendo-theme-core/scss/spacing/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/spacing/index.import.scss
// File already imported_once. Skipping output.
// #endregion

// #region @import "./_margin.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/spacing/_margin.scss
/// This is equivalent to `margin: 0;`.
/// @example margin: 0;
/// @name .k-m-0
/// @group margin
/// @contextType css

/// This is equivalent to `margin: 1px;`.
/// @example margin: 1px;
/// @name .k-m-1px
/// @group margin
/// @contextType css

/// This is equivalent to `margin: 0.25rem;`.
/// @example margin: 0.25rem;
/// @name .k-m-1
/// @group margin
/// @contextType css

/// This is equivalent to `margin: -1px;`.
/// @example margin: -1px;
/// @name .k-m--1px
/// @group margin
/// @contextType css

/// This is equivalent to `margin: -0.25rem;`.
/// @example margin: -0.25rem;
/// @name .k-m--1
/// @group margin
/// @contextType css

/// This is equivalent to `margin: 0.25rem;`.
/// @example margin: 0.25rem;
/// @name .k-m-xs
/// @group margin
/// @contextType css

/// This is equivalent to `margin: 0.5rem;`.
/// @example margin: 0.5rem;
/// @name .k-m-sm
/// @group margin
/// @contextType css

/// This is equivalent to `margin: 0.75rem;`.
/// @example margin: 0.75rem;
/// @name .k-m-md
/// @group margin
/// @contextType css

/// This is equivalent to `margin: 1rem;`.
/// @example margin: 1rem;
/// @name .k-m-lg
/// @group margin
/// @contextType css

/// This is equivalent to `margin: 1.5rem;`.
/// @example margin: 1.5rem;
/// @name .k-m-xl
/// @group margin
/// @contextType css

/// This is equivalent to `margin: 0.125rem;`.
/// @example margin: 0.125rem;
/// @name .k-m-thin
/// @group margin
/// @contextType css

/// This is equivalent to `margin: 1px;`.
/// @example margin: 1px;
/// @name .k-m-hair
/// @group margin
/// @contextType css

/// This is equivalent to `margin: auto;`.
/// @example margin: auto;
/// @name .k-m-auto
/// @group margin
/// @contextType css

/// This is equivalent to `margin-top: 0;`.
/// @example margin-top: 0;
/// @name .k-mt-0
/// @group margin
/// @contextType css

/// This is equivalent to `margin-top: 1px;`.
/// @example margin-top: 1px;
/// @name .k-mt-1px
/// @group margin
/// @contextType css

/// This is equivalent to `margin-top: 0.25rem;`.
/// @example margin-top: 0.25rem;
/// @name .k-mt-1
/// @group margin
/// @contextType css

/// This is equivalent to `margin-top: -1px;`.
/// @example margin-top: -1px;
/// @name .k-mt--1px
/// @group margin
/// @contextType css

/// This is equivalent to `margin-top: -0.25rem;`.
/// @example margin-top: -0.25rem;
/// @name .k-mt--1
/// @group margin
/// @contextType css

/// This is equivalent to `margin-top: 0.25rem;`.
/// @example margin-top: 0.25rem;
/// @name .k-mt-xs
/// @group margin
/// @contextType css

/// This is equivalent to `margin-top: 0.5rem;`.
/// @example margin-top: 0.5rem;
/// @name .k-mt-sm
/// @group margin
/// @contextType css

/// This is equivalent to `margin-top: 0.75rem;`.
/// @example margin-top: 0.75rem;
/// @name .k-mt-md
/// @group margin
/// @contextType css

/// This is equivalent to `margin-top: 1rem;`.
/// @example margin-top: 1rem;
/// @name .k-mt-lg
/// @group margin
/// @contextType css

/// This is equivalent to `margin-top: 1.5rem;`.
/// @example margin-top: 1.5rem;
/// @name .k-mt-xl
/// @group margin
/// @contextType css

/// This is equivalent to `margin-top: 0.125rem;`.
/// @example margin-top: 0.125rem;
/// @name .k-mt-thin
/// @group margin
/// @contextType css

/// This is equivalent to `margin-top: 1px;`.
/// @example margin-top: 1px;
/// @name .k-mt-hair
/// @group margin
/// @contextType css

/// This is equivalent to `margin-top: auto;`.
/// @example margin-top: auto;
/// @name .k-mt-auto
/// @group margin
/// @contextType css

/// This is equivalent to `margin-right: 0;`.
/// @example margin-right: 0;
/// @name .k-mr-0
/// @group margin
/// @contextType css

/// This is equivalent to `margin-right: 1px;`.
/// @example margin-right: 1px;
/// @name .k-mr-1px
/// @group margin
/// @contextType css

/// This is equivalent to `margin-right: 0.25rem;`.
/// @example margin-right: 0.25rem;
/// @name .k-mr-1
/// @group margin
/// @contextType css

/// This is equivalent to `margin-right: -1px;`.
/// @example margin-right: -1px;
/// @name .k-mr--1px
/// @group margin
/// @contextType css

/// This is equivalent to `margin-right: -0.25rem;`.
/// @example margin-right: -0.25rem;
/// @name .k-mr--1
/// @group margin
/// @contextType css

/// This is equivalent to `margin-right: 0.25rem;`.
/// @example margin-right: 0.25rem;
/// @name .k-mr-xs
/// @group margin
/// @contextType css

/// This is equivalent to `margin-right: 0.5rem;`.
/// @example margin-right: 0.5rem;
/// @name .k-mr-sm
/// @group margin
/// @contextType css

/// This is equivalent to `margin-right: 0.75rem;`.
/// @example margin-right: 0.75rem;
/// @name .k-mr-md
/// @group margin
/// @contextType css

/// This is equivalent to `margin-right: 1rem;`.
/// @example margin-right: 1rem;
/// @name .k-mr-lg
/// @group margin
/// @contextType css

/// This is equivalent to `margin-right: 1.5rem;`.
/// @example margin-right: 1.5rem;
/// @name .k-mr-xl
/// @group margin
/// @contextType css

/// This is equivalent to `margin-right: 0.125rem;`.
/// @example margin-right: 0.125rem;
/// @name .k-mr-thin
/// @group margin
/// @contextType css

/// This is equivalent to `margin-right: 1px;`.
/// @example margin-right: 1px;
/// @name .k-mr-hair
/// @group margin
/// @contextType css

/// This is equivalent to `margin-right: auto;`.
/// @example margin-right: auto;
/// @name .k-mr-auto
/// @group margin
/// @contextType css

/// This is equivalent to `margin-bottom: 0;`.
/// @example margin-bottom: 0;
/// @name .k-mb-0
/// @group margin
/// @contextType css

/// This is equivalent to `margin-bottom: 1px;`.
/// @example margin-bottom: 1px;
/// @name .k-mb-1px
/// @group margin
/// @contextType css

/// This is equivalent to `margin-bottom: 0.25rem;`.
/// @example margin-bottom: 0.25rem;
/// @name .k-mb-1
/// @group margin
/// @contextType css

/// This is equivalent to `margin-bottom: -1px;`.
/// @example margin-bottom: -1px;
/// @name .k-mb--1px
/// @group margin
/// @contextType css

/// This is equivalent to `margin-bottom: -0.25rem;`.
/// @example margin-bottom: -0.25rem;
/// @name .k-mb--1
/// @group margin
/// @contextType css

/// This is equivalent to `margin-bottom: 0.25rem;`.
/// @example margin-bottom: 0.25rem;
/// @name .k-mb-xs
/// @group margin
/// @contextType css

/// This is equivalent to `margin-bottom: 0.5rem;`.
/// @example margin-bottom: 0.5rem;
/// @name .k-mb-sm
/// @group margin
/// @contextType css

/// This is equivalent to `margin-bottom: 0.75rem;`.
/// @example margin-bottom: 0.75rem;
/// @name .k-mb-md
/// @group margin
/// @contextType css

/// This is equivalent to `margin-bottom: 1rem;`.
/// @example margin-bottom: 1rem;
/// @name .k-mb-lg
/// @group margin
/// @contextType css

/// This is equivalent to `margin-bottom: 1.5rem;`.
/// @example margin-bottom: 1.5rem;
/// @name .k-mb-xl
/// @group margin
/// @contextType css

/// This is equivalent to `margin-bottom: 0.125rem;`.
/// @example margin-bottom: 0.125rem;
/// @name .k-mb-thin
/// @group margin
/// @contextType css

/// This is equivalent to `margin-bottom: 1px;`.
/// @example margin-bottom: 1px;
/// @name .k-mb-hair
/// @group margin
/// @contextType css

/// This is equivalent to `margin-bottom: auto;`.
/// @example margin-bottom: auto;
/// @name .k-mb-auto
/// @group margin
/// @contextType css

/// This is equivalent to `margin-left: 0;`.
/// @example margin-left: 0;
/// @name .k-ml-0
/// @group margin
/// @contextType css

/// This is equivalent to `margin-left: 1px;`.
/// @example margin-left: 1px;
/// @name .k-ml-1px
/// @group margin
/// @contextType css

/// This is equivalent to `margin-left: 0.25rem;`.
/// @example margin-left: 0.25rem;
/// @name .k-ml-1
/// @group margin
/// @contextType css

/// This is equivalent to `margin-left: -1px;`.
/// @example margin-left: -1px;
/// @name .k-ml--1px
/// @group margin
/// @contextType css

/// This is equivalent to `margin-left: -0.25rem;`.
/// @example margin-left: -0.25rem;
/// @name .k-ml--1
/// @group margin
/// @contextType css

/// This is equivalent to `margin-left: 0.25rem;`.
/// @example margin-left: 0.25rem;
/// @name .k-ml-xs
/// @group margin
/// @contextType css

/// This is equivalent to `margin-left: 0.5rem;`.
/// @example margin-left: 0.5rem;
/// @name .k-ml-sm
/// @group margin
/// @contextType css

/// This is equivalent to `margin-left: 0.75rem;`.
/// @example margin-left: 0.75rem;
/// @name .k-ml-md
/// @group margin
/// @contextType css

/// This is equivalent to `margin-left: 1rem;`.
/// @example margin-left: 1rem;
/// @name .k-ml-lg
/// @group margin
/// @contextType css

/// This is equivalent to `margin-left: 1.5rem;`.
/// @example margin-left: 1.5rem;
/// @name .k-ml-xl
/// @group margin
/// @contextType css

/// This is equivalent to `margin-left: 0.125rem;`.
/// @example margin-left: 0.125rem;
/// @name .k-ml-thin
/// @group margin
/// @contextType css

/// This is equivalent to `margin-left: 1px;`.
/// @example margin-left: 1px;
/// @name .k-ml-hair
/// @group margin
/// @contextType css

/// This is equivalent to `margin-left: auto;`.
/// @example margin-left: auto;
/// @name .k-ml-auto
/// @group margin
/// @contextType css

/// This is equivalent to `margin-inline: 0;`.
/// @example margin-inline: 0;
/// @name .k-mx-0
/// @group margin
/// @contextType css

/// This is equivalent to `margin-inline: 1px;`.
/// @example margin-inline: 1px;
/// @name .k-mx-1px
/// @group margin
/// @contextType css

/// This is equivalent to `margin-inline: 0.25rem;`.
/// @example margin-inline: 0.25rem;
/// @name .k-mx-1
/// @group margin
/// @contextType css

/// This is equivalent to `margin-inline: -1px;`.
/// @example margin-inline: -1px;
/// @name .k-mx--1px
/// @group margin
/// @contextType css

/// This is equivalent to `margin-inline: -0.25rem;`.
/// @example margin-inline: -0.25rem;
/// @name .k-mx--1
/// @group margin
/// @contextType css

/// This is equivalent to `margin-inline: 0.25rem;`.
/// @example margin-inline: 0.25rem;
/// @name .k-mx-xs
/// @group margin
/// @contextType css

/// This is equivalent to `margin-inline: 0.5rem;`.
/// @example margin-inline: 0.5rem;
/// @name .k-mx-sm
/// @group margin
/// @contextType css

/// This is equivalent to `margin-inline: 0.75rem;`.
/// @example margin-inline: 0.75rem;
/// @name .k-mx-md
/// @group margin
/// @contextType css

/// This is equivalent to `margin-inline: 1rem;`.
/// @example margin-inline: 1rem;
/// @name .k-mx-lg
/// @group margin
/// @contextType css

/// This is equivalent to `margin-inline: 1.5rem;`.
/// @example margin-inline: 1.5rem;
/// @name .k-mx-xl
/// @group margin
/// @contextType css

/// This is equivalent to `margin-inline: 0.125rem;`.
/// @example margin-inline: 0.125rem;
/// @name .k-mx-thin
/// @group margin
/// @contextType css

/// This is equivalent to `margin-inline: 1px;`.
/// @example margin-inline: 1px;
/// @name .k-mx-hair
/// @group margin
/// @contextType css

/// This is equivalent to `margin-inline: auto;`.
/// @example margin-inline: auto;
/// @name .k-mx-auto
/// @group margin
/// @contextType css

/// This is equivalent to `margin-block: 0;`.
/// @example margin-block: 0;
/// @name .k-my-0
/// @group margin
/// @contextType css

/// This is equivalent to `margin-block: 1px;`.
/// @example margin-block: 1px;
/// @name .k-my-1px
/// @group margin
/// @contextType css

/// This is equivalent to `margin-block: 0.25rem;`.
/// @example margin-block: 0.25rem;
/// @name .k-my-1
/// @group margin
/// @contextType css

/// This is equivalent to `margin-block: -1px;`.
/// @example margin-block: -1px;
/// @name .k-my--1px
/// @group margin
/// @contextType css

/// This is equivalent to `margin-block: -0.25rem;`.
/// @example margin-block: -0.25rem;
/// @name .k-my--1
/// @group margin
/// @contextType css

/// This is equivalent to `margin-block: 0.25rem;`.
/// @example margin-block: 0.25rem;
/// @name .k-my-xs
/// @group margin
/// @contextType css

/// This is equivalent to `margin-block: 0.5rem;`.
/// @example margin-block: 0.5rem;
/// @name .k-my-sm
/// @group margin
/// @contextType css

/// This is equivalent to `margin-block: 0.75rem;`.
/// @example margin-block: 0.75rem;
/// @name .k-my-md
/// @group margin
/// @contextType css

/// This is equivalent to `margin-block: 1rem;`.
/// @example margin-block: 1rem;
/// @name .k-my-lg
/// @group margin
/// @contextType css

/// This is equivalent to `margin-block: 1.5rem;`.
/// @example margin-block: 1.5rem;
/// @name .k-my-xl
/// @group margin
/// @contextType css

/// This is equivalent to `margin-block: 0.125rem;`.
/// @example margin-block: 0.125rem;
/// @name .k-my-thin
/// @group margin
/// @contextType css

/// This is equivalent to `margin-block: 1px;`.
/// @example margin-block: 1px;
/// @name .k-my-hair
/// @group margin
/// @contextType css

/// This is equivalent to `margin-block: auto;`.
/// @example margin-block: auto;
/// @name .k-my-auto
/// @group margin
/// @contextType css

@mixin kendo-utils--spacing--margin() {

    // Margin utility classes
    $kendo-utils-margin: k-map-get( $kendo-utils, "margin" ) !default;
    @include generate-utils( m, margin, $kendo-utils-margin, $css-var: "spacing" );
    @include generate-utils( mt, margin-top, $kendo-utils-margin, $css-var: "spacing" );
    @include generate-utils( mr, margin-right, $kendo-utils-margin, $css-var: "spacing" );
    @include generate-utils( mb, margin-bottom, $kendo-utils-margin, $css-var: "spacing" );
    @include generate-utils( ml, margin-left, $kendo-utils-margin, $css-var: "spacing" );
    @include generate-utils( mx, margin-inline, $kendo-utils-margin, $css-var: "spacing" );
    @include generate-utils( my, margin-block, $kendo-utils-margin, $css-var: "spacing" );

}

// #endregion
// #region @import "./_padding.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/spacing/_padding.scss
/// This is equivalent to `padding: 0;`.
/// @example padding: 0;
/// @name .k-p-0
/// @group padding
/// @contextType css

/// This is equivalent to `padding: 1px;`.
/// @example padding: 1px;
/// @name .k-p-1px
/// @group padding
/// @contextType css

/// This is equivalent to `padding: 0.25rem;`.
/// @example padding: 0.25rem;
/// @name .k-p-1
/// @group padding
/// @contextType css

/// This is equivalent to `padding: 0.25rem;`.
/// @example padding: 0.25rem;
/// @name .k-p-xs
/// @group padding
/// @contextType css

/// This is equivalent to `padding: 0.5rem;`.
/// @example padding: 0.5rem;
/// @name .k-p-sm
/// @group padding
/// @contextType css

/// This is equivalent to `padding: 0.75rem;`.
/// @example padding: 0.75rem;
/// @name .k-p-md
/// @group padding
/// @contextType css

/// This is equivalent to `padding: 1rem;`.
/// @example padding: 1rem;
/// @name .k-p-lg
/// @group padding
/// @contextType css

/// This is equivalent to `padding: 1.5rem;`.
/// @example padding: 1.5rem;
/// @name .k-p-xl
/// @group padding
/// @contextType css

/// This is equivalent to `padding: 0.125rem;`.
/// @example padding: 0.125rem;
/// @name .k-p-thin
/// @group padding
/// @contextType css

/// This is equivalent to `padding: 1px;`.
/// @example padding: 1px;
/// @name .k-p-hair
/// @group padding
/// @contextType css

/// This is equivalent to `padding: auto;`.
/// @example padding: auto;
/// @name .k-p-auto
/// @group padding
/// @contextType css

/// This is equivalent to `padding-top: 0;`.
/// @example padding-top: 0;
/// @name .k-pt-0
/// @group padding
/// @contextType css

/// This is equivalent to `padding-top: 1px;`.
/// @example padding-top: 1px;
/// @name .k-pt-1px
/// @group padding
/// @contextType css

/// This is equivalent to `padding-top: 0.25rem;`.
/// @example padding-top: 0.25rem;
/// @name .k-pt-1
/// @group padding
/// @contextType css

/// This is equivalent to `padding-top: 0.25rem;`.
/// @example padding-top: 0.25rem;
/// @name .k-pt-xs
/// @group padding
/// @contextType css

/// This is equivalent to `padding-top: 0.5rem;`.
/// @example padding-top: 0.5rem;
/// @name .k-pt-sm
/// @group padding
/// @contextType css

/// This is equivalent to `padding-top: 0.75rem;`.
/// @example padding-top: 0.75rem;
/// @name .k-pt-md
/// @group padding
/// @contextType css

/// This is equivalent to `padding-top: 1rem;`.
/// @example padding-top: 1rem;
/// @name .k-pt-lg
/// @group padding
/// @contextType css

/// This is equivalent to `padding-top: 1.5rem;`.
/// @example padding-top: 1.5rem;
/// @name .k-pt-xl
/// @group padding
/// @contextType css

/// This is equivalent to `padding-top: 0.125rem;`.
/// @example padding-top: 0.125rem;
/// @name .k-pt-thin
/// @group padding
/// @contextType css

/// This is equivalent to `padding-top: 1px;`.
/// @example padding-top: 1px;
/// @name .k-pt-hair
/// @group padding
/// @contextType css

/// This is equivalent to `padding-top: auto;`.
/// @example padding-top: auto;
/// @name .k-pt-auto
/// @group padding
/// @contextType css

/// This is equivalent to `padding-right: 0;`.
/// @example padding-right: 0;
/// @name .k-pr-0
/// @group padding
/// @contextType css

/// This is equivalent to `padding-right: 1px;`.
/// @example padding-right: 1px;
/// @name .k-pr-1px
/// @group padding
/// @contextType css

/// This is equivalent to `padding-right: 0.25rem;`.
/// @example padding-right: 0.25rem;
/// @name .k-pr-1
/// @group padding
/// @contextType css

/// This is equivalent to `padding-right: 0.25rem;`.
/// @example padding-right: 0.25rem;
/// @name .k-pr-xs
/// @group padding
/// @contextType css

/// This is equivalent to `padding-right: 0.5rem;`.
/// @example padding-right: 0.5rem;
/// @name .k-pr-sm
/// @group padding
/// @contextType css

/// This is equivalent to `padding-right: 0.75rem;`.
/// @example padding-right: 0.75rem;
/// @name .k-pr-md
/// @group padding
/// @contextType css

/// This is equivalent to `padding-right: 1rem;`.
/// @example padding-right: 1rem;
/// @name .k-pr-lg
/// @group padding
/// @contextType css

/// This is equivalent to `padding-right: 1.5rem;`.
/// @example padding-right: 1.5rem;
/// @name .k-pr-xl
/// @group padding
/// @contextType css

/// This is equivalent to `padding-right: 0.125rem;`.
/// @example padding-right: 0.125rem;
/// @name .k-pr-thin
/// @group padding
/// @contextType css

/// This is equivalent to `padding-right: 1px;`.
/// @example padding-right: 1px;
/// @name .k-pr-hair
/// @group padding
/// @contextType css

/// This is equivalent to `padding-right: auto;`.
/// @example padding-right: auto;
/// @name .k-pr-auto
/// @group padding
/// @contextType css

/// This is equivalent to `padding-bottom: 0;`.
/// @example padding-bottom: 0;
/// @name .k-pb-0
/// @group padding
/// @contextType css

/// This is equivalent to `padding-bottom: 1px;`.
/// @example padding-bottom: 1px;
/// @name .k-pb-1px
/// @group padding
/// @contextType css

/// This is equivalent to `padding-bottom: 0.25rem;`.
/// @example padding-bottom: 0.25rem;
/// @name .k-pb-1
/// @group padding
/// @contextType css

/// This is equivalent to `padding-bottom: 0.25rem;`.
/// @example padding-bottom: 0.25rem;
/// @name .k-pb-xs
/// @group padding
/// @contextType css

/// This is equivalent to `padding-bottom: 0.5rem;`.
/// @example padding-bottom: 0.5rem;
/// @name .k-pb-sm
/// @group padding
/// @contextType css

/// This is equivalent to `padding-bottom: 0.75rem;`.
/// @example padding-bottom: 0.75rem;
/// @name .k-pb-md
/// @group padding
/// @contextType css

/// This is equivalent to `padding-bottom: 1rem;`.
/// @example padding-bottom: 1rem;
/// @name .k-pb-lg
/// @group padding
/// @contextType css

/// This is equivalent to `padding-bottom: 1.5rem;`.
/// @example padding-bottom: 1.5rem;
/// @name .k-pb-xl
/// @group padding
/// @contextType css

/// This is equivalent to `padding-bottom: 0.125rem;`.
/// @example padding-bottom: 0.125rem;
/// @name .k-pb-thin
/// @group padding
/// @contextType css

/// This is equivalent to `padding-bottom: 1px;`.
/// @example padding-bottom: 1px;
/// @name .k-pb-hair
/// @group padding
/// @contextType css

/// This is equivalent to `padding-bottom: auto;`.
/// @example padding-bottom: auto;
/// @name .k-pb-auto
/// @group padding
/// @contextType css

/// This is equivalent to `padding-left: 0;`.
/// @example padding-left: 0;
/// @name .k-pl-0
/// @group padding
/// @contextType css

/// This is equivalent to `padding-left: 1px;`.
/// @example padding-left: 1px;
/// @name .k-pl-1px
/// @group padding
/// @contextType css

/// This is equivalent to `padding-left: 0.25rem;`.
/// @example padding-left: 0.25rem;
/// @name .k-pl-1
/// @group padding
/// @contextType css

/// This is equivalent to `padding-left: 0.25rem;`.
/// @example padding-left: 0.25rem;
/// @name .k-pl-xs
/// @group padding
/// @contextType css

/// This is equivalent to `padding-left: 0.5rem;`.
/// @example padding-left: 0.5rem;
/// @name .k-pl-sm
/// @group padding
/// @contextType css

/// This is equivalent to `padding-left: 0.75rem;`.
/// @example padding-left: 0.75rem;
/// @name .k-pl-md
/// @group padding
/// @contextType css

/// This is equivalent to `padding-left: 1rem;`.
/// @example padding-left: 1rem;
/// @name .k-pl-lg
/// @group padding
/// @contextType css

/// This is equivalent to `padding-left: 1.5rem;`.
/// @example padding-left: 1.5rem;
/// @name .k-pl-xl
/// @group padding
/// @contextType css

/// This is equivalent to `padding-left: 0.125rem;`.
/// @example padding-left: 0.125rem;
/// @name .k-pl-thin
/// @group padding
/// @contextType css

/// This is equivalent to `padding-left: 1px;`.
/// @example padding-left: 1px;
/// @name .k-pl-hair
/// @group padding
/// @contextType css

/// This is equivalent to `padding-left: auto;`.
/// @example padding-left: auto;
/// @name .k-pl-auto
/// @group padding
/// @contextType css

/// This is equivalent to `padding-inline: 0;`.
/// @example padding-inline: 0;
/// @name .k-px-0
/// @group padding
/// @contextType css

/// This is equivalent to `padding-inline: 1px;`.
/// @example padding-inline: 1px;
/// @name .k-px-1px
/// @group padding
/// @contextType css

/// This is equivalent to `padding-inline: 0.25rem;`.
/// @example padding-inline: 0.25rem;
/// @name .k-px-1
/// @group padding
/// @contextType css

/// This is equivalent to `padding-inline: 0.25rem;`.
/// @example padding-inline: 0.25rem;
/// @name .k-px-xs
/// @group padding
/// @contextType css

/// This is equivalent to `padding-inline: 0.5rem;`.
/// @example padding-inline: 0.5rem;
/// @name .k-px-sm
/// @group padding
/// @contextType css

/// This is equivalent to `padding-inline: 0.75rem;`.
/// @example padding-inline: 0.75rem;
/// @name .k-px-md
/// @group padding
/// @contextType css

/// This is equivalent to `padding-inline: 1rem;`.
/// @example padding-inline: 1rem;
/// @name .k-px-lg
/// @group padding
/// @contextType css

/// This is equivalent to `padding-inline: 1.5rem;`.
/// @example padding-inline: 1.5rem;
/// @name .k-px-xl
/// @group padding
/// @contextType css

/// This is equivalent to `padding-inline: 0.125rem;`.
/// @example padding-inline: 0.125rem;
/// @name .k-px-thin
/// @group padding
/// @contextType css

/// This is equivalent to `padding-inline: 1px;`.
/// @example padding-inline: 1px;
/// @name .k-px-hair
/// @group padding
/// @contextType css

/// This is equivalent to `padding-inline: auto;`.
/// @example padding-inline: auto;
/// @name .k-px-auto
/// @group padding
/// @contextType css

/// This is equivalent to `padding-block: 0;`.
/// @example padding-block: 0;
/// @name .k-py-0
/// @group padding
/// @contextType css

/// This is equivalent to `padding-block: 1px;`.
/// @example padding-block: 1px;
/// @name .k-py-1px
/// @group padding
/// @contextType css

/// This is equivalent to `padding-block: 0.25rem;`.
/// @example padding-block: 0.25rem;
/// @name .k-py-1
/// @group padding
/// @contextType css

/// This is equivalent to `padding-block: 0.25rem;`.
/// @example padding-block: 0.25rem;
/// @name .k-py-xs
/// @group padding
/// @contextType css

/// This is equivalent to `padding-block: 0.5rem;`.
/// @example padding-block: 0.5rem;
/// @name .k-py-sm
/// @group padding
/// @contextType css

/// This is equivalent to `padding-block: 0.75rem;`.
/// @example padding-block: 0.75rem;
/// @name .k-py-md
/// @group padding
/// @contextType css

/// This is equivalent to `padding-block: 1rem;`.
/// @example padding-block: 1rem;
/// @name .k-py-lg
/// @group padding
/// @contextType css

/// This is equivalent to `padding-block: 1.5rem;`.
/// @example padding-block: 1.5rem;
/// @name .k-py-xl
/// @group padding
/// @contextType css

/// This is equivalent to `padding-block: 0.125rem;`.
/// @example padding-block: 0.125rem;
/// @name .k-py-thin
/// @group padding
/// @contextType css

/// This is equivalent to `padding-block: 1px;`.
/// @example padding-block: 1px;
/// @name .k-py-hair
/// @group padding
/// @contextType css

/// This is equivalent to `padding-block: auto;`.
/// @example padding-block: auto;
/// @name .k-py-auto
/// @group padding
/// @contextType css

@mixin kendo-utils--spacing--padding() {

    // Padding utility classes
    $kendo-utils-padding: k-map-get( $kendo-utils, "padding" ) !default;
    @include generate-utils( p, padding, $kendo-utils-padding, $css-var: "spacing" );
    @include generate-utils( pt, padding-top, $kendo-utils-padding, $css-var: "spacing" );
    @include generate-utils( pr, padding-right, $kendo-utils-padding, $css-var: "spacing" );
    @include generate-utils( pb, padding-bottom, $kendo-utils-padding, $css-var: "spacing" );
    @include generate-utils( pl, padding-left, $kendo-utils-padding, $css-var: "spacing" );
    @include generate-utils( px, padding-inline, $kendo-utils-padding, $css-var: "spacing" );
    @include generate-utils( py, padding-block, $kendo-utils-padding, $css-var: "spacing" );

}

// #endregion
// #region @import "./_space-between.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/spacing/_space-between.scss
// TODO: docs

@mixin kendo-utils--spacing--space-between() {

    // Space between utility classes
    $kendo-utils-space-between: k-map-get( $kendo-utils, "space-between" ) !default;
    @each $key, $value in $kendo-utils-space-between {
        $_key: k-escape-class-name( $key );

        .#{$kendo-prefix}space-x-#{$_key} > * + * {
            margin-inline-start: $value;
        }
        .#{$kendo-prefix}space-y-#{$_key} > * + * {
            margin-block-start: $value;
        }
    }

}

// #endregion


@mixin kendo-utils--spacing() {
    @include kendo-utils--spacing--margin();
    @include kendo-utils--spacing--padding();
    @include kendo-utils--spacing--space-between();
}

// #endregion

$kendo-prefix: k- !default;
$kendo-important: true !default;
$kendo-enable-color-system: false !default;

$kendo-theme-colors: () !default;

$kendo-font-sizes: () !default;

$kendo-util-colors-list: (
    app-surface,
    on-app-surface,
    subtle,
    surface,
    surface-alt,
    border,
    border-alt,
    base-subtle,
    base-emphasis,
    primary-subtle,
    primary,
    primary-emphasis,
    secondary-subtle,
    secondary,
    secondary-emphasis,
    tertiary-subtle,
    tertiary,
    tertiary-emphasis,
    info-subtle,
    info,
    info-emphasis,
    success-subtle,
    success,
    success-emphasis,
    warning-subtle,
    warning,
    warning-emphasis,
    error-subtle,
    error,
    error-emphasis,
    light-subtle,
    light,
    light-emphasis,
    dark-subtle,
    dark,
    dark-emphasis,
) !default;

$kendo-util-colors: () !default;
@each $name, $color in $kendo-colors {
    @each $util-color in $kendo-util-colors-list {
        @if ( $name == $util-color ) {
            $kendo-util-colors: k-map-merge( $kendo-util-colors, ( $name: $color) );
        }
    }
}

$kendo-spacing: () !default;

$kendo-sizing: () !default;

$kendo-border-radii: () !default;

$kendo-utils: (

    // Accessibility
    "screen-readers": true,

    // Layout
    "aspect-ratio": (
        auto: auto,
        1: 1,
        square: k-string-unquote("1 / 1"),
        video: k-string-unquote("16 / 9")
    ),
    "container": (),
    "columns": (
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: 6,
        7: 7,
        8: 8,
        9: 9,
        10: 10,
        11: 11,
        12: 12,
        auto: auto
    ),
    "break-after": (),
    "break-before": (),
    "break-inside": (),
    "box-decoration-break": (),
    "box-sizing": (
        border: border-box,
        content: content-box
    ),
    "display": (
        none,
        contents,
        block,
        inline,
        inline-block,
        flex,
        inline-flex,
        grid,
        inline-grid,
        table,
        inline-table,
        table-row,
        table-cell,
        list-item
    ),
    "float": (
        left,
        right,
        none
    ),
    "clear": (
        left,
        right,
        both,
        none
    ),
    "isolation": (),
    "object-fit": (
        contain,
        cover,
        fill,
        scale-down,
        initial,
        none
    ),
    "object-position": (
        center: center,
        top: top,
        right: right,
        bottom: bottom,
        left: left,
        top-left: top left,
        top-right: top right,
        bottom-left: bottom left,
        bottom-right: bottom right
    ),
    "overflow": (
        auto: auto,
        hidden: hidden,
        visible: visible,
        scroll: scroll,
        clip: clip
    ),
    "overscroll": (),
    "placement": k-map-merge( $kendo-spacing, (
        -1: -1px
    )),
    "position": (
        static,
        relative,
        absolute,
        fixed,
        sticky
    ),
    "inset": (
        0: 0,
        1: 1px,
        -1: -1px
    ),
    "visibility": (
        visible: visible,
        invisible: hidden,
        collapse: collapse
    ),
    "zindex": (
        0: 0,
        10: 10,
        20: 20,
        30: 30,
        40: 40,
        50: 50,
        auto: auto
    ),

    // Flex / Grid
    "flex-direction": (
        row: row,
        row-reverse: row-reverse,
        col: column,
        col-reverse: column-reverse
    ),
    "flex-wrap": (
        wrap,
        wrap-reverse,
        nowrap
    ),
    "flex": (
        1: 1 1 0%,
        auto: 1 1 auto,
        initial: 0 1 auto,
        none: none
    ),
    "flex-grow": (
        DEFAULT: 1,
        0: 0
    ),
    "flex-shrink": (
        DEFAULT: 1,
        0: 0
    ),
    "flex-basis": $kendo-sizing,
    "order": (
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: 6,
        7: 7,
        8: 8,
        9: 9,
        10: 10,
        11: 11,
        12: 12,
        first: -9999,
        last: 9999,
        none: 0
    ),
    "grid-template-columns": (
        1: repeat( 1, minmax( 0, 1fr ) ),
        2: repeat( 2, minmax( 0, 1fr ) ),
        3: repeat( 3, minmax( 0, 1fr ) ),
        4: repeat( 4, minmax( 0, 1fr ) ),
        5: repeat( 5, minmax( 0, 1fr ) ),
        6: repeat( 6, minmax( 0, 1fr ) ),
        7: repeat( 7, minmax( 0, 1fr ) ),
        8: repeat( 8, minmax( 0, 1fr ) ),
        9: repeat( 9, minmax( 0, 1fr ) ),
        10: repeat( 10, minmax( 0, 1fr ) ),
        11: repeat( 11, minmax( 0, 1fr ) ),
        12: repeat( 12, minmax( 0, 1fr ) ),
        none: none
    ),
    "grid-template-rows": (
        1: repeat( 1, minmax( 0, 1fr ) ),
        2: repeat( 2, minmax( 0, 1fr ) ),
        3: repeat( 3, minmax( 0, 1fr ) ),
        4: repeat( 4, minmax( 0, 1fr ) ),
        5: repeat( 5, minmax( 0, 1fr ) ),
        6: repeat( 6, minmax( 0, 1fr ) ),
        7: repeat( 7, minmax( 0, 1fr ) ),
        8: repeat( 8, minmax( 0, 1fr ) ),
        9: repeat( 9, minmax( 0, 1fr ) ),
        10: repeat( 10, minmax( 0, 1fr ) ),
        11: repeat( 11, minmax( 0, 1fr ) ),
        12: repeat( 12, minmax( 0, 1fr ) ),
        none: none
    ),
    "grid-column-start": (
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: 6,
        7: 7,
        8: 8,
        9: 9,
        10: 10,
        11: 11,
        12: 12,
        13: 13,
        -1: -1,
        -2: -2,
        -3: -3,
        -4: -4,
        -5: -5,
        -6: -6,
        -7: -7,
        -8: -8,
        -9: -9,
        -10: -10,
        -11: -11,
        -12: -12,
        -13: -13,
        auto: auto
    ),
    "grid-column-end": (
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: 6,
        7: 7,
        8: 8,
        9: 9,
        10: 10,
        11: 11,
        12: 12,
        13: 13,
        -1: -1,
        -2: -2,
        -3: -3,
        -4: -4,
        -5: -5,
        -6: -6,
        -7: -7,
        -8: -8,
        -9: -9,
        -10: -10,
        -11: -11,
        -12: -12,
        -13: -13,
        auto: auto
    ),
    "grid-column-span": (
        1: span 1 / span 1,
        2: span 2 / span 2,
        3: span 3 / span 3,
        4: span 4 / span 4,
        5: span 5 / span 5,
        6: span 6 / span 6,
        7: span 7 / span 7,
        8: span 8 / span 8,
        9: span 9 / span 9,
        10: span 10 / span 10,
        11: span 11 / span 11,
        12: span 12 / span 12,
        full: k-string-unquote("1 / -1"),
        auto: auto
    ),
    "grid-row-start": (
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: 6,
        7: 7,
        8: 8,
        9: 9,
        10: 10,
        11: 11,
        12: 12,
        13: 13,
        -1: -1,
        -2: -2,
        -3: -3,
        -4: -4,
        -5: -5,
        -6: -6,
        -7: -7,
        -8: -8,
        -9: -9,
        -10: -10,
        -11: -11,
        -12: -12,
        -13: -13,
        auto: auto
    ),
    "grid-row-end": (
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: 6,
        7: 7,
        8: 8,
        9: 9,
        10: 10,
        11: 11,
        12: 12,
        13: 13,
        -1: -1,
        -2: -2,
        -3: -3,
        -4: -4,
        -5: -5,
        -6: -6,
        -7: -7,
        -8: -8,
        -9: -9,
        -10: -10,
        -11: -11,
        -12: -12,
        -13: -13,
        auto: auto
    ),
    "grid-row-span": (
        1: span 1 / span 1,
        2: span 2 / span 2,
        3: span 3 / span 3,
        4: span 4 / span 4,
        5: span 5 / span 5,
        6: span 6 / span 6,
        7: span 7 / span 7,
        8: span 8 / span 8,
        9: span 9 / span 9,
        10: span 10 / span 10,
        11: span 11 / span 11,
        12: span 12 / span 12,
        full: span 1 / span -1,
        auto: auto
    ),
    "grid-auto-flow": (
        row: row,
        col: column,
        dense: dense,
        row-dense: row dense,
        col-dense: column dense,
        unset: unset
    ),
    "grid-auto-columns": (
        auto: auto,
        min: min-content,
        max: max-content,
        fr: minmax( 0, 1fr ),
    ),
    "grid-auto-rows": (
        auto: auto,
        min: min-content,
        max: max-content,
        fr: minmax( 0, 1fr ),
    ),
    "gap": k-map-merge( $kendo-spacing, (
        // TODO: remove this extension once we fix docs
        xs: k-spacing(1),
        sm: k-spacing(2),
        md: k-spacing(3),
        lg: k-spacing(4),
        xl: k-spacing(6),
        thin: k-spacing(0.5),
        hair: k-spacing(1px)
    )),
    "align-content": (
        normal: normal,
        stretch: stretch,
        center: center,
        start: start,
        end: end,
        flex-start: flex-start,
        flex-end: flex-end,
        baseline: baseline,
        first-baseline: first baseline,
        last-baseline: last baseline,
        between: space-between,
        around: space-around,
        evenly: space-evenly
    ),
    "align-items": (
        normal: normal,
        stretch: stretch,
        center: center,
        start: start,
        end: end,
        flex-start: flex-start,
        flex-end: flex-end,
        baseline: baseline,
        first-baseline: first baseline,
        last-baseline: last baseline,
        self-start: self-start,
        self-end: self-end
    ),
    "align-self": (
        auto: auto,
        normal: normal,
        stretch: stretch,
        center: center,
        start: start,
        end: end,
        flex-start: flex-start,
        flex-end: flex-end,
        baseline: baseline,
        first-baseline: first baseline,
        last-baseline: last baseline,
        self-start: self-start,
        self-end: self-end
    ),
    "justify-content": (
        normal: normal,
        stretch: stretch,
        center: center,
        start: start,
        end: end,
        flex-start: flex-start,
        flex-end: flex-end,
        left: left,
        right: right,
        baseline: baseline,
        first-baseline: first baseline,
        last-baseline: last baseline,
        between: space-between,
        around: space-around,
        evenly: space-evenly
    ),
    "justify-items": (
        normal: normal,
        stretch: stretch,
        center: center,
        start: start,
        end: end,
        flex-start: flex-start,
        flex-end: flex-end,
        self-start: self-start,
        self-end: self-end,
        left: left,
        right: right,
        baseline: baseline,
        first-baseline: first baseline,
        last-baseline: last baseline
    ),
    "justify-self": (
        auto: auto,
        normal: normal,
        stretch: stretch,
        center: center,
        start: start,
        end: end,
        flex-start: flex-start,
        flex-end: flex-end,
        self-start: self-start,
        self-end: self-end,
        baseline: baseline,
        first-baseline: first baseline,
        last-baseline: last baseline
    ),
    "place-content": (
        normal: normal,
        stretch: stretch,
        center: center,
        start: start,
        end: end,
        flex-start: flex-start,
        flex-end: flex-end,
        baseline: baseline,
        between: space-between,
        around: space-around,
        evenly: space-evenly
    ),
    "place-items": (
        normal: normal,
        stretch: stretch,
        center: center,
        start: start,
        end: end,
        flex-start: flex-start,
        flex-end: flex-end,
        self-start: self-start,
        self-end: self-end,
        baseline: baseline
    ),
    "place-self": (
        auto: auto,
        normal: normal,
        stretch: stretch,
        center: center,
        start: start,
        end: end,
        flex-start: flex-start,
        flex-end: flex-end,
        self-start: self-start,
        self-end: self-end,
        baseline: baseline
    ),

    // Spacing
    "margin": k-map-merge( $kendo-spacing,
        k-map-negate( $kendo-spacing), (
        // TODO: remove this extension once we fix docs
        xs: k-spacing(1),
        sm: k-spacing(2),
        md: k-spacing(3),
        lg: k-spacing(4),
        xl: k-spacing(6),
        thin: k-spacing(0.5),
        hair: k-spacing(1px),
        auto: auto
    )),
    "padding": k-map-merge( $kendo-spacing, (
        // TODO: remove this extension once we fix docs
        xs: k-spacing(1),
        sm: k-spacing(2),
        md: k-spacing(3),
        lg: k-spacing(4),
        xl: k-spacing(6),
        thin: k-spacing(0.5),
        hair: k-spacing(1px)
    )),
    "space-between": (),

    // Sizing
    "width": k-map-merge( $kendo-sizing, (
        screen: 100vw
    )),
    "min-width": (
        0: 0,
        full: 100%,
        screen: 100vw,
        min: min-content,
        max: max-content,
        fit: fit-content
    ),
    "max-width": (
        none: none,
        0: 0,
        full: 100%,
        screen: 100vw,
        min: min-content,
        max: max-content,
        fit: fit-content
    ),
    "height": k-map-merge( $kendo-sizing, (
        screen: 100vh
    )),
    "min-height": (
        0: 0,
        full: 100%,
        screen: 100vh,
        min: min-content,
        max: max-content,
        fit: fit-content
    ),
    "max-height": (
        none: none,
        0: 0,
        full: 100%,
        screen: 100vh,
        min: min-content,
        max: max-content,
        fit: fit-content
    ),

    // Typography
    "font-family": (),
    "font-size": (),
    "font-smoothing": (),
    "font-style": (
        italic: italic,
        non-italic: normal,
        oblique: oblique
    ),
    "font-weight": (),
    "font-variant-numeric": (),
    "letter-spacing": (),
    "line-height": (),
    "list-style-type": (
        none,
        disc,
        decimal
    ),
    "list-style-position": (),
    "text-align": (
        left,
        right,
        center,
        justify,
        start,
        end
    ),
    "text-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
        "inherit": inherit,
        "current": currentColor,
        "transparent": transparent,
        "black": black,
        "white": white
    )),
    "text-decoration": (
        underline: underline,
        overline: overline,
        line-through: line-through,
        no-underline: none
    ),
    "text-decoration-width": (),
    "text-decoration-style": (),
    "text-decoration-color": (),
    "text-decoration-offset": (),
    "text-transform": (
        uppercase: uppercase,
        lowercase: lowercase,
        capitalize: capitalize,
        normal-case: none
    ),
    "text-overflow": (
        clip: clip,
        ellipsis: ellipsis
    ),
    "text-indent": (),
    "vertical-align": (
        baseline,
        top,
        middle,
        bottom,
        text-top,
        text-bottom,
        sub,
        super
    ),
    "white-space": (
        normal,
        nowrap,
        pre,
        pre-line,
        pre-wrap,
        break-spaces
    ),
    "word-break": (),

    // Background
    "background-clip": (
        border: border-box,
        padding: padding-box,
        content: content-box,
        text: text
    ),
    "background-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
        "inherit": inherit,
        "transparent": transparent,
        "black": black,
        "white": white
    )),
    "background-position": (
        center: center,
        top: top,
        right: right,
        bottom: bottom,
        left: left,
        top-left: top left,
        top-right: top right,
        bottom-left: bottom left,
        bottom-right: bottom right
    ),
    "background-size": (
        auto,
        cover,
        contain
    ),

    // Border
    "border-width": (
        DEFAULT: 1px,
        0: 0,
        2: 2px,
        4: 4px,
        8: 8px
    ),
    "border-style": (
        solid,
        dashed,
        dotted,
        double,
        // groove,
        // ridge,
        inset,
        outset,
        hidden,
        none
    ),
    "border-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
        "inherit": inherit,
        "current": currentColor,
        "transparent": transparent,
        "black": black,
        "white": white
    )),
    "border-radius": $kendo-border-radii,
    "outline-width": (
        DEFAULT: 1px,
        0: 0,
        2: 2px,
        4: 4px,
        8: 8px
    ),
    "outline-style": (
        solid,
        dashed,
        dotted,
        double,
        // groove,
        // ridge,
        inset,
        outset,
        none
    ),
    "outline-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
        "inherit": inherit,
        "current": currentColor,
        "transparent": transparent,
        "black": black,
        "white": white
    )),
    "outline-offset": (
        0: 0,
        1: 1px,
        2: 2px,
        4: 4px,
        8: 8px
    ),

    // Effects
    "box-shadow": (),
    "box-shadow-color": (),
    "opacity": (
        0: 0,
        5: 0.05,
        10: 0.1,
        20: 0.2,
        30: 0.3,
        40: 0.4,
        50: 0.5,
        60: 0.6,
        70: 0.7,
        80: 0.8,
        90: 0.9,
        100: 1
    ),

    // Filter
    "backdrop-blur": (
        DEFAULT: blur(8px),
        none: blur(0),
        sm: blur(4px),
        md: blur(6px),
        lg: blur(12px)
    ),

    // Table
    "border-collapse": (
        collapse,
        separate
    ),
    "table-layout": (
        auto,
        fixed
    ),

    // Transition

    // Transform
    "flip": true,
    "scale": (
        0: 0,
        0.25: .25,
        0.5: .5,
        0.75: .75,
        1: 1,
        1.25: 1.25,
        1.5: 1.5,
        2: 2
    ),
    "rotate": (
        0: 0deg,
        45: 45deg,
        90: 90deg,
        135: 135deg,
        180: 180deg,
        225: 225deg,
        270: 270deg,
        315: 315deg
    ),
    "translate": k-map-remove( $kendo-sizing, "auto", "min", "max", "fit" ),
    "skew": (
        0: 0deg,
        1: 1deg,
        2: 2deg,
        3: 3deg,
        4: 4deg,
        5: 5deg,
        6: 6deg,
        7: 7deg,
        8: 8deg,
        9: 9deg,
        10: 10deg,
        11: 11deg,
        12: 12deg
    ),
    "origin": (
        center: center,
        top: top,
        right: right,
        bottom: bottom,
        left: left,
        top-left: top left,
        top-right: top right,
        bottom-left: bottom left,
        bottom-right: bottom right
    ),


    // Interactivity
    "accent-color": (),
    "appearance": (
        none,
        auto
    ),
    "cursor": (
        none,
        auto,
        default,
        context-menu,
        help,
        pointer,
        progress,
        wait,
        cell,
        crosshair,
        text,
        vertical-text,
        alias,
        copy,
        move,
        no-drop,
        not-allowed,
        e-resize,
        n-resize,
        ne-resize,
        nw-resize,
        s-resize,
        se-resize,
        sw-resize,
        w-resize,
        ew-resize,
        ns-resize,
        nesw-resize,
        nwse-resize,
        col-resize,
        row-resize,
        all-scroll,
        zoom-in,
        zoom-out,
        grab,
        grabbing
    ),
    "caret-color": (),
    "pointer-events": (
        none,
        auto
    ),
    "resize": (
        DEFAULT: both,
        none: none,
        x: horizontal,
        y: vertical
    ),
    "scroll-behavior": (
        auto,
        smooth
    ),
    "scroll-snap-type": (
        none: none,
        snap-x: x var(--#{$kendo-prefix}scroll-snap-strictness),
        snap-y: y var(--#{$kendo-prefix}scroll-snap-strictness),
        snap-both: both var(--#{$kendo-prefix}scroll-snap-strictness)
    ),
    "scroll-snap-align": (
        start,
        end,
        center,
        none
    ),
    "scroll-snap-stop": (
        normal,
        always
    ),
    "scroll-margin": $kendo-spacing,
    "scroll-padding": $kendo-spacing,
    "touch-action": (
        none,
        auto,
        pan-x,
        pan-left,
        pan-right,
        pan-y,
        pan-up,
        pan-down,
        pinch-zoom,
        manipulation
    ),
    "user-select": (
        none,
        auto,
        text,
        all,
        contain
    ),
    "will-change": (
        auto: auto,
        scroll: scroll-position,
        contents: contents,
        transform: transform
    ),
    "fill-stroke": (
        none: none,
        inherit: inherit,
        current: currentColor,
        "transparent": transparent,
        "black": black,
        "white": white
    )
) !default;

// #endregion
// #region @import "./_mixins.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/_mixins.scss
@mixin generate-utils( $name, $props, $values, $function: "", $important: $kendo-important, $css-var: null ) {
    @if $values {
        $_props: if( k-meta-type-of($props) == list, $props, ( $props ) );
        $_fn: if( k-meta-function-exists( $function ), k-meta-get-function( $function ), null );

        @each $key, $val in $values {
            $_key: k-escape-class-name( $key );
            $_val: if( k-meta-type-of($values) == list, $key, $val );
            $_name: k-escape-class-name( $name );
            $_selector: if( $_key == DEFAULT, #{$kendo-prefix}#{$_name}, #{$kendo-prefix}#{$_name}-#{$_key});
            $_custom-prop: if( $_key == DEFAULT, var( --kendo-#{$css-var}, #{$_val} ), var( --kendo-#{$css-var}-#{$_key}, #{$_val} ) );

            @if $important != only {
                .#{$_selector} {
                    @each $prop in $_props {
                        @if $css-var {
                            #{$prop}: if( $_fn, k-meta-call($_fn, $_custom-prop), $_custom-prop );
                        } @else {
                            #{$prop}: if( $_fn, k-meta-call($_fn, $_val), $_val );
                        }
                    }
                }
            }
            @if $important {
                .\!#{$_selector} {
                    @each $prop in $_props {
                        @if $css-var {
                            #{$prop}: if( $_fn, k-meta-call($_fn, $-custom-prop), $-custom-prop ) !important; // stylelint-disable-line declaration-no-important
                        } @else {
                            #{$prop}:  if( $_fn, k-meta-call($_fn, $_val), $_val ) !important; // stylelint-disable-line declaration-no-important
                        }
                    }
                }
            }
        }
    }
}
// #endregion

// #region @import "./accessibility/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/accessibility/index.import.scss
// #region @import "./_screen-readers.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/accessibility/_screen-readers.scss
@mixin kendo-utils--accessibility--screen-readers() {

    // Screen readers utility classes
    $kendo-utils-accessibility: k-map-get( $kendo-utils, "accessibility" ) !default;

    @if $kendo-utils-accessibility {
        /// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
        /// @name .k-sr-only
        /// @group accessibility
        .#{$kendo-prefix}sr-only {
            margin: -1px;
            padding: 0;
            width: 1px;
            height: 1px;
            border-width: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            position: absolute;
        }

        .#{$kendo-prefix}not-sr-only {
            margin: 0;
            padding: 0;
            width: auto;
            height: auto;
            border-width: 0;
            overflow: visible;
            clip: auto;
            position: static;
        }
    }

}

// #endregion

@mixin kendo-utils--accessibility() {
    @include kendo-utils--accessibility--screen-readers();
}

// #endregion
// #region @import "./layout/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/layout/index.import.scss
// #region @import "./_aspect-ratio.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/layout/_aspect-ratio.scss
/// This is equivalent to `aspect-ratio: auto;`.
/// @example aspect-ratio: auto;
/// @name .k-aspect-ratio-auto
/// @group aspect-ratio
/// @contextType css

/// This is equivalent to `aspect-ratio: 1;`.
/// @example aspect-ratio: 1;
/// @name .k-aspect-ratio-1
/// @group aspect-ratio
/// @contextType css

/// This is equivalent to `aspect-ratio: 1 / 1;`.
/// @example aspect-ratio: 1 / 1;
/// @name .k-aspect-ratio-square
/// @group aspect-ratio
/// @contextType css

/// This is equivalent to `aspect-ratio: 16 / 9;`.
/// @example aspect-ratio: 16 / 9;
/// @name .k-aspect-ratio-video
/// @group aspect-ratio
/// @contextType css

@mixin kendo-utils--layout--aspect-ratio() {

    // Aspect ratio utility classes
    $kendo-utils-aspect-ratio: k-map-get( $kendo-utils, "aspect-ratio" ) !default;
    @include generate-utils( ratio, aspect-ratio, $kendo-utils-aspect-ratio );


    // Legacy aliases
    @include generate-utils( aspect-ratio, aspect-ratio, $kendo-utils-aspect-ratio );

}

// #endregion
// #region @import "./_box-sizing.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/layout/_box-sizing.scss
/// This is equivalent to `box-sizing: border-box;`.
/// @example box-sizing: border-box;
/// @name .k-box-sizing-border
/// @group box-sizing
/// @contextType css

/// This is equivalent to `box-sizing: content-box;`.
/// @example box-sizing: content-box;
/// @name .k-box-sizing-content
/// @group box-sizing
/// @contextType css

@mixin kendo-utils--layout--box-sizing() {

    // box-sizing utility classes
    $kendo-utils-box-sizing: k-map-get( $kendo-utils, "box-sizing" ) !default;
    @include generate-utils( box-sizing, box-sizing, $kendo-utils-box-sizing );

}

// #endregion
// #region @import "./_clear.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/layout/_clear.scss
/// This is equivalent to `clear: left;`.
/// @example clear: left;
/// @name .k-clear-left
/// @group clear
/// @contextType css

/// This is equivalent to `clear: right;`.
/// @example clear: right;
/// @name .k-clear-right
/// @group clear
/// @contextType css

/// This is equivalent to `clear: both;`.
/// @example clear: both;
/// @name .k-clear-both
/// @group clear
/// @contextType css

/// This is equivalent to `clear: none;`.
/// @example clear: none;
/// @name .k-clear-none
/// @group clear
/// @contextType css

@mixin kendo-utils--layout--clear() {

    // Clear utility classes
    $kendo-utils-clear: k-map-get( $kendo-utils, "clear" ) !default;
    @include generate-utils( clear, clear, $kendo-utils-clear );

}

// #endregion
// #region @import "./_columns.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/layout/_columns.scss
/// This is equivalent to `columns: 1;`.
/// @example columns: 1;
/// @name .k-columns-1
/// @group columns
/// @contextType css

/// This is equivalent to `columns: 2;`.
/// @example columns: 2;
/// @name .k-columns-2
/// @group columns
/// @contextType css

/// This is equivalent to `columns: 3;`.
/// @example columns: 3;
/// @name .k-columns-3
/// @group columns
/// @contextType css

/// This is equivalent to `columns: 4;`.
/// @example columns: 4;
/// @name .k-columns-4
/// @group columns
/// @contextType css

/// This is equivalent to `columns: 5;`.
/// @example columns: 5;
/// @name .k-columns-5
/// @group columns
/// @contextType css

/// This is equivalent to `columns: 6;`.
/// @example columns: 6;
/// @name .k-columns-6
/// @group columns
/// @contextType css

/// This is equivalent to `columns: 7;`.
/// @example columns: 7;
/// @name .k-columns-7
/// @group columns
/// @contextType css

/// This is equivalent to `columns: 8;`.
/// @example columns: 8;
/// @name .k-columns-8
/// @group columns
/// @contextType css

/// This is equivalent to `columns: 9;`.
/// @example columns: 9;
/// @name .k-columns-9
/// @group columns
/// @contextType css

/// This is equivalent to `columns: 10;`.
/// @example columns: 10;
/// @name .k-columns-10
/// @group columns
/// @contextType css

/// This is equivalent to `columns: 11;`.
/// @example columns: 11;
/// @name .k-columns-11
/// @group columns
/// @contextType css

/// This is equivalent to `columns: 12;`.
/// @example columns: 12;
/// @name .k-columns-12
/// @group columns
/// @contextType css

/// This is equivalent to `columns: auto;`.The number of columns is determined by other CSS properties, such as column-width.
/// @example columns: auto;
/// @name .k-columns-auto
/// @group columns
/// @contextType css

@mixin kendo-utils--layout--columns() {

    // columns utility classes
    $kendo-utils-columns: k-map-get( $kendo-utils, "columns" ) !default;
    @include generate-utils( columns, columns, $kendo-utils-columns );

}

// #endregion
// #region @import "./_display.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/layout/_display.scss
/// This is equivalent to `display: none;`.
/// @example display: none;
/// @name .k-d-none
/// @group display
/// @contextType css

/// This is equivalent to `display: contents;`.
/// @example display: contents;
/// @name .k-d-contents
/// @group display
/// @contextType css

/// This is equivalent to `display: block;`.
/// @example display: block;
/// @name .k-d-block
/// @group display
/// @contextType css

/// This is equivalent to `display: inline;`.
/// @example display: inline;
/// @name .k-d-inline
/// @group display
/// @contextType css

/// This is equivalent to `display: inline-block;`.
/// @example display: inline-block;
/// @name .k-d-inline-block
/// @group display
/// @contextType css

/// This is equivalent to `display: flex;`.
/// @example display: flex;
/// @name .k-d-flex
/// @group display
/// @contextType css

/// This is equivalent to `display: inline-flex;`.
/// @example display: inline-flex;
/// @name .k-d-inline-flex
/// @group display
/// @contextType css

/// This is equivalent to `display: grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
/// @example display: grid
/// @name .k-d-grid
/// @group display
/// @contextType css

/// This is equivalent to `display: inline-grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
/// @example display: inline-grid
/// @name .k-d-inline-grid
/// @group display
/// @contextType css

/// This is equivalent to `display: table;`.
/// @example display: table;
/// @name .k-d-table
/// @group display
/// @contextType css

/// This is equivalent to `display: inline-table;`.
/// @example display: inline-table;
/// @name .k-d-inline-table
/// @group display
/// @contextType css

/// This is equivalent to `display: list-item;`.
/// @example display: list-item;
/// @name .k-d-list-item
/// @group display
/// @contextType css

/// This is equivalent to `display: table-row;`.
/// @example display: table-row;
/// @name .k-d-table-row
/// @group display
/// @contextType css

/// This is equivalent to `display: table-cell;`.
/// @example display: table-cell;
/// @name .k-d-table-cell
/// @group display
/// @contextType css

@mixin kendo-utils--layout--display() {

    // Display utility classes
    $kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default;
    @include generate-utils( d, display, $kendo-utils-display );


    // Legacy aliases
    @include generate-utils( display, display, $kendo-utils-display );
    .#{$kendo-prefix}d-flex-row { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-row !optional; }
    .\!#{$kendo-prefix}d-flex-row { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; }
    .#{$kendo-prefix}d-flex-col { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-col !optional; }
    .\!#{$kendo-prefix}d-flex-col { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; }

}

// #endregion
// #region @import "./_float.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/layout/_float.scss
/// This is equivalent to `float: left;`.
/// @example float: left;
/// @name .k-float-left
/// @group float
/// @contextType css

/// This is equivalent to `float: right;`.
/// @example float: right;
/// @name .k-float-right
/// @group float
/// @contextType css

/// This is equivalent to `float: none;`.
/// @example float: none;
/// @name .k-float-none
/// @group float
/// @contextType css

@mixin kendo-utils--layout--float() {

    // Float utility classes
    $kendo-utils-float: k-map-get( $kendo-utils, "float" ) !default;
    @include generate-utils( float, float, $kendo-utils-float );

}

// #endregion
// #region @import "./_object-fit.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/layout/_object-fit.scss
/// This is equivalent to `object-fit: contain;`.
/// @example object-fit: contain;
/// @name .k-object-fit-contain
/// @group object-fit
/// @contextType css

/// This is equivalent to `object-fit: cover;`.
/// @example object-fit: cover;
/// @name .k-object-fit-cover
/// @group object-fit
/// @contextType css

/// This is equivalent to `object-fit: fill;`.
/// @example object-fit: fill;
/// @name .k-object-fit-fill
/// @group object-fit
/// @contextType css

/// This is equivalent to `object-fit: scale-down;`.
/// @example object-fit: scale-down;
/// @name .k-object-fit-scale-down
/// @group object-fit
/// @contextType css

/// This is equivalent to `object-fit: initial;`.
/// @example object-fit: initial;
/// @name .k-object-fit-initial
/// @group object-fit
/// @contextType css

/// This is equivalent to `object-fit: none;`.
/// @example object-fit: none;
/// @name .k-object-fit-none
/// @group object-fit
/// @contextType css

@mixin kendo-utils--layout--object-fit() {

    // object-fit utility classes
    $kendo-utils-object-fit: k-map-get( $kendo-utils, "object-fit" ) !default;
    @include generate-utils( object-fit, object-fit, $kendo-utils-object-fit );

}

// #endregion
// #region @import "./_object-position.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/layout/_object-position.scss
/// This is equivalent to `object-position: center;`.
/// @example object-position: center;
/// @name .k-object-position-center
/// @group object-position
/// @contextType css

/// This is equivalent to `object-position: top;`.
/// @example object-position: top;
/// @name .k-object-position-top
/// @group object-position
/// @contextType css

/// This is equivalent to `object-position: right;`.
/// @example object-position: right;
/// @name .k-object-position-right
/// @group object-position
/// @contextType css

/// This is equivalent to `object-position: bottom;`.
/// @example object-position: bottom;
/// @name .k-object-position-bottom
/// @group object-position
/// @contextType css

/// This is equivalent to `object-position: left;`.
/// @example object-position: left;
/// @name .k-object-position-left
/// @group object-position
/// @contextType css

/// This is equivalent to `object-position: top left;`.
/// @example object-position: top left;
/// @name .k-object-position-top-left
/// @group object-position
/// @contextType css

/// This is equivalent to `object-position: top right;`.
/// @example object-position: top right;
/// @name .k-object-position-top-right
/// @group object-position
/// @contextType css

/// This is equivalent to `object-position: bottom left;`.
/// @example object-position: bottom left;
/// @name .k-object-position-bottom-left
/// @group object-position
/// @contextType css

/// This is equivalent to `object-position: bottom right;`.
/// @example object-position: bottom right;
/// @name .k-object-position-bottom-right
/// @group object-position
/// @contextType css

@mixin kendo-utils--layout--object-position() {

    // object-position utility classes
    $kendo-utils-object-position: k-map-get( $kendo-utils, "object-position" ) !default;
    @include generate-utils( object-position, object-position, $kendo-utils-object-position );

}

// #endregion
// #region @import "./_overflow.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/layout/_overflow.scss
/// This is equivalent to `overflow: auto;`.
/// @example overflow: auto;
/// @name .k-overflow-auto
/// @group overflow
/// @contextType css

/// This is equivalent to `overflow: hidden;`.
/// @example overflow: hidden;
/// @name .k-overflow-hidden
/// @group overflow
/// @contextType css

/// This is equivalent to `overflow: visible;`.
/// @example overflow: visible;
/// @name .k-overflow-visible
/// @group overflow
/// @contextType css

/// This is equivalent to `overflow: scroll;`.
/// @example overflow: scroll;
/// @name .k-overflow-scroll
/// @group overflow
/// @contextType css

/// This is equivalent to `overflow: clip;`.
/// @example overflow: clip;
/// @name .k-overflow-clip
/// @group overflow
/// @contextType css

/// This is equivalent to `overflow-x: auto;`.
/// @example overflow-x: auto;
/// @name .k-overflow-x-auto
/// @group overflow
/// @contextType css

/// This is equivalent to `overflow-x: hidden;`.
/// @example overflow-x: hidden;
/// @name .k-overflow-x-hidden
/// @group overflow
/// @contextType css

/// This is equivalent to `overflow-x: visible;`.
/// @example overflow-x: visible;
/// @name .k-overflow-x-visible
/// @group overflow
/// @contextType css

/// This is equivalent to `overflow-x: scroll;`.
/// @example overflow-x: scroll;
/// @name .k-overflow-x-scroll
/// @group overflow
/// @contextType css

/// This is equivalent to `overflow-x: clip;`.
/// @example overflow-x: clip;
/// @name .k-overflow-x-clip
/// @group overflow
/// @contextType css

/// This is equivalent to `overflow-y: auto;`.
/// @example overflow-y: auto;
/// @name .k-overflow-y-auto
/// @group overflow
/// @contextType css

/// This is equivalent to `overflow-y: hidden;`.
/// @example overflow-y: hidden;
/// @name .k-overflow-y-hidden
/// @group overflow
/// @contextType css

/// This is equivalent to `overflow-y: visible;`.
/// @example overflow-y: visible;
/// @name .k-overflow-y-visible
/// @group overflow
/// @contextType css

/// This is equivalent to `overflow-y: scroll;`.
/// @example overflow-y: scroll;
/// @name .k-overflow-y-scroll
/// @group overflow
/// @contextType css

/// This is equivalent to `overflow-y: clip;`.
/// @example overflow-y: clip;
/// @name .k-overflow-y-clip
/// @group overflow
/// @contextType css

@mixin kendo-utils--layout--overflow() {

    // Overflow utility classes
    $kendo-utils-overflow: k-map-get( $kendo-utils, "overflow" ) !default;
    @include generate-utils( overflow, overflow, $kendo-utils-overflow );
    @include generate-utils( overflow-x, overflow-x, $kendo-utils-overflow );
    @include generate-utils( overflow-y, overflow-y, $kendo-utils-overflow );
}

// #endregion
// #region @import "./_placement.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/layout/_placement.scss
/// This is equivalent to `top: 0;`.
/// @example top: 0;
/// @name .k-top-0
/// @group placement
/// @contextType css

/// This is equivalent to `right: 0;`.
/// @example right: 0;
/// @name .k-right-0
/// @group placement
/// @contextType css

/// This is equivalent to `bottom: 0;`.
/// @example bottom: 0;
/// @name .k-bottom-0
/// @group placement
/// @contextType css

/// This is equivalent to `left: 0;`.
/// @example left: 0;
/// @name .k-left-0
/// @group placement
/// @contextType css

/// This is equivalent to `top: 0;`.
/// @example top: 0;
/// @name .k-pos-top-0
/// @group placement
/// @contextType css

/// This is equivalent to `right: 0;`.
/// @example right: 0;
/// @name .k-pos-right-0
/// @group placement
/// @contextType css

/// This is equivalent to `bottom: 0;`.
/// @example bottom: 0;
/// @name .k-pos-bottom-0
/// @group placement
/// @contextType css

/// This is equivalent to `left: 0;`.
/// @example left: 0;
/// @name .k-pos-left-0
/// @group placement
/// @contextType css

/// This is equivalent to `top: 0; left: 0;`.
/// @example top: 0; left: 0;
/// @name .k-top-left-0
/// @group placement
/// @contextType css

/// This is equivalent to `top: 0; right: 0;`.
/// @example top: 0; right: 0;
/// @name .k-top-right-0
/// @group placement
/// @contextType css

/// This is equivalent to `bottom: 0; left: 0;`.
/// @example bottom: 0; left: 0;
/// @name .k-bottom-left-0
/// @group placement
/// @contextType css

/// This is equivalent to `bottom: 0; right: 0;`.
/// @example bottom: 0; right: 0;
/// @name .k-bottom-right-0
/// @group placement
/// @contextType css

/// This is equivalent to `inset: 0;`.
/// @example inset: 0;
/// @name .k-inset-0
/// @group placement
/// @contextType css

/// This is equivalent to `inset-inline: 0;`.
/// @example inset-inline: 0;
/// @name .k-inset-x-0
/// @group placement
/// @contextType css

/// This is equivalent to `inset-block: 0;`.
/// @example inset-block: 0;
/// @name .k-inset-y-0
/// @group placement
/// @contextType css

@mixin kendo-utils--layout--placement() {
    // Top / right / bottom / left
    $kendo-utils-placement: k-map-get( $kendo-utils, "placement" ) !default;
    @include generate-utils( top, top, $kendo-utils-placement );
    @include generate-utils( right, right, $kendo-utils-placement );
    @include generate-utils( bottom, bottom, $kendo-utils-placement );
    @include generate-utils( left, left, $kendo-utils-placement );


    // placement length utility classes
    @each $side in (top, right, bottom, left) {
        .#{$kendo-prefix}#{$side},
        .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; }
    }

    // Inset utility classes
    $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
    @include generate-utils( inset, inset, $kendo-utils-inset );
    @include generate-utils( inset-x, inset-inline, $kendo-utils-inset );
    @include generate-utils( inset-y, inset-block, $kendo-utils-inset );
    @include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
    @include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
    @include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
    @include generate-utils( bottom-right, ( bottom, right ), $kendo-utils-inset );


    // Legacy aliases
    .#{$kendo-prefix}top-start,
    .#{$kendo-prefix}pos-top-start {
        top: 0;
        inset-inline-start: 0;
    }

    .#{$kendo-prefix}top-end,
    .#{$kendo-prefix}pos-top-end {
        top: 0;
        inset-inline-end: 0;
    }

    .#{$kendo-prefix}bottom-start,
    .#{$kendo-prefix}pos-bottom-start {
        bottom: 0;
        inset-inline-start: 0;
    }

    .#{$kendo-prefix}bottom-end,
    .#{$kendo-prefix}pos-bottom-end {
        bottom: 0;
        inset-inline-end: 0;
    }

    .#{$kendo-prefix}top-center,
    .#{$kendo-prefix}pos-top-center {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .#{$kendo-prefix}middle-left,
    .#{$kendo-prefix}middle-start,
    .#{$kendo-prefix}pos-middle-start {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    .#{$kendo-prefix}middle-center {
        top: 50%;
        left: 50%;
        transform: translateY(-50%);
    }
    .#{$kendo-prefix}middle-right,
    .#{$kendo-prefix}middle-end,
    .#{$kendo-prefix}pos-middle-end {
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
    .#{$kendo-prefix}bottom-center,
    .#{$kendo-prefix}pos-bottom-center {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

}

// #endregion
// #region @import "./_position.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/layout/_position.scss
/// This is equivalent to `position: static;`.
/// @example position: static;
/// @name .k-pos-static
/// @group position
/// @contextType css

/// This is equivalent to `position: relative;`.
/// @example position: relative;
/// @name .k-pos-relative
/// @group position
/// @contextType css

/// This is equivalent to `position: absolute;`.
/// @example position: absolute;
/// @name .k-pos-absolute
/// @group position
/// @contextType css

/// This is equivalent to `position: fixed;`.
/// @example position: fixed;
/// @name .k-pos-fixed
/// @group position
/// @contextType css

/// This is equivalent to `position: sticky;`.
/// @example position: sticky;
/// @name .k-pos-sticky
/// @group position
/// @contextType css

@mixin kendo-utils--layout--position() {

    // Position utility classes
    $kendo-utils-position: k-map-get( $kendo-utils, "position" ) !default;
    @include generate-utils( pos, position, $kendo-utils-position );


    // Legacy aliases
    .#{$kendo-prefix}static { @extend .#{$kendo-prefix}pos-static !optional; }
    .\!#{$kendo-prefix}static { @extend .\!#{$kendo-prefix}pos-static !optional; }
    .#{$kendo-prefix}relative { @extend .#{$kendo-prefix}pos-relative !optional; }
    .\!#{$kendo-prefix}relative { @extend .\!#{$kendo-prefix}pos-relative !optional; }
    .#{$kendo-prefix}absolute { @extend .#{$kendo-prefix}pos-absolute !optional; }
    .\!#{$kendo-prefix}absolute { @extend .\!#{$kendo-prefix}pos-absolute !optional; }
    .#{$kendo-prefix}fixed { @extend .#{$kendo-prefix}pos-fixed !optional; }
    .\!#{$kendo-prefix}fixed { @extend .\!#{$kendo-prefix}pos-fixed !optional; }
    .#{$kendo-prefix}sticky { @extend .#{$kendo-prefix}pos-sticky !optional; }
    .\!#{$kendo-prefix}sticky { @extend .\!#{$kendo-prefix}pos-sticky !optional; }

}

// #endregion
// #region @import "./_visibility.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/layout/_visibility.scss
/// This is equivalent to `visibility: visble;`.
/// @example visibility: visble;
/// @name .k-visible
/// @group visibility
/// @contextType css

/// This is equivalent to `visibility: hidden;`.
/// @example visibility: hidden;
/// @name .k-invisible
/// @group visibility
/// @contextType css

/// This is equivalent to `visibility: collapse;`.
/// @example visibility: collapse;
/// @name .k-collapse
/// @group visibility
/// @contextType css

@mixin kendo-utils--layout--visibility() {

    // Visibility utility classes
    $kendo-utils-visibility: k-map-get( $kendo-utils, "visibility" ) !default;
    @include generate-utils( visibility, visibility, $kendo-utils-visibility );

    // Legacy aliases
    .#{$kendo-prefix}visible { @extend .#{$kendo-prefix}visibility-visible !optional; }
    .\!#{$kendo-prefix}visible { @extend .\!#{$kendo-prefix}visibility-visible !optional; }
    .#{$kendo-prefix}invisible { @extend .#{$kendo-prefix}visibility-hidden !optional; }
    .\!#{$kendo-prefix}invisible { @extend .\!#{$kendo-prefix}visibility-hidden !optional; }

}

// #endregion
// #region @import "./_zindex.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/layout/_zindex.scss
/// This is equivalent to `z-index: 0;`.
/// @example z-index: 0;
/// @name .k-z-0
/// @group zindex
/// @contextType css

/// This is equivalent to `z-index: 10;`.
/// @example z-index: 10;
/// @name .k-z-10
/// @group zindex
/// @contextType css

/// This is equivalent to `z-index: 20;`.
/// @example z-index: 20;
/// @name .k-z-20
/// @group zindex
/// @contextType css

/// This is equivalent to `z-index: 30;`.
/// @example z-index: 30;
/// @name .k-z-30
/// @group zindex
/// @contextType css

/// This is equivalent to `z-index: 40;`.
/// @example z-index: 40;
/// @name .k-z-40
/// @group zindex
/// @contextType css

/// This is equivalent to `z-index: 50;`.
/// @example z-index: 50;
/// @name .k-z-50
/// @group zindex
/// @contextType css

/// This is equivalent to `z-index: auto;`.
/// @example z-index: auto;
/// @name .k-z-auto
/// @group zindex
/// @contextType css

@mixin kendo-utils--layout--zindex() {

    // Z-index utility classes
    $kendo-utils-zindex: k-map-get( $kendo-utils, "zindex" ) !default;
    @include generate-utils( z, z-index, $kendo-utils-zindex );

}

// #endregion


@mixin kendo-utils--layout() {
    @include kendo-utils--layout--aspect-ratio();
    @include kendo-utils--layout--box-sizing();
    @include kendo-utils--layout--clear();
    @include kendo-utils--layout--columns();
    @include kendo-utils--layout--display();
    @include kendo-utils--layout--float();
    @include kendo-utils--layout--object-fit();
    @include kendo-utils--layout--object-position();
    @include kendo-utils--layout--overflow();
    @include kendo-utils--layout--placement();
    @include kendo-utils--layout--position();
    @include kendo-utils--layout--visibility();
    @include kendo-utils--layout--zindex();
}

// #endregion
// #region @import "./flex-grid/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/index.import.scss
// #region @import "./_align-content.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_align-content.scss
/// This is equivalent to `align-content: normal;`.
/// @example align-content: normal;
/// @name .k-align-content-normal
/// @group align-content
/// @contextType css

/// This is equivalent to `align-content: stretch;`.
/// @example align-content: stretch;
/// @name .k-align-content-stretch
/// @group align-content
/// @contextType css

/// This is equivalent to `align-content: center;`.
/// @example align-content: center;
/// @name .k-align-content-center
/// @group align-content
/// @contextType css

/// This is equivalent to `align-content: start;`.
/// @example align-content: start;
/// @name .k-align-content-start
/// @group align-content
/// @contextType css

/// This is equivalent to `align-content: end;`.
/// @example align-content: end;
/// @name .k-align-content-end
/// @group align-content
/// @contextType css

/// This is equivalent to `align-content: flex-start;`.
/// @example align-content: flex-start;
/// @name .k-align-content-flex-start
/// @group align-content
/// @contextType css

/// This is equivalent to `align-content: flex-end;`.
/// @example align-content: flex-end;
/// @name .k-align-content-flex-end
/// @group align-content
/// @contextType css

/// This is equivalent to `align-content: baseline;`.
/// @example align-content: baseline;
/// @name .k-align-content-baseline
/// @group align-content
/// @contextType css

/// This is equivalent to `align-content: first baseline;`.
/// @example align-content: first baseline;
/// @name .k-align-content-first-baseline
/// @group align-content
/// @contextType css

/// This is equivalent to `align-content: last baseline;`.
/// @example align-content: last baseline;
/// @name .k-align-content-last-baseline
/// @group align-content
/// @contextType css

/// This is equivalent to `align-content: space-between;`.
/// @example align-content: space-between;
/// @name .k-align-content-between
/// @group align-content
/// @contextType css

/// This is equivalent to `align-content: space-around;`.
/// @example align-content: space-around;
/// @name .k-align-content-around
/// @group align-content
/// @contextType css

/// This is equivalent to `align-content: space-evenly;`.
/// @example align-content: space-evenly;
/// @name .k-align-content-evenly
/// @group align-content
/// @contextType css

@mixin kendo-utils--flex-grid--align-content() {

    // Align content utility classes
    $kendo-utils-align-content: k-map-get( $kendo-utils, "align-content" ) !default;
    @include generate-utils( align-content, align-content, $kendo-utils-align-content );

}

// #endregion
// #region @import "./_align-items.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_align-items.scss
/// This is equivalent to `align-items: normal;`.
/// @example align-items: normal;
/// @name .k-align-items-normal
/// @group align-items
/// @contextType css

/// This is equivalent to `align-items: stretch;`.
/// @example align-items: stretch;
/// @name .k-align-items-stretch
/// @group align-items
/// @contextType css

/// This is equivalent to `align-items: center;`.
/// @example align-items: center;
/// @name .k-align-items-stretch
/// @group align-items
/// @contextType css

/// This is equivalent to `align-items: start;`.
/// @example align-items: start;
/// @name .k-align-items-start
/// @group align-items
/// @contextType css

/// This is equivalent to `align-items: end;`.
/// @example align-items: end;
/// @name .k-align-items-end
/// @group align-items
/// @contextType css

/// This is equivalent to `align-items: flex-start;`.
/// @example align-items: flex-start;
/// @name .k-align-items-flex-start
/// @group align-items
/// @contextType css

/// This is equivalent to `align-items: flex-end;`.
/// @example align-items: flex-end;
/// @name .k-align-items-flex-end
/// @group align-items
/// @contextType css

/// This is equivalent to `align-items: baseline;`.
/// @example align-items: baseline;
/// @name .k-align-items-baseline
/// @group align-items
/// @contextType css

/// This is equivalent to `align-items: first baseline;`.
/// @example align-items: first baseline;
/// @name .k-align-items-first-baseline
/// @group align-items
/// @contextType css

/// This is equivalent to `align-items: last baseline;`.
/// @example align-items: last baseline;
/// @name .k-align-items-last-baseline
/// @group align-items
/// @contextType css

/// This is equivalent to `align-items: self-start;`.
/// @example align-items: self-start;
/// @name .k-align-items-self-start
/// @group align-items
/// @contextType css

/// This is equivalent to `align-items: self-end;`.
/// @example align-items: self-end;
/// @name .k-align-items-self-end
/// @group align-items
/// @contextType css

@mixin kendo-utils--flex-grid--align-items() {

    // Align items utility classes
    $kendo-utils-align-items: k-map-get( $kendo-utils, "align-items" ) !default;
    @include generate-utils( align-items, align-items, $kendo-utils-align-items );

}

// #endregion
// #region @import "./_align-self.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_align-self.scss
/// This is equivalent to `align-self: auto;`.
/// @example align-self: auto;
/// @name .k-align-self-auto
/// @group align-self
/// @contextType css

/// This is equivalent to `align-self: normal;`.
/// @example align-self: normal;
/// @name .k-align-self-normal
/// @group align-self
/// @contextType css

/// This is equivalent to `align-self: stretch;`.
/// @example align-self: stretch;
/// @name .k-align-self-stretch
/// @group align-self
/// @contextType css

/// This is equivalent to `align-self: center;`.
/// @example align-self: center;
/// @name .k-align-self-center
/// @group align-self
/// @contextType css

/// This is equivalent to `align-self: start;`.
/// @example align-self: start;
/// @name .k-align-self-start
/// @group align-self
/// @contextType css

/// This is equivalent to `align-self: end;`.
/// @example align-self: end;
/// @name .k-align-self-end
/// @group align-self
/// @contextType css

/// This is equivalent to `align-self: flex-start;`.
/// @example align-self: flex-start;
/// @name .k-align-self-flex-start
/// @group align-self
/// @contextType css

/// This is equivalent to `align-self: flex-end;`.
/// @example align-self: flex-end;
/// @name .k-align-self-flex-end
/// @group align-self
/// @contextType css

/// This is equivalent to `align-self: baseline;`.
/// @example align-self: baseline;
/// @name .k-align-self-baseline
/// @group align-self
/// @contextType css

/// This is equivalent to `align-self: first baseline;`.
/// @example align-self: first baseline;
/// @name .k-align-self-first-baseline
/// @group align-self
/// @contextType css

/// This is equivalent to `align-self: last baseline;`.
/// @example align-self: last baseline;
/// @name .k-align-self-last-baseline
/// @group align-self
/// @contextType css

/// This is equivalent to `align-self: self-start;`.
/// @example align-self: self-start;
/// @name .k-align-self-self-start
/// @group align-self
/// @contextType css

/// This is equivalent to `align-self: self-end;`.
/// @example align-self: self-end;
/// @name .k-align-self-self-end
/// @group align-self
/// @contextType css

@mixin kendo-utils--flex-grid--align-self() {

    // Align self utility classes
    $kendo-utils-align-self: k-map-get( $kendo-utils, "align-self" ) !default;
    @include generate-utils( align-self, align-self, $kendo-utils-align-self );

}

// #endregion
// #region @import "./_flex-basis.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_flex-basis.scss
/// This is equivalent to `flex-basis: auto;`.
/// @example flex-basis: auto;
/// @name .k-flex-basis-auto
/// @group flex-basis
/// @contextType css

/// This is equivalent to `flex-basis: 0;`.
/// @example flex-basis: 0;
/// @name .k-flex-basis-0
/// @group flex-basis
/// @contextType css

@mixin kendo-utils--flex-grid--flex-basis() {

    // Flex basis utility classes
    $kendo-utils-flex-basis: k-map-get( $kendo-utils, "flex-basis" ) !default;
    @include generate-utils( basis, flex-basis, $kendo-utils-flex-basis );
    @include generate-utils( flex-basis, flex-basis, $kendo-utils-flex-basis );

}

// #endregion
// #region @import "./_flex-direction.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_flex-direction.scss
/// This is equivalent to `flex-direction: row;`.
/// @example flex-direction: row;
/// @name .k-flex-row
/// @group flex-direction
/// @contextType css

/// This is equivalent to `flex-direction: row-reverse;`.
/// @example flex-direction: row-reverse;
/// @name .k-flex-row-reverse
/// @group flex-direction
/// @contextType css

/// This is equivalent to `flex-direction: column;`.
/// @example flex-direction: column;
/// @name .k-flex-col
/// @group flex-direction
/// @contextType css

/// This is equivalent to `flex-direction: column-reverse;`.
/// @example flex-direction: column-reverse;
/// @name .k-flex-col-reverse
/// @group flex-direction
/// @contextType css

@mixin kendo-utils--flex-grid--flex-direction() {

    // Flex direction utility classes
    $kendo-utils-flex-direction: k-map-get( $kendo-utils, "flex-direction" ) !default;
    @include generate-utils( flex, flex-direction, $kendo-utils-flex-direction );


    // Legacy aliases
    .#{$kendo-prefix}flex-column { @extend .#{$kendo-prefix}flex-col !optional; }
    .#{$kendo-prefix}flex-column-reverse { @extend .#{$kendo-prefix}flex-col-reverse !optional; }

}

// #endregion
// #region @import "./_flex-grow.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_flex-grow.scss
/// This is equivalent to `flex-grow: 1;`.
/// @example flex-grow: 1;
/// @name .k-flex-grow
/// @group flex-grow
/// @contextType css

/// This is equivalent to `flex-grow: 0;`.
/// @example flex-grow: 0;
/// @name .k-flex-grow-0
/// @group flex-grow
/// @contextType css

@mixin kendo-utils--flex-grid--flex-grow() {

    // Flex grow utility classes
    $kendo-utils-flex-grow: k-map-get( $kendo-utils, "flex-grow" ) !default;
    @include generate-utils( grow, flex-grow, $kendo-utils-flex-grow );
    @include generate-utils( flex-grow, flex-grow, $kendo-utils-flex-grow );

}

// #endregion
// #region @import "./_flex-shrink.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_flex-shrink.scss
/// This is equivalent to `flex-shrink: 1;`.
/// @example flex-shrink: 1;
/// @name .k-flex-shrink
/// @group flex-shrink
/// @contextType css

/// This is equivalent to `flex-shrink: 0;`.
/// @example flex-shrink: 0;
/// @name .k-flex-shrink-0
/// @group flex-shrink
/// @contextType css

@mixin kendo-utils--flex-grid--flex-shrink() {

    // Flex shrink utility classes
    $kendo-utils-flex-shrink: k-map-get( $kendo-utils, "flex-shrink" ) !default;
    @include generate-utils( shrink, flex-shrink, $kendo-utils-flex-shrink );
    @include generate-utils( flex-shrink, flex-shrink, $kendo-utils-flex-shrink );

}

// #endregion
// #region @import "./_flex-wrap.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_flex-wrap.scss
/// This is equivalent to `flex-wrap: wrap;`.
/// @example flex-wrap: wrap
/// @name .k-flex-wrap
/// @group flex-wrap
/// @contextType css

/// This is equivalent to `flex-wrap: nowrap;`.
/// @example flex-wrap: nowrap
/// @name .k-flex-nowrap
/// @group flex-wrap
/// @contextType css

/// This is equivalent to `flex-wrap: wrap-reverse;`.
/// @example flex-wrap: wrap-reverse
/// @name .k-flex-wrap-reverse
/// @group flex-wrap
/// @contextType css

@mixin kendo-utils--flex-grid--flex-wrap() {

    // Flex wrap utility classes
    $kendo-utils-flex-wrap: k-map-get( $kendo-utils, "flex-wrap" ) !default;
    @include generate-utils( flex, flex-wrap, $kendo-utils-flex-wrap );

}

// #endregion
// #region @import "./_flex.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_flex.scss
/// This is equivalent to `flex: 1 1 0%;`.
/// @example flex: 1 1 0%;
/// @name .k-flex-1
/// @group flex
/// @contextType css

/// This is equivalent to `flex: 1 1 auto;`.
/// @example flex: 1 1 auto;
/// @name .k-flex-auto
/// @group flex
/// @contextType css

/// This is the same as `flex: initial;` and the shorthand for the default value: `flex: 0 1 auto`. It sizes the item based on its `width`/`height` properties (or its content if not set). It makes the flex item inflexible when there is some free space left, but allows it to shrink to its minimum when there is not enough space. The alignment abilities or `auto` margins can be used to align flex items along the main axis.
/// @example flex: initial;
/// @name .k-flex-initial
/// @group flex
/// @contextType css

/// This is equivalent to `flex: 0 0 auto;`.
/// @example flex: 0 0 auto;
/// @name .k-flex-none
/// @group flex
/// @contextType css

@mixin kendo-utils--flex-grid--flex() {

    // Flex utility classes
    $kendo-utils-flex: k-map-get( $kendo-utils, "flex" ) !default;
    @include generate-utils( flex, flex, $kendo-utils-flex );

}

// #endregion
// #region @import "./_gap.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_gap.scss
/// This is equivalent to `gap: 0;`.
/// @example gap: 0;
/// @name .k-gap-0
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 1px;`.
/// @example gap: 1px;
/// @name .k-gap-1px
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 0.25rem;`.
/// @example gap: 0.25rem;
/// @name .k-gap-1
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 0.25rem;`.
/// @example gap: 0.25rem;
/// @name .k-gap-xs
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 0.5rem;`.
/// @example gap: 0.5rem;
/// @name .k-gap-sm
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 0.75rem;`.
/// @example gap: 0.75rem;
/// @name .k-gap-md
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 1rem;`.
/// @example gap: 1rem;
/// @name .k-gap-lg
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 1.5rem;`.
/// @example gap: 1.5rem;
/// @name .k-gap-xl
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 0.125rem;`.
/// @example gap: 0.125rem;
/// @name .k-gap-thin
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 1px;`.
/// @example gap: 1px;
/// @name .k-gap-hair
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 0;`.
/// @example column-gap: 0;
/// @name .k-gap-x-0
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 1px;`.
/// @example column-gap: 1px;
/// @name .k-gap-x-1px
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 0.25rem;`.
/// @example column-gap: 0.25rem;
/// @name .k-gap-x-1
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 0.25rem;`.
/// @example column-gap: 0.25rem;
/// @name .k-gap-x-xs
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 0.5rem;`.
/// @example column-gap: 0.5rem;
/// @name .k-gap-x-sm
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 0.75rem;`.
/// @example column-gap: 0.75rem;
/// @name .k-gap-x-md
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 1rem;`.
/// @example column-gap: 1rem;
/// @name .k-gap-x-lg
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 1.5rem;`.
/// @example column-gap: 1.5rem;
/// @name .k-gap-x-xl
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 0.125rem;`.
/// @example column-gap: 0.125rem;
/// @name .k-gap-x-thin
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 1px;`.
/// @example column-gap: 1px;
/// @name .k-gap-x-hair
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 0;`.
/// @example row-gap: 0;
/// @name .k-gap-y-0
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 1px;`.
/// @example row-gap: 1px;
/// @name .k-gap-y-1px
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 0.25rem;`.
/// @example row-gap: 0.25rem;
/// @name .k-gap-y-1
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 0.25rem;`.
/// @example row-gap: 0.25rem;
/// @name .k-gap-y-xs
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 0.5rem;`.
/// @example row-gap: 0.5rem;
/// @name .k-gap-y-sm
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 0.75rem;`.
/// @example row-gap: 0.75rem;
/// @name .k-gap-y-md
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 1rem;`.
/// @example row-gap: 1rem;
/// @name .k-gap-y-lg
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 1.5rem;`.
/// @example row-gap: 1.5rem;
/// @name .k-gap-y-xl
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 0.125rem;`.
/// @example row-gap: 0.125rem;
/// @name .k-gap-y-thin
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 1px;`.
/// @example row-gap: 1px;
/// @name .k-gap-y-hair
/// @group gap
/// @contextType css

@mixin kendo-utils--flex-grid--gap() {

    // Gap utility classes
    $kendo-utils-gap: k-map-get( $kendo-utils, "gap" ) !default;
    @include generate-utils( gap, gap, $kendo-utils-gap, $css-var: "spacing" );
    @include generate-utils( gap-x, column-gap, $kendo-utils-gap, $css-var: "spacing" );
    @include generate-utils( gap-y, row-gap, $kendo-utils-gap, $css-var: "spacing" );

}

// #endregion
// #region @import "./_grid-auto-columns.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_grid-auto-columns.scss
/// This is equivalent to `grid-auto-columns: auto;`.
/// @example grid-auto-columns: auto;
/// @name .k-grid-auto-cols-auto
/// @group grid-auto-columns
/// @contextType css

/// This is equivalent to `grid-auto-columns: min-content;`.
/// @example grid-auto-columns: min-content;
/// @name .k-grid-auto-cols-min
/// @group grid-auto-columns
/// @contextType css

/// This is equivalent to `grid-auto-columns: max-content;`.
/// @example grid-auto-columns: max-content;
/// @name .k-grid-auto-cols-max
/// @group grid-auto-columns
/// @contextType css

/// This is equivalent to `grid-auto-columns: minmax( 0, 1fr );`.
/// @example grid-auto-columns: minmax( 0, 1fr );
/// @name .k-grid-auto-cols-fr
/// @group grid-auto-columns
/// @contextType css

@mixin kendo-utils--flex-grid--grid-auto-columns() {

    // Grid auto columns utility classes
    $kendo-utils-grid-auto-columns: k-map-get( $kendo-utils, "grid-auto-columns" ) !default;
    @include generate-utils( grid-auto-cols, grid-auto-columns, $kendo-utils-grid-auto-columns );

}

// #endregion
// #region @import "./_grid-auto-flow.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_grid-auto-flow.scss
/// This is equivalent to `grid-auto-flow: row;`.
/// @example grid-auto-flow: row;
/// @name .k-grid-flow-row
/// @group grid-auto-flow
/// @contextType css

/// This is equivalent to `grid-auto-flow: column;`.
/// @example grid-auto-flow: column;
/// @name .k-grid-flow-column
/// @group grid-auto-flow
/// @contextType css

/// This is equivalent to `grid-auto-flow: dense;`.
/// @example grid-auto-flow: dense;
/// @name .k-grid-flow-dense
/// @group grid-auto-flow
/// @contextType css

/// This is equivalent to `grid-auto-flow: row dense;`.
/// @example grid-auto-flow: row dense;
/// @name .k-grid-flow-row-dense
/// @group grid-auto-flow
/// @contextType css

/// This is equivalent to `grid-auto-flow: col dense;`.
/// @example grid-auto-flow: col dense;
/// @name .k-grid-flow-col-dense
/// @group grid-auto-flow
/// @contextType css

/// This is equivalent to `grid-auto-flow: unset;`.
/// @example grid-auto-flow: unset;
/// @name .k-grid-flow-unset
/// @group grid-auto-flow
/// @contextType css

@mixin kendo-utils--flex-grid--grid-auto-flow() {

    // Grid auto flow utility classes
    $kendo-utils-grid-auto-flow: k-map-get( $kendo-utils, "grid-auto-flow" ) !default;
    @include generate-utils( grid-flow, grid-auto-flow, $kendo-utils-grid-auto-flow );

}

// #endregion
// #region @import "./_grid-auto-rows.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_grid-auto-rows.scss
/// This is equivalent to `grid-auto-rows: auto;`.
/// @example grid-auto-rows: auto;
/// @name .k-grid-auto-rows-auto
/// @group grid-auto-rows
/// @contextType css

/// This is equivalent to `grid-auto-rows: min-content;`.
/// @example grid-auto-rows: min-content;
/// @name .k-grid-auto-rows-min
/// @group grid-auto-rows
/// @contextType css

/// This is equivalent to `grid-auto-rows: max-content;`.
/// @example grid-auto-rows: max-content;
/// @name .k-grid-auto-rows-max
/// @group grid-auto-rows
/// @contextType css

/// This is equivalent to `grid-auto-rows: minmax( 0, 1fr );`.
/// @example grid-auto-rows: minmax( 0, 1fr );
/// @name .k-grid-auto-rows-fr
/// @group grid-auto-rows
/// @contextType css

@mixin kendo-utils--flex-grid--grid-auto-rows() {

    // Grid auto rows utility classes
    $kendo-utils-grid-auto-rows: k-map-get( $kendo-utils, "grid-auto-rows" ) !default;
    @include generate-utils( grid-auto-rows, grid-auto-rows, $kendo-utils-grid-auto-rows );

}

// #endregion
// #region @import "./_grid-column-start-end.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_grid-column-start-end.scss
/// This is equivalent to `grid-column-start: 1;`.
/// @example grid-column-start: 1;
/// @name .k-col-start-1
/// @group grid-column-start
/// @contextType css

/// This is equivalent to `grid-column-start: -1;`.
/// @example grid-column-start: -1;
/// @name .k-col-start--1
/// @group grid-column-start
/// @contextType css

/// This is equivalent to `grid-column-start: auto;`.
/// @example grid-column-start: auto;
/// @name .k-col-start-auto
/// @group grid-column-start
/// @contextType css

@mixin kendo-utils--flex-grid--grid-column-start-end() {

    // Grid column start utility classes
    $kendo-utils-grid-column-start: k-map-get( $kendo-utils, "grid-column-start" ) !default;
    @include generate-utils( col-start, grid-column-start, $kendo-utils-grid-column-start );


    // Grid column end utility classes
    $kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !default;
    @include generate-utils( col-end, grid-column-end, $kendo-utils-grid-column-end );


    // Grid column span utility classes
    $kendo-utils-grid-column-span: k-map-get( $kendo-utils, "grid-column-span" ) !default;
    @include generate-utils( col-span, grid-column, $kendo-utils-grid-column-span );


    // Legacy aliases
    @include generate-utils( colspan, grid-column, $kendo-utils-grid-column-span );
    .#{$kendo-prefix}colspan-all { @extend .#{$kendo-prefix}colspan-full !optional; }
    .\!#{$kendo-prefix}colspan-all { @extend .\!#{$kendo-prefix}colspan-full !optional; }

}

// #endregion
// #region @import "./_grid-row-start-end.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_grid-row-start-end.scss
/// This is equivalent to `grid-row-start: 1;`.
/// @example grid-row-start: 1;
/// @name .k-row-start-1
/// @group grid-row-start
/// @contextType css

/// This is equivalent to `grid-row-start: -1;`.
/// @example grid-row-start: -1;
/// @name .k-row-start--1
/// @group grid-row-start
/// @contextType css

/// This is equivalent to `grid-row-start: auto;`.
/// @example grid-row-start: auto;
/// @name .k-row-start-auto
/// @group grid-row-start
/// @contextType css

@mixin kendo-utils--flex-grid--grid-row-start-end() {

    // Grid row start/end utility classes
    $kendo-utils-grid-row-start: k-map-get( $kendo-utils, "grid-row-start" ) !default;
    @include generate-utils( row-start, grid-row-start, $kendo-utils-grid-row-start );


    // Grid row start/end utility classes
    $kendo-utils-grid-row-end: k-map-get( $kendo-utils, "grid-row-end" ) !default;
    @include generate-utils( row-end, grid-row-end, $kendo-utils-grid-row-end );


    // Grid row span utility classes
    $kendo-utils-grid-row-span: k-map-get( $kendo-utils, "grid-row-span" ) !default;
    @include generate-utils( row-span, grid-row, $kendo-utils-grid-row-span );


    // Legacy aliases
    @include generate-utils( rowspan, grid-row, $kendo-utils-grid-row-span );
    .#{$kendo-prefix}rowspan-all { @extend .#{$kendo-prefix}rowspan-full !optional; }
    .\!#{$kendo-prefix}rowspan-all { @extend .\!#{$kendo-prefix}rowspan-full !optional; }

}

// #endregion
// #region @import "./_grid-template-columns.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_grid-template-columns.scss
/// This is equivalent to `grid-template-columns: repeat(1, minmax(0, 1fr));`.
/// @example grid-template-columns: repeat(1, minmax(0, 1fr));
/// @name .k-grid-cols-1
/// @group grid-template-columns
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(2, minmax(0, 1fr));`.
/// @example grid-template-columns: repeat(2, minmax(0, 1fr));
/// @name .k-grid-cols-2
/// @group grid-template-columns
/// @contextType css

/// This is equivalent to `grid-template-columns: none;`.
/// @example grid-template-columns: none;
/// @name .k-grid-cols-none
/// @group grid-template-columns
/// @contextType css

@mixin kendo-utils--flex-grid--grid-template-columns() {

    // Grid template columns utility classes
    $kendo-utils-grid-template-columns: k-map-get( $kendo-utils, "grid-template-columns" ) !default;
    @include generate-utils( grid-cols, grid-template-columns, $kendo-utils-grid-template-columns );

}

// #endregion
// #region @import "./_grid-template-rows.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_grid-template-rows.scss
/// This is equivalent to `grid-template-rows: repeat(1, minmax(0, 1fr));`.
/// @example grid-template-rows: repeat(1, minmax(0, 1fr));
/// @name .k-grid-rows-1
/// @group grid-template-rows
/// @contextType css

/// This is equivalent to `grid-template-rows: repeat(2, minmax(0, 1fr));`.
/// @example grid-template-rows: repeat(2, minmax(0, 1fr));
/// @name .k-grid-rows-2
/// @group grid-template-rows
/// @contextType css

/// This is equivalent to `grid-template-rows: none;`.
/// @example grid-template-rows: none;
/// @name .k-grid-rows-none
/// @group grid-template-rows
/// @contextType css

@mixin kendo-utils--flex-grid--grid-template-rows() {

    // Grid template rows utility classes
    $kendo-utils-grid-template-rows: k-map-get( $kendo-utils, "grid-template-rows" ) !default;
    @include generate-utils( grid-rows, grid-template-rows, $kendo-utils-grid-template-rows );

}

// #endregion
// #region @import "./_justify-content.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_justify-content.scss
/// This is equivalent to `justify-content: normal;`.
/// @example justify-content: normal;
/// @name .k-justify-content-normal
/// @group justify-content
/// @contextType css

/// This is equivalent to `justify-content: stretch;`.
/// @example justify-content: stretch;
/// @name .k-justify-content-stretch
/// @group justify-content
/// @contextType css

/// This is equivalent to `justify-content: center;`.
/// @example justify-content: center;
/// @name .k-justify-content-center
/// @group justify-content
/// @contextType css

/// This is equivalent to `justify-content: start;`.
/// @example justify-content: start;
/// @name .k-justify-content-start
/// @group justify-content
/// @contextType css

/// This is equivalent to `justify-content: end;`.
/// @example justify-content: end;
/// @name .k-justify-content-end
/// @group justify-content
/// @contextType css

/// This is equivalent to `justify-content: flex-start;`.
/// @example justify-content: flex-start;
/// @name .k-justify-content-selft-start
/// @group justify-content
/// @contextType css

/// This is equivalent to `justify-content: flex-end;`.
/// @example justify-content: flex-end;
/// @name .k-justify-content-self-end
/// @group justify-content
/// @contextType css

/// This is equivalent to `justify-content: baseline;`.
/// @example justify-content: baseline;
/// @name .k-justify-content-baseline
/// @group justify-content
/// @contextType css

/// This is equivalent to `justify-content: first baseline;`.
/// @example justify-content: first baseline;
/// @name .k-justify-content-first-baseline
/// @group justify-content
/// @contextType css

/// This is equivalent to `justify-content: last baseline;`.
/// @example justify-content: last baseline;
/// @name .k-justify-content-last-baseline
/// @group justify-content
/// @contextType css

/// This is equivalent to `justify-content: space-between;`.
/// @example justify-content: space-between;
/// @name .k-justify-content-between
/// @group justify-content
/// @contextType css

/// This is equivalent to `justify-content: space-around;`.
/// @example justify-content: space-around;
/// @name .k-justify-content-around
/// @group justify-content
/// @contextType css

/// This is equivalent to `justify-content: space-evenly;`.
/// @example justify-content: space-evenly;
/// @name .k-justify-content-evenly
/// @group justify-content
/// @contextType css

@mixin kendo-utils--flex-grid--justify-content() {

    // Justify content utility classes
    $kendo-utils-justify-content: k-map-get( $kendo-utils, "justify-content" ) !default;
    @include generate-utils( justify-content, justify-content, $kendo-utils-justify-content );


    // Custom justify-content classes
    .#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0%; }
    .\!.#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0% !important; } // stylelint-disable-line declaration-no-important

}

// #endregion
// #region @import "./_justify-items.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_justify-items.scss
/// This is equivalent to `justify-items: normal;`.
/// @example justify-items: normal;
/// @name .k-justify-items-normal
/// @group justify-items
/// @contextType css

/// This is equivalent to `justify-items: stretch;`.
/// @example justify-items: stretch;
/// @name .k-justify-items-stretch
/// @group justify-items
/// @contextType css

/// This is equivalent to `justify-items: center;`.
/// @example justify-items: center;
/// @name .k-justify-items-center
/// @group justify-items
/// @contextType css

/// This is equivalent to `justify-items: start;`.
/// @example justify-items: start;
/// @name .k-justify-items-start
/// @group justify-items
/// @contextType css

/// This is equivalent to `justify-items: end;`.
/// @example justify-items: end;
/// @name .k-justify-items-end
/// @group justify-items
/// @contextType css

/// This is equivalent to `justify-items: flex-start;`.
/// @example justify-items: flex-start;
/// @name .k-justify-items-selft-start
/// @group justify-items
/// @contextType css

/// This is equivalent to `justify-items: flex-end;`.
/// @example justify-items: flex-end;
/// @name .k-justify-items-self-end
/// @group justify-items
/// @contextType css

/// This is equivalent to `justify-items: self-start;`.
/// @example justify-items: self-start;
/// @name .k-justify-items-selft-start
/// @group justify-items
/// @contextType css

/// This is equivalent to `justify-items: self-end;`.
/// @example justify-items: self-end;
/// @name .k-justify-items-self-end
/// @group justify-items
/// @contextType css

/// This is equivalent to `justify-items: left;`.
/// @example justify-items: left;
/// @name .k-justify-items-left
/// @group justify-items
/// @contextType css

/// This is equivalent to `justify-items: right;`.
/// @example justify-items: right;
/// @name .k-justify-items-right
/// @group justify-items
/// @contextType css

/// This is equivalent to `justify-items: baseline;`.
/// @example justify-items: baseline;
/// @name .k-justify-items-baseline
/// @group justify-items
/// @contextType css

/// This is equivalent to `justify-items: first baseline;`.
/// @example justify-items: first baseline;
/// @name .k-justify-items-first-baseline
/// @group justify-items
/// @contextType css

/// This is equivalent to `justify-items: last baseline;`.
/// @example justify-items: last baseline;
/// @name .k-justify-items-last-baseline
/// @group justify-items
/// @contextType css

@mixin kendo-utils--flex-grid--justify-items() {

    // Justify items utility classes
    $kendo-utils-justify-items: k-map-get( $kendo-utils, "justify-items" ) !default;
    @include generate-utils( justify-items, justify-items, $kendo-utils-justify-items );

}

// #endregion
// #region @import "./_justify-self.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_justify-self.scss
/// This is equivalent to `justify-self: auto;`.
/// @example justify-self: auto;
/// @name .k-justify-self-auto
/// @group justify-self
/// @contextType css

/// This is equivalent to `justify-self: normal;`.
/// @example justify-self: normal;
/// @name .k-justify-self-normal
/// @group justify-self
/// @contextType css

/// This is equivalent to `justify-self: stretch;`.
/// @example justify-self: stretch;
/// @name .k-justify-self-stretch
/// @group justify-self
/// @contextType css

/// This is equivalent to `justify-self: center;`.
/// @example justify-self: center;
/// @name .k-justify-self-center
/// @group justify-self
/// @contextType css

/// This is equivalent to `justify-self: start;`.
/// @example justify-self: start;
/// @name .k-justify-self-start
/// @group justify-self
/// @contextType css

/// This is equivalent to `justify-self: end;`.
/// @example justify-self: end;
/// @name .k-justify-self-end
/// @group justify-self
/// @contextType css

/// This is equivalent to `justify-self: flex-start;`.
/// @example justify-self: flex-start;
/// @name .k-justify-self-selft-start
/// @group justify-self
/// @contextType css

/// This is equivalent to `justify-self: flex-end;`.
/// @example justify-self: flex-end;
/// @name .k-justify-self-self-end
/// @group justify-self
/// @contextType css

/// This is equivalent to `justify-self: self-start;`.
/// @example justify-self: self-start;
/// @name .k-justify-self-selft-start
/// @group justify-self
/// @contextType css

/// This is equivalent to `justify-self: self-end;`.
/// @example justify-self: self-end;
/// @name .k-justify-self-self-end
/// @group justify-self
/// @contextType css

/// This is equivalent to `justify-self: baseline;`.
/// @example justify-self: baseline;
/// @name .k-justify-self-baseline
/// @group justify-self
/// @contextType css

/// This is equivalent to `justify-self: first baseline;`.
/// @example justify-self: first baseline;
/// @name .k-justify-self-first-baseline
/// @group justify-self
/// @contextType css

/// This is equivalent to `justify-self: last baseline;`.
/// @example justify-self: last baseline;
/// @name .k-justify-self-last-baseline
/// @group justify-self
/// @contextType css

@mixin kendo-utils--flex-grid--justify-self() {

    // Justify self utility classes
    $kendo-utils-justify-self: k-map-get( $kendo-utils, "justify-self" ) !default;
    @include generate-utils( justify-self, justify-self, $kendo-utils-justify-self );

}

// #endregion
// #region @import "./_order.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_order.scss
/// This is equivalent to `order: 1;`.
/// @example order: 1;
/// @name .k-order-first
/// @group order
/// @contextType css

/// This is equivalent to `order: -9999;`.
/// @example order: -9999;
/// @name .k-order-first
/// @group order
/// @contextType css

/// This is equivalent to `order: 9999;`.
/// @example order: 9999;
/// @name .k-order-last
/// @group order
/// @contextType css

/// This is equivalent to `order: 0;`.
/// @example order: 0;
/// @name .k-order-none
/// @group order
/// @contextType css

@mixin kendo-utils--flex-grid--order() {

    // Order utility classes
    $kendo-utils-order: k-map-get( $kendo-utils, "order" ) !default;
    @include generate-utils( order, order, $kendo-utils-order );

}

// #endregion
// #region @import "./_place-content.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_place-content.scss
/// This is equivalent to `place-content: normal;`.
/// @example place-content: normal;
/// @name .k-place-content-normal
/// @group place-content
/// @contextType css

/// This is equivalent to `place-content: stretch;`.
/// @example place-content: stretch;
/// @name .k-place-content-stretch
/// @group place-content
/// @contextType css

/// This is equivalent to `place-content: center;`.
/// @example place-content: center;
/// @name .k-place-content-center
/// @group place-content
/// @contextType css

/// This is equivalent to `place-content: start;`.
/// @example place-content: start;
/// @name .k-place-content-start
/// @group place-content
/// @contextType css

/// This is equivalent to `place-content: end;`.
/// @example place-content: end;
/// @name .k-place-content-end
/// @group place-content
/// @contextType css

/// This is equivalent to `place-content: flex-start;`.
/// @example place-content: flex-start;
/// @name .k-place-content-selft-start
/// @group place-content
/// @contextType css

/// This is equivalent to `place-content: flex-end;`.
/// @example place-content: flex-end;
/// @name .k-place-content-self-end
/// @group place-content
/// @contextType css

/// This is equivalent to `place-content: self-start;`.
/// @example place-content: self-start;
/// @name .k-place-content-selft-start
/// @group place-content
/// @contextType css

/// This is equivalent to `place-content: self-end;`.
/// @example place-content: self-end;
/// @name .k-place-content-self-end
/// @group place-content
/// @contextType css

/// This is equivalent to `place-content: baseline;`.
/// @example place-content: baseline;
/// @name .k-place-content-baseline
/// @group place-content
/// @contextType css

/// This is equivalent to `place-content: space-between;`.
/// @example place-content: space-between;
/// @name .k-place-content-between
/// @group place-content
/// @contextType css

/// This is equivalent to `place-content: space-around;`.
/// @example place-content: space-around;
/// @name .k-place-content-around
/// @group place-content
/// @contextType css

/// This is equivalent to `place-content: space-evenly;`.
/// @example place-content: space-evenly;
/// @name .k-place-content-evenly
/// @group place-content
/// @contextType css

@mixin kendo-utils--flex-grid--place-content() {

    // Place content utility classes
    $kendo-utils-place-content: k-map-get( $kendo-utils, "place-content" ) !default;
    @include generate-utils( place-content, place-content, $kendo-utils-place-content );

}

// #endregion
// #region @import "./_place-items.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_place-items.scss
/// This is equivalent to `place-items: normal;`.
/// @example place-items: normal;
/// @name .k-place-items-normal
/// @group place-items
/// @contextType css

/// This is equivalent to `place-items: stretch;`.
/// @example place-items: stretch;
/// @name .k-place-items-stretch
/// @group place-items
/// @contextType css

/// This is equivalent to `place-items: center;`.
/// @example place-items: center;
/// @name .k-place-items-center
/// @group place-items
/// @contextType css

/// This is equivalent to `place-items: start;`.
/// @example place-items: start;
/// @name .k-place-items-start
/// @group place-items
/// @contextType css

/// This is equivalent to `place-items: end;`.
/// @example place-items: end;
/// @name .k-place-items-end
/// @group place-items
/// @contextType css

/// This is equivalent to `place-items: flex-start;`.
/// @example place-items: flex-start;
/// @name .k-place-items-flex-start
/// @group place-items
/// @contextType css

/// This is equivalent to `place-items: flex-end;`.
/// @example place-items: flex-end;
/// @name .k-place-items-flex-end
/// @group place-items
/// @contextType css

/// This is equivalent to `place-items: self-start;`.
/// @example place-items: self-start;
/// @name .k-place-items-self-start
/// @group place-items
/// @contextType css

/// This is equivalent to `place-items: self-end;`.
/// @example place-items: self-end;
/// @name .k-place-items-self-end
/// @group place-items
/// @contextType css

/// This is equivalent to `place-items: baseline;`.
/// @example place-items: baseline;
/// @name .k-place-items-baseline
/// @group place-items
/// @contextType css

@mixin kendo-utils--flex-grid--place-items() {

    // Place items utility classes
    $kendo-utils-place-items: k-map-get( $kendo-utils, "place-items" ) !default;
    @include generate-utils( place-items, place-items, $kendo-utils-place-items );

}

// #endregion
// #region @import "./_place-self.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/flex-grid/_place-self.scss
/// This is equivalent to `place-self: auto;`.
/// @example place-self: auto;
/// @name .k-place-self-auto
/// @group place-self
/// @contextType css

/// This is equivalent to `place-self: normal;`.
/// @example place-self: normal;
/// @name .k-place-self-normal
/// @group place-self
/// @contextType css

/// This is equivalent to `place-self: stretch;`.
/// @example place-self: stretch;
/// @name .k-place-self-stretch
/// @group place-self
/// @contextType css

/// This is equivalent to `place-self: center;`.
/// @example place-self: center;
/// @name .k-place-self-center
/// @group place-self
/// @contextType css

/// This is equivalent to `place-self: start;`.
/// @example place-self: start;
/// @name .k-place-self-start
/// @group place-self
/// @contextType css

/// This is equivalent to `place-self: end;`.
/// @example place-self: end;
/// @name .k-place-self-end
/// @group place-self
/// @contextType css

/// This is equivalent to `place-self: flex-start;`.
/// @example place-self: flex-start;
/// @name .k-place-self-flex-start
/// @group place-self
/// @contextType css

/// This is equivalent to `place-self: flex-end;`.
/// @example place-self: flex-end;
/// @name .k-place-self-flex-end
/// @group place-self
/// @contextType css

/// This is equivalent to `place-self: self-start;`.
/// @example place-self: self-start;
/// @name .k-place-self-self-start
/// @group place-self
/// @contextType css

/// This is equivalent to `place-self: self-end;`.
/// @example place-self: self-end;
/// @name .k-place-self-self-end
/// @group place-self
/// @contextType css

/// This is equivalent to `place-self: baseline;`.
/// @example place-self: baseline;
/// @name .k-place-self-baseline
/// @group place-self
/// @contextType css

@mixin kendo-utils--flex-grid--place-self() {

    // Place self utility classes
    $kendo-utils-place-self: k-map-get( $kendo-utils, "place-self" ) !default;
    @include generate-utils( place-self, place-self, $kendo-utils-place-self );

}

// #endregion


@mixin kendo-utils--flex-grid() {
    @include kendo-utils--flex-grid--align-content();
    @include kendo-utils--flex-grid--align-items();
    @include kendo-utils--flex-grid--align-self();
    @include kendo-utils--flex-grid--flex-basis();
    @include kendo-utils--flex-grid--flex-direction();
    @include kendo-utils--flex-grid--flex-grow();
    @include kendo-utils--flex-grid--flex-shrink();
    @include kendo-utils--flex-grid--flex-wrap();
    @include kendo-utils--flex-grid--flex();
    @include kendo-utils--flex-grid--gap();
    @include kendo-utils--flex-grid--grid-auto-columns();
    @include kendo-utils--flex-grid--grid-auto-flow();
    @include kendo-utils--flex-grid--grid-auto-rows();
    @include kendo-utils--flex-grid--grid-column-start-end();
    @include kendo-utils--flex-grid--grid-row-start-end();
    @include kendo-utils--flex-grid--grid-template-columns();
    @include kendo-utils--flex-grid--grid-template-rows();
    @include kendo-utils--flex-grid--justify-content();
    @include kendo-utils--flex-grid--justify-items();
    @include kendo-utils--flex-grid--justify-self();
    @include kendo-utils--flex-grid--order();
    @include kendo-utils--flex-grid--place-content();
    @include kendo-utils--flex-grid--place-items();
    @include kendo-utils--flex-grid--place-self();
}

// #endregion
// #region @import "./spacing/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/spacing/index.import.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./sizing/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/sizing/index.import.scss
// #region @import "./_height.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/sizing/_height.scss
/// This is equivalent to `height: 0;`.
/// @example height: 0;
/// @name .k-h-0
/// @group height
/// @contextType css

/// This is equivalent to `height: 1px;`.
/// @example height: 1px;
/// @name .k-h-1px
/// @group height
/// @contextType css

/// This is equivalent to `height: 0.25rem;`.
/// @example height: 0.25rem;
/// @name .k-h-1
/// @group height
/// @contextType css

/// This is equivalent to `min-height: 100%;`.
/// @example min-height: 100%;
/// @name .k-h-full
/// @group height
/// @contextType css

/// This is equivalent to `height: 100vh;`.
/// @example height: 100vh;
/// @name .k-h-screen
/// @group height
/// @contextType css

/// This is equivalent to `height: min-content;`.
/// @example height: min-content;
/// @name .k-h-min
/// @group height
/// @contextType css

/// This is equivalent to `height: max-content;`.
/// @example height: max-content;
/// @name .k-h-max
/// @group height
/// @contextType css

/// This is equivalent to `height: fit-content;`.
/// @example height: fit-content;
/// @name .k-h-fit
/// @group height
/// @contextType css

/// This is equivalent to `min-height: 0;`.
/// @example min-height: 0;
/// @name .k-min-h-0
/// @group height
/// @contextType css

/// This is equivalent to `min-height: 1px;`.
/// @example min-height: 1px;
/// @name .k-min-h-1px
/// @group height
/// @contextType css

/// This is equivalent to `min-height: 0.25rem;`.
/// @example min-height: 0.25rem;
/// @name .k-min-h-1
/// @group height
/// @contextType css

/// This is equivalent to `min-height: 100%;`.
/// @example min-height: 100%;
/// @name .k-min-h-full
/// @group height
/// @contextType css

/// This is equivalent to `min-height: 100vh;`.
/// @example min-height: 100vh;
/// @name .k-min-h-screen
/// @group height
/// @contextType css

/// This is equivalent to `min-height: min-content;`.
/// @example min-height: min-content;
/// @name .k-min-h-min
/// @group height
/// @contextType css

/// This is equivalent to `min-height: max-content;`.
/// @example min-height: max-content;
/// @name .k-min-h-max
/// @group height
/// @contextType css

/// This is equivalent to `min-height: fit-content;`.
/// @example min-height: fit-content;
/// @name .k-min-h-fit
/// @group height
/// @contextType css

/// This is equivalent to `max-height: 0;`.
/// @example max-height: 0;
/// @name .k-max-h-0
/// @group height
/// @contextType css

/// This is equivalent to `max-height: 1px;`.
/// @example max-height: 1px;
/// @name .k-max-h-1px
/// @group height
/// @contextType css

/// This is equivalent to `max-height: 0.25rem;`.
/// @example max-height: 0.25rem;
/// @name .k-max-h-1
/// @group height
/// @contextType css

/// This is equivalent to `max-height: 100%;`.
/// @example max-height: 100%;
/// @name .k-max-h-full
/// @group height
/// @contextType css

/// This is equivalent to `max-height: 100vh;`.
/// @example max-height: 100vh;
/// @name .k-max-h-screen
/// @group height
/// @contextType css

/// This is equivalent to `max-height: min-content;`.
/// @example max-height: min-content;
/// @name .k-max-h-min
/// @group height
/// @contextType css

/// This is equivalent to `max-height: max-content;`.
/// @example max-height: max-content;
/// @name .k-max-h-max
/// @group height
/// @contextType css

/// This is equivalent to `max-height: fit-content;`.
/// @example max-height: fit-content;
/// @name .k-max-h-fit
/// @group height
/// @contextType css

@mixin kendo-utils--sizing--height() {

    // Height utility classes
    $kendo-utils-height: k-map-get( $kendo-utils, "height" ) !default;
    @include generate-utils( h, height, $kendo-utils-height );

    // Min height utility classes
    $kendo-utils-min-height: k-map-get( $kendo-utils, "min-height" ) !default;
    @include generate-utils( min-h, min-height, $kendo-utils-min-height );

    // Max height utility classes
    $kendo-utils-max-height: k-map-get( $kendo-utils, "max-height" ) !default;
    @include generate-utils( max-h, max-height, $kendo-utils-max-height );

}

// #endregion
// #region @import "./_width.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/sizing/_width.scss
/// This is equivalent to `width: 0;`.
/// @example width: 0;
/// @name .k-w-0
/// @group width
/// @contextType css

/// This is equivalent to `width: 1px;`.
/// @example width: 1px;
/// @name .k-w-1px
/// @group width
/// @contextType css

/// This is equivalent to `width: 0.25rem;`.
/// @example width: 0.25rem;
/// @name .k-w-1
/// @group width
/// @contextType css

/// This is equivalent to `min-width: 100%;`.
/// @example min-width: 100%;
/// @name .k-w-full
/// @group width
/// @contextType css

/// This is equivalent to `width: 100vw;`.
/// @example width: 100vw;
/// @name .k-w-screen
/// @group width
/// @contextType css

/// This is equivalent to `width: min-content;`.
/// @example width: min-content;
/// @name .k-w-min
/// @group width
/// @contextType css

/// This is equivalent to `width: max-content;`.
/// @example width: max-content;
/// @name .k-w-max
/// @group width
/// @contextType css

/// This is equivalent to `width: fit-content;`.
/// @example width: fit-content;
/// @name .k-w-fit
/// @group width
/// @contextType css

/// This is equivalent to `min-width: 0;`.
/// @example min-width: 0;
/// @name .k-min-w-0
/// @group width
/// @contextType css

/// This is equivalent to `min-width: 1px;`.
/// @example min-width: 1px;
/// @name .k-min-w-1px
/// @group width
/// @contextType css

/// This is equivalent to `min-width: 0.25rem;`.
/// @example min-width: 0.25rem;
/// @name .k-min-w-1
/// @group width
/// @contextType css

/// This is equivalent to `min-width: 100%;`.
/// @example min-width: 100%;
/// @name .k-min-w-full
/// @group width
/// @contextType css

/// This is equivalent to `min-width: 100vw;`.
/// @example min-width: 100vw;
/// @name .k-min-w-screen
/// @group width
/// @contextType css

/// This is equivalent to `min-width: min-content;`.
/// @example min-width: min-content;
/// @name .k-min-w-min
/// @group width
/// @contextType css

/// This is equivalent to `min-width: max-content;`.
/// @example min-width: max-content;
/// @name .k-min-w-max
/// @group width
/// @contextType css

/// This is equivalent to `min-width: fit-content;`.
/// @example min-width: fit-content;
/// @name .k-min-w-fit
/// @group width
/// @contextType css

/// This is equivalent to `max-width: 0;`.
/// @example max-width: 0;
/// @name .k-max-w-0
/// @group width
/// @contextType css

/// This is equivalent to `max-width: 1px;`.
/// @example max-width: 1px;
/// @name .k-max-w-1px
/// @group width
/// @contextType css

/// This is equivalent to `max-width: 0.25rem;`.
/// @example max-width: 0.25rem;
/// @name .k-max-w-1
/// @group width
/// @contextType css

/// This is equivalent to `max-width: 100%;`.
/// @example max-width: 100%;
/// @name .k-max-w-full
/// @group width
/// @contextType css

/// This is equivalent to `max-width: 100vh;`.
/// @example max-width: 100vh;
/// @name .k-max-w-screen
/// @group width
/// @contextType css

/// This is equivalent to `max-width: min-content;`.
/// @example max-width: min-content;
/// @name .k-max-w-min
/// @group width
/// @contextType css

/// This is equivalent to `max-width: max-content;`.
/// @example max-width: max-content;
/// @name .k-max-w-max
/// @group width
/// @contextType css

/// This is equivalent to `max-width: fit-content;`.
/// @example max-width: fit-content;
/// @name .k-max-w-fit
/// @group width
/// @contextType css

@mixin kendo-utils--sizing--width() {

    // Width utility classes
    $kendo-utils-width: k-map-get( $kendo-utils, "width" ) !default;
    @include generate-utils( w, width, $kendo-utils-width );

    // Min-width utility classes
    $kendo-utils-min-width: k-map-get( $kendo-utils, "min-width" ) !default;
    @include generate-utils( min-w, min-width, $kendo-utils-min-width );

    // Max-width utility classes
    $kendo-utils-max-width: k-map-get( $kendo-utils, "max-width" ) !default;
    @include generate-utils( max-w, max-width, $kendo-utils-max-width );

}

// #endregion


@mixin kendo-utils--sizing() {
    @include kendo-utils--sizing--height();
    @include kendo-utils--sizing--width();
}

// #endregion
// #region @import "./typography/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/index.import.scss
// font family
// #region @import "./_font-family.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/_font-family.scss
// #region @import "@progress/kendo-theme-core/scss/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/index.import.scss
// File already imported_once. Skipping output.
// #endregion

@mixin kendo-utils--typography--font-family() {

    // Font family utility classes
    @include generate-utils( font-family, font-family, $kendo-font-families, $css-var: "font-family" );

}

// #endregion
// #region @import "./_font-size.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/_font-size.scss
// #region @import "@progress/kendo-theme-core/scss/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/index.import.scss
// File already imported_once. Skipping output.
// #endregion

/// This is equivalent to `font-size: 10px;`.
/// @example font-size: 10px;
/// @name .k-font-size-xs
/// @group font-size
/// @contextType css

/// This is equivalent to `font-size: 12px;`.
/// @example font-size: 12px;
/// @name .k-font-size-sm
/// @group font-size
/// @contextType css

/// This is equivalent to `font-size: 14px;`.
/// @example font-size: 14px;
/// @name .k-font-size-md
/// @group font-size
/// @contextType css

/// This is equivalent to `font-size: 16px;`.
/// @example font-size: 16px;
/// @name .k-font-size-lg
/// @group font-size
/// @contextType css

/// This is equivalent to `font-size: 20px;`.
/// @example font-size: 20px;
/// @name .k-font-size-xl
/// @group font-size
/// @contextType css

@mixin kendo-utils--typography--font-size() {

    // Font size utility classes
    @include generate-utils( font-size, font-size, $kendo-font-sizes, $css-var: "font-size" );

    // Legacy aliases
    @include generate-utils( fs, font-size, $kendo-font-sizes, $css-var: "fs" );

}

// #endregion
// font smoothing
// #region @import "./_font-style.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/_font-style.scss
/// This is equivalent to `font-style: italic;`.
/// @example font-style: italic;
/// @name .k-font-italic
/// @group font-style
/// @contextType css

/// This is equivalent to `font-style: normal;`.
/// @example font-style: normal;
/// @name .k-font-non-italic
/// @group font-style
/// @contextType css

@mixin kendo-utils--typography--font-style() {

    // Font style utility classes
    $kendo-utils-font-style: k-map-get( $kendo-utils, "font-style" ) !default;
    @include generate-utils( font-style, font-style, $kendo-utils-font-style, $css-var: "font-style" );

}

// #endregion
// #region @import "./_font-weight.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/_font-weight.scss
// #region @import "@progress/kendo-theme-core/scss/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/index.import.scss
// File already imported_once. Skipping output.
// #endregion

/// This is equivalent to `font-weight: 100;`.
/// @example font-weight: 100;
/// @name .k-font-thin
/// @group font-weight
/// @contextType css

/// This is equivalent to `font-weight: 200;`.
/// @example font-weight: 200;
/// @name .k-font-extralight
/// @group font-weight
/// @contextType css

/// This is equivalent to `font-weight: 300;`.
/// @example font-weight: 300;
/// @name .k-font-light
/// @group font-weight
/// @contextType css

/// This is equivalent to `font-weight: 400;`.
/// @example font-weight: 400;
/// @name .k-font-normal
/// @group font-weight
/// @contextType css

/// This is equivalent to `font-weight: 500;`.
/// @example font-weight: 500;
/// @name .k-font-medium
/// @group font-weight
/// @contextType css

/// This is equivalent to `font-weight: 600;`.
/// @example font-weight: 600;
/// @name .k-font-semibold
/// @group font-weight
/// @contextType css

/// This is equivalent to `font-weight: 700;`.
/// @example font-weight: 700;
/// @name .k-font-bold
/// @group font-weight
/// @contextType css

/// This is equivalent to `font-weight: 800;`.
/// @example font-weight: 800;
/// @name .k-font-extrabold
/// @group font-weight
/// @contextType css

/// This is equivalent to `font-weight: 900;`.
/// @example font-weight: 900;
/// @name .k-font-black
/// @group font-weight
/// @contextType css

@mixin kendo-utils--typography--font-weight() {

    // Font weight utility classes
    @include generate-utils( font, font-weight, $kendo-font-weights, $css-var: "font-weight" );


    // Legacy aliases
    @include generate-utils( font-weight, font-weight, $kendo-font-weights, $css-var: "font-weight" );

}

// #endregion
// font variant
// letter spacing
// #region @import "./_letter-spacing.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/_letter-spacing.scss
// #region @import "@progress/kendo-theme-core/scss/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/index.import.scss
// File already imported_once. Skipping output.
// #endregion

@mixin kendo-utils--typography--letter-spacing() {

    // Letter spacing utility classes
    @include generate-utils( letter-spacing, letter-spacing, $kendo-letter-spacings, $css-var: "letter-spacing" );

}


// #endregion
// line height
// #region @import "./_line-height.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/_line-height.scss
// #region @import "@progress/kendo-theme-core/scss/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/index.import.scss
// File already imported_once. Skipping output.
// #endregion

@mixin kendo-utils--typography--line-height() {

    // Line height utility classes
    @include generate-utils( line-height, line-height, $kendo-line-heights, $css-var: "line-height" );

}

// #endregion
// #region @import "./_list-style.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/_list-style.scss
/// This is equivalent to `list-style-type: none;`.
/// @example list-style-type: none;
/// @name .k-list-none
/// @group list-style
/// @contextType css

/// This is equivalent to `list-style-type: disc;`.
/// @example list-style-type: disc;
/// @name .k-list-disc
/// @group list-style
/// @contextType css

/// This is equivalent to `list-style-type: decimal;`.The marker of list items is a number.
/// @example list-style-type: decimal;
/// @name .k-list-decimal
/// @group list-style
/// @contextType css

@mixin kendo-utils--typography--list-style-type() {

    // list-style-type utility classes
    $kendo-utils-list-style-type: k-map-get( $kendo-utils, "list-style-type" ) !default;
    @include generate-utils( list, list-style-type, $kendo-utils-list-style-type );

}

// #endregion
// #region @import "./_text-align.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/_text-align.scss
/// This is equivalent to `text-align: left;`.
/// @example text-align: left;
/// @name .k-text-left
/// @group text-align
/// @contextType css

/// This is equivalent to `text-align: right;`.
/// @example text-align: right;
/// @name .k-text-right
/// @group text-align
/// @contextType css

/// This is equivalent to `text-align: center;`.
/// @example text-align: center;
/// @name .k-text-center
/// @group text-align
/// @contextType css

/// This is equivalent to `text-align: justify;`.
/// @example text-align: justify;
/// @name .k-text-justify
/// @group text-align
/// @contextType css

@mixin kendo-utils--typography--text-align() {

    // Text align utility classes
    $kendo-utils-text-align: k-map-get( $kendo-utils, "text-align" ) !default;

    @include generate-utils( text, text-align, $kendo-utils-text-align );

}

// #endregion
// #region @import "./_text-color.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/_text-color.scss
// TODO: docs

@mixin kendo-utils--typography--text-color() {

    // Text color utility classes
    $kendo-utils-text-color: k-map-get( $kendo-utils, "text-color" ) !default;
    @include generate-utils( text, color, $kendo-utils-text-color, $css-var: 'color' );


    // Legacy aliases
    @include generate-utils( color, color, $kendo-utils-text-color, $css-var: 'color' );

}

// #endregion
// #region @import "./_text-decoration.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/_text-decoration.scss
/// This is equivalent to `text-decoration: underline;`.
/// @example text-decoration: underline;
/// @name .k-text-underline
/// @group text-decoration
/// @contextType css

/// This is equivalent to `text-decoration: overline;`.
/// @example text-decoration: overline;
/// @name .k-text-overline
/// @group text-decoration
/// @contextType css

/// This is equivalent to `text-decoration: line-through;`.
/// @example text-decoration: line-through;
/// @name .k-text-line-through
/// @group text-decoration
/// @contextType css

/// This is equivalent to `text-decoration: none-decoration;`.
/// @example text-decoration: none-decoration;
/// @name .k-text-no-underline
/// @group text-decoration
/// @contextType css

@mixin kendo-utils--typography--text-decoration() {

    // text-decoration utility classes
    $kendo-utils-text-decoration: k-map-get( $kendo-utils, "text-decoration" ) !default;
    @include generate-utils( text, text-decoration, $kendo-utils-text-decoration );

}

// #endregion
// #region @import "./_text-overflow.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/_text-overflow.scss
/// This is equivalent to `text-overflow: clip;`.
/// @example text-overflow: clip;
/// @name .k-text-clip
/// @group text-overflow
/// @contextType css

/// This is equivalent to `text-overflow: ellipsis; white-space: nowrap; overflow: hidden;`.
/// @example text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
/// @name .k-text-ellipsis
/// @group text-overflow
/// @contextType css

@mixin kendo-utils--typography--text-overflow() {

    // Text overflow utility classes
    $kendo-utils-text-overflow: k-map-get( $kendo-utils, "text-overflow" ) !default;
    @include generate-utils( text, text-overflow, $kendo-utils-text-overflow );


    // Text truncate utility classes
    .#{$kendo-prefix}text-truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .\!#{$kendo-prefix}text-truncate {
        white-space: nowrap !important; // stylelint-disable-line declaration-no-important
        overflow: hidden !important; // stylelint-disable-line declaration-no-important
        text-overflow: ellipsis !important; // stylelint-disable-line declaration-no-important
    }

    // Legacy aliases
    .#{$kendo-prefix}text-ellipsis { @extend .#{$kendo-prefix}text-truncate !optional; }
    .\!#{$kendo-prefix}text-ellipsis { @extend .\!#{$kendo-prefix}text-truncate !optional; }

}

// #endregion
// #region @import "./_text-transform.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/_text-transform.scss
/// This is equivalent to `text-transform: lowercase;`.
/// @example text-transform: lowercase;
/// @name .k-text-lowercase
/// @group text-transform
/// @contextType css

/// This is equivalent to `text-transform: uppercase;`.
/// @example text-transform: uppercase;
/// @name .k-text-uppercase
/// @group text-transform
/// @contextType css

/// This is equivalent to `text-transform: capitalize;`.
/// @example text-transform: capitalize;
/// @name .k-text-capitalize
/// @group text-transform
/// @contextType css

@mixin kendo-utils--typography--text-transform() {

    // Text transform utility classes
    $kendo-utils-text-transform: k-map-get( $kendo-utils, "text-transform" ) !default;
    @include generate-utils( text, text-transform, $kendo-utils-text-transform );

}

// #endregion
// text indent
// #region @import "./_vertical-align.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/_vertical-align.scss
/// This is equivalent to `vertical-align: baseline;`.
/// @example vertical-align: baseline;
/// @name .k-align-baseline
/// @group vertical-align
/// @contextType css

/// This is equivalent to `vertical-align: top;`.
/// @example vertical-align: top;
/// @name .k-align-top
/// @group vertical-align
/// @contextType css

/// This is equivalent to `vertical-align: middle;`.
/// @example vertical-align: middle;
/// @name .k-align-middle
/// @group vertical-align
/// @contextType css

/// This is equivalent to `vertical-align: bottom;`.
/// @example vertical-align: bottom;
/// @name .k-align-bottom
/// @group vertical-align
/// @contextType css

/// This is equivalent to `vertical-align: text-top;`.
/// @example vertical-align: text-top;
/// @name .k-align-text-top
/// @group vertical-align
/// @contextType css

/// This is equivalent to `vertical-align: text-bottom;`.
/// @example vertical-align: text-bottom;
/// @name .k-align-text-bottom
/// @group vertical-align
/// @contextType css

/// This is equivalent to `vertical-align: sub;`.
/// @example vertical-align: sub;
/// @name .k-align-sub
/// @group vertical-align
/// @contextType css

/// This is equivalent to `vertical-align: super;`.
/// @example vertical-align: super;
/// @name .k-align-super
/// @group vertical-align
/// @contextType css

@mixin kendo-utils--typography--vertical-align() {

    // vertical-align utility classes
    $kendo-utils-vertical-align: k-map-get( $kendo-utils, "vertical-align" ) !default;
    @include generate-utils( align, vertical-align, $kendo-utils-vertical-align );

}

// #endregion
// #region @import "./_white-space.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/_white-space.scss
/// This is equivalent to `white-space: normal;`.
/// @example white-space: normal;
/// @name .k-white-space-normal
/// @group white-space
/// @contextType css

/// This is equivalent to `white-space: nowrap;`.
/// @example white-space: nowrap;
/// @name .k-white-space-nowrap
/// @group white-space
/// @contextType css

/// This is equivalent to `white-space: pre;`.
/// @example white-space: pre;
/// @name .k-white-space-pre
/// @group white-space
/// @contextType css

/// This is equivalent to `white-space: pre-wrap;`.
/// @example white-space: pre-wrap;
/// @name .k-white-space-pre-wrap
/// @group white-space
/// @contextType css

/// This is equivalent to `white-space: pre-line;`.
/// @example white-space: pre-line;
/// @name .k-white-space-pre-line
/// @group white-space
/// @contextType css

/// This is equivalent to `white-space: break-spaces;`.
/// @example white-space: break-spaces;
/// @name .k-white-space-break-spaces
/// @group white-space
/// @contextType css

@mixin kendo-utils--typography--white-space() {

    // White space utility classes
    $kendo-utils-white-space: k-map-get( $kendo-utils, "white-space" ) !default;

    @include generate-utils( white-space, white-space, $kendo-utils-white-space );
    @include generate-utils( whitespace, white-space, $kendo-utils-white-space );


    // Legacy aliases
    .#{$kendo-prefix}text-nowrap { @extend .#{$kendo-prefix}white-space-nowrap !optional; }

}

// #endregion


@mixin kendo-utils--typography() {
    @include kendo-utils--typography--font-family();
    @include kendo-utils--typography--font-size();
    @include kendo-utils--typography--font-style();
    @include kendo-utils--typography--font-weight();
    @include kendo-utils--typography--letter-spacing();
    @include kendo-utils--typography--line-height();
    @include kendo-utils--typography--list-style-type();
    @include kendo-utils--typography--text-align();
    @include kendo-utils--typography--text-color();
    @include kendo-utils--typography--text-decoration();
    @include kendo-utils--typography--text-overflow();
    @include kendo-utils--typography--text-transform();
    @include kendo-utils--typography--vertical-align();
    @include kendo-utils--typography--white-space();
}

// #endregion
// #region @import "./background/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/background/index.import.scss
// #region @import "./_background-clip.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/background/_background-clip.scss
/// This is equivalent to `background-clip: border-box;`.
/// @example background-clip: border-box;
/// @name .k-bg-clip-border
/// @group background-clip
/// @contextType css

/// This is equivalent to `background-clip: padding-box;`.
/// @example background-clip: padding-box;
/// @name .k-bg-clip-padding
/// @group background-clip
/// @contextType css

/// This is equivalent to `background-clip: content-box;`.
/// @example background-clip: content-box;
/// @name .k-bg-clip-content
/// @group background-clip
/// @contextType css

/// This is equivalent to `background-clip: text;`.
/// @example background-clip: text;
/// @name .k-bg-clip-text
/// @group background-clip
/// @contextType css

@mixin kendo-utils--background--background-clip() {

    // Background color utility classes
    $kendo-utils-background-clip: k-map-get( $kendo-utils, "background-clip" ) !default;
    @include generate-utils( bg-clip, background-clip, $kendo-utils-background-clip );

}

// #endregion
// #region @import "./_background-color.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/background/_background-color.scss
/// This is equivalent to `background-color: inherit;`.
/// @example background-color: inherit;
/// @name .k-bg-inherit
/// @group background-color
/// @contextType css

/// This is equivalent to `background-color: transparent;`.
/// @example background-color: transparent;
/// @name .k-bg-transparent
/// @group background-color
/// @contextType css

/// This is equivalent to `background-color: black;`.
/// @example background-color: black;
/// @name .k-bg-black
/// @group background-color
/// @contextType css

/// This is equivalent to `background-color: white;`.
/// @example background-color: white;
/// @name .k-bg-white
/// @group background-color
/// @contextType css

@mixin kendo-utils--background--background-color() {

    // Background color utility classes
    $kendo-utils-background-color: k-map-get( $kendo-utils, "background-color" ) !default;
    @include generate-utils( bg, background-color, $kendo-utils-background-color, $css-var: 'color' );

}

// #endregion
// #region @import "./_background-position.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/background/_background-position.scss
/// This is equivalent to `background-position: center;`.
/// @example background-position: center;
/// @name .k-bg-center
/// @group background-position
/// @contextType css

/// This is equivalent to `background-position: top;`.
/// @example background-position: top;
/// @name .k-bg-top
/// @group background-position
/// @contextType css

/// This is equivalent to `background-position: right;`.
/// @example background-position: right;
/// @name .k-bg-right
/// @group background-position
/// @contextType css

/// This is equivalent to `background-position: bottom;`.
/// @example background-position: bottom;
/// @name .k-bg-bottom
/// @group background-position
/// @contextType css

/// This is equivalent to `background-position: left;`.
/// @example background-position: left;
/// @name .k-bg-left
/// @group background-position
/// @contextType css

/// This is equivalent to `background-position: top left;`.
/// @example background-position: top left;
/// @name .k-bg-top-left
/// @group background-position
/// @contextType css

/// This is equivalent to `background-position: top right;`.
/// @example background-position: top right;
/// @name .k-bg-top-right
/// @group background-position
/// @contextType css

/// This is equivalent to `background-position: bottom left;`.
/// @example background-position: bottom left;
/// @name .k-bg-bottom-left
/// @group background-position
/// @contextType css

/// This is equivalent to `background-position: bottom right;`.
/// @example background-position: bottom right;
/// @name .k-bg-bottom-right
/// @group background-position
/// @contextType css

@mixin kendo-utils--background--background-position() {

    // Background position utility classes
    $kendo-utils-background-position: k-map-get( $kendo-utils, "background-position" ) !default;
    @include generate-utils( bg, background-position, $kendo-utils-background-position );

}

// #endregion
// #region @import "./_background-size.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/background/_background-size.scss
/// This is equivalent to `background-size: auto;`.
/// @example background-size: auto;
/// @name .k-bg-auto
/// @group background-size
/// @contextType css

/// This is equivalent to `background-size: cover;`.
/// @example background-size: cover;
/// @name .k-bg-cover
/// @group background-size
/// @contextType css

/// This is equivalent to `background-size: contain;`.
/// @example background-size: contain;
/// @name .k-bg-contain
/// @group background-size
/// @contextType css

@mixin kendo-utils--background--background-size() {

    // Background size utility classes
    $kendo-utils-background-size: k-map-get( $kendo-utils, "background-size" ) !default;
    @include generate-utils( bg, background-size, $kendo-utils-background-size );

}

// #endregion


@mixin kendo-utils--background() {
    @include kendo-utils--background--background-clip();
    @include kendo-utils--background--background-color();
    @include kendo-utils--background--background-position();
    @include kendo-utils--background--background-size();
}

// #endregion
// #region @import "./border/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/border/index.import.scss
// #region @import "./_border-color.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/border/_border-color.scss
/// This is equivalent to `border-color: inherit;`.
/// @example border-color: inherit;
/// @name .k-border-inherit
/// @group border-color
/// @contextType css

/// This is equivalent to `border-color: currentColor;`.
/// @example border-color: currentColor;
/// @name .k-border-currentColor
/// @group border-color
/// @contextType css

/// This is equivalent to `border-color: transparent;`.
/// @example border-color: transparent;
/// @name .k-border-transparent
/// @group border-color
/// @contextType css

/// This is equivalent to `border-color: black;`.
/// @example border-color: black;
/// @name .k-border-black
/// @group border-color
/// @contextType css

/// This is equivalent to `border-color: white;`.
/// @example border-color: white;
/// @name .k-border-white
/// @group border-color
/// @contextType css


@mixin kendo-utils--border--border-color() {

    // Border color utility classes
    $kendo-utils-border-color: k-map-get( $kendo-utils, "border-color" ) !default;
    @include generate-utils( border, border-color, $kendo-utils-border-color, $css-var: 'color' );

}

// #endregion
// #region @import "./_border-radius.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/border/_border-radius.scss
/// This is equivalent to `border-radius: 0.25rem;`.
/// @example border-radius: 0.25rem;
/// @name .k-rounded
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-radius: 0;`.
/// @example border-radius: 0;
/// @name .k-rounded-0
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-radius: 0.125rem;`.
/// @example border-radius: 0.125rem;
/// @name .k-rounded-sm
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-radius: 0.25rem;`.
/// @example border-radius: 0.25rem;
/// @name .k-rounded-md
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-radius: 0.5rem;`.
/// @example border-radius: 0.5rem;
/// @name .k-rounded-lg
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-radius: 9999px;`.
/// @example border-radius: 9999px;
/// @name .k-rounded-full
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-left-radius: 0.25rem;`.
/// @example border-top-left-radius: 0.25rem;
/// @name .k-rounded-tl
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-left-radius: 0;`.
/// @example border-top-left-radius: 0;
/// @name .k-rounded-tl-0
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-left-radius: 0.125rem;`.
/// @example border-top-left-radius: 0.125rem;
/// @name .k-rounded-tl-sm
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-left-radius: 0.25rem;`.
/// @example border-top-left-radius: 0.25rem;
/// @name .k-rounded-tl-md
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-left-radius: 0.5rem;`.
/// @example border-top-left-radius: 0.5rem;
/// @name .k-rounded-tl-lg
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-left-radius: 9999px;`.
/// @example border-top-left-radius: 9999px;
/// @name .k-rounded-tl-full
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-right-radius: 0.25rem;`.
/// @example border-top-right-radius: 0.25rem;
/// @name .k-rounded-tr
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-right-radius: 0;`.
/// @example border-top-right-radius: 0;
/// @name .k-rounded-tr-0
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-right-radius: 0.125rem;`.
/// @example border-top-right-radius: 0.125rem;
/// @name .k-rounded-tr-sm
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-right-radius: 0.25rem;`.
/// @example border-top-right-radius: 0.25rem;
/// @name .k-rounded-tr-md
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-right-radius: 0.5rem;`.
/// @example border-top-right-radius: 0.5rem;
/// @name .k-rounded-tr-lg
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-right-radius: 9999px;`.
/// @example border-top-right-radius: 9999px;
/// @name .k-rounded-tr-full
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-right-radius: 0.25rem;`.
/// @example border-bottom-right-radius: 0.25rem;
/// @name .k-rounded-br
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-right-radius: 0;`.
/// @example border-bottom-right-radius: 0;
/// @name .k-rounded-br-0
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-right-radius: 0.125rem;`.
/// @example border-bottom-right-radius: 0.125rem;
/// @name .k-rounded-br-sm
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-right-radius: 0.25rem;`.
/// @example border-bottom-right-radius: 0.25rem;
/// @name .k-rounded-br-md
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-right-radius: 0.5rem;`.
/// @example border-bottom-right-radius: 0.5rem;
/// @name .k-rounded-br-lg
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-right-radius: 9999px;`.
/// @example border-bottom-right-radius: 9999px;
/// @name .k-rounded-br-full
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-left-radius: 0.25rem;`.
/// @example border-bottom-left-radius: 0.25rem;
/// @name .k-rounded-bl
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-left-radius: 0;`.
/// @example border-bottom-left-radius: 0;
/// @name .k-rounded-bl-0
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-left-radius: 0.125rem;`.
/// @example border-bottom-left-radius: 0.125rem;
/// @name .k-rounded-bl-sm
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-left-radius: 0.25rem;`.
/// @example border-bottom-left-radius: 0.25rem;
/// @name .k-rounded-bl-md
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-left-radius: 0.5rem;`.
/// @example border-bottom-left-radius: 0.5rem;
/// @name .k-rounded-bl-lg
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-right-radius: 9999px;`.
/// @example border-bottom-right-radius: 9999px;
/// @name .k-rounded-bl-full
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-radius: 0.25rem;`.
/// @example border-top-radius: 0.25rem;
/// @name .k-rounded-t
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-radius: 0;`.
/// @example border-top-radius: 0;
/// @name .k-rounded-t-0
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-radius: 0.125rem;`.
/// @example border-top-radius: 0.125rem;
/// @name .k-rounded-t-sm
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-radius: 0.25rem;`.
/// @example border-top-radius: 0.25rem;
/// @name .k-rounded-t-md
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-radius: 0.5rem;`.
/// @example border-top-radius: 0.5rem;
/// @name .k-rounded-t-lg
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-top-radius: 9999px;`.
/// @example border-top-radius: 9999px;
/// @name .k-rounded-t-full
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-right-radius: 0.25rem;`.
/// @example border-right-radius: 0.25rem;
/// @name .k-rounded-r
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-right-radius: 0;`.
/// @example border-right-radius: 0;
/// @name .k-rounded-r-0
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-right-radius: 0.125rem;`.
/// @example border-right-radius: 0.125rem;
/// @name .k-rounded-r-sm
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-right-radius: 0.25rem;`.
/// @example border-right-radius: 0.25rem;
/// @name .k-rounded-r-md
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-right-radius: 0.5rem;`.
/// @example border-right-radius: 0.5rem;
/// @name .k-rounded-r-lg
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-right-radius: 9999px;`.
/// @example border-right-radius: 9999px;
/// @name .k-rounded-r-full
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-radius: 0.25rem;`.
/// @example border-bottom-radius: 0.25rem;
/// @name .k-rounded-b
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-radius: 0;`.
/// @example border-bottom-radius: 0;
/// @name .k-rounded-b-0
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-radius: 0.125rem;`.
/// @example border-bottom-radius: 0.125rem;
/// @name .k-rounded-b-sm
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-radius: 0.25rem;`.
/// @example border-bottom-radius: 0.25rem;
/// @name .k-rounded-b-md
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-radius: 0.5rem;`.
/// @example border-bottom-radius: 0.5rem;
/// @name .k-rounded-b-lg
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-bottom-radius: 9999px;`.
/// @example border-bottom-radius: 9999px;
/// @name .k-rounded-b-full
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-left-radius: 0.25rem;`.
/// @example border-left-radius: 0.25rem;
/// @name .k-rounded-l
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-left-radius: 0;`.
/// @example border-left-radius: 0;
/// @name .k-rounded-l-0
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-left-radius: 0.125rem;`.
/// @example border-left-radius: 0.125rem;
/// @name .k-rounded-l-sm
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-left-radius: 0.25rem;`.
/// @example border-left-radius: 0.25rem;
/// @name .k-rounded-l-md
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-left-radius: 0.5rem;`.
/// @example border-left-radius: 0.5rem;
/// @name .k-rounded-l-lg
/// @group border-radius
/// @contextType css

/// This is equivalent to `border-left-radius: 9999px;`.
/// @example border-left-radius: 9999px;
/// @name .k-rounded-l-full
/// @group border-radius
/// @contextType css

// #region @import "@progress/kendo-theme-core/scss/border-radii/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/border-radii/index.import.scss
// File already imported_once. Skipping output.
// #endregion

@mixin kendo-utils--border--border-radius() {

    // Border radius utility classes
    @include generate-utils( rounded, border-radius, $kendo-border-radii, $css-var: "border-radius" );
    @include generate-utils( rounded-tl, border-top-left-radius, $kendo-border-radii, $css-var: "border-radius" );
    @include generate-utils( rounded-tr, border-top-right-radius, $kendo-border-radii, $css-var: "border-radius" );
    @include generate-utils( rounded-br, border-bottom-right-radius, $kendo-border-radii, $css-var: "border-radius" );
    @include generate-utils( rounded-bl, border-bottom-left-radius, $kendo-border-radii, $css-var: "border-radius" );
    @include generate-utils( rounded-t, ( border-top-left-radius, border-top-right-radius ), $kendo-border-radii, $css-var: "border-radius" );
    @include generate-utils( rounded-r, ( border-top-right-radius, border-bottom-right-radius ), $kendo-border-radii, $css-var: "border-radius" );
    @include generate-utils( rounded-b, ( border-bottom-left-radius, border-bottom-right-radius ), $kendo-border-radii, $css-var: "border-radius" );
    @include generate-utils( rounded-l, ( border-top-left-radius, border-bottom-left-radius ), $kendo-border-radii, $css-var: "border-radius" );

}

// #endregion
// #region @import "./_border-style.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/border/_border-style.scss
/// This is equivalent to `border-style: solid;`.
/// @example border-style: solid;
/// @name .k-border-solid
/// @group border-style
/// @contextType css

/// This is equivalent to `border-style: dashed;`.
/// @example border-style: dashed;
/// @name .k-border-dashed
/// @group border-style
/// @contextType css

/// This is equivalent to `border-style: dotted;`.
/// @example border-style: dotted;
/// @name .k-border-dotted
/// @group border-style
/// @contextType css

/// This is equivalent to `border-style: double;`.
/// @example border-style: double;
/// @name .k-border-double
/// @group border-style
/// @contextType css

/// This is equivalent to `border-style: hidden;`.
/// @example border-style: hidden;
/// @name .k-border-hidden
/// @group border-style
/// @contextType css

/// This is equivalent to `border-style: none;`.
/// @example border-style: none;
/// @name .k-border-none
/// @group border-style
/// @contextType css

/// This is equivalent to `border-top-style: solid;`.
/// @example border-top-style: solid;
/// @name .k-border-t-solid
/// @group border-style
/// @contextType css

/// This is equivalent to `border-top-style: dashed;`.
/// @example border-top-style: dashed;
/// @name .k-border-t-dashed
/// @group border-style
/// @contextType css

/// This is equivalent to `border-top-style: dotted;`.
/// @example border-top-style: dotted;
/// @name .k-border-t-dotted
/// @group border-style
/// @contextType css

/// This is equivalent to `border-top-style: double;`.
/// @example border-top-style: double;
/// @name .k-border-t-double
/// @group border-style
/// @contextType css

/// This is equivalent to `border-top-style: hidden;`.
/// @example border-top-style: hidden;
/// @name .k-border-t-hidden
/// @group border-style
/// @contextType css

/// This is equivalent to `border-top-style: none;`.
/// @example border-top-style: none;
/// @name .k-border-t-none
/// @group border-style
/// @contextType css

/// This is equivalent to `border-right-style: solid;`.
/// @example border-right-style: solid;
/// @name .k-border-r-solid
/// @group border-style
/// @contextType css

/// This is equivalent to `border-right-style: dashed;`.
/// @example border-right-style: dashed;
/// @name .k-border-r-dashed
/// @group border-style
/// @contextType css

/// This is equivalent to `border-right-style: dotted;`.
/// @example border-right-style: dotted;
/// @name .k-border-r-dotted
/// @group border-style
/// @contextType css

/// This is equivalent to `border-right-style: double;`.
/// @example border-right-style: double;
/// @name .k-border-r-double
/// @group border-style
/// @contextType css

/// This is equivalent to `border-right-style: hidden;`.
/// @example border-right-style: hidden;
/// @name .k-border-r-hidden
/// @group border-style
/// @contextType css

/// This is equivalent to `border-right-style: none;`.
/// @example border-right-style: none;
/// @name .k-border-r-none
/// @group border-style
/// @contextType css

/// This is equivalent to `border-bottom-style: solid;`.
/// @example border-bottom-style: solid;
/// @name .k-border-b-solid
/// @group border-style
/// @contextType css

/// This is equivalent to `border-bottom-style: dashed;`.
/// @example border-bottom-style: dashed;
/// @name .k-border-b-dashed
/// @group border-style
/// @contextType css

/// This is equivalent to `border-bottom-style: dotted;`.
/// @example border-bottom-style: dotted;
/// @name .k-border-b-dotted
/// @group border-style
/// @contextType css

/// This is equivalent to `border-bottom-style: double;`.
/// @example border-bottom-style: double;
/// @name .k-border-b-double
/// @group border-style
/// @contextType css

/// This is equivalent to `border-bottom-style: hidden;`.
/// @example border-bottom-style: hidden;
/// @name .k-border-b-hidden
/// @group border-style
/// @contextType css

/// This is equivalent to `border-bottom-style: none;`.
/// @example border-bottom-style: none;
/// @name .k-border-b-none
/// @group border-style
/// @contextType css

/// This is equivalent to `border-left-style: solid;`.
/// @example border-left-style: solid;
/// @name .k-border-l-solid
/// @group border-style
/// @contextType css

/// This is equivalent to `border-left-style: dashed;`.
/// @example border-left-style: dashed;
/// @name .k-border-l-dashed
/// @group border-style
/// @contextType css

/// This is equivalent to `border-left-style: dotted;`.
/// @example border-left-style: dotted;
/// @name .k-border-l-dotted
/// @group border-style
/// @contextType css

/// This is equivalent to `border-left-style: double;`.
/// @example border-left-style: double;
/// @name .k-border-l-double
/// @group border-style
/// @contextType css

/// This is equivalent to `border-left-style: hidden;`.
/// @example border-left-style: hidden;
/// @name .k-border-l-hidden
/// @group border-style
/// @contextType css

/// This is equivalent to `border-inline-style: solid;`.
/// @example border-inline-style: solid;
/// @name .k-border-x-solid
/// @group border-style
/// @contextType css

/// This is equivalent to `border-inline-style: dashed;`.
/// @example border-inline-style: dashed;
/// @name .k-border-x-dashed
/// @group border-style
/// @contextType css

/// This is equivalent to `border-inline-style: dotted;`.
/// @example border-inline-style: dotted;
/// @name .k-border-x-dotted
/// @group border-style
/// @contextType css

/// This is equivalent to `border-inline-style: double;`.
/// @example border-inline-style: double;
/// @name .k-border-x-double
/// @group border-style
/// @contextType css

/// This is equivalent to `border-inline-style: hidden;`.
/// @example border-inline-style: hidden;
/// @name .k-border-x-hidden
/// @group border-style
/// @contextType css

/// This is equivalent to `border-inline-style: none;`.
/// @example border-inline-style: none;
/// @name .k-border-x-none
/// @group border-style
/// @contextType css

/// This is equivalent to `border-block-style: solid;`.
/// @example border-block-style: solid;
/// @name .k-border-y-solid
/// @group border-style
/// @contextType css

/// This is equivalent to `border-block-style: dashed;`.
/// @example border-block-style: dashed;
/// @name .k-border-y-dashed
/// @group border-style
/// @contextType css

/// This is equivalent to `border-block-style: dotted;`.
/// @example border-block-style: dotted;
/// @name .k-border-y-dotted
/// @group border-style
/// @contextType css

/// This is equivalent to `border-block-style: double;`.
/// @example border-block-style: double;
/// @name .k-border-y-double
/// @group border-style
/// @contextType css

/// This is equivalent to `border-block-style: hidden;`.
/// @example border-block-style: hidden;
/// @name .k-border-y-hidden
/// @group border-style
/// @contextType css

/// This is equivalent to `border-block-style: none;`.
/// @example border-block-style: none;
/// @name .k-border-y-none
/// @group border-style
/// @contextType css


@mixin kendo-utils--border--border-style() {

    // Border style utility classes
    $kendo-utils-border-style: k-map-get( $kendo-utils, "border-style" ) !default;
    @include generate-utils( border, border-style, $kendo-utils-border-style );
    @include generate-utils( border-t, border-top-style, $kendo-utils-border-style );
    @include generate-utils( border-r, border-right-style, $kendo-utils-border-style );
    @include generate-utils( border-b, border-bottom-style, $kendo-utils-border-style );
    @include generate-utils( border-l, border-left-style, $kendo-utils-border-style );
    @include generate-utils( border-x, border-inline-style, $kendo-utils-border-style );
    @include generate-utils( border-y, border-block-style, $kendo-utils-border-style );

}

// #endregion
// #region @import "./_border-width.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/border/_border-width.scss
/// This is equivalent to `border-width: 1px;`.
/// @example border-width: 1px;
/// @name .k-border
/// @group border-width
/// @contextType css

/// This is equivalent to `border-width: 0;`.
/// @example border-width: 0;
/// @name .k-border-0
/// @group border-width
/// @contextType css

/// This is equivalent to `border-width: 2px;`.
/// @example border-width: 2px;
/// @name .k-border-2
/// @group border-width
/// @contextType css

/// This is equivalent to `border-width: 4px;`.
/// @example border-width: 4px;
/// @name .k-border-4
/// @group border-width
/// @contextType css

/// This is equivalent to `border-width: 8px;`.
/// @example border-width: 8px;
/// @name .k-border-8
/// @group border-width
/// @contextType css

/// This is equivalent to `border-top-width: 1px;`.
/// @example border-top-width: 1px;
/// @name .k-border-t
/// @group border-width
/// @contextType css

/// This is equivalent to `border-top-width: 0px;`.
/// @example border-top-width: 0px;
/// @name .k-border-t-0
/// @group border-width
/// @contextType css

/// This is equivalent to `border-top-width: 2px;`.
/// @example border-top-width: 2px;
/// @name .k-border-t-2
/// @group border-width
/// @contextType css

/// This is equivalent to `border-top-width: 4px;`.
/// @example border-top-width: 4px;
/// @name .k-border-t-4
/// @group border-width
/// @contextType css

/// This is equivalent to `border-top-width: 8px;`.
/// @example border-top-width: 8px;
/// @name .k-border-t-8
/// @group border-width
/// @contextType css

/// This is equivalent to `border-right-width: 1px;`.
/// @example border-right-width: 1px;
/// @name .k-border-r
/// @group border-width
/// @contextType css

/// This is equivalent to `border-right-width: 0px;`.
/// @example border-right-width: 0px;
/// @name .k-border-r-0
/// @group border-width
/// @contextType css

/// This is equivalent to `border-right-width: 2px;`.
/// @example border-right-width: 2px;
/// @name .k-border-r-2
/// @group border-width
/// @contextType css

/// This is equivalent to `border-right-width: 4px;`.
/// @example border-right-width: 4px;
/// @name .k-border-r-4
/// @group border-width
/// @contextType css

/// This is equivalent to `border-right-width: 8px;`.
/// @example border-right-width: 8px;
/// @name .k-border-r-8
/// @group border-width
/// @contextType css

/// This is equivalent to `border-bottom-width: 1px;`.
/// @example border-bottom-width: 1px;
/// @name .k-border-b
/// @group border-width
/// @contextType css

/// This is equivalent to `border-bottom-width: 0px;`.
/// @example border-bottom-width: 0px;
/// @name .k-border-b-0
/// @group border-width
/// @contextType css

/// This is equivalent to `border-bottom-width: 2px;`.
/// @example border-bottom-width: 2px;
/// @name .k-border-b-2
/// @group border-width
/// @contextType css

/// This is equivalent to `border-bottom-width: 4px;`.
/// @example border-bottom-width: 4px;
/// @name .k-border-b-4
/// @group border-width
/// @contextType css

/// This is equivalent to `border-bottom-width: 8px;`.
/// @example border-bottom-width: 8px;
/// @name .k-border-b-8
/// @group border-width
/// @contextType css

/// This is equivalent to `border-left-width: 1px;`.
/// @example border-left-width: 1px;
/// @name .k-border-l
/// @group border-width
/// @contextType css

/// This is equivalent to `border-left-width: 0px;`.
/// @example border-left-width: 0px;
/// @name .k-border-l-0
/// @group border-width
/// @contextType css

/// This is equivalent to `border-left-width: 2px;`.
/// @example border-left-width: 2px;
/// @name .k-border-l-2
/// @group border-width
/// @contextType css

/// This is equivalent to `border-left-width: 4px;`.
/// @example border-left-width: 4px;
/// @name .k-border-l-4
/// @group border-width
/// @contextType css

/// This is equivalent to `border-left-width: 8px;`.
/// @example border-left-width: 8px;
/// @name .k-border-l-8
/// @group border-width
/// @contextType css

/// This is equivalent to `border-inline-width: 1px;`.
/// @example border-inline-width: 1px;
/// @name .k-border-x
/// @group border-width
/// @contextType css

/// This is equivalent to `border-inline-width: 0px;`.
/// @example border-inline-width: 0px;
/// @name .k-border-x-0
/// @group border-width
/// @contextType css

/// This is equivalent to `border-inline-width: 2px;`.
/// @example border-inline-width: 2px;
/// @name .k-border-x-2
/// @group border-width
/// @contextType css

/// This is equivalent to `border-inline-width: 4px;`.
/// @example border-inline-width: 4px;
/// @name .k-border-x-4
/// @group border-width
/// @contextType css

/// This is equivalent to `border-inline-width: 8px;`.
/// @example border-inline-width: 8px;
/// @name .k-border-x-8
/// @group border-width
/// @contextType css

/// This is equivalent to `border-block-width: 1px;`.
/// @example border-block-width: 1px;
/// @name .k-border-y
/// @group border-width
/// @contextType css

/// This is equivalent to `border-block-width: 0px;`.
/// @example border-block-width: 0px;
/// @name .k-border-y-0
/// @group border-width
/// @contextType css

/// This is equivalent to `border-block-width: 2px;`.
/// @example border-block-width: 2px;
/// @name .k-border-y-2
/// @group border-width
/// @contextType css

/// This is equivalent to `border-block-width: 4px;`.
/// @example border-block-width: 4px;
/// @name .k-border-y-4
/// @group border-width
/// @contextType css

/// This is equivalent to `border-block-width: 8px;`.
/// @example border-block-width: 8px;
/// @name .k-border-y-8
/// @group border-width
/// @contextType css



@mixin kendo-utils--border--border-width() {

    // Border width utility classes
    $kendo-utils-border-width: k-map-get( $kendo-utils, "border-width" ) !default;
    @include generate-utils( border, border-width, $kendo-utils-border-width );
    @include generate-utils( border-t, border-top-width, $kendo-utils-border-width );
    @include generate-utils( border-r, border-right-width, $kendo-utils-border-width );
    @include generate-utils( border-b, border-bottom-width, $kendo-utils-border-width );
    @include generate-utils( border-l, border-left-width, $kendo-utils-border-width );
    @include generate-utils( border-x, border-inline-width, $kendo-utils-border-width );
    @include generate-utils( border-y, border-block-width, $kendo-utils-border-width );


    // Legacy aliases
    @include generate-utils( border-top, border-top-width, $kendo-utils-border-width );
    @include generate-utils( border-right, border-right-width, $kendo-utils-border-width );
    @include generate-utils( border-bottom, border-bottom-width, $kendo-utils-border-width );
    @include generate-utils( border-left, border-left-width, $kendo-utils-border-width );

}

// #endregion
// #region @import "./_outline-color.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/border/_outline-color.scss
/// This is equivalent to `outline-color: inherit;`.
/// @example outline-color: inherit;
/// @name .k-outline-inherit
/// @group outline-color
/// @contextType css

/// This is equivalent to `outline-color: currentColor;`.
/// @example outline-color: currentColor;
/// @name .k-outline-currentColor
/// @group outline-color
/// @contextType css

/// This is equivalent to `outline-color: transparent;`.
/// @example outline-color: transparent;
/// @name .k-outline-transparent
/// @group outline-color
/// @contextType css

/// This is equivalent to `outline-color: black;`.
/// @example outline-color: black;
/// @name .k-outline-black
/// @group outline-color
/// @contextType css

/// This is equivalent to `outline-color: white;`.
/// @example outline-color: white;
/// @name .k-outline-white
/// @group outline-color
/// @contextType css

@mixin kendo-utils--border--outline-color() {

    // Outline color utility classes
    $kendo-utils-outline-color: k-map-get( $kendo-utils, "outline-color" ) !default;
    @include generate-utils( outline, outline-color, $kendo-utils-outline-color, $css-var: 'color' );

}

// #endregion
// #region @import "./_outline-offset.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/border/_outline-offset.scss
/// This is equivalent to `outline-offset: 1px;`.
/// @example outline-offset: 1px;
/// @name .k-outline-offset
/// @group outline-offset
/// @contextType css

/// This is equivalent to `outline-offset: 0;`.
/// @example outline-offset: 0;
/// @name .k-outline-offset-0
/// @group outline-offset
/// @contextType css

/// This is equivalent to `outline-offset: 2px;`.
/// @example outline-offset: 2px;
/// @name .k-outline-offset-2
/// @group outline-offset
/// @contextType css

/// This is equivalent to `outline-offset: 4px;`.
/// @example outline-offset: 4px;
/// @name .k-outline-offset-4
/// @group outline-offset
/// @contextType css

/// This is equivalent to `outline-offset: 8px;`.
/// @example outline-offset: 8px;
/// @name .k-outline-offset-8
/// @group outline-offset
/// @contextType css

@mixin kendo-utils--border--outline-offset() {

    // Outline offset utility classes
    $kendo-utils-outline-offset: k-map-get( $kendo-utils, "outline-offset" ) !default;
    @include generate-utils( outline-offset, outline-offset, $kendo-utils-outline-offset );

}

// #endregion
// #region @import "./_outline-style.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/border/_outline-style.scss
/// This is equivalent to `outline-style: solid;`.
/// @example outline-style: solid;
/// @name .k-outline-solid
/// @group outline-style
/// @contextType css

/// This is equivalent to `outline-style: dashed;`.
/// @example outline-style: dashed;
/// @name .k-outline-dashed
/// @group outline-style
/// @contextType css

/// This is equivalent to `outline-style: dotted;`.
/// @example outline-style: dotted;
/// @name .k-outline-dotted
/// @group outline-style
/// @contextType css

/// This is equivalent to `outline-style: double;`.
/// @example outline-style: double;
/// @name .k-outline-double
/// @group outline-style
/// @contextType css

/// This is equivalent to `outline-style: hidden;`.
/// @example outline-style: hidden;
/// @name .k-outline-hidden
/// @group outline-style
/// @contextType css

/// This is equivalent to `outline-style: none;`.
/// @example outline-style: none;
/// @name .k-outline-none
/// @group outline-style
/// @contextType css

@mixin kendo-utils--border--outline-style() {

    // Outline style utility classes
    $kendo-utils-outline-style: k-map-get( $kendo-utils, "outline-style" ) !default;
    @include generate-utils( outline, outline-style, $kendo-utils-outline-style );

}

// #endregion
// #region @import "./_outline-width.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/border/_outline-width.scss
/// This is equivalent to `outline-width: 1px;`.
/// @example outline-width: 1px;
/// @name .k-outline
/// @group outline-width
/// @contextType css

/// This is equivalent to `outline-width: 0;`.
/// @example outline-width: 0;
/// @name .k-outline-0
/// @group outline-width
/// @contextType css

/// This is equivalent to `outline-width: 2px;`.
/// @example outline-width: 2px;
/// @name .k-outline-2
/// @group outline-width
/// @contextType css

/// This is equivalent to `outline-width: 4px;`.
/// @example outline-width: 4px;
/// @name .k-outline-4
/// @group outline-width
/// @contextType css

/// This is equivalent to `outline-width: 8px;`.
/// @example outline-width: 8px;
/// @name .k-outline-8
/// @group outline-width
/// @contextType css

@mixin kendo-utils--border--outline-width() {

    // Outline width utility classes
    $kendo-utils-outline-width: k-map-get( $kendo-utils, "outline-width" ) !default;
    @include generate-utils( outline, outline-width, $kendo-utils-outline-width );

}

// #endregion


@mixin kendo-utils--border() {
    @include kendo-utils--border--border-color();
    @include kendo-utils--border--border-radius();
    @include kendo-utils--border--border-style();
    @include kendo-utils--border--border-width();
    @include kendo-utils--border--outline-color();
    @include kendo-utils--border--outline-offset();
    @include kendo-utils--border--outline-style();
    @include kendo-utils--border--outline-width();
}

// #endregion
// #region @import "./effects/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/effects/index.import.scss
// box shadow
// box shadow color
// #region @import "./_opacity.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/effects/_opacity.scss
/// This is equivalent to `opacity: 0;`.
/// @example opacity: 0;
/// @name .k-opacity-0
/// @group opacity
/// @contextType css

/// This is equivalent to `opacity: 1;`.
/// @example opacity: 1;
/// @name .k-opacity-1
/// @group opacity
/// @contextType css

@mixin kendo-utils--effects--opacity() {

    // opacity utility classes
    $kendo-utils-opacity: k-map-get( $kendo-utils, "opacity" ) !default;
    @include generate-utils( opacity, opacity, $kendo-utils-opacity );

}

// #endregion

@mixin kendo-utils--effects() {
    @include kendo-utils--effects--opacity();
}

// #endregion
// #region @import "./filter/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/filter/index.import.scss
// #region @import "./_backdrop.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/filter/_backdrop.scss
/// This is equivalent to `backdrop-filter: blur(8px);`.
/// @example backdrop-filter: blur(8px);
/// @name .k-backdrop-blur
/// @group backdrop-blur
/// @contextType css

/// This is equivalent to `backdrop-filter: blur(0);`.
/// @example backdrop-filter: blur(0);
/// @name .k-backdrop-blur-none
/// @group backdrop-blur
/// @contextType css

/// This is equivalent to `backdrop-filter: blur(4px);`.
/// @example backdrop-filter: blur(4px);
/// @name .k-backdrop-blur-sm
/// @group backdrop-blur
/// @contextType css

/// This is equivalent to `backdrop-filter: blur(6px);`.
/// @example backdrop-filter: blur(6px);
/// @name .k-backdrop-blur-md
/// @group backdrop-blur
/// @contextType css

/// This is equivalent to `backdrop-filter: blur(12px);`.
/// @example backdrop-filter: blur(12px);
/// @name .k-backdrop-blur-lg
/// @group backdrop-blur
/// @contextType css

@mixin kendo-utils--filter--backdrop() {

    // backdrop utility classes
    $kendo-utils-backdrop-blur: k-map-get( $kendo-utils, "backdrop-blur" ) !default;
    @include generate-utils( backdrop-blur, backdrop-filter, $kendo-utils-backdrop-blur );

}

// #endregion

@mixin kendo-utils--filter() {
    @include kendo-utils--filter--backdrop();
}

// #endregion
// #region @import "./table/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/table/index.import.scss
// #region @import "./_border-collapse.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/table/_border-collapse.scss
/// This is equivalent to `border-collapse: collapse;`.
/// @example border-collapse: collapse;
/// @name .k-border-collapse
/// @group border-collapse
/// @contextType css

/// This is equivalent to `border-collapse: separate;`.
/// @example border-collapse: separate;
/// @name .k-border-separate
/// @group border-collapse
/// @contextType css

@mixin kendo-utils--table--border-collapse() {

    // Border collapse utility classes
    $kendo-utils-border-collapse: k-map-get( $kendo-utils, "border-collapse" ) !default;
    @include generate-utils( border, border-collapse, $kendo-utils-border-collapse );

}

// #endregion
// #region @import "./_table-layout.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/table/_table-layout.scss
/// This is equivalent to `table-layout: auto;`.
/// @example table-layout: auto;
/// @name .k-table-auto
/// @group table-layout
/// @contextType css

/// This is equivalent to `table-layout: fixed;`.
/// @example table-layout: fixed;
/// @name .k-table-fixed
/// @group table-layout
/// @contextType css

@mixin kendo-utils--table--table-layout() {

    // Table layout utility classes
    $kendo-utils-table-layout: k-map-get( $kendo-utils, "table-layout" ) !default;
    @include generate-utils( table, table-layout, $kendo-utils-table-layout );
    @include generate-utils( table-layout, table-layout, $kendo-utils-table-layout );

}

// #endregion


@mixin kendo-utils--table() {
    @include kendo-utils--table--border-collapse();
    @include kendo-utils--table--table-layout();
}

// #endregion
// transition
// #region @import "./transform/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/transform/index.import.scss
// #region @import "./_flip.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/transform/_flip.scss
/// This is equivalent to `transform: scaleX( -1 );`.
/// @example transform: scaleX( -1 );
/// @name .k-flip-h
/// @group transform
/// @contextType css

/// This is equivalent to `transform: scaleY( -1 );`.
/// @example transform: scaleY( -1 );
/// @name .k-flip-v
/// @group transform
/// @contextType css

// TODO: consider globally horizontal vs h vs x

@mixin kendo-utils--transform--flip() {

    // Flip utility classes
    $kendo-utils-flip: k-map-get( $kendo-utils, "flip" ) !default;
    @if $kendo-utils-flip {
        .#{$kendo-prefix}flip-h { transform: scaleX( -1 ); }
        .\!#{$kendo-prefix}flip-h { transform: scaleX( -1 ) !important; } // stylelint-disable-line declaration-no-important
        .#{$kendo-prefix}flip-v { transform: scaleY( -1 ); }
        .\!#{$kendo-prefix}flip-v { transform: scaleY( -1 ) !important; } // stylelint-disable-line declaration-no-important
        .#{$kendo-prefix}flip-h.#{$kendo-prefix}flip-v { transform: scale( -1, -1 ); }
        .\!#{$kendo-prefix}flip-h.\!#{$kendo-prefix}flip-v { transform: scale( -1, -1 ) !important; } // stylelint-disable-line declaration-no-important

        // Legacy aliases
        .#{$kendo-prefix}flip-x { @extend .#{$kendo-prefix}flip-h !optional; }
        .\!#{$kendo-prefix}flip-x { @extend .\!#{$kendo-prefix}flip-h !optional; }
        .#{$kendo-prefix}flip-y { @extend .#{$kendo-prefix}flip-v !optional; }
        .\!#{$kendo-prefix}flip-y { @extend .\!#{$kendo-prefix}flip-v !optional; }
    }

}

// #endregion
// #region @import "./_origin.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/transform/_origin.scss
/// This is equivalent to `transform-origin: center;`.
/// @example transform-origin: center;
/// @name .k-origin-center
/// @group transform-origin
/// @contextType css

/// This is equivalent to `transform-origin: top;`.
/// @example transform-origin: top;
/// @name .k-origin-top
/// @group transform-origin
/// @contextType css

/// This is equivalent to `transform-origin: right;`.
/// @example transform-origin: right;
/// @name .k-origin-right
/// @group transform-origin
/// @contextType css

/// This is equivalent to `transform-origin: bottom;`.
/// @example transform-origin: bottom;
/// @name .k-origin-bottom
/// @group transform-origin
/// @contextType css

/// This is equivalent to `transform-origin: left;`.
/// @example transform-origin: left;
/// @name .k-origin-left
/// @group transform-origin
/// @contextType css

/// This is equivalent to `transform-origin: top-left;`.
/// @example transform-origin: top-left;
/// @name .k-origin-top-left
/// @group transform-origin
/// @contextType css

/// This is equivalent to `transform-origin: top-right;`.
/// @example transform-origin: top-right;
/// @name .k-origin-top-right
/// @group transform-origin
/// @contextType css

/// This is equivalent to `transform-origin: bottom-left;`.
/// @example transform-origin: bottom-left;
/// @name .k-origin-bottom-left
/// @group transform-origin
/// @contextType css

/// This is equivalent to `transform-origin: bottom-right;`.
/// @example transform-origin: bottom-right;
/// @name .k-origin-bottom-right
/// @group transform-origin
/// @contextType css

@mixin kendo-utils--transform--origin() {

    // Transform origin utility classes
    $kendo-utils-origin: k-map-get( $kendo-utils, "origin" ) !default;
    @include generate-utils( origin, transform-origin, $kendo-utils-origin );

}

// #endregion
// #region @import "./_rotate.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/transform/_rotate.scss
/// This is equivalent to `transform: rotate( 0 );`.
/// @example transform: rotate( 0 );
/// @name .k-rotate-0
/// @group transform
/// @contextType css

/// This is equivalent to `transform: rotate( 45deg );`.
/// @example transform: rotate( 45deg );
/// @name .k-rotate-45
/// @group transform
/// @contextType css

/// This is equivalent to `transform: rotate( 90deg );`.
/// @example transform: rotate( 90deg );
/// @name .k-rotate-90
/// @group transform
/// @contextType css

/// This is equivalent to `transform: rotate( 135deg );`.
/// @example transform: rotate( 135deg );
/// @name .k-rotate-135
/// @group transform
/// @contextType css

/// This is equivalent to `transform: rotate( 180deg );`.
/// @example transform: rotate( 180deg );
/// @name .k-rotate-180
/// @group transform
/// @contextType css

/// This is equivalent to `transform: rotate( 225deg );`.
/// @example transform: rotate( 225deg );
/// @name .k-rotate-225
/// @group transform
/// @contextType css

/// This is equivalent to `transform: rotate( 270deg );`.
/// @example transform: rotate( 270deg );
/// @name .k-rotate-270
/// @group transform
/// @contextType css

/// This is equivalent to `transform: rotate( 315deg );`.
/// @example transform: rotate( 315deg );
/// @name .k-rotate-315
/// @group transform
/// @contextType css

// stylelint-disable scss/at-function-pattern
@function _rotate( $val ) {
    @return rotate( $val );
}
// stylelint-enable scss/at-function-pattern

@mixin kendo-utils--transform--rotate() {

    // Rotate utility classes
    $kendo-utils-rotate: k-map-get( $kendo-utils, "rotate" ) !default;
    @include generate-utils( rotate, transform, $kendo-utils-rotate, _rotate );

}

// #endregion
// #region @import "./_scale.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/transform/_scale.scss
/// This is equivalent to `transform: scale( 0, 0 );`.
/// @example transform: scale( 0, 0 );
/// @name .k-scale-0
/// @group transform
/// @contextType css

/// This is equivalent to `transform: scale( 1, 1 );`.
/// @example transform: scale( 1, 1 );
/// @name .k-scale-1
/// @group transform
/// @contextType css

/// This is equivalent to `transform: scale( 2, 2 );`.
/// @example transform: scale( 2, 2 );
/// @name .k-scale-2
/// @group transform
/// @contextType css

// stylelint-disable scss/at-function-pattern
@function _scale( $val ) {
    @return scale( $val );
}
@function _scale-x( $val ) {
    @return scaleX( $val );
}
@function _scale-y( $val ) {
    @return scaleY( $val );
}
// stylelint-enable scss/at-function-pattern

@mixin kendo-utils--transform--scale() {

    // Scale utility classes
    $kendo-utils-scale: k-map-get( $kendo-utils, "scale" ) !default;
    @include generate-utils( scale, transform, $kendo-utils-scale, _scale );
    @include generate-utils( scale-x, transform, $kendo-utils-scale, _scale-x );
    @include generate-utils( scale-y, transform, $kendo-utils-scale, _scale-y );

}

// #endregion
// #region @import "./_skew.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/transform/_skew.scss
/// This is equivalent to `transform: skewX(0deg);`.
/// @example transform: skewX(0deg);
/// @name .k-skew-x-0
/// @group skew
/// @contextType css

/// This is equivalent to `transform: skewX(1deg);`.
/// @example transform: skewX(1deg);
/// @name .k-skew-x-1
/// @group skew
/// @contextType css

/// This is equivalent to `transform: skewY(0deg);`.
/// @example transform: skewY(0deg);
/// @name .k-skew-y-0
/// @group skew
/// @contextType css

/// This is equivalent to `transform: skewY(1deg);`.
/// @example transform: skewY(1deg);
/// @name .k-skew-y-1
/// @group skew
/// @contextType css

// stylelint-disable scss/at-function-pattern
@function _skew-x( $val ) {
    @return skewX( $val );
}
@function _skew-y( $val ) {
    @return skewY( $val );
}
// stylelint-enable scss/at-function-pattern

@mixin kendo-utils--transform--skew() {

    // Transform skew utility classes
    $kendo-utils-skew: k-map-get( $kendo-utils, "skew" ) !default;
    @include generate-utils( skew-x, transform, $kendo-utils-skew, _skew-x );
    @include generate-utils( skew-y, transform, $kendo-utils-skew, _skew-y );

}

// #endregion
// #region @import "./_translate.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/transform/_translate.scss
/// This is equivalent to `transform: translate( 0, 0 );`.
/// @example transform: translate( 0, 0 );
/// @name .k-translate-0
/// @group transform
/// @contextType css

/// This is equivalent to `transform: translate( 0, 50% );`.
/// @example transform: translate( 0, 50% );
/// @name .k-translate-0-50
/// @group transform
/// @contextType css

/// This is equivalent to `transform: translate( 0, 100% );`.
/// @example transform: translate( 0, 100% );
/// @name .k-translate-0-100
/// @group transform
/// @contextType css

/// This is equivalent to `transform: translate( 50%, 0 );`.
/// @example transform: translate( 50%, 0 );
/// @name .k-translate-50-0
/// @group transform
/// @contextType css

/// This is equivalent to `transform: translate( 50%, 50% );`.
/// @example transform: translate( 50%, 50% );
/// @name .k-translate-50-50
/// @group transform
/// @contextType css

/// This is equivalent to `transform: translate( 50%, 100% );`.
/// @example transform: translate( 50%, 100% );
/// @name .k-translate-50-100
/// @group transform
/// @contextType css

/// This is equivalent to `transform: translate( 100%, 0 );`.
/// @example transform: translate( 100%, 0 );
/// @name .k-translate-100-0
/// @group transform
/// @contextType css

/// This is equivalent to `transform: translate( 100%, 50% );`.
/// @example transform: translate( 100%, 50% );
/// @name .k-translate-100-50
/// @group transform
/// @contextType css

/// This is equivalent to `transform: translate( 100%, 100% );`.
/// @example transform: translate( 100%, 100% );
/// @name .k-translate-100-100
/// @group transform
/// @contextType css

// stylelint-disable scss/at-function-pattern
@function _translate( $val ) {
    @return translate( $val );
}
@function _translate-x( $val ) {
    @return translateX( $val );
}
@function _translate-y( $val ) {
    @return translateY( $val );
}
// stylelint-enable scss/at-function-pattern

@mixin kendo-utils--transform--translate() {

    // Translate utility classes
    $kendo-utils-translate: k-map-get( $kendo-utils, "translate" ) !default;
    $kendo-utils-translate-xy: (
        "0": ( 0, 0 ),
        "0-50": ( 0, 50% ),
        "0-100": ( 0, 100% ),
        "50-0": ( 50%, 0 ),
        "50-50": ( 50%, 50% ),
        "50-100": ( 50%, 100% ),
        "100-0": ( 100%, 0 ),
        "100-50": ( 100%, 50% ),
        "100-100": ( 100%, 100% )
    ) !default;
    @include generate-utils( translate, transform, $kendo-utils-translate-xy, _translate );
    @include generate-utils( translate-x, transform, $kendo-utils-translate, _translate-x );
    @include generate-utils( translate-y, transform, $kendo-utils-translate, _translate-y );

}

// #endregion


@mixin kendo-utils--transform() {
    @include kendo-utils--transform--flip();
    @include kendo-utils--transform--origin();
    @include kendo-utils--transform--rotate();
    @include kendo-utils--transform--scale();
    @include kendo-utils--transform--skew();
    @include kendo-utils--transform--translate();
}

// #endregion
// #region @import "./interactivity/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/interactivity/index.import.scss
// #region @import "./_accent-color.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/interactivity/_accent-color.scss
// TODO: docs

@mixin kendo-utils--interactivity--accent-color() {

    // Accent color utility classes
    $kendo-utils-accent-color: k-map-get( $kendo-utils, "accent-color" ) !default;
    @include generate-utils( accent-color, accent-color, $kendo-utils-accent-color );

}

// #endregion
// #region @import "./_appearance.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/interactivity/_appearance.scss
/// This is equivalent to `appearance: none;`.
/// @example appearance: none;
/// @name .k-appearance-none
/// @group appearance
/// @contextType css

/// This is equivalent to `appearance: auto;`.
/// @example appearance: auto;
/// @name .k-appearance-auto
/// @group appearance
/// @contextType css

@mixin kendo-utils--interactivity--appearance() {

    // Appearance utility classes
    $kendo-utils-appearance: k-map-get( $kendo-utils, "appearance" ) !default;
    @include generate-utils( appearance, appearance, $kendo-utils-appearance );

}

// #endregion
// #region @import "./_caret-color.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/interactivity/_caret-color.scss
// TODO: docs

@mixin kendo-utils--interactivity--caret-color() {

    // Caret color utility classes
    $kendo-utils-caret-color: k-map-get( $kendo-utils, "caret-color" ) !default;
    @include generate-utils( caret, caret-color, $kendo-utils-caret-color );

}

// #endregion
// #region @import "./_cursor.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/interactivity/_cursor.scss
/// This is equivalent to `cursor: none;`.
/// @example cursor: none;
/// @name .k-cursor-none
/// @group cursor
/// @contextType css

/// This is equivalent to `cursor: auto;`.
/// @example cursor: auto;
/// @name .k-cursor-auto
/// @group cursor
/// @contextType css

/// This is equivalent to `cursor: default;`.
/// @example cursor: default;
/// @name .k-cursor-default
/// @group cursor
/// @contextType css

/// This is equivalent to `cursor: pointer;`.
/// @example cursor: pointer;
/// @name .k-cursor-pointer
/// @group cursor
/// @contextType css

@mixin kendo-utils--interactivity--cursor() {

    // Cursor utility classes
    $kendo-utils-cursor: k-map-get( $kendo-utils, "cursor" ) !default;
    @include generate-utils( cursor, cursor, $kendo-utils-cursor );

}

// #endregion
// #region @import "./_pointer-events.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/interactivity/_pointer-events.scss
/// This is equivalent to `pointer-events: none;`.
/// @example pointer-events: none;
/// @name .k-pointer-events-none
/// @group pointer-events
/// @contextType css

/// This is equivalent to `pointer-events: auto;`.
/// @example pointer-events: auto;
/// @name .k-pointer-events-auto
/// @group pointer-events
/// @contextType css

@mixin kendo-utils--interactivity--pointer-events() {

    // Pointer events utility classes
    $kendo-utils-pointer-events: k-map-get( $kendo-utils, "pointer-events" ) !default;
    @include generate-utils( pointer-events, pointer-events, $kendo-utils-pointer-events );

}

// #endregion
// #region @import "./_resize.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/interactivity/_resize.scss
/// This is equivalent to `resize: both;`.
/// @example resize: both;
/// @name .k-resize
/// @group resize
/// @contextType css

/// This is equivalent to `resize: none;`.
/// @example resize: none;
/// @name .k-resize-none
/// @group resize
/// @contextType css

/// This is equivalent to `resize: horizontal;`.
/// @example resize: horizontal;
/// @name .k-resize-x
/// @group resize
/// @contextType css

/// This is equivalent to `resize: vertical;`.
/// @example resize: vertical;
/// @name .k-resize-y
/// @group resize
/// @contextType css

@mixin kendo-utils--interactivity--resize() {

    // Resize utility classes
    $kendo-utils-resize: k-map-get( $kendo-utils, "resize" ) !default;
    @include generate-utils( resize, resize, $kendo-utils-resize );

}

// #endregion
// #region @import "./_scroll.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/interactivity/_scroll.scss
/// This is equivalent to `scroll-behavior: auto;`.
/// @example scroll-behavior: auto;
/// @name .k-scroll-auto
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-behavior: smooth;`.
/// @example scroll-behavior: smooth;
/// @name .k-scroll-smooth
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-snap-type: x var(--k-scroll-snap-strictness);`.
/// @example scroll-snap-type: x var(--k-scroll-snap-strictness);
/// @name .k-scroll-snap-snap-x
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-snap-type: y var(--k-scroll-snap-strictness);`.
/// @example scroll-snap-type: y var(--k-scroll-snap-strictness);
/// @name .k-scroll-snap-snap-y
/// @group scroll
/// @contextType css

/// This is equivalent to `--k-scroll-snap-strictness: mandatory;`.
/// @example --k-scroll-snap-strictness: mandatory;
/// @name .k-scroll-snap-mandatory
/// @group scroll
/// @contextType css

/// This is equivalent to `--k-scroll-snap-strictness: proximity;`.
/// @example --k-scroll-snap-strictness: proximity;
/// @name .k-scroll-snap-proximity
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-snap-stop: normal;`.
/// @example scroll-snap-stop: normal;
/// @name .k-scroll-snap-stop-normal
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-snap-stop: always;`.
/// @example scroll-snap-stop: always;
/// @name .k-scroll-snap-stop-always
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-snap-align: start;`.
/// @example scroll-snap-align: start;
/// @name .k-scroll-snap-align-start
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-snap-align: end;`.
/// @example scroll-snap-align: end;
/// @name .k-scroll-snap-align-end
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-snap-align: center;`.
/// @example scroll-snap-align: center;
/// @name .k-scroll-snap-align-center
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-snap-align: none;`.
/// @example scroll-snap-align: none;
/// @name .k-scroll-snap-align-none
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin: 0;`.
/// @example scroll-margin: 0;
/// @name .k-scroll-m-0
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin: 1px;`.
/// @example scroll-margin: 1px;
/// @name .k-scroll-m-1px
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin: 0.25rem;`.
/// @example scroll-margin: 0.25rem;
/// @name .k-scroll-m-1
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-top: 0;`.
/// @example scroll-margin-top: 0;
/// @name .k-scroll-m-0
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-top: 1px;`.
/// @example scroll-margin-top: 1px;
/// @name .k-scroll-m-1px
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-top: 0.25rem;`.
/// @example scroll-margin-top: 0.25rem;
/// @name .k-scroll-m-1
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-right: 0;`.
/// @example scroll-margin-right: 0;
/// @name .k-scroll-mr-0
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-right: 1px;`.
/// @example scroll-margin-right: 1px;
/// @name .k-scroll-mr-1px
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-right: 0.25rem;`.
/// @example scroll-margin-right: 0.25rem;
/// @name .k-scroll-mr-1
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-bottom: 0;`.
/// @example scroll-margin-bottom: 0;
/// @name .k-scroll-mb-0
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-bottom: 1px;`.
/// @example scroll-margin-bottom: 1px;
/// @name .k-scroll-mb-1px
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-bottom: 0.25rem;`.
/// @example scroll-margin-bottom: 0.25rem;
/// @name .k-scroll-mb-1
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-left: 0;`.
/// @example scroll-margin-left: 0;
/// @name .k-scroll-ml-0
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-left: 1px;`.
/// @example scroll-margin-left: 1px;
/// @name .k-scroll-ml-1px
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-left: 0.25rem;`.
/// @example scroll-margin-left: 0.25rem;
/// @name .k-scroll-ml-1
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-inline: 0;`.
/// @example scroll-margin-inline: 0;
/// @name .k-scroll-x-0
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-inline: 1px;`.
/// @example scroll-margin-inline: 1px;
/// @name .k-scroll-x-1px
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-inline: 0.25rem;`.
/// @example scroll-margin-inline: 0.25rem;
/// @name .k-scroll-x-1
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-block: 0;`.
/// @example scroll-margin-block: 0;
/// @name .k-scroll-y-0
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-block: 1px;`.
/// @example scroll-margin-block: 1px;
/// @name .k-scroll-y-1px
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-margin-block: 0.25rem;`.
/// @example scroll-margin-block: 0.25rem;
/// @name .k-scroll-y-1
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding: 0;`.
/// @example scroll-padding: 0;
/// @name .k-scroll-p-0
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding: 1px;`.
/// @example scroll-padding: 1px;
/// @name .k-scroll-p-1px
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding: 0.25rem;`.
/// @example scroll-padding: 0.25rem;
/// @name .k-scroll-p-1
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-top: 0;`.
/// @example scroll-padding-top: 0;
/// @name .k-scroll-p-0
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-top: 1px;`.
/// @example scroll-padding-top: 1px;
/// @name .k-scroll-p-1px
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-top: 0.25rem;`.
/// @example scroll-padding-top: 0.25rem;
/// @name .k-scroll-p-1
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-right: 0;`.
/// @example scroll-padding-right: 0;
/// @name .k-scroll-pr-0
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-right: 1px;`.
/// @example scroll-padding-right: 1px;
/// @name .k-scroll-pr-1px
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-right: 0.25rem;`.
/// @example scroll-padding-right: 0.25rem;
/// @name .k-scroll-pr-1
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-bottom: 0;`.
/// @example scroll-padding-bottom: 0;
/// @name .k-scroll-pb-0
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-bottom: 1px;`.
/// @example scroll-padding-bottom: 1px;
/// @name .k-scroll-pb-1px
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-bottom: 0.25rem;`.
/// @example scroll-padding-bottom: 0.25rem;
/// @name .k-scroll-pb-1
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-left: 0;`.
/// @example scroll-padding-left: 0;
/// @name .k-scroll-pl-0
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-left: 1px;`.
/// @example scroll-padding-left: 1px;
/// @name .k-scroll-pl-1px
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-left: 0.25rem;`.
/// @example scroll-padding-left: 0.25rem;
/// @name .k-scroll-pl-1
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-inline: 0;`.
/// @example scroll-padding-inline: 0;
/// @name .k-scroll-x-0
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-inline: 1px;`.
/// @example scroll-padding-inline: 1px;
/// @name .k-scroll-x-1px
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-inline: 0.25rem;`.
/// @example scroll-padding-inline: 0.25rem;
/// @name .k-scroll-x-1
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-block: 0;`.
/// @example scroll-padding-block: 0;
/// @name .k-scroll-y-0
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-block: 1px;`.
/// @example scroll-padding-block: 1px;
/// @name .k-scroll-y-1px
/// @group scroll
/// @contextType css

/// This is equivalent to `scroll-padding-block: 0.25rem;`.
/// @example scroll-padding-block: 0.25rem;
/// @name .k-scroll-y-1
/// @group scroll
/// @contextType css



@mixin kendo-utils--interactivity--scroll() {

    // Scroll behavior utility classes
    $kendo-utils-scroll-behavior: k-map-get( $kendo-utils, "scroll-behavior" ) !default;
    @include generate-utils( scroll, scroll-behavior, $kendo-utils-scroll-behavior );


    // Scroll snap type utility classes
    $kendo-utils-scroll-snap-type: k-map-get( $kendo-utils, "scroll-snap-type" ) !default;
    @include generate-utils( scroll-snap, scroll-snap-type, $kendo-utils-scroll-snap-type );

    // Custom scroll snap type utility classes
    .#{$kendo-prefix}scroll-snap-mandatory { #{--#{$kendo-prefix}scroll-snap-strictness}: mandatory; }
    .#{$kendo-prefix}scroll-snap-proximity { #{--#{$kendo-prefix}scroll-snap-strictness}: proximity; }


    // Scroll snap stop utility classes
    $kendo-utils-scroll-snap-stop: k-map-get( $kendo-utils, "scroll-snap-stop" ) !default;
    @include generate-utils( scroll-snap-stop, scroll-snap-stop, $kendo-utils-scroll-snap-stop );


    // Scroll snap align utility classes
    $kendo-utils-scroll-snap-align: k-map-get( $kendo-utils, "scroll-snap-align" ) !default;
    @include generate-utils( scroll-snap-align, scroll-snap-align, $kendo-utils-scroll-snap-align );


    // Scroll margin utility classes
    $kendo-utils-scroll-margin: k-map-get( $kendo-utils, "scroll-margin" ) !default;
    @include generate-utils( scroll-m, scroll-margin, $kendo-utils-scroll-margin );
    @include generate-utils( scroll-mt, scroll-margin-top, $kendo-utils-scroll-margin );
    @include generate-utils( scroll-mr, scroll-margin-right, $kendo-utils-scroll-margin );
    @include generate-utils( scroll-mb, scroll-margin-bottom, $kendo-utils-scroll-margin );
    @include generate-utils( scroll-ml, scroll-margin-left, $kendo-utils-scroll-margin );
    @include generate-utils( scroll-mx, scroll-margin-inline, $kendo-utils-scroll-margin );
    @include generate-utils( scroll-my, scroll-margin-block, $kendo-utils-scroll-margin );


    // Scroll padding utility classes
    $kendo-utils-scroll-padding: k-map-get( $kendo-utils, "scroll-padding" ) !default;
    @include generate-utils( scroll-p, scroll-padding, $kendo-utils-scroll-padding );
    @include generate-utils( scroll-pt, scroll-padding-top, $kendo-utils-scroll-padding );
    @include generate-utils( scroll-pr, scroll-padding-right, $kendo-utils-scroll-padding );
    @include generate-utils( scroll-pb, scroll-padding-bottom, $kendo-utils-scroll-padding );
    @include generate-utils( scroll-pl, scroll-padding-left, $kendo-utils-scroll-padding );
    @include generate-utils( scroll-px, scroll-padding-inline, $kendo-utils-scroll-padding );
    @include generate-utils( scroll-py, scroll-padding-block, $kendo-utils-scroll-padding );

}

// #endregion
// #region @import "./_touch-action.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/interactivity/_touch-action.scss
/// This is equivalent to `touch-action: none;`.
/// @example touch-action: none;
/// @name .k-touch-action-none
/// @group touch-action
/// @contextType css

/// This is equivalent to `touch-action: auto;`.
/// @example touch-action: auto;
/// @name .k-touch-action-auto
/// @group touch-action
/// @contextType css

/// This is equivalent to `touch-action: pan-x;`.
/// @example touch-action: pan-x;
/// @name .k-touch-action-pan-x
/// @group touch-action
/// @contextType css

/// This is equivalent to `touch-action: pan-y;`.
/// @example touch-action: pan-y;
/// @name .k-touch-action-pan-y
/// @group touch-action
/// @contextType css

/// This is equivalent to `touch-action: pan-left;`.
/// @example touch-action: pan-left;
/// @name .k-touch-action-pan-left
/// @group touch-action
/// @contextType css

/// This is equivalent to `touch-action: pan-right;`.
/// @example touch-action: pan-right;
/// @name .k-touch-action-pan-right
/// @group touch-action
/// @contextType css

/// This is equivalent to `touch-action: pan-up;`.
/// @example touch-action: pan-up;
/// @name .k-touch-action-pan-up
/// @group touch-action
/// @contextType css

/// This is equivalent to `touch-action: pan-down;`.
/// @example touch-action: pan-down;
/// @name .k-touch-action-pan-down
/// @group touch-action
/// @contextType css

/// This is equivalent to `touch-action: pinch-zoom;`.
/// @example touch-action: pinch-zoom;
/// @name .k-touch-action-pinch-zoom
/// @group touch-action
/// @contextType css

/// This is equivalent to `touch-action: manipulation;`.
/// @example touch-action: manipulation;
/// @name .k-touch-action-manipulation
/// @group touch-action
/// @contextType css

@mixin kendo-utils--interactivity--touch-action() {

    // Touch-action utility classes
    $kendo-utils-touch-action: k-map-get( $kendo-utils, "touch-action" ) !default;
    @include generate-utils( touch-action, touch-action, $kendo-utils-touch-action );

}

// #endregion
// #region @import "./_user-select.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/interactivity/_user-select.scss
/// This is equivalent to `user-select: none;`.
/// @example user-select: none;
/// @name .k-user-select-none
/// @group user-select
/// @contextType css

/// This is equivalent to `user-select: auto;`.
/// @example user-select: auto;
/// @name .k-user-select-auto
/// @group user-select
/// @contextType css

/// This is equivalent to `user-select: text;`.
/// @example user-select: text;
/// @name .k-user-select-text
/// @group user-select
/// @contextType css

/// This is equivalent to `user-select: all;`.
/// @example user-select: all;
/// @name .k-user-select-all
/// @group user-select
/// @contextType css

/// This is equivalent to `user-select: contain;`.
/// @example user-select: contain;
/// @name .k-user-select-contain
/// @group user-select
/// @contextType css

@mixin kendo-utils--interactivity--user-select() {

    // User select utility classes
    $kendo-utils-user-select: k-map-get( $kendo-utils, "user-select" ) !default;
    @include generate-utils( user-select, user-select, $kendo-utils-user-select );

}

// #endregion
// #region @import "./_will-change.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/interactivity/_will-change.scss
// TODO: docs

@mixin kendo-utils--interactivity--will-change() {

    // Will change utility classes
    $kendo-utils-will-change: k-map-get( $kendo-utils, "will-change" ) !default;
    @include generate-utils( will-change, will-change, $kendo-utils-will-change );

}

// #endregion


@mixin kendo-utils--interactivity() {
    @include kendo-utils--interactivity--accent-color();
    @include kendo-utils--interactivity--appearance();
    @include kendo-utils--interactivity--caret-color();
    @include kendo-utils--interactivity--cursor();
    @include kendo-utils--interactivity--pointer-events();
    @include kendo-utils--interactivity--resize();
    @include kendo-utils--interactivity--scroll();
    @include kendo-utils--interactivity--touch-action();
    @include kendo-utils--interactivity--user-select();
    @include kendo-utils--interactivity--will-change();
}

// #endregion
// #region @import "./svg/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/svg/index.import.scss
// #region @import "./_fill.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/svg/_fill.scss
/// This is equivalent to `fill: none;`.
/// @example fill: none;
/// @name .k-fill-none
/// @group fill
/// @contextType css

/// This is equivalent to `fill: inherit;`.
/// @example fill: inherit;
/// @name .k-fill-inherit
/// @group fill
/// @contextType css

/// This is equivalent to `fill: currentColor;`.
/// @example fill: currentColor;
/// @name .k-fill-currentColor
/// @group fill
/// @contextType css

/// This is equivalent to `fill: transparent;`.
/// @example fill: transparent;
/// @name .k-fill-transparent
/// @group fill
/// @contextType css

/// This is equivalent to `fill: black;`.
/// @example fill: black;
/// @name .k-fill-black
/// @group fill
/// @contextType css

/// This is equivalent to `fill: white;`.
/// @example fill: white;
/// @name .k-fill-white
/// @group fill
/// @contextType css

@mixin kendo-utils--svg--fill() {

    // fill utility classes
    $kendo-utils-fill: k-map-get( $kendo-utils, "fill-stroke" ) !default;
    @include generate-utils( fill, fill, $kendo-utils-fill );

}

// #endregion
// #region @import "./_stroke.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/svg/_stroke.scss
/// This is equivalent to `stroke: none;`.
/// @example stroke: none;
/// @name .k-stroke-none
/// @group stroke
/// @contextType css

/// This is equivalent to `stroke: inherit;`.
/// @example stroke: inherit;
/// @name .k-stroke-inherit
/// @group stroke
/// @contextType css

/// This is equivalent to `stroke: currentColor;`.
/// @example stroke: currentColor;
/// @name .k-stroke-currentColor
/// @group stroke
/// @contextType css

/// This is equivalent to `stroke: transparent;`.
/// @example stroke: transparent;
/// @name .k-stroke-transparent
/// @group stroke
/// @contextType css

/// This is equivalent to `stroke: black;`.
/// @example stroke: black;
/// @name .k-stroke-black
/// @group stroke
/// @contextType css

/// This is equivalent to `stroke: white;`.
/// @example stroke: white;
/// @name .k-stroke-white
/// @group stroke
/// @contextType css

@mixin kendo-utils--svg--stroke() {

    // stroke utility classes
    $kendo-utils-stroke: k-map-get( $kendo-utils, "fill-stroke" ) !default;
    @include generate-utils( stroke, stroke, $kendo-utils-stroke );

}

// #endregion

@mixin kendo-utils--svg() {
    @include kendo-utils--svg--fill();
    @include kendo-utils--svg--stroke();
}

// #endregion

// #region @import "./elevation/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/elevation/index.import.scss
// #region @import "@progress/kendo-theme-core/scss/elevation/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/elevation/index.import.scss
// File already imported_once. Skipping output.
// #endregion

@mixin kendo-utils--elevation {
    @include generate-utils(elevation, box-shadow, $kendo-elevation, $css-var: "elevation");
}

// #endregion


// Mixin for all styles
@mixin kendo-utils() {
    @include kendo-utils--accessibility();
    @include kendo-utils--layout();
    @include kendo-utils--flex-grid();
    @include kendo-utils--spacing();
    @include kendo-utils--sizing();
    @include kendo-utils--typography();
    @include kendo-utils--background();
    @include kendo-utils--border();
    @include kendo-utils--effects();
    @include kendo-utils--filter();
    @include kendo-utils--table();
    @include kendo-utils--transform();
    @include kendo-utils--interactivity();
    @include kendo-utils--svg();

    @include kendo-utils--elevation();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// #region @import "@progress/kendo-theme-core/scss/module-system/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion

// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-utils--styles() {
    @include module-render( "utils" ) {
        @include kendo-utils();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-utils--styles();
}

// #endregion


// Module meta
$_kendo-module-meta: (
    name: "typography",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/typography/_variables.scss
// Typography


// Headings

/// The font size of the highest level heading.
/// @group typography
$kendo-h1-font-size: calc( var( --kendo-font-size, .875rem ) * 4 ) !default;
/// The font size of the second highest level heading.
/// @group typography
$kendo-h2-font-size: calc( var( --kendo-font-size, .875rem ) * 3 ) !default;
/// The font size of the third highest level heading.
/// @group typography
$kendo-h3-font-size: calc( var( --kendo-font-size, .875rem ) * 2.5 ) !default;
/// The font size of the fourth highest level heading.
/// @group typography
$kendo-h4-font-size: calc( var( --kendo-font-size, .875rem ) * 2 ) !default;
/// The font size of the fifth highest level heading.
/// @group typography
$kendo-h5-font-size: calc( var( --kendo-font-size, .875rem ) * 1.5 ) !default;
/// The font size of the sixth highest level heading.
/// @group typography
$kendo-h6-font-size: var( --kendo-font-size, inherit ) !default;

/// The font family of the highest level heading.
/// @group typography
$kendo-h1-font-family: var( --kendo-font-family, inherit ) !default;
/// The font family of the second highest level heading.
/// @group typography
$kendo-h2-font-family: var( --kendo-font-family, inherit ) !default;
/// The font family of the third highest level heading.
/// @group typography
$kendo-h3-font-family: var( --kendo-font-family, inherit ) !default;
/// The font family of the fourth highest level heading.
/// @group typography
$kendo-h4-font-family: var( --kendo-font-family, inherit ) !default;
/// The font family of the fifth highest level heading.
/// @group typography
$kendo-h5-font-family: var( --kendo-font-family, inherit ) !default;
/// The font family of the sixth highest level heading.
/// @group typography
$kendo-h6-font-family: var( --kendo-font-family, inherit ) !default;

/// The line height of the highest level heading.
/// @group typography
$kendo-h1-line-height: 74px !default;
/// The line height of the second highest level heading.
/// @group typography
$kendo-h2-line-height: 56px !default;
/// The line height of the third highest level heading.
/// @group typography
$kendo-h3-line-height: 42px !default;
/// The line height of the fourth highest level heading.
/// @group typography
$kendo-h4-line-height: 40px !default;
/// The line height of the fifth highest level heading.
/// @group typography
$kendo-h5-line-height: 28px !default;
/// The line height of the sixth highest level heading.
/// @group typography
$kendo-h6-line-height: 20px !default;

/// The font weight of the highest level heading.
/// @group typography
$kendo-h1-font-weight: var( --kendo-font-weight-normal, normal ) !default;
/// The font weight of the second highest level heading.
/// @group typography
$kendo-h2-font-weight: var( --kendo-font-weight-normal, normal ) !default;
/// The font weight of the third highest level heading.
/// @group typography
$kendo-h3-font-weight: var( --kendo-font-weight-normal, normal ) !default;
/// The font weight of the fourth highest level heading.
/// @group typography
$kendo-h4-font-weight: var( --kendo-font-weight-bold, normal ) !default;
/// The font weight of the fifth highest level heading.
/// @group typography
$kendo-h5-font-weight: var( --kendo-font-weight-bold, normal ) !default;
/// The font weight of the sixth highest level heading.
/// @group typography
$kendo-h6-font-weight: var( --kendo-font-weight-bold, normal ) !default;

/// The letter spacing of the highest level heading.
/// @group typography
$kendo-h1-letter-spacing: null !default;
/// The letter spacing of the second highest level heading.
/// @group typography
$kendo-h2-letter-spacing: null !default;
/// The letter spacing of the third highest level heading.
/// @group typography
$kendo-h3-letter-spacing: null !default;
/// The letter spacing of the fourth highest level heading.
/// @group typography
$kendo-h4-letter-spacing: null !default;
/// The letter spacing of the fifth highest level heading.
/// @group typography
$kendo-h5-letter-spacing: null !default;
/// The letter spacing of the sixth highest level heading.
/// @group typography
$kendo-h6-letter-spacing: null !default;

/// The margin of the highest level heading.
/// @group typography
$kendo-h1-margin: 0 0 var( --kendo-font-size, inherit ) !default;
/// The margin of the second highest level heading.
/// @group typography
$kendo-h2-margin: 0 0 var( --kendo-font-size, inherit ) !default;
/// The margin of the third highest level heading.
/// @group typography
$kendo-h3-margin: 0 0 var( --kendo-font-size, inherit ) !default;
/// The margin of the fourth highest level heading.
/// @group typography
$kendo-h4-margin: 0 0 var( --kendo-font-size, inherit ) !default;
/// The margin of the fifth highest level heading.
/// @group typography
$kendo-h5-margin: 0 0 var( --kendo-font-size, inherit ) !default;
/// The margin of the sixth highest level heading.
/// @group typography
$kendo-h6-margin: 0 0 var( --kendo-font-size, inherit ) !default;

/// The headings Map.
/// @group typography
$kendo-headings: (
    h1: (
        font-size: $kendo-h1-font-size,
        font-family: $kendo-h1-font-family,
        line-height: $kendo-h1-line-height,
        font-weight: $kendo-h1-font-weight,
        letter-spacing: $kendo-h1-letter-spacing,
        margin: $kendo-h1-margin
    ),
    h2: (
        font-size: $kendo-h2-font-size,
        font-family: $kendo-h2-font-family,
        line-height: $kendo-h2-line-height,
        font-weight: $kendo-h2-font-weight,
        letter-spacing: $kendo-h2-letter-spacing,
        margin: $kendo-h2-margin
    ),
    h3: (
        font-size: $kendo-h3-font-size,
        font-family: $kendo-h3-font-family,
        line-height: $kendo-h3-line-height,
        font-weight: $kendo-h3-font-weight,
        letter-spacing: $kendo-h3-letter-spacing,
        margin: $kendo-h3-margin
    ),
    h4: (
        font-size: $kendo-h4-font-size,
        font-family: $kendo-h4-font-family,
        line-height: $kendo-h4-line-height,
        font-weight: $kendo-h4-font-weight,
        letter-spacing: $kendo-h4-letter-spacing,
        margin: $kendo-h4-margin
    ),
    h5: (
        font-size: $kendo-h5-font-size,
        font-family: $kendo-h5-font-family,
        line-height: $kendo-h5-line-height,
        font-weight: $kendo-h5-font-weight,
        letter-spacing: $kendo-h5-letter-spacing,
        margin: $kendo-h5-margin
    ),
    h6: (
        font-size: $kendo-h6-font-size,
        font-family: $kendo-h6-font-family,
        line-height: $kendo-h6-line-height,
        font-weight: $kendo-h6-font-weight,
        letter-spacing: $kendo-h6-letter-spacing,
        margin: $kendo-h6-margin
    )
) !default;


// Paragraph

/// The margin of the paragraph.
/// @group typography
$kendo-paragraph-margin: 0 0 var( --kendo-font-size, inherit ) !default;
/// The font size of the paragraph.
/// @group typography
$kendo-paragraph-font-size: var( --kendo-font-size, inherit ) !default;
/// The font family of the paragraph.
/// @group typography
$kendo-paragraph-font-family: var( --kendo-font-family, inherit ) !default;
/// The line height of the paragraph.
/// @group typography
$kendo-paragraph-line-height: 20px !default;
/// The font weight of the paragraph.
/// @group typography
$kendo-paragraph-font-weight: var( --kendo-font-weight-normal, normal ) !default;
/// The letter spacing of the paragraph.
/// @group typography
$kendo-paragraph-letter-spacing: null !default;


// Code

/// The font size of the code tag.
/// @group typography
$kendo-code-font-size: var( --kendo-font-size, inherit ) !default;
/// The font family of the code tag.
/// @group typography
$kendo-code-font-family: var( --kendo-font-family-monospace, normal ) !default;
/// The line height of the code tag.
/// @group typography
$kendo-code-line-height: 20px !default;
/// The font weight of the code tag.
/// @group typography
$kendo-code-font-weight: var( --kendo-font-weight-normal, normal ) !default;
/// The letter spacing of the code tag.
/// @group typography
$kendo-code-letter-spacing: null !default;

/// The horizontal padding of the code tag.
/// @group typography
$kendo-code-padding-x: k-spacing(1) !default;
/// The vertical padding of the code tag.
/// @group typography
$kendo-code-padding-y: k-spacing(0) !default;
/// The horizontal padding of the preformatted text.
/// @group typography
$kendo-pre-padding-x: k-spacing(6) !default;
/// The vertical padding of the preformatted text.
/// @group typography
$kendo-pre-padding-y: k-spacing(4) !default;
/// The width of the border of the code tag.
/// @group typography
$kendo-code-border-width: 1px !default;

/// The background color of the code tag.
/// @group typography
$kendo-code-bg: $kendo-base-bg !default;
/// The color of the code tag.
/// @group typography
$kendo-code-text: $kendo-component-text !default;
/// The border color of the code tag.
/// @group typography
$kendo-code-border: $kendo-component-border !default;

// Display

/// The font size of the largest display text.
/// @group typography
$kendo-display1-font-size: calc( var( --kendo-font-size, .875rem ) * 8) !default;
/// The font size of the second largest display text.
/// @group typography
$kendo-display2-font-size: calc( var( --kendo-font-size, .875rem ) * 7) !default;
/// The font size of the third largest display text.
/// @group typography
$kendo-display3-font-size: calc( var( --kendo-font-size, .875rem ) * 6) !default;
/// The font size of the fourth largest display text.
/// @group typography
$kendo-display4-font-size: calc( var( --kendo-font-size, .875rem ) * 5) !default;

/// The font family of the largest display text.
/// @group typography
$kendo-display1-font-family: var( --kendo-font-family, inherit ) !default;
/// The font family of the second largest display text.
/// @group typography
$kendo-display2-font-family: var( --kendo-font-family, inherit ) !default;
/// The font family of the third largest display text.
/// @group typography
$kendo-display3-font-family: var( --kendo-font-family, inherit ) !default;
/// The font family of the fourth largest display text.
/// @group typography
$kendo-display4-font-family: var( --kendo-font-family, inherit ) !default;

/// The line height of the largest display text.
/// @group typography
$kendo-display1-line-height: 1.2 !default;
/// The line height of the second largest display text.
/// @group typography
$kendo-display2-line-height: 1.2 !default;
/// The line height of the third largest display text.
/// @group typography
$kendo-display3-line-height: 1.2 !default;
/// The line height of the fourth largest display text.
/// @group typography
$kendo-display4-line-height: 1.2 !default;

/// The font weight of the largest display text.
/// @group typography
$kendo-display1-font-weight: var( --kendo-font-weight-light, normal ) !default;
/// The font weight of the second largest display text.
/// @group typography
$kendo-display2-font-weight: var( --kendo-font-weight-light, normal ) !default;
/// The font weight of the third largest display text.
/// @group typography
$kendo-display3-font-weight: var( --kendo-font-weight-light, normal ) !default;
/// The font weight of the fourth largest display text.
/// @group typography
$kendo-display4-font-weight: var( --kendo-font-weight-light, normal ) !default;

/// The letter spacing of the largest display text.
/// @group typography
$kendo-display1-letter-spacing: null !default;
/// The letter spacing of the second largest display text.
/// @group typography
$kendo-display2-letter-spacing: null !default;
/// The letter spacing of the third largest display text.
/// @group typography
$kendo-display3-letter-spacing: null !default;
/// The letter spacing of the fourth largest display text.
/// @group typography
$kendo-display4-letter-spacing: null !default;

/// The displays Map.
$kendo-display: (
    1: (
        font-size: $kendo-display1-font-size,
        font-family: $kendo-display1-font-family,
        line-height: $kendo-display1-line-height,
        font-weight: $kendo-display1-font-weight,
        letter-spacing: $kendo-display1-letter-spacing
    ),
    2: (
        font-size: $kendo-display2-font-size,
        font-family: $kendo-display2-font-family,
        line-height: $kendo-display2-line-height,
        font-weight: $kendo-display2-font-weight,
        letter-spacing: $kendo-display2-letter-spacing
    ),
    3: (
        font-size: $kendo-display3-font-size,
        font-family: $kendo-display3-font-family,
        line-height: $kendo-display3-line-height,
        font-weight: $kendo-display3-font-weight,
        letter-spacing: $kendo-display3-letter-spacing
    ),
    4: (
        font-size: $kendo-display4-font-size,
        font-family: $kendo-display4-font-family,
        line-height: $kendo-display4-line-height,
        font-weight: $kendo-display4-font-weight,
        letter-spacing: $kendo-display4-letter-spacing
    )
) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/typography/_layout.scss
@mixin kendo-typography--layout-base() {

    @if $kendo-enable-typography {
        body { @extend .k-body !optional; }
        h1 { @extend .k-h1 !optional; }
        h2 { @extend .k-h2 !optional; }
        h3 { @extend .k-h3 !optional; }
        h4 { @extend .k-h4 !optional; }
        h5 { @extend .k-h5 !optional; }
        h6 { @extend .k-h6 !optional; }
        p { @extend .k-paragraph !optional; }
        pre { @extend .k-pre !optional; }
        code { @extend .k-code !optional; }
    }

    // TODO delete k-typography class for R1 2022
    .k-body,
    .k-typography {
        @include typography(
            var( --kendo-font-size, inherit ),
            var( --kendo-font-family, inherit ),
            var( --kendo-line-height, normal ),
            var( --kendo-font-weight-normal, normal ),
            var( --kendo-letter-spacing, normal )
        );
        margin: 0;

        p {
            margin: $kendo-paragraph-margin;
        }
    }

    // Headings
    @each $heading, $heading-props in $kendo-headings {
        $_font-size: k-map-get( $heading-props, font-size );
        $_font-family: k-map-get( $heading-props, font-family );
        $_line-height: k-map-get( $heading-props, line-height );
        $_font-weight: k-map-get( $heading-props, font-weight );
        $_letter-spacing: k-map-get( $heading-props, letter-spacing );
        $_margin: k-map-get( $heading-props, margin );

        .k-#{$heading} {
            @include typography(
                var( --kendo-#{$heading}-font-size, #{$_font-size} ),
                var( --kendo-#{$heading}-font-family, #{$_font-family} ),
                var( --kendo-#{$heading}-line-height, #{$_line-height} ),
                var( --kendo-#{$heading}-font-weight, #{$_font-weight} ),
                var( --kendo-#{$heading}-letter-spacing, #{$_letter-spacing} ),
            );
            margin: var( --kendo-#{$heading}-margin, #{$_margin} );
        }
    }

    // Paragraph
    .k-paragraph {
        @include typography(
            var( --kendo-paragraph-font-size, #{$kendo-paragraph-font-size}),
            var( --kendo-paragraph-font-family, #{$kendo-paragraph-font-family}),
            var( --kendo-paragraph-line-height, #{$kendo-paragraph-line-height}),
            var( --kendo-paragraph-font-weight, #{$kendo-paragraph-font-weight}),
            var( --kendo-paragraph-letter-spacing, #{$kendo-paragraph-letter-spacing})
        );
        margin: var( --kendo-paragraph-margin, #{$kendo-paragraph-margin});
    }

    // Code snippet
    .k-pre,
    .k-code {
        @include typography(
            var( --kendo-code-font-size, #{$kendo-code-font-size}),
            var( --kendo-code-font-family, #{$kendo-code-font-family}),
            var( --kendo-code-line-height, #{$kendo-code-line-height}),
            var( --kendo-code-font-weight, #{$kendo-code-font-weight}),
            var( --kendo-code-letter-spacing, #{$kendo-code-letter-spacing})
        );
        border-style: solid;
        border-width: $kendo-code-border-width;
    }

    .k-pre {
        padding-block: $kendo-pre-padding-y;
        padding-inline: $kendo-pre-padding-x;
        overflow: auto;
    }

    .k-pre > .k-code {
        padding: 0;
        border-width: 0;
        border-color: transparent;
        background-color: transparent;
        font-family: inherit;
        font-size: inherit;
    }

    .k-code {
        padding-block: $kendo-code-padding-y;
        padding-inline: $kendo-code-padding-x;
    }

    // Display
    @each $display, $kendo-display-props in $kendo-display {
        $_font-size: k-map-get( $kendo-display-props, font-size );
        $_font-family: k-map-get( $kendo-display-props, font-family );
        $_line-height: k-map-get( $kendo-display-props, line-height );
        $_font-weight: k-map-get( $kendo-display-props, font-weight );
        $_letter-spacing: k-map-get( $kendo-display-props, letter-spacing );
        $_margin: k-map-get( $kendo-display-props, margin );

        .k-display-#{$display} {
            @include typography(
                var( --kendo-display#{$display}-font-size, #{$_font-size} ),
                var( --kendo-display#{$display}-font-family, #{$_font-family} ),
                var( --kendo-display#{$display}-line-height, #{$_line-height} ),
                var( --kendo-display#{$display}-font-weight, #{$_font-weight} ),
                var( --kendo-display#{$display}-letter-spacing, #{$_letter-spacing} ),
            );
        }
    }
}


@mixin kendo-typography--layout() {
    @include kendo-typography--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/typography/_theme.scss
@mixin kendo-typography--theme-base() {

    .k-body {
        @include fill(
            $kendo-body-text,
            $kendo-body-bg
        );
    }

    // Code snippet
    .k-pre,
    .k-code {
        @include fill(
            $kendo-code-text,
            $kendo-code-bg,
            $kendo-code-border
        );
    }

}


@mixin kendo-typography--theme() {
    @include kendo-typography--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-typography--styles() {
    @include module-render( "typography" ) {
        @include kendo-typography--layout();
        @include kendo-typography--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-typography--styles();
}

// #endregion
// #region @import "./utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Generic content
// #region @import "./icons/_index.scss"; -> scss/icons/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "icon",
    dependencies: ()
);


// Component
// #region @import "./_variables.scss"; -> scss/icons/_variables.scss

// #endregion
// #region @import "./_layout.scss"; -> scss/icons/_layout.scss
$ki-embed-font: false;
$ki-icon-size: $kendo-icon-size;

// #region @import "@progress/kendo-svg-icons/scss/index.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-svg-icons/scss/index.scss
// #region @import "_variables.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-svg-icons/scss/_variables.scss
$ki-icon-size: 16px !default;

$ki-icon-size-xs: calc( #{$ki-icon-size} * .75 ) !default;
$ki-icon-size-sm: calc( #{$ki-icon-size} * .875 ) !default;
$ki-icon-size-md: $ki-icon-size !default;
$ki-icon-size-lg: calc( #{$ki-icon-size} * 1.25 ) !default;
$ki-icon-size-xl: calc( #{$ki-icon-size} * 1.5 ) !default;
$ki-icon-size-xxl: calc( #{$ki-icon-size} * 2 ) !default;
$ki-icon-size-xxxl: calc( #{$ki-icon-size} * 3 ) !default;

$ki-rotate-map: (
    0: 0deg,
    45: 45deg,
    90: 90deg,
    135: 135deg,
    180: 180deg,
    225: 225deg,
    270: 270deg,
    315: 315deg
) !default;


// #endregion

@mixin kendo-svg-icon-styles() {

    .k-svg-icon {
        width: $ki-icon-size;
        height: $ki-icon-size;
        outline: 0;
        line-height: 1;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        position: relative;

        > svg {
            fill: currentColor;
            flex: 1 1 auto;
        }
    }

    // SVG Icon sizes
    .k-svg-icon {
        &.k-icon-xs {
            width: $ki-icon-size-xs;
            height: $ki-icon-size-xs;
        }
        &.k-icon-sm {
            width: $ki-icon-size-sm;
            height: $ki-icon-size-sm;
        }
        &.k-icon-md {
            width: $ki-icon-size-md;
            height: $ki-icon-size-md;
        }
        &.k-icon-lg {
            width: $ki-icon-size-lg;
            height: $ki-icon-size-lg;
        }
        &.k-icon-xl {
            width: $ki-icon-size-xl;
            height: $ki-icon-size-xl;
        }
        &.k-icon-xxl {
            width: $ki-icon-size-xxl;
            height: $ki-icon-size-xxl;
        }
        &.k-icon-xxxl {
            width: $ki-icon-size-xxxl;
            height: $ki-icon-size-xxxl;
        }
    }
    

    // Flip
    .k-flip-h,
    .k-flip-v,
    .k-flip-h.k-flip-v {
        &.k-svg-icon {
            transform: none;
        }
    }
    .k-flip-h {
        > svg {
            transform: scaleX( -1 );
        }
    }
    .k-flip-v {
        > svg {
            transform: scaleY( -1 );
        }
    }
    .k-flip-h.k-flip-v,
    .k-flip-both {
        > svg {
            transform: scale( -1, -1 );
        }
    }


    // Rotate
    @each $index, $rotate in $ki-rotate-map {
        .k-rotate-#{$index} {
            &.k-svg-icon {
                transform: none;
            }

            > svg {
                transform: rotate( #{$rotate} );
            }
        }
    }

}

// #endregion

@mixin kendo-icon--layout-base() {

    @include kendo-svg-icon-styles();

    // Icon wrap
    .k-icon-wrap {
        flex: none;
        display: inline-flex;
        flex-flow: row nowrap;
        gap: 0;
        align-items: center;
        align-self: flex-start;
        vertical-align: middle;
        position: relative;

        &::before {
            content: "\200b";
            width: 0;
            overflow: hidden;
            flex: none;
            display: inline-block;
            vertical-align: top;
        }
    }

    // kendo-icon-wrapper component
    .k-icon-wrapper-host {
        display: contents;
    }

    .k-icon-with-modifier {
        position: relative;
        margin: .25em;
    }

    .k-icon.k-icon-modifier {
        width: 1em;
        height: 1em;
        position: absolute;
        font-size: .5em;
        bottom: 0;
        right: 0;
        margin: 0 -.5em -.5em 0;
    }

    .k-i-none::before {
        content: "";
        display: none;
    }

    .k-icon-action {
        display: inline-flex;
        padding: $kendo-icon-padding;
        line-height: 1;
        align-items: center;
        vertical-align: middle;
        cursor: pointer;
    }

    .k-sprite {
        display: inline-block;
        width: 16px;
        height: 16px;
        overflow: hidden;
        background-repeat: no-repeat;
        font-size: 0;
        line-height: 0;
        text-align: center;
    }

    .k-image {
        display: inline-block;
    }
}


@mixin kendo-icon--layout() {
    @include kendo-icon--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/icons/_theme.scss
@mixin kendo-icon--theme-base() {}


@mixin kendo-icon--theme() {
    @include kendo-icon--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-icon--styles() {
    @include module-render( "icon" ) {
        @include kendo-icon--layout();
        @include kendo-icon--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-icon--styles();
}

// #endregion
// #region @import "./messagebox/_index.scss"; -> scss/messagebox/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "messagebox",
    dependencies: (
        "icon",
    )
);


// Dependencies
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/messagebox/_variables.scss
// Message box
$kendo-message-box-margin: 0 0 k-spacing(4) 0 !default;
$kendo-message-box-padding-x: $kendo-padding-md-x !default;
$kendo-message-box-padding-y: $kendo-padding-md-y !default;
$kendo-message-box-border-width: 0 0 0 4px !default;

$kendo-message-box-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-message-box-line-height: var( --kendo-line-height, normal ) !default;

$kendo-message-box-bg-level: -10 !default;
$kendo-message-box-text-level: 6 !default;
$kendo-message-box-border-level: -9 !default;

$kendo-message-box-link-font-style: italic !default;
$kendo-message-box-link-text-decoration: underline !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/messagebox/_layout.scss
@mixin kendo-messagebox--layout-base() {

    // Base
    .k-messagebox {
        margin: $kendo-message-box-margin;
        padding-block: $kendo-message-box-padding-y;
        padding-inline: $kendo-message-box-padding-x;
        border-width: $kendo-message-box-border-width;
        border-style: solid;
        box-sizing: border-box;
        font-size: $kendo-message-box-font-size;
        line-height: $kendo-message-box-line-height;

        a {
            color: inherit;
            font-style: $kendo-message-box-link-font-style;
            text-decoration: $kendo-message-box-link-text-decoration;
        }
    }

}


@mixin kendo-messagebox--layout() {
    @include kendo-messagebox--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/messagebox/_theme.scss
@mixin kendo-messagebox--theme-base() {

    @each $color-name, $color in $kendo-theme-colors {
        .k-messagebox-#{$color-name} {
            @if $color-name == "inverse" {
                @include fill(
                    if($kendo-enable-color-system, k-color( dark-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
                    if($kendo-enable-color-system, k-color( dark-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
                    if($kendo-enable-color-system, k-color( dark-hover ), k-color-level( $color, $kendo-message-box-border-level ))
                );
            } @else {
                @include fill(
                    if($kendo-enable-color-system, k-color( #{$color-name}-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
                    if($kendo-enable-color-system, k-color( #{$color-name}-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
                    if($kendo-enable-color-system, k-color( #{$color-name}-emphasis ), k-color-level( $color, $kendo-message-box-border-level ))
                );
            }
        }
    }

}


@mixin kendo-messagebox--theme() {
    @include kendo-messagebox--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-messagebox--styles() {
    @include module-render( "messagebox" ) {
        @include kendo-messagebox--layout();
        @include kendo-messagebox--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-messagebox--styles();
}

// #endregion


// Primitive components
// #region @import "./draggable/_index.scss"; -> scss/draggable/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "draggable",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/draggable/_variables.scss
// Drag hint
$kendo-drag-hint-padding-x: $kendo-padding-md-x !default;
$kendo-drag-hint-padding-y: $kendo-padding-md-y !default;
$kendo-drag-hint-border-width: 1px !default;
$kendo-drag-hint-border-radius: k-border-radius(md) !default;
$kendo-drag-hint-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-drag-hint-font-family: var( --kendo-font-family, inherit ) !default;
$kendo-drag-hint-line-height: var( --kendo-line-height, normal ) !default;

$kendo-drag-hint-bg: $kendo-base-bg !default;
$kendo-drag-hint-text: $kendo-base-text !default;
$kendo-drag-hint-border: $kendo-base-border !default;
$kendo-drag-hint-gradient: null !default;
$kendo-drag-hint-shadow: null !default;

$kendo-drag-hint-opacity: null !default;


// Drop hint
$kendo-drop-hint-arrow-size: 8px !default;
$kendo-drop-hint-arrow-spacing: k-math-div( $kendo-drop-hint-arrow-size, 2 ) !default;
$kendo-drop-hint-line-h-width: 20px !default;
$kendo-drop-hint-line-h-height: 1px !default;
$kendo-drop-hint-line-v-width: $kendo-drop-hint-line-h-height !default;
$kendo-drop-hint-line-v-height: $kendo-drop-hint-line-h-width !default;

$kendo-drop-hint-bg: $kendo-color-primary !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/draggable/_layout.scss
@mixin kendo-draggable--layout-base() {

    // Layout
    .k-drag-clue {
        @include border-radius( $kendo-drag-hint-border-radius );
        padding-block: $kendo-drag-hint-padding-y;
        padding-inline: $kendo-drag-hint-padding-x;
        border-width: $kendo-drag-hint-border-width;
        border-style: if( $kendo-drag-hint-border-width == null, null, solid );
        box-sizing: border-box;
        font-size: $kendo-drag-hint-font-size;
        font-family: $kendo-drag-hint-font-family;
        line-height: $kendo-drag-hint-line-height;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        align-content: center;
        white-space: nowrap;
        opacity: $kendo-drag-hint-opacity;
        overflow: hidden;
        position: absolute;
        z-index: 20000;
        cursor: move;
    }
    .k-drag-status,
    .k-drag-clue .k-drag-status {
        margin: 0;
        margin-right: .4ex;
    }


    // Drop hint
    .k-drop-hint {
        display: flex;
        gap: $kendo-drop-hint-arrow-spacing;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        z-index: 1000;
        transform: translate(-50%, -50%);
    }

    .k-drop-hint-start,
    .k-drop-hint-end {
        flex-shrink: 0;
        border-width: k-math-div( $kendo-drop-hint-arrow-size, 2 );
        border-style: solid;
        border-color: transparent;
    }

    .k-drop-hint-line {
        flex-grow: 1;
        background-color: $kendo-drop-hint-bg;
    }

    .k-drop-hint-h {
        .k-drop-hint-start {
            border-left-width: ( k-math-div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
            border-left-color: $kendo-drop-hint-bg;
            border-right-width: 0;
        }

        .k-drop-hint-line {
            width: $kendo-drop-hint-line-h-width;
            height: $kendo-drop-hint-line-h-height;
        }

        .k-drop-hint-end {
            border-right-width: ( k-math-div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
            border-right-color: $kendo-drop-hint-bg;
            border-left-width: 0;
        }
    }

    .k-drop-hint-v {
        flex-direction: column;

        .k-drop-hint-start {
            border-top-width: ( k-math-div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
            border-top-color: $kendo-drop-hint-bg;
            border-bottom-width: 0;
        }

        .k-drop-hint-line {
            width: $kendo-drop-hint-line-v-width;
            height: $kendo-drop-hint-line-v-height;
        }

        .k-drop-hint-end {
            border-bottom-width: ( k-math-div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
            border-bottom-color: $kendo-drop-hint-bg;
            border-top-width: 0;
        }
    }


    // Reorder cue
    .k-reorder-cue {
        position: absolute;

        &::before,
        &::after {
            content: "";
            width: 0;
            height: 0;
            border: 3px solid transparent;
            position: absolute;
            transform: translateX(-50%);
        }

        &::before {
            border-bottom-width: 0;
            border-top-color: currentColor;
            top: -4px;
        }
        &::after {
            border-top-width: 0;
            border-bottom-color: currentColor;
            bottom: -4px;
        }
    }

}


@mixin kendo-draggable--layout() {
    @include kendo-draggable--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/draggable/_theme.scss
@mixin kendo-draggable--theme-base() {

    // Drag hint
    .k-drag-clue {
        @include fill(
            $kendo-drag-hint-text,
            $kendo-drag-hint-bg,
            $kendo-drag-hint-border,
            $kendo-drag-hint-gradient
        );
        @include box-shadow( $kendo-drag-hint-shadow );
    }

}


@mixin kendo-draggable--theme() {
    @include kendo-draggable--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-draggable--styles() {
    @include module-render( "draggable" ) {
        @include kendo-draggable--layout();
        @include kendo-draggable--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-draggable--styles();
}

// #endregion
// #region @import "./list/_index.scss"; -> scss/list/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "list",
    dependencies: (
        "checkbox",
        "icon",
    )
);


// Dependencies
// #region @import "../checkbox/_index.scss"; -> scss/checkbox/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "checkbox",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/checkbox/_variables.scss
// #region @import "../list/_variables.scss"; -> scss/list/_variables.scss
// List

/// The font family of the List components.
/// @group list
$kendo-list-font-family: var( --kendo-font-family, inherit ) !default;

/// The font size of the List component, if no size is set.
/// @group list
$kendo-list-font-size: null !default;
$kendo-list-sm-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-list-md-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-list-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;

/// The line height of the List component, if no size is set.
/// @group list
$kendo-list-line-height: null !default;
$kendo-list-sm-line-height: var( --kendo-line-height, normal ) !default;
$kendo-list-md-line-height: var( --kendo-line-height, normal ) !default;
$kendo-list-lg-line-height: var( --kendo-line-height-lg, normal ) !default;

/// The horizontal padding of the List header, if no size is set.
/// @group list
$kendo-list-header-padding-x: null !default;
$kendo-list-sm-header-padding-x: k-spacing(2) !default;
$kendo-list-md-header-padding-x: k-spacing(2) !default;
$kendo-list-lg-header-padding-x: k-spacing(2) !default;

/// The vertical padding of the List header, if no size is set.
/// @group list
$kendo-list-header-padding-y: null !default;
$kendo-list-sm-header-padding-y: k-spacing(0.5) !default;
$kendo-list-md-header-padding-y: k-spacing(1) !default;
$kendo-list-lg-header-padding-y: k-spacing(1.5) !default;

/// The border width of the List header.
/// @group list
$kendo-list-header-border-width: 0 0 1px !default;

/// The font size of the List header, if no size is set.
/// @group list
$kendo-list-header-font-size: null !default;
$kendo-list-sm-header-font-size: null !default;
$kendo-list-md-header-font-size: null !default;
$kendo-list-lg-header-font-size: null !default;

/// The line height of the List header, if no size is set.
/// @group list
$kendo-list-header-line-height: null !default;
$kendo-list-sm-header-line-height: null !default;
$kendo-list-md-header-line-height: null !default;
$kendo-list-lg-header-line-height: null !default;

/// The font weight of the List header.
/// @group list
$kendo-list-header-font-weight: var( --kendo-font-weight-bold, normal ) !default;

/// The horizontal padding of the List items, when no size is set.
/// @group list
$kendo-list-item-padding-x: null !default;
$kendo-list-sm-item-padding-x: k-spacing(2) !default;
$kendo-list-md-item-padding-x: k-spacing(2) !default;
$kendo-list-lg-item-padding-x: k-spacing(2) !default;

/// The vertical padding of the List items, when no size is set.
/// @group list
$kendo-list-item-padding-y: null !default;
$kendo-list-sm-item-padding-y: k-spacing(0.5) !default;
$kendo-list-md-item-padding-y: k-spacing(1) !default;
$kendo-list-lg-item-padding-y: k-spacing(2) !default;

/// The font size of the List items, if no size is set.
/// @group list
$kendo-list-item-font-size: null !default;
$kendo-list-sm-item-font-size: null !default;
$kendo-list-md-item-font-size: null !default;
$kendo-list-lg-item-font-size: null !default;

/// The line height of the List items, if no size is set.
/// @group list
$kendo-list-item-line-height: null !default;
$kendo-list-sm-item-line-height: null !default;
$kendo-list-md-item-line-height: null !default;
$kendo-list-lg-item-line-height: null !default;

/// The horizontal padding of the List group items, when no size is set.
/// @group list
$kendo-list-group-item-padding-x: null !default;
$kendo-list-sm-group-item-padding-x: k-spacing(2) !default;
$kendo-list-md-group-item-padding-x: k-spacing(2) !default;
$kendo-list-lg-group-item-padding-x: k-spacing(2) !default;

/// The vertical padding of the List group items, when no size is set.
/// @group list
$kendo-list-group-item-padding-y: null !default;
$kendo-list-sm-group-item-padding-y: k-spacing(0.5) !default;
$kendo-list-md-group-item-padding-y: k-spacing(1) !default;
$kendo-list-lg-group-item-padding-y: k-spacing(1.5) !default;

/// The border width of the List group items.
/// @group list
$kendo-list-group-item-border-width: 1px 0 0 !default;

/// The font size of the List group items, if no size is set.
/// @group list
$kendo-list-group-item-font-size: null !default;
$kendo-list-sm-group-item-font-size: null !default;
$kendo-list-md-group-item-font-size: null !default;
$kendo-list-lg-group-item-font-size: null !default;

/// The line height of the List group items, if no size is set.
/// @group list
$kendo-list-group-item-line-height: null !default;
$kendo-list-sm-group-item-line-height: null !default;
$kendo-list-md-group-item-line-height: null !default;
$kendo-list-lg-group-item-line-height: null !default;

/// The font weight of a List group item.
/// @group list
$kendo-list-group-item-font-weight: var( --kendo-font-weight-bold, normal ) !default;


/// The map with the sizes of the List.
/// @group list
$kendo-list-sizes: (
    sm: (
        font-size: $kendo-list-sm-font-size,
        line-height: $kendo-list-sm-line-height,
        header-padding-x: $kendo-list-sm-header-padding-x,
        header-padding-y: $kendo-list-sm-header-padding-y,
        header-font-size: null,
        header-line-height: null,
        item-padding-x: $kendo-list-sm-item-padding-x,
        item-padding-y: $kendo-list-sm-item-padding-y,
        item-font-size: null,
        item-line-height: null,
        group-item-padding-x: $kendo-list-sm-group-item-padding-x,
        group-item-padding-y: $kendo-list-sm-group-item-padding-y,
        group-item-font-size: null,
        group-item-line-height: null
    ),
    md: (
        font-size: $kendo-list-md-font-size,
        line-height: $kendo-list-md-line-height,
        header-padding-x: $kendo-list-md-header-padding-x,
        header-padding-y: $kendo-list-md-header-padding-y,
        header-font-size: null,
        header-line-height: null,
        item-padding-x: $kendo-list-md-item-padding-x,
        item-padding-y: $kendo-list-md-item-padding-y,
        item-font-size: null,
        item-line-height: null,
        group-item-padding-x: $kendo-list-md-group-item-padding-x,
        group-item-padding-y: $kendo-list-md-group-item-padding-y,
        group-item-font-size: null,
        group-item-line-height: null
    ),
    lg: (
        font-size: $kendo-list-lg-font-size,
        line-height: $kendo-list-lg-line-height,
        header-padding-x: $kendo-list-lg-header-padding-x,
        header-padding-y: $kendo-list-lg-header-padding-y,
        header-font-size: null,
        header-line-height: null,
        item-padding-x: $kendo-list-lg-item-padding-x,
        item-padding-y: $kendo-list-lg-item-padding-y,
        item-font-size: null,
        item-line-height: null,
        group-item-padding-x: $kendo-list-lg-group-item-padding-x,
        group-item-padding-y: $kendo-list-lg-group-item-padding-y,
        group-item-font-size: null,
        group-item-line-height: null
    )
) !default;


/// The background color of the List component.
/// @group list
$kendo-list-bg: $kendo-component-bg !default;
/// The text color of the List component.
/// @group list
$kendo-list-text: $kendo-component-text !default;
/// The border color of the List component.
/// @group list
$kendo-list-border: $kendo-component-border !default;


/// The background color of the List header.
/// @group list
$kendo-list-header-bg: null !default;
/// The text color of the List header.
/// @group list
$kendo-list-header-text: null !default;
/// The border color of the List header.
/// @group list
$kendo-list-header-border: inherit !default;
/// The box shadow of the List header.
/// @group list
$kendo-list-header-shadow: k-elevation(2) !default;


/// The background color of the List items.
/// @group list
$kendo-list-item-bg: null !default;
/// The text color of the List items.
/// @group list
$kendo-list-item-text: null !default;

/// The background color of the hovered List items.
/// @group list
$kendo-list-item-hover-bg: $kendo-hover-bg !default;
/// The text color of the hovered List items.
/// @group list
$kendo-list-item-hover-text: $kendo-hover-text !default;

/// The background color of the focused List items.
/// @group list
$kendo-list-item-focus-bg: null !default;
/// The text color of the focused List items.
/// @group list
$kendo-list-item-focus-text: null !default;
/// The box shadow of the focused List items.
/// @group list
$kendo-list-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12) !default;

/// The background color of the selected List items.
/// @group list
$kendo-list-item-selected-bg: $kendo-selected-bg !default;
/// The text color of the selected List items.
/// @group list
$kendo-list-item-selected-text: $kendo-selected-text !default;

/// The background color of the List group items.
/// @group list
$kendo-list-group-item-bg: null !default;
/// The text color of the List group items.
/// @group list
$kendo-list-group-item-text: null !default;
/// The border color of the List group items.
/// @group list
$kendo-list-group-item-border: inherit !default;
/// The base shadow of the List group items.
/// @group list
$kendo-list-group-item-shadow: null !default;

/// The color of the 'No Data' text.
/// @group list
$kendo-list-no-data-text: $kendo-subtle-text !default;

/// The color of the 'Option Label' text.
/// @group list
$kendo-list-option-label-text: $kendo-subtle-text !default;

// #endregion


// CheckBox

/// The border width of the CheckBox.
/// @group checkbox
$kendo-checkbox-border-width: 1px !default;

/// The size of a small CheckBox.
/// @group checkbox
$kendo-checkbox-sm-size: k-spacing(3) !default;
/// The size of a medium CheckBox.
/// @group checkbox
$kendo-checkbox-md-size: k-spacing(4) !default;
/// The size of a large CheckBox.
/// @group checkbox
$kendo-checkbox-lg-size: k-spacing(5) !default;

/// The glyph size of a small CheckBox.
/// @group checkbox
$kendo-checkbox-sm-glyph-size: k-spacing(2.5) !default;
/// The glyph size of a medium CheckBox.
/// @group checkbox
$kendo-checkbox-md-glyph-size: k-spacing(3.5) !default;
/// The glyph size of a large CheckBox.
/// @group checkbox
$kendo-checkbox-lg-glyph-size: k-spacing(4.5) !default;

/// The ripple size of a small CheckBox.
/// @group checkbox
$kendo-checkbox-sm-ripple-size: 300% !default;
/// The ripple size of a medium CheckBox.
/// @group checkbox
$kendo-checkbox-md-ripple-size: 300% !default;
/// The ripple size of a large CheckBox.
/// @group checkbox
$kendo-checkbox-lg-ripple-size: 300% !default;

// A map with the different CheckBox sizes.
$kendo-checkbox-sizes: (
    sm: (
        size: $kendo-checkbox-sm-size,
        glyph-size: $kendo-checkbox-sm-glyph-size,
        ripple-size: $kendo-checkbox-sm-ripple-size
    ),
    md: (
        size: $kendo-checkbox-md-size,
        glyph-size: $kendo-checkbox-md-glyph-size,
        ripple-size: $kendo-checkbox-md-ripple-size
    ),
    lg: (
        size: $kendo-checkbox-lg-size,
        glyph-size: $kendo-checkbox-lg-glyph-size,
        ripple-size: $kendo-checkbox-lg-ripple-size
    )
) !default;

/// The background color of the CheckBox.
/// @group checkbox
$kendo-checkbox-bg: $kendo-component-bg !default;
/// The text color of the CheckBox.
/// @group checkbox
$kendo-checkbox-text: null !default;
/// The border color of the CheckBox.
/// @group checkbox
$kendo-checkbox-border: $kendo-component-border !default;

/// The background color of the hovered CheckBox.
/// @group checkbox
$kendo-checkbox-hover-bg: null !default;
/// The text color of the hovered CheckBox.
/// @group checkbox
$kendo-checkbox-hover-text: null !default;
/// The border color of the hovered CheckBox.
/// @group checkbox
$kendo-checkbox-hover-border: null !default;

/// The background color of the checked CheckBox.
/// @group checkbox
$kendo-checkbox-checked-bg: $kendo-color-primary !default;
/// The text color of the checked CheckBox.
/// @group checkbox
$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) !default;
/// The border color of the checked CheckBox.
/// @group checkbox
$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;

/// The background color of the indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
/// The text color of the indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-bg !default;
/// The border color of the indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-indeterminate-border: $kendo-checkbox-border !default;

/// The border color of the focused CheckBox.
/// @group checkbox
$kendo-checkbox-focus-border: null !default;
/// The box shadow of the focused CheckBox.
/// @group checkbox
$kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
/// The border color of the focused and checked CheckBox.
/// @group checkbox
$kendo-checkbox-focus-checked-border: null !default;
/// The box shadow of the focused and checked CheckBox.
/// @group checkbox
$kendo-checkbox-focus-checked-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary, .3 )) !default;

/// The background color of the disabled CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-bg: null !default;
/// The text color of the disabled CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-text: null !default;
/// The border color of the disabled CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-border: null !default;

/// The background color of the disabled and checked CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-checked-bg: null !default;
/// The text color of the disabled and checked CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-checked-text: null !default;
/// The border color of the disabled and checked CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-checked-border: null !default;

/// The background color of an invalid CheckBox.
/// @group checkbox
$kendo-checkbox-invalid-bg: null !default;
/// The text color of an invalid CheckBox.
/// @group checkbox
$kendo-checkbox-invalid-text: $kendo-invalid-text !default;
/// The border color of an invalid CheckBox.
/// @group checkbox
$kendo-checkbox-invalid-border: $kendo-invalid-border !default;


// CheckBox indicator

/// The type of the CheckBox indicator.
/// @group checkbox
$kendo-checkbox-indicator-type: image !default;

/// The font family of the CheckBox indicator glyph.
/// @group checkbox
$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
/// The glyph of the CheckBox indicator.
/// @group checkbox
$kendo-checkbox-checked-glyph: "\e118" !default;
/// The glyph of the indeterminate CheckBox indicator.
/// @group checkbox
$kendo-checkbox-indeterminate-glyph: "\e121" !default;

/// The image for a checked CheckBox indicator.
/// @group checkbox
$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
/// The image for a indeterminate CheckBox indicator.
/// @group checkbox
$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;


// CheckBox label

/// The horizontal margin of the CheckBox inside a label.
/// @group checkbox
$kendo-checkbox-label-margin-x: k-spacing(1) !default;


// CheckBox list

/// The spacing between the items in a horizontal CheckBox list.
/// @group checkbox
$kendo-checkbox-list-spacing: k-spacing(4) !default;
/// The horizontal padding of the CheckBox list items.
/// @group checkbox
$kendo-checkbox-list-item-padding-x: k-spacing(0) !default;
/// The vertical padding of the CheckBox list items.
/// @group checkbox
$kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;


// CheckBox ripple

/// The background color of the CheckBox' ripple.
/// @group checkbox
$kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default;
/// The opacity of the CheckBox' ripple.
/// @group checkbox
$kendo-checkbox-ripple-opacity: .25 !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/checkbox/_layout.scss
@mixin kendo-checkbox--layout-base() {

    // Checkbox
    .k-checkbox {
        margin: 0;
        padding: 0;
        line-height: initial;
        border-width: $kendo-checkbox-border-width;
        border-style: solid;
        outline: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
        flex: none;
        vertical-align: middle;
        position: relative;
        cursor: pointer;
        -webkit-appearance: none;
    }


    // Checkbox indicator
    .k-checkbox::before {
        @if $kendo-checkbox-indicator-type == "glyph" {
            content: $kendo-checkbox-checked-glyph;
            width: 1em;
            height: 1em;
            font-family: $kendo-checkbox-glyph-font-family;
            line-height: 1;
            transform: translate(-50%, -50%) scale(0);
            overflow: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
        }
    }


    // Checked state
    .k-checkbox:checked,
    .k-checkbox.k-checked {
        @if $kendo-checkbox-indicator-type == "image" {
            background-image: $kendo-checkbox-checked-image;
        }

        @if $kendo-checkbox-indicator-type == "glyph" {
            &::before {
                transform: translate(-50%, -50%) scale(1);
            }
        }
    }


    // Indeterminate state
    .k-checkbox:indeterminate,
    .k-checkbox.k-indeterminate {
        @if $kendo-checkbox-indicator-type == "image" {
            background-image: $kendo-checkbox-indeterminate-image;
        }

        @if $kendo-checkbox-indicator-type == "glyph" {
            &::before {
                content: $kendo-checkbox-indeterminate-glyph;
                transform: scale(1) translate(-50%, -50%);
            }
        }
    }


    // Disabled state
    .k-checkbox:disabled,
    .k-checkbox.k-disabled {
        @include disabled( $kendo-disabled-styling... );
    }


    // Checkbox wrap
    .k-checkbox-wrap {
        flex: none;
        display: inline-flex;
        flex-flow: row nowrap;
        gap: 0;
        align-items: center;
        align-self: flex-start;
        vertical-align: middle;
        position: relative;

        &::before {
            content: "\200b";
            width: 0px;
            overflow: hidden;
            flex: none;
            display: inline-block;
            vertical-align: top;
        }
    }


    // Checkbox label
    .k-checkbox-label {
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: flex-start;
        gap: $kendo-checkbox-label-margin-x;
        vertical-align: middle;
        position: relative;
        cursor: pointer;

        .k-ripple {
            // Hide ripple temporarily
            visibility: hidden !important; // stylelint-disable-line declaration-no-important
        }
    }
    .k-checkbox + .k-label,
    .k-checkbox-wrap + .k-label,
    .k-checkbox + .k-checkbox-label,
    .k-checkbox-wrap + .k-checkbox-label {
        display: inline;
        margin-inline-start: $kendo-checkbox-label-margin-x;
    }


    // Empty label
    .k-checkbox-label:empty {
        display: none !important; // stylelint-disable-line declaration-no-important
    }
    .k-checkbox-label.k-no-text {
        min-width: 1px;
    }


    // Checkbox list
    .k-checkbox-list {
        margin: 0;
        padding: 0;
        display: flex;
        flex-flow: column nowrap;
        gap: 0;
        list-style: none;
    }
    .k-checkbox-item,
    .k-checkbox-list-item {
        padding-block: $kendo-checkbox-list-item-padding-y;
        padding-inline: $kendo-checkbox-list-item-padding-x;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-content: center;
        gap: k-spacing(1);

        .k-checkbox-label {
            margin: 0;
        }
    }
    .k-checkbox-list-horizontal,
    .k-checkbox-list.k-list-horizontal {
        display: flex;
        flex-flow: row wrap;
        gap: $kendo-checkbox-list-spacing;
    }


    // Ripple
    .k-ripple-container {
        .k-checkbox::after {
            content: "";
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 100%;
            z-index: -1;
            transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
            transform: translate(-50%, -50%) scale(0);
            transform-origin: center center;
        }

        .k-checkbox:focus,
        .k-checkbox.k-focus {
            box-shadow: none !important; // stylelint-disable-line declaration-no-important
        }

        .k-checkbox:disabled::after,
        .k-checkbox.k-disabled::after {
            display: none;
        }
    }


    // Checkbox size
    @each $size, $size-props in $kendo-checkbox-sizes {
        $_size: k-map-get( $size-props, size );
        $_glyph-size: k-map-get( $size-props, glyph-size );
        $_ripple-size: k-map-get( $size-props, ripple-size );

        .k-checkbox-#{$size} {
            width: $_size;
            height: $_size;

            &::before {
                font-size: $_glyph-size;
            }
        }
        .k-ripple-container {
            .k-checkbox-#{$size}::after {
                width: $_ripple-size;
                height: $_ripple-size;
            }
        }
    }

}


@mixin kendo-checkbox--layout() {
    @include kendo-checkbox--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/checkbox/_theme.scss
@mixin kendo-checkbox--theme-base() {

    // Checkbox
    .k-checkbox {
        @include fill(
            $kendo-checkbox-text,
            $kendo-checkbox-bg,
            $kendo-checkbox-border
        );
    }


    // Hover state
    .k-checkbox:hover,
    .k-checkbox.k-hover {
        @include fill(
            $kendo-checkbox-hover-text,
            $kendo-checkbox-hover-bg,
            $kendo-checkbox-hover-border
        );
    }


    // Focus state
    .k-checkbox:focus,
    .k-checkbox.k-focus {
        @include fill( $border: $kendo-checkbox-focus-border );
        @include focus-indicator( $kendo-checkbox-focus-shadow );
    }


    // Indeterminate
    .k-checkbox:indeterminate,
    .k-checkbox.k-indeterminate {
        @include fill(
            $kendo-checkbox-indeterminate-text,
            $kendo-checkbox-indeterminate-bg,
            $kendo-checkbox-indeterminate-border
        );
    }


    // Checked
    .k-checkbox:checked,
    .k-checkbox.k-checked {
        @include fill(
            $kendo-checkbox-checked-text,
            $kendo-checkbox-checked-bg,
            $kendo-checkbox-checked-border
        );
    }
    .k-checkbox:checked:focus,
    .k-checkbox.k-checked.k-focus {
        @include fill( $border: $kendo-checkbox-focus-checked-border );
        @include focus-indicator( $kendo-checkbox-focus-checked-shadow );
    }


    // Disabled
    .k-checkbox:disabled,
    .k-checkbox.k-disabled {
        @include fill(
            $kendo-checkbox-disabled-text,
            $kendo-checkbox-disabled-bg,
            $kendo-checkbox-disabled-border
        );
    }
    .k-checkbox:checked:disabled,
    .k-checkbox:indeterminate:disabled,
    .k-checkbox.k-checked.k-disabled,
    .k-checkbox.k-indeterminate.k-disabled {
        @include fill(
            $kendo-checkbox-disabled-checked-text,
            $kendo-checkbox-disabled-checked-bg,
            $kendo-checkbox-disabled-checked-border
        );
    }


    // Invalid
    .k-checkbox.k-invalid {
        @include fill( $border: $kendo-checkbox-invalid-border );
    }
    .k-checkbox.k-invalid + .k-checkbox-label {
        @include fill( $color: $kendo-checkbox-invalid-text );
    }


    // Ripple
    .k-checkbox-wrap .k-ripple-blob {
        color: $kendo-checkbox-ripple-bg;
        opacity: $kendo-checkbox-ripple-opacity;
    }
    .k-ripple-container {
        .k-checkbox::after {
            background: $kendo-checkbox-ripple-bg;
            opacity: $kendo-checkbox-ripple-opacity;
        }
    }

}


@mixin kendo-checkbox--theme() {
    @include kendo-checkbox--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-checkbox--styles() {
    @include module-render( "checkbox" ) {
        @include kendo-checkbox--layout();
        @include kendo-checkbox--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-checkbox--styles();
}

// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/list/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./_layout.scss"; -> scss/list/_layout.scss
@mixin kendo-list--layout-base() {

    // List container
    .k-list-container {
        display: flex;
        flex-flow: column nowrap;

        > .k-list {
            flex: 1;
            height: 100%;
        }
    }

    // List
    .k-list {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: $kendo-list-font-family;
        font-size: $kendo-list-font-size;
        line-height: $kendo-list-line-height;
        display: flex;
        flex-flow: column nowrap;
        outline: none;
        position: relative;
        overflow: hidden;

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


    // List in popup
    .k-popup > .k-list {
        height: 100%;
        border-width: 0;
    }


    // List header
    // .k-list-header,
    .k-list-group-sticky-header {
        padding-block: $kendo-list-header-padding-y;
        padding-inline: $kendo-list-header-padding-x;
        border-width: 0;
        border-width: $kendo-list-header-border-width;
        border-style: solid;
        font-size: $kendo-list-header-font-size;
        line-height: $kendo-list-header-line-height;
        font-weight: $kendo-list-header-font-weight;
        white-space: nowrap;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        flex: none;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }


    // List content
    .k-list-content {
        border-color: inherit;
        flex: 1 1 auto;
        overflow: hidden;
        overflow-y: auto;
        position: relative;
    }


    // List UL
    .k-list-ul {
        margin: 0;
        padding: 0;
        border-width: 0;
        border-color: inherit;
        height: auto;
        list-style: none;
    }


    // List item
    .k-list-item {
        padding-block: $kendo-list-item-padding-y;
        padding-inline: $kendo-list-item-padding-x;
        border: 0;
        font-size: $kendo-list-item-font-size;
        line-height: $kendo-list-item-line-height;
        outline: none;
        cursor: pointer;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-content: center;
        gap: $kendo-icon-spacing;
        position: relative;
        transition-property: color, background-color, outline-color, box-shadow;
        transition-duration: 200ms;
        transition-timing-function: ease;

        &.k-first::before {
            content: "";
            border-width: 1px 0 0;
            border-style: solid;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
        }
    }
    .k-list-item-text,
    .k-list-header-text,
    .k-list-optionlabel {
        &::before {
            content: "\200b";
            width: 0px;
            overflow: hidden;
        }
    }
    .k-list-optionlabel {
        @extend .k-list-item !optional;
        column-gap: 0;
    }


    // List group item
    .k-list-group-item {
        padding-block: $kendo-list-group-item-padding-y;
        padding-inline: $kendo-list-group-item-padding-x;
        border-width: 0;
        border-width: $kendo-list-group-item-border-width;
        border-style: solid;
        font-size: $kendo-list-group-item-font-size;
        line-height: $kendo-list-group-item-line-height;
        font-weight: $kendo-list-group-item-font-weight;
        cursor: default;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-content: center;
        gap: $kendo-icon-spacing;
        position: relative;
    }


    // List item group label
    .k-list-item-group-label {
        padding-block: 0;
        padding-inline: .5em;
        font-size: .75em;
        position: absolute;
        top: 0;
        inset-inline-end: 0;
    }


    // Virtualization
    .k-virtual-list {}
    .k-virtual-content,
    .k-virtual-list .k-list-content {
        overflow-y: scroll;
    }
    .k-virtual-list .k-list-item,
    .k-virtual-list .k-list-group-item,
    .k-virtual-content .k-list-item,
    .k-virtual-content .k-list-group-item {
        position: absolute;
        width: 100%;
    }
    .k-virtual-list .k-list-item-text,
    .k-virtual-list .k-list-header-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .k-virtual-list .k-list-optionlabel {
        position: relative;
    }


    // Filter
    .k-list-filter {
        display: block;
        position: relative;
        padding: $kendo-padding-md-x;
        box-sizing: border-box;
        flex: none;
    }


    // Switch sizes
    @each $size, $size-props in $kendo-list-sizes {
        $_font-size: k-map-get( $size-props, font-size );
        $_line-height: k-map-get( $size-props, line-height );
        $_font-size: k-map-get( $size-props, font-size );
        $_line-height: k-map-get( $size-props, line-height );
        $_header-padding-x: k-map-get( $size-props, header-padding-x );
        $_header-padding-y: k-map-get( $size-props, header-padding-y );
        $_header-font-size: k-map-get( $size-props, header-font-size );
        $_header-line-height: k-map-get( $size-props, header-line-height );
        $_item-padding-x: k-map-get( $size-props, item-padding-x );
        $_item-padding-y: k-map-get( $size-props, item-padding-y );
        $_item-font-size: k-map-get( $size-props, item-font-size );
        $_item-line-height: k-map-get( $size-props, item-line-height );
        $_group-item-padding-x: k-map-get( $size-props, group-item-padding-x );
        $_group-item-padding-y: k-map-get( $size-props, group-item-padding-y );
        $_group-item-font-size: k-map-get( $size-props, group-item-font-size );
        $_group-item-line-height: k-map-get( $size-props, group-item-line-height );

        .k-list-#{$size} {
            font-size: $_font-size;
            line-height: $_line-height;

            // .k-list-header,
            .k-list-group-sticky-header {
                padding-block: $_header-padding-y;
                padding-inline: $_header-padding-x;
                font-size: $_header-font-size;
                line-height: $_header-line-height;
            }

            .k-list-item {
                padding-block: $_item-padding-y;
                padding-inline: $_item-padding-x;
                font-size: $_item-font-size;
                line-height: $_item-line-height;
            }

            .k-list-group-item {
                padding-block: $_group-item-padding-y;
                padding-inline: $_group-item-padding-x;
                font-size: $_group-item-font-size;
                line-height: $_group-item-line-height;
            }
        }
    }


    // No data
    .k-no-data {
        min-height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: lighter;
        text-align: center;
        white-space: normal;
    }


    // Alias
    .k-nodata {
        @extend .k-no-data !optional;
    }

}


@mixin kendo-list--layout() {
    @include kendo-list--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/list/_theme.scss
@mixin kendo-list--theme-base() {

    // List
    .k-list {
        @include fill(
            $kendo-list-text,
            $kendo-list-bg,
            $kendo-list-border
        );
    }


    // List header
    // .k-list-header,
    .k-list-group-sticky-header {
        @include fill(
            $kendo-list-header-text,
            $kendo-list-header-bg,
            $kendo-list-header-border,
        );
        @include box-shadow( $kendo-list-header-shadow );
    }


    // List item
    .k-list-item {
        @include fill(
            $kendo-list-item-text,
            $kendo-list-item-bg
        );

        // Hover
        &:hover,
        &.k-hover {
            @include fill(
                $kendo-list-item-hover-text,
                $kendo-list-item-hover-bg
            );
        }

        // Focus
        &:focus,
        &.k-focus {
            @include fill(
                $kendo-list-item-focus-text,
                $kendo-list-item-focus-bg
            );
            @include focus-indicator( $kendo-list-item-focus-shadow, true );
        }

        // Selected
        &.k-selected {
            @include fill(
                $kendo-list-item-selected-text,
                $kendo-list-item-selected-bg
            );
        }
        &.k-selected:hover,
        &.k-selected.k-hover {
            color: $kendo-list-item-selected-text;
            background-color: if($kendo-enable-color-system, k-color( primary-hover ), k-color-shade( $kendo-list-item-selected-bg ));
        }
    }

    // Option Label
    .k-list-optionlabel,
    .k-list-optionlabel.k-hover,
    .k-list-optionlabel:hover {
        color: $kendo-list-option-label-text;
    }

    // List group item
    .k-list-group-item {
        @include fill(
            $kendo-list-group-item-text,
            $kendo-list-group-item-bg,
            $kendo-list-group-item-border,
        );
        @include box-shadow( $kendo-list-group-item-shadow );
    }


    // List item group label
    .k-list-item-group-label {
        @include fill(
            $kendo-list-bg,
            $kendo-list-text
        );
    }


    // No data
    .k-no-data {
        color: $kendo-list-no-data-text;
    }

}


@mixin kendo-list--theme() {
    @include kendo-list--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-list--styles() {
    @include module-render( "list" ) {
        @include kendo-list--layout();
        @include kendo-list--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-list--styles();
}

// #endregion
// #region @import "./listgroup/_index.scss"; -> scss/listgroup/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "listgroup",
    dependencies: (
        "icon",
    )
);


// Dependencies
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/listgroup/_variables.scss
// Listgroup
$kendo-listgroup-border-width: 1px !default;
$kendo-listgroup-border-radius: k-border-radius(md) !default;

$kendo-listgroup-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-listgroup-line-height: var( --kendo-line-height, normal ) !default;

$kendo-listgroup-bg: $kendo-component-bg !default;
$kendo-listgroup-text: $kendo-component-text !default;
$kendo-listgroup-border: $kendo-component-border !default;

$kendo-listgroup-item-padding-x: k-spacing(2) !default;
$kendo-listgroup-item-padding-y: k-spacing(2) !default;
$kendo-listgroup-item-border-width: 1px !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/listgroup/_layout.scss
@mixin kendo-listgroup--layout-base() {

    .k-listgroup {
        @include border-radius( $kendo-listgroup-border-radius );
        margin: 0;
        padding: 0;
        border-width: $kendo-listgroup-border-width;
        border-style: solid;
        font-size: $kendo-listgroup-font-size;
        line-height: $kendo-listgroup-line-height;
        list-style: none;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;

        > ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
        }

        // Borders of items
        .k-listgroup-item + .k-listgroup-item {
            border-top-width: $kendo-listgroup-item-border-width;
        }
    }
    .k-listgroup-flush {
        @include border-radius( 0 );
        border-left-width: 0;
        border-right-width: 0;
    }


    .k-listgroup-item {
        padding-block: $kendo-listgroup-item-padding-y;
        padding-inline: $kendo-listgroup-item-padding-x;
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex: 0 0 auto;
        position: relative;

        > .k-link {
            margin-block: calc( #{$kendo-listgroup-item-padding-y} * -1 );
            margin-inline: calc( #{$kendo-listgroup-item-padding-x} * -1 );
            padding-block: $kendo-listgroup-item-padding-y;
            padding-inline: $kendo-listgroup-item-padding-x;
            color: inherit;
            text-decoration: none;
            outline: 0;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            flex: 1 1 auto;
            position: relative;

            > .k-select {
                padding: $kendo-listgroup-item-padding-y;
                display: flex;
                align-items: center;
                flex: 0 0 auto;
                position: absolute;
                top: 50%;
                inset-inline-end: 0;
                transform: translateY(-50%);
            }
        }
    }
    .k-listgroup-item-segmented {
        align-items: stretch;

        > .k-link {
            margin-right: 0;
        }

        > .k-select {
            margin: calc( #{$kendo-listgroup-item-padding-y} * -1 ) calc( #{$kendo-listgroup-item-padding-x} * -1 ) calc( #{$kendo-listgroup-item-padding-y} * -1 ) 0;
            padding: $kendo-listgroup-item-padding-y;
            border-width: 0 0 0 1px;
            border-style: solid;
            border-color: inherit;
            cursor: pointer;
        }
    }


    // Forms in listgroup
    .k-listgroup-form-row {
        margin-block: calc( #{$kendo-listgroup-item-padding-y} * -1 );
        margin-inline: calc( #{$kendo-listgroup-item-padding-x} * -1 );
        padding-block: $kendo-listgroup-item-padding-y;
        padding-inline: $kendo-listgroup-item-padding-x;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex: 1 1 auto;
        position: relative;

        .k-listgroup-form-field-label {
            width: 40%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .k-listgroup-form-field-wrapper {
            width: 50%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            text-align: end;
            position: relative;

            select,
            input[type="text"],
            input[type="password"],
            input[type="date"],
            input[type="time"],
            input[type="datetime-local"],
            input[type="number"],
            textarea {
                width: 100%;
                box-sizing: border-box;
                flex: 1 1 100%;
            }

            textarea {
                min-height: 4em;
                resize: vertical;
            }
        }
    }
    .k-listgroup-item.k-listgroup-form-row {
        margin: 0;
    }


    [dir="rtl"] {

        .k-listgroup-item {

            > .k-link {

                > .k-select {
                    right: auto;
                    left: 0;
                }
            }
        }
        .k-listgroup-item-segmented {

            > .k-link {
                margin-right: calc( #{$kendo-listgroup-item-padding-x} * -1 );
                margin-left: 0;
            }

            > .k-select {
                margin-right: 0;
                margin-left: calc( #{$kendo-listgroup-item-padding-x} * -1 );
                border-right-width: 1px;
                border-left-width: 0;
            }
        }
    }


    // No flexbox fix
    .k-noflexbox {
        .k-listgroup,
        .k-listgroup > ul
        .k-listgroup-item,
        .k-listgroup-item > .k-link {
            display: block;
        }
    }

}


@mixin kendo-listgroup--layout() {
    @include kendo-listgroup--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/listgroup/_theme.scss
@mixin kendo-listgroup--theme-base() {

    // Listgroup
    .k-listgroup {
        @include fill(
            $kendo-listgroup-text,
            $kendo-listgroup-bg,
            $kendo-listgroup-border
        );
    }

}


@mixin kendo-listgroup--theme() {
    @include kendo-listgroup--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-listgroup--styles() {
    @include module-render( "listgroup" ) {
        @include kendo-listgroup--layout();
        @include kendo-listgroup--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-listgroup--styles();
}

// #endregion
// #region @import "./overlay/_index.scss"; -> scss/overlay/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "overlay",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/overlay/_variables.scss
$kendo-overlay-theme-colors: $kendo-theme-colors !default;

$kendo-overlay-bg: $kendo-color-black !default;
$kendo-overlay-opacity: .5 !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/overlay/_layout.scss
@mixin kendo-overlay--layout-base() {

    // Overlay
    .k-overlay {
        width: 100%;
        height: 100%;
        opacity: $kendo-overlay-opacity;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10001;
    }

}


@mixin kendo-overlay--layout() {
    @include kendo-overlay--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/overlay/_theme.scss
@mixin kendo-overlay--theme-base() {

    // Overlay
    .k-overlay {
        background-color: $kendo-overlay-bg;
    }


    @each $name, $color in $kendo-overlay-theme-colors {
        .k-overlay-#{$name} {
            background-color: $color;
        }
    }

}


@mixin kendo-overlay--theme() {
    @include kendo-overlay--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-overlay--styles() {
    @include module-render( "overlay" ) {
        @include kendo-overlay--layout();
        @include kendo-overlay--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-overlay--styles();
}

// #endregion
// #region @import "./popup/_index.scss"; -> scss/popup/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "popup",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/popup/_variables.scss
/// Horizontal padding of the popup.
/// @group popup
$kendo-popup-padding-x: null !default;
/// Vertical padding of the popup.
/// @group popup
$kendo-popup-padding-y: null !default;
/// Width of the border around the popup.
/// @group popup
$kendo-popup-border-width: 1px !default;
/// Border radius of the popup.
/// @group popup
$kendo-popup-border-radius: null !default;

/// Font size of the popup.
/// @group popup
$kendo-popup-font-size: var( --kendo-font-size, inherit ) !default;
/// Line height of the popup.
/// @group popup
$kendo-popup-line-height: var( --kendo-line-height, normal ) !default;

/// Horizontal padding of the popup content.
/// @group popup
$kendo-popup-content-padding-x: k-spacing(2) !default;
/// Vertical padding of the popup content.
/// @group popup
$kendo-popup-content-padding-y: k-spacing(2) !default;

/// Background color of the popup.
/// @group popup
$kendo-popup-bg: $kendo-component-bg !default;
/// Text color of the popup.
/// @group popup
$kendo-popup-text: $kendo-component-text !default;
/// Border color of the popup.
/// @group popup
$kendo-popup-border: $kendo-component-border !default;
/// Box shadow of the popup.
/// @group popup
$kendo-popup-shadow: k-elevation(4) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/popup/_layout.scss
@mixin kendo-popup--layout-base() {

    // Animation Container
    .k-animation-container {
        position: absolute;
        overflow: hidden;
        z-index: 100;

        &-fixed {
            position: fixed;
        }

        &-relative {
            position: relative;
            display: inline-block;
        }
    }

    .k-animation-container {
        @include border-bottom-radius-only( $kendo-border-radius-md );
    }

    .k-animation-container-shown {
        overflow: visible;
    }

    // Popup
    .k-popup {
        @include border-radius( $kendo-popup-border-radius );
        margin: 0;
        padding: 0;
        // padding-block: $kendo-popup-padding-y;
        // padding-inline: $kendo-popup-padding-x;
        border-width: $kendo-popup-border-width;
        border-style: solid;
        box-sizing: border-box;
        font-size: $kendo-popup-font-size;
        line-height: $kendo-popup-line-height;
        display: flex;
        flex-direction: column;
        align-items: stretch;

        .k-item {
            outline: none;
        }
    }

    .k-popup > .k-colorpalette {
        padding-block: $kendo-popup-content-padding-y;
        padding-inline: $kendo-popup-content-padding-x;
    }

    // Transparent popup
    .k-popup.k-popup-transparent {
        border-width: 0;
        background-color: transparent;
        box-shadow: none;
    }

    // Flush popup
    .k-popup.k-popup-flush {
        padding: 0;
    }

    // Child components
    .k-popup > .k-widget,
    .k-popup > .k-coloreditor {
        border-width: 0;
    }

    // Legacy shadow
    .k-shadow {
        box-shadow: $kendo-popup-shadow;
    }

}


@mixin kendo-popup--layout() {
    @include kendo-popup--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/popup/_theme.scss
@mixin kendo-popup--theme-base() {

    .k-popup {
        @include fill(
            $kendo-popup-text,
            $kendo-popup-bg,
            $kendo-popup-border
        );
        @include box-shadow( $kendo-popup-shadow );
    }

    .k-animation-container {
        @include border-bottom-radius-only( k-border-radius(md) );
    }

}


@mixin kendo-popup--theme() {
    @include kendo-popup--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-popup--styles() {
    @include module-render( "popup" ) {
        @include kendo-popup--layout();
        @include kendo-popup--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-popup--styles();
}

// #endregion
// #region @import "./ripple/_index.scss"; -> scss/ripple/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "ripple",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/ripple/_variables.scss
// Ripple

// #endregion
// #region @import "./_layout.scss"; -> scss/ripple/_layout.scss
@mixin kendo-ripple--layout-base() {

    .k-ripple-target {
        position: relative;
    }

    .k-ripple {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        overflow: hidden;
        pointer-events: none;
    }

    .k-ripple-blob {
        pointer-events: none;
        position: absolute;
        border-radius: 50%;
        padding: 0;
        transform: translate(-50%, -50%) scale(0);
        transition: opacity 100ms linear, transform 500ms cubic-bezier(.4, 0, .2, 1);
        opacity: .1;
        background-color: currentColor;

        .k-primary & {
            opacity: .2;
        }
    }

    .k-ripple-focus::after {
        visibility: visible;
        animation: ripple 600ms ease-out;
    }

    @keyframes ripple {
        0% {
            transform: translate(-50%, -50%) scale(0);
        }
        20% {
            transform: translate(-50%, -50%) scale(1);
        }
        100% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(1);
        }
    }

}


@mixin kendo-ripple--layout() {
    @include kendo-ripple--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/ripple/_theme.scss
@mixin kendo-ripple--theme-base() {

    .k-ripple {}

}


@mixin kendo-ripple--theme() {
    @include kendo-ripple--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-ripple--styles() {
    @include module-render( "ripple" ) {
        @include kendo-ripple--layout();
        @include kendo-ripple--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-ripple--styles();
}

// #endregion
// #region @import "./table/_index.scss"; -> scss/table/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "table",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/table/_variables.scss
// #region @import "../list/_variables.scss"; -> scss/list/_variables.scss
// File already imported_once. Skipping output.
// #endregion


// Table

/// The width of the table border.
/// @group table
$kendo-table-border-width: 1px !default;
/// The width of vertical border of table cells.
/// @group table
$kendo-table-cell-vertical-border-width: 1px !default;
/// The width of horizontal border of table cells.
/// @group table
$kendo-table-cell-horizontal-border-width: 0px !default;

/// The font size of the table if no size is specified.
/// @group table
$kendo-table-font-size: null !default;

/// The line-height of the table if no size is specified.
/// @group table
$kendo-table-line-height: null !default;

/// The horizontal padding of the cells in the table if no size is specified.
/// @group table
$kendo-table-cell-padding-x: null !default;

/// The vertical padding of the cells in the table if no size is specified.
/// @group table
$kendo-table-cell-padding-y: null !default;

$kendo-table-sm-cell-padding-x: k-spacing(2) !default;
$kendo-table-sm-cell-padding-y: k-spacing(1) !default;

$kendo-table-md-cell-padding-x: k-spacing(3) !default;
$kendo-table-md-cell-padding-y: k-spacing(2) !default;

$kendo-table-lg-cell-padding-x: k-spacing(2) !default;
$kendo-table-lg-cell-padding-y: k-spacing(2.5) !default;

/// The sizes of the table.
/// @group table
$kendo-table-sizes: (
    sm: (
        font-size: var( --kendo-font-size, inherit ),
        line-height: var( --kendo-line-height, normal ),
        cell-padding-x: $kendo-table-sm-cell-padding-x,
        cell-padding-y: $kendo-table-sm-cell-padding-y
    ),
    md: (
        font-size: var( --kendo-font-size, inherit ),
        line-height: var( --kendo-line-height, normal ),
        cell-padding-x: $kendo-table-md-cell-padding-x,
        cell-padding-y: $kendo-table-md-cell-padding-y
    ),
    lg: (
        font-size: var( --kendo-font-size, inherit ),
        line-height: var( --kendo-line-height, normal ),
        cell-padding-x: $kendo-table-lg-cell-padding-x,
        cell-padding-y: $kendo-table-lg-cell-padding-y
    )
) !default;


/// Background color of tables.
/// @group table
$kendo-table-bg: $kendo-component-bg !default;
/// Text color of tables.
/// @group table
$kendo-table-text: $kendo-component-text !default;
/// Border color of tables.
/// @group table
$kendo-table-border: $kendo-component-border !default;


/// Background color of table headers.
/// @group table
$kendo-table-header-bg: $kendo-component-header-bg !default;
/// Text color of table headers.
/// @group table
$kendo-table-header-text: $kendo-component-header-text !default;
/// Border color of table headers.
/// @group table
$kendo-table-header-border: $kendo-component-header-border !default;
/// Gradient of table headers.
/// @group table
$kendo-table-header-gradient: $kendo-component-header-gradient !default;


/// Background color of table footers.
/// @group table
$kendo-table-footer-bg: $kendo-table-header-bg !default;
/// Text color of table footers.
/// @group table
$kendo-table-footer-text: $kendo-table-header-text !default;
/// Border color of table footers.
/// @group table
$kendo-table-footer-border: $kendo-table-header-border !default;


/// Background color of group rows in table.
/// @group table
$kendo-table-group-row-bg: $kendo-table-header-bg !default;
/// Text color of group rows in table.
/// @group table
$kendo-table-group-row-text: $kendo-table-header-text !default;
/// Border color of group rows in table.
/// @group table
$kendo-table-group-row-border: $kendo-table-header-border !default;

/// Background color of alternating rows in table.
/// @group table
$kendo-table-alt-row-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-legacy( $kendo-table-bg ), .04 )) !default;
/// Text color of alternating rows in table.
/// @group table
$kendo-table-alt-row-text: null !default;
/// Border color of alternating rows in table.
/// @group table
$kendo-table-alt-row-border: null !default;


/// Background color of hovered rows in table.
/// @group table
$kendo-table-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 11%, transparent), k-color-darken($kendo-table-bg, 7%)) !default;
/// Text color of hovered rows in table.
/// @group table
$kendo-table-hover-text: null !default;
/// Border color of hovered rows in table.
/// @group table
$kendo-table-hover-border: null !default;


/// Background color of focused rows in table.
/// @group table
$kendo-table-focus-bg: null !default;
/// Text color of focused rows in table.
/// @group table
$kendo-table-focus-text: null !default;
/// Border color of focused rows in table.
/// @group table
$kendo-table-focus-border: null !default;
/// Box shadow of focused rows in table.
/// @group table
$kendo-table-focus-shadow: $kendo-list-item-focus-shadow !default;


/// Background color of selected rows in table.
/// @group table
$kendo-table-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default;
/// Text color of selected rows in table.
/// @group table
$kendo-table-selected-text: null !default;
/// Border color of selected rows in table.
/// @group table
$kendo-table-selected-border: null !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/table/_layout.scss
@mixin kendo-table--layout-base() {

    // Table
    .k-table {
        width: 100%;
        max-width: none;
        border-width: $kendo-table-border-width;
        border-style: solid;
        font-size: $kendo-table-font-size;
        line-height: $kendo-table-line-height;
        text-align: start;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        outline: none;
    }


    // Data table
    .k-data-table {
        border-width: $kendo-table-border-width;
        border-style: solid;

        .k-table {
            table-layout: fixed;
        }
    }


    // Table native parts
    .k-table-thead,
    .k-table-tbody,
    .k-table-tfoot,
    .k-table-row,
    .k-table-alt-row {
        border-color: inherit;
        text-align: inherit;
    }
    .k-table-th,
    .k-table-td {
        padding-block: $kendo-table-cell-padding-y;
        padding-inline: $kendo-table-cell-padding-x;
        border-width: 0 0 $kendo-table-cell-horizontal-border-width $kendo-table-cell-vertical-border-width;
        border-style: solid;
        border-color: inherit;
        box-sizing: border-box;
        font-weight: normal;
        text-align: inherit;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: table-cell;
        overflow: hidden;
        position: relative;

        &:first-child {
            border-left-width: 0;
        }
    }
    .k-table-th {
        border-bottom-width: 1px;
    }


    // Table header
    .k-table-header {
        padding-inline-end: var(--kendo-scrollbar-width);
        border-width: 0 0 1px;
        border-style: solid;
        box-sizing: border-box;

        .k-table {
            border-width: 0;
        }
    }
    .k-table-header-wrap {
        margin-right: -1px;
        width: 100%;
        border-width: 0 $kendo-table-cell-vertical-border-width 0 0;
        border-style: solid;
        border-color: inherit;
        overflow: hidden;
    }
    .k-table-header,
    .k-table-header-wrap {
        > .k-table {
            margin-bottom: -1px;
        }
    }
    .k-table-group-sticky-header {
        flex: none;

        .k-table-th {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            align-content: center;
        }
    }


    // Table list
    .k-table-list {
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: none;
        border-width: 0;
        display: table;
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;
        empty-cells: show;
        list-style: none;
        outline: none;

        .k-table-row {
            position: relative;
        }

        .k-table-row,
        .k-table-group-row {
            width: 100%;
            box-sizing: border-box;
            display: table-row;
        }
        .k-table-row.k-first {
            border-top: 1px solid currentColor;
        }

        .k-table-th,
        .k-table-td {
            vertical-align: middle;
        }

        .k-table-group-row {
            position: sticky;

            &::before {
                content: "\200b";
                padding-block: $kendo-table-cell-padding-y;
                padding-inline: 0;
                width: 0;
                display: block;
                overflow: hidden;
            }

            .k-table-th {
                width: 100%;
                border-color: inherit;
                color: inherit;
                background-color: inherit;
                position: absolute;
                top: 0;
            }
        }

        // stylelint-disable declaration-no-important
        .k-table-spacer-td {
            padding: 0 !important;
            width: 0 !important;
            border-left-width: 0 !important;
            border-right-width: 0 !important;
        }
        .k-table-group-td {
            padding: 0 !important;
            width: 0 !important;
            border-left-width: 0 !important;
            border-right-width: 0 !important;
            overflow: visible;

            > span {
                font-size: .75em;
                position: absolute;
                top: 0;
                right: 0;
            }
        }
        // stylelint-enable declaration-no-important
    }


    // Virtualization
    .k-virtual-table .k-table-row,
    .k-virtual-table .k-table-group-row {
        position: absolute;
        width: 100%;
    }


    // Table scroller
    .k-table-scroller {
        position: relative;
        overflow: auto;

        > .k-table {
            border-width: 0;
        }
    }


    // Table footer
    .k-table-footer {
        padding-inline-end: var(--kendo-scrollbar-width);
        border-width: 1px 0 0;
        border-style: solid;
        box-sizing: border-box;

        .k-table {
            border-width: 0;
        }
    }
    .k-table-footer-wrap {
        margin-right: -1px;
        width: 100%;
        border-width: 0 $kendo-table-cell-vertical-border-width 0 0;
        border-style: solid;
        border-color: inherit;
        overflow: hidden;
    }


    // Sizes
    @each $size, $size-props in $kendo-table-sizes {
        $_font-size: k-map-get( $size-props, font-size);
        $_line-height: k-map-get( $size-props, line-height);
        $_cell-padding-x: k-map-get( $size-props, cell-padding-x);
        $_cell-padding-y: k-map-get( $size-props, cell-padding-y);

        .k-table-#{$size} {
            font-size: $_font-size;
            line-height: $_line-height;
        }

        .k-table-#{$size} .k-table-th,
        .k-table-#{$size} .k-table-td {
            padding-block: $_cell-padding-y;
            padding-inline: $_cell-padding-x;
        }

        .k-table-#{$size} .k-table-list .k-table-group-td > span {
            padding-block: 0;
            padding-inline: calc( #{$_cell-padding-x} / 2 );
        }

        .k-table-#{$size} .k-table-list .k-table-group-row::before {
            padding-block: $_cell-padding-y;
            padding-inline: 0;
        }
    }


    // RTL
    .k-rtl,
    [dir="rtl"] {
        &.k-table,
        .k-table {

            .k-table-th,
            .k-table-td {
                border-left-width: 0;
                border-right-width: $kendo-table-cell-vertical-border-width;

                &:first-child {
                    border-right-width: 0;
                }
            }

            .k-table-header-wrap,
            .k-table-footer-wrap {
                margin-right: 0;
                margin-left: -1px;
                border-left-width: $kendo-table-cell-vertical-border-width;
                border-right-width: 0;
            }
        }

        .k-table-list {
            .k-table-group-td > span {
                left: 0;
                right: auto;
            }
        }
    }

}


@mixin kendo-table--layout() {
    @include kendo-table--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/table/_theme.scss
@mixin kendo-table--theme-base() {

    // Table
    .k-table,
    .k-data-table {
        border-color: $kendo-table-border;
        color: $kendo-table-text;
        background-color: $kendo-table-bg;
    }


    // Table header
    .k-table-thead,
    .k-table-header,
    .k-table-group-sticky-header {
        border-color: $kendo-table-header-border;
        color: $kendo-table-header-text;
        background-color: $kendo-table-header-bg;
    }


    // Table footer
    .k-table-tfoot,
    .k-table-footer {
        border-color: $kendo-table-footer-border;
        color: $kendo-table-footer-text;
        background-color: $kendo-table-footer-bg;
    }


    // Group row
    .k-table-group-row {
        border-color: $kendo-table-group-row-border;
        color: $kendo-table-group-row-text;
        background-color: $kendo-table-group-row-bg;
    }
    .k-table-group-td > span {
        color: $kendo-table-bg;
        background-color: $kendo-table-text;
    }


    // Alternating row
    .k-table-alt-row {
        border-color: $kendo-table-alt-row-border;
        color: $kendo-table-alt-row-text;
        background-color: $kendo-table-alt-row-bg;
    }


    // Hover state
    .k-table-tbody .k-table-row:hover,
    .k-table-list .k-table-row:hover,
    .k-table-tbody .k-table-row.k-hover,
    .k-table-list .k-table-row.k-hover {
        border-color: $kendo-table-hover-border;
        color: $kendo-table-hover-text;
        background-color: $kendo-table-hover-bg;
    }


    // Focus state
    .k-table-tbody .k-table-row,
    .k-table-list .k-table-row,
    .k-table-tbody .k-table-td,
    .k-table-list .k-table-td {
        &.k-focus,
        &:focus {
            border-color: $kendo-table-focus-border;
            color: $kendo-table-focus-text;
            background-color: $kendo-table-focus-bg;
            @include focus-indicator( $kendo-table-focus-shadow, inset );
        }
    }


    // Selected state
    .k-table-tbody .k-table-row.k-selected > .k-table-td,
    .k-table-list .k-table-row.k-selected {
        border-color: $kendo-table-selected-border;
        color: $kendo-table-selected-text;
        background-color: $kendo-table-selected-bg;
    }

}


@mixin kendo-table--theme() {
    @include kendo-table--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-table--styles() {
    @include module-render( "table" ) {
        @include kendo-table--layout();
        @include kendo-table--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-table--styles();
}

// #endregion
// #region @import "./virtual-scroller/_index.scss"; -> scss/virtual-scroller/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "virtual-scroller",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/virtual-scroller/_variables.scss
// Virtual-scroller

// #endregion
// #region @import "./_layout.scss"; -> scss/virtual-scroller/_layout.scss
@mixin kendo-virtual-scroller--layout-base() {

    // Virtual scroller
    .k-virtual-scroller {
        width: 100%;
        height: 100%;
        flex: 1 1 auto;
        overflow: auto;
        position: relative;
    }


    // Virtual scroller wrap
    .k-virtual-scroller-wrap {
        position: relative;
        z-index: 1;
    }


    // Virtual scroller content
    .k-virtual-scroller-content {
        position: absolute;
        width: 100%;
        top: 0;
        inset-inline-start: 0;
    }


    // Virtual scroller size
    .k-virtual-scroller-size {
        position: relative;
        z-index: 0;
    }

}


@mixin kendo-virtual-scroller--layout() {
    @include kendo-virtual-scroller--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/virtual-scroller/_theme.scss
@mixin kendo-virtual-scroller--theme-base() {

    // Virtual scroller
    .k-virtual-scroller {}

}


@mixin kendo-virtual-scroller--theme() {
    @include kendo-virtual-scroller--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-virtual-scroller--styles() {
    @include module-render( "virtual-scroller" ) {
        @include kendo-virtual-scroller--layout();
        @include kendo-virtual-scroller--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-virtual-scroller--styles();
}

// #endregion


// Indicators
// #region @import "./avatar/_index.scss"; -> scss/avatar/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "avatar",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/avatar/_variables.scss
// Avatar

/// The border width of the Avatar.
/// @group avatar
$kendo-avatar-border-width: 1px !default;

/// The font family of the Avatar.
/// @group avatar
$kendo-avatar-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Avatar.
/// @group avatar
$kendo-avatar-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Avatar.
/// @group avatar
$kendo-avatar-line-height: var( --kendo-line-height, normal ) !default;

/// The sizes map of the Avatar.
/// @group avatar
$kendo-avatar-sizes: (
    sm: k-spacing(4),
    md: k-spacing(8),
    lg: k-spacing(16)
) !default;

/// The theme colors map of the Avatar.
/// @group avatar
$kendo-avatar-theme-colors: $kendo-theme-colors !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/avatar/_layout.scss
@mixin kendo-avatar--layout-base() {

    // Avatar
    .k-avatar {
        border-width: 0;
        border-style: solid;
        box-sizing: border-box;
        vertical-align: middle;
        display: inline-flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        overflow: hidden;

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


    // Avatar text
    .k-avatar-text,
    .k-avatar-initials {
        font-size: $kendo-avatar-font-size;
        font-family: $kendo-avatar-font-family;
        line-height: $kendo-avatar-line-height;
    }


    // Avatar icon
    .k-avatar-icon {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }


    // Avatar image
    .k-avatar-image {
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;

        > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            vertical-align: top;
        }
    }


    // Sizes
    @each $name, $size in $kendo-avatar-sizes {
        .k-avatar-#{$name} {
            width: $size;
            height: $size;
            flex-basis: $size;
        }
    }

    // Shapes
    .k-avatar-square {}

    // Bordered
    .k-avatar-bordered {
        border-width: $kendo-avatar-border-width;
    }


}


@mixin kendo-avatar--layout() {
    @include kendo-avatar--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/avatar/_theme.scss
@mixin kendo-avatar--theme-base() {

    // Solid Avatars
    @each $name, $color in $kendo-avatar-theme-colors {
        .k-avatar-solid-#{$name} {
            border-color: $color;
            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
            background-color: $color;
        }
    }

    // Outline avatars
    .k-avatar-outline {
        border-color: currentColor;
    }

    @each $name, $color in $kendo-avatar-theme-colors {
        .k-avatar-outline-#{$name} {
            color: $color;
        }
    }

}


@mixin kendo-avatar--theme() {
    @include kendo-avatar--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-avatar--styles() {
    @include module-render( "avatar" ) {
        @include kendo-avatar--layout();
        @include kendo-avatar--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-avatar--styles();
}

// #endregion
// #region @import "./badge/_index.scss"; -> scss/badge/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "badge",
    dependencies: (
        "icon",
        // "utils/layout/position",
    )
);


// Dependencies
// @import "../utils/_position.scss";
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/badge/_variables.scss
// Badge

/// The width of the border around the Badge.
/// @group badge
$kendo-badge-border-width: 1px !default;

/// The border radius of the Badge.
/// @group badge
$kendo-badge-border-radius: k-border-radius(md) !default;


/// The horizontal padding of the Badge.
/// @group badge
$kendo-badge-padding-x: k-spacing(1) !default;
/// The horizontal padding of the small Badge.
/// @group badge
$kendo-badge-sm-padding-x: k-spacing(0.5) !default;
/// The horizontal padding of the medium Badge.
/// @group badge
$kendo-badge-md-padding-x: k-spacing(1) !default;
/// The horizontal padding of the large Badge.
/// @group badge
$kendo-badge-lg-padding-x: k-spacing(1.5) !default;

/// The vertical padding of the Badge.
/// @group badge
$kendo-badge-padding-y: k-spacing(1) !default;
/// The vertical padding of the small Badge.
/// @group badge
$kendo-badge-sm-padding-y: k-spacing(0.5) !default;
/// The vertical padding of the medium Badge.
/// @group badge
$kendo-badge-md-padding-y: k-spacing(1) !default;
/// The vertical padding of the large Badge.
/// @group badge
$kendo-badge-lg-padding-y: k-spacing(1.5) !default;

/// The font sizes of the Badge.
/// @group badge
$kendo-badge-font-size: var( --kendo-font-size-xs, inherit ) !default;
/// The font size of the small Badge.
/// @group badge
$kendo-badge-sm-font-size: var( --kendo-font-size-xs, inherit ) !default;
/// The font size of the medium Badge.
/// @group badge
$kendo-badge-md-font-size: var( --kendo-font-size-xs, inherit )!default;
/// The font size of the large Badge.
/// @group badge
$kendo-badge-lg-font-size: var( --kendo-font-size-xs, inherit ) !default;

/// The line heights used along with the $kendo-font-size variable.
/// @group badge
$kendo-badge-line-height: 1 !default;
/// The line height used along with the $kendo-font-size variable of the small Badge.
/// @group badge
$kendo-badge-sm-line-height: $kendo-badge-line-height !default;
/// The line height used along with the $kendo-font-size variable of the medium Badge.
/// @group badge
$kendo-badge-md-line-height: $kendo-badge-line-height !default;
/// The line height used along with the $kendo-font-size variable of the large Badge.
/// @group badge
$kendo-badge-lg-line-height: $kendo-badge-line-height !default;

/// The calculated minimum width of the circular Badge.
/// @group badge
$kendo-badge-min-width: calc( #{$kendo-badge-line-height * 1em} + calc( #{$kendo-badge-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 )) !default;
/// The calculated minimum width of the small circular Badge.
/// @group badge
$kendo-badge-sm-min-width: calc( #{$kendo-badge-sm-line-height * 1em} + calc( #{$kendo-badge-sm-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) ) !default;
/// The calculated minimum width of the medium circular Badge.
/// @group badge
$kendo-badge-md-min-width: calc( #{$kendo-badge-md-line-height * 1em} + calc( #{$kendo-badge-md-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) ) !default;
/// The calculated minimum width of the large circular Badge.
/// @group badge
$kendo-badge-lg-min-width: calc( #{$kendo-badge-lg-line-height * 1em} + calc( #{$kendo-badge-lg-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) ) !default;

/// The sizes map for the Badge.
/// @group badge
$kendo-badge-sizes: (
    sm: (
        padding-x: $kendo-badge-sm-padding-x,
        padding-y: $kendo-badge-sm-padding-y,
        font-size: $kendo-badge-sm-font-size,
        line-height: $kendo-badge-sm-line-height,
        min-width: $kendo-badge-sm-min-width
    ),
    md: (
        padding-x: $kendo-badge-md-padding-x,
        padding-y: $kendo-badge-md-padding-y,
        font-size: $kendo-badge-md-font-size,
        line-height: $kendo-badge-md-line-height,
        min-width: $kendo-badge-md-min-width
    ),
    lg: (
        padding-x: $kendo-badge-lg-padding-x,
        padding-y: $kendo-badge-lg-padding-y,
        font-size: $kendo-badge-lg-font-size,
        line-height: $kendo-badge-lg-line-height,
        min-width: $kendo-badge-lg-min-width
    )
) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/badge/_layout.scss
@mixin kendo-badge--layout-base() {

    .k-badge {
        padding: 0;
        border-width: $kendo-badge-border-width;
        border-style: solid;
        border-color: transparent;
        box-sizing: border-box;
        color: inherit;
        background-color: transparent;
        font: inherit;
        text-align: center;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
    }
    .k-badge > * {
        color: inherit;
    }


    // Links
    a.k-badge,
    .k-badge > a {
        text-decoration: none;
    }
    a.k-badge:hover,
    .k-badge > a:hover {
        text-decoration: underline;
    }


    // Icon
    .k-badge-icon {
        max-width: 1em;
        max-height: 1em;
        font-size: inherit;
    }
    .k-badge-icon.k-svg-icon svg {
        fill: currentColor;
    }


    // Badge sizes
    @each $size, $size-props in $kendo-badge-sizes {
        $_padding-x: k-map-get( $size-props, padding-x );
        $_padding-y: k-map-get( $size-props, padding-y );
        $_font-size: k-map-get( $size-props, font-size );
        $_line-height: k-map-get( $size-props, line-height );
        $_min-width: k-map-get( $size-props, min-width );

        .k-badge-#{$size} {
            padding-block: $_padding-y;
            padding-inline: $_padding-x;
            font-size: $_font-size;
            line-height: $_line-height;
            min-width: $_min-width;

            &:empty {
                padding: $_padding-y;
                min-width: auto;
             }
        }
    }

    kendo-badge-container {
        display: inline-block;
    }

    // Badge position
    .k-badge-container {
        position: relative;
        overflow: visible;
    }
    @each $placement, $translate in ("inside": null, "edge": 50, "outside": 100) {

        .k-badge-#{$placement} {
            position: absolute;
            z-index: 9999;

            &.k-top-start {
                @if $translate {
                    transform: translate( -1% * $translate, -1% * $translate );
                }
            }
            &.k-top-end {
                @if $translate {
                    transform: translate( 1% * $translate, -1% * $translate );
                }
            }
            &.k-bottom-start {
                @if $translate {
                    transform: translate( -1% * $translate, 1% * $translate );
                }
            }
            &.k-bottom-end {
                @if $translate {
                    transform: translate( 1% * $translate, 1% * $translate );
                }
            }
        }

        .k-rtl .k-badge-#{$placement},
        [dir="rtl"].k-badge-#{$placement},
        [dir="rtl"] .k-badge-#{$placement} {
            &.k-top-start {
                @if $translate {
                    transform: translate( 1% * $translate, -1% * $translate );
                }
            }
            &.k-top-end {
                @if $translate {
                    transform: translate( -1% * $translate, -1% * $translate );
                }
            }
            &.k-bottom-start {
                @if $translate {
                    transform: translate( 1% * $translate, 1% * $translate );
                }
            }
            &.k-bottom-end {
                @if $translate {
                    transform: translate( -1% * $translate, 1% * $translate );
                }
            }
        }
    }


    // Border cutout
    .k-badge-border-cutout {
        box-shadow: 0 0 0 2px $kendo-component-bg;
    }

}


@mixin kendo-badge--layout() {
    @include kendo-badge--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/badge/_theme.scss
@mixin kendo-badge--theme-base() {

    // Solid badges
    @each $name, $color in $kendo-theme-colors {
        .k-badge-solid-#{$name} {
            border-color: $color;
            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
            background-color: $color;
        }
    }

    // Outline badges
    .k-badge-outline {
        border-color: currentColor;
        background-color: transparent;
    }

    @each $name, $color in $kendo-theme-colors {
        .k-badge-outline-#{$name} {
            color: $color;
        }
    }

}


@mixin kendo-badge--theme() {
    @include kendo-badge--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-badge--styles() {
    @include module-render( "badge" ) {
        @include kendo-badge--layout();
        @include kendo-badge--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-badge--styles();
}

// #endregion
// #region @import "./chip/_index.scss"; -> scss/chip/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "chip",
    dependencies: (
        "avatar",
        "icon",
    )
);


// Dependencies
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/chip/_variables.scss
// #region @import "../button/_variables.scss"; -> scss/button/_variables.scss
// Button

/// The width of the border around the Button.
/// @group button
$kendo-button-border-width: 1px !default;

/// The border radius of the Button.
/// @group button
$kendo-button-border-radius: null !default;

/// The horizontal padding of the Button.
/// @group button
$kendo-button-padding-x: k-spacing(2) !default;
/// The horizontal padding of the small Button.
/// @group button
$kendo-button-sm-padding-x: k-spacing(2) !default;
/// The horizontal padding of the medium Button.
/// @group button
$kendo-button-md-padding-x: $kendo-button-padding-x !default;
/// The horizontal padding of the large Button.
/// @group button
$kendo-button-lg-padding-x: k-spacing(2) !default;

/// The vertical padding of the Button.
/// @group button
$kendo-button-padding-y: k-spacing(1) !default;
/// The vertical padding of the small Button.
/// @group button
$kendo-button-sm-padding-y: k-spacing(0.5) !default;
/// The vertical padding of the medium Button.
/// @group button
$kendo-button-md-padding-y: $kendo-button-padding-y !default;
/// The vertical padding of the large Button.
/// @group button
$kendo-button-lg-padding-y: k-spacing(2) !default;

/// The font family of the Button.
/// @group button
$kendo-button-font-family: var( --kendo-font-family, inherit ) !default;

/// The font size of the Button.
/// @group button
$kendo-button-font-size: var( --kendo-font-size, inherit ) !default;
/// The font size of the small Button.
/// @group button
$kendo-button-sm-font-size: var( --kendo-font-size, inherit ) !default;
/// The font size of the medium Button.
/// @group button
$kendo-button-md-font-size: $kendo-button-font-size !default;
/// The font size of the large Button.
/// @group button
$kendo-button-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;

/// The line height used along with the $kendo-font-size the.
/// @group button
$kendo-button-line-height: var( --kendo-line-height, normal ) !default;
/// The line height used along with the $kendo-font-size the of the small Button.
/// @group button
$kendo-button-sm-line-height: var( --kendo-line-height, normal ) !default;
/// The line height used along with the $kendo-font-size the of the medium Button.
/// @group button
$kendo-button-md-line-height: $kendo-button-line-height !default;
/// The line height used along with the $kendo-font-size the of the large Button.
/// @group button
$kendo-button-lg-line-height: var( --kendo-line-height-lg, normal ) !default;

/// The calculated height of the Button.
/// @group button
$kendo-button-calc-size: calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
$kendo-button-sm-calc-size: calc( calc( #{$kendo-button-sm-line-height} * 1em ) + calc( #{$kendo-button-sm-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
$kendo-button-md-calc-size: calc( calc( #{$kendo-button-md-line-height} * 1em ) + calc( #{$kendo-button-md-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
$kendo-button-lg-calc-size: calc( calc( #{$kendo-button-lg-line-height} * 1em ) + calc( #{$kendo-button-lg-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;

/// The calculated inner height of the Button excluding the border width.
/// @group button
$kendo-button-inner-calc-size: calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) ) !default;
$kendo-button-sm-inner-calc-size: calc( calc( #{$kendo-button-sm-line-height} * 1em ) + calc( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
$kendo-button-md-inner-calc-size: calc( calc( #{$kendo-button-md-line-height} * 1em ) + calc( #{$kendo-button-md-padding-y} * 2 ) ) !default;
$kendo-button-lg-inner-calc-size: calc( calc( #{$kendo-button-lg-line-height} * 1em ) + calc( #{$kendo-button-lg-padding-y} * 2 ) ) !default;

/// The sizes map for the Button.
/// @group button
$kendo-button-sizes: (
    sm: (
        padding-x: $kendo-button-sm-padding-x,
        padding-y: $kendo-button-sm-padding-y,
        font-size: $kendo-button-sm-font-size,
        line-height: $kendo-button-sm-line-height
    ),
    md: (
        padding-x: $kendo-button-md-padding-x,
        padding-y: $kendo-button-md-padding-y,
        font-size: $kendo-button-md-font-size,
        line-height: $kendo-button-md-line-height
    ),
    lg: (
        padding-x: $kendo-button-lg-padding-x,
        padding-y: $kendo-button-lg-padding-y,
        font-size: $kendo-button-lg-font-size,
        line-height: $kendo-button-lg-line-height
    )
) !default;

/// The theme colors map for the Button.
/// @group button
$kendo-button-theme-colors: k-map-merge(
    $kendo-theme-colors,
    ( "base": if($kendo-enable-color-system, k-color( base ), #f5f5f5) )
) !default;

/// The base background of the Button.
/// @group button
$kendo-button-bg: if($kendo-enable-color-system, k-color( base ), #f5f5f5) !default;
/// The base text color of the Button.
/// @group button
$kendo-button-text: if($kendo-enable-color-system, k-color( on-base ), #424242) !default;
/// The base border color of the Button.
/// @group button
$kendo-button-border: if($kendo-enable-color-system, k-color( border ), rgba( black, .08 )) !default;
/// The base background gradient of the Button.
/// @group button
$kendo-button-gradient: if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) !default;
/// The base shadow of the Button.
/// @group button
$kendo-button-shadow: null !default;

/// The base background of the hovered Button.
/// @group button
$kendo-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, .5 )) !default;
/// The base text color of the hovered Button.
/// @group button
$kendo-button-hover-text: null !default;
/// The base border color of the hovered Button.
/// @group button
$kendo-button-hover-border: null !default;
/// The base background gradient of the hovered Button.
/// @group button
$kendo-button-hover-gradient: null !default;
/// The base shadow of the hovered Button.
/// @group button
$kendo-button-hover-shadow: null !default;

/// The base background color of the active Button.
/// @group button
$kendo-button-active-bg: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 1.5 )) !default;
/// The base text color of the active Button.
/// @group button
$kendo-button-active-text: null !default;
/// The base border color of the active Button.
/// @group button
$kendo-button-active-border: null !default;
/// The base background gradient of the active Button.
/// @group button
$kendo-button-active-gradient: null !default;
/// The base shadow of the active Button.
/// @group button
$kendo-button-active-shadow: null !default;

/// The base background color of the selected Button.
/// @group button
$kendo-button-selected-bg: $kendo-color-primary !default;
/// The text color of the selected Button.
/// @group button
$kendo-button-selected-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg )) !default;
/// The border color of the selected Button.
/// @group button
$kendo-button-selected-border: $kendo-button-selected-bg !default;
/// The background gradient of the selected Button.
/// @group button
$kendo-button-selected-gradient: $kendo-button-active-gradient !default;
/// The base shadow of the selected Button.
/// @group button
$kendo-button-selected-shadow: $kendo-button-active-shadow !default;

/// The base background of the focused Button.
/// @group button
$kendo-button-focus-bg: null !default;
/// The base text color of the focused Button.
/// @group button
$kendo-button-focus-text: null !default;
/// The base border color of the focused Button.
/// @group button
$kendo-button-focus-border: null !default;
/// The base background gradient of the focused Button.
/// @group button
$kendo-button-focus-gradient: null !default;
/// The base shadow of the focused Button.
/// @group button
$kendo-button-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-border, .08 )) !default;

/// The base background of the disabled Button.
/// @group button
$kendo-button-disabled-bg: null !default;
/// The base text color of the disabled Button.
/// @group button
$kendo-button-disabled-text: null !default;
/// The base border color of the disabled Button.
/// @group button
$kendo-button-disabled-border: null !default;
/// The base background gradient of the disabled Button.
/// @group button
$kendo-button-disabled-gradient: null !default;
/// The base shadow of the disabled Button.
/// @group button
$kendo-button-disabled-shadow: null !default;

// Solid Button
$kendo-solid-button-gradient: if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) !default;
$kendo-solid-button-shade-function: "k-try-shade" !default;
$kendo-solid-button-shade-text-amount: 0 !default;
$kendo-solid-button-shade-bg-amount: 0 !default;
$kendo-solid-button-shade-border-amount: 0 !default;
$kendo-solid-button-hover-shade-text-amount: null !default;
$kendo-solid-button-hover-shade-bg-amount: .5 !default;
$kendo-solid-button-hover-shade-border-amount: .5 !default;
$kendo-solid-button-active-shade-text-amount: null !default;
$kendo-solid-button-active-shade-bg-amount: 1.5 !default;
$kendo-solid-button-active-shade-border-amount: 1.5 !default;
$kendo-solid-button-shadow: true !default;
$kendo-solid-button-shadow-blur: 0px !default;
$kendo-solid-button-shadow-spread: 2px !default;
$kendo-solid-button-shadow-opacity: .3 !default;

// Outline Button
$kendo-outline-button-shadow: true !default;
$kendo-outline-button-shadow-blur: 0px !default;
$kendo-outline-button-shadow-spread: 2px !default;
$kendo-outline-button-shadow-opacity: .3 !default;

// Link Button
$kendo-link-button-shadow: true !default;
$kendo-link-button-shadow-blur: 0px !default;
$kendo-link-button-shadow-spread: 2px !default;
$kendo-link-button-shadow-opacity: .3 !default;

// Clear Button
$kendo-clear-button-focus-opacity: .1 !default;

/// The overlay opacity of the hovered flat Button. Used to create a background for the flat Button.
/// @group button
$kendo-flat-button-hover-opacity: .04 !default;
/// The overlay opacity of the focused flat Button. Used to create a background for the flat Button.
/// @group button
$kendo-flat-button-focus-opacity: null !default;
/// The overlay opacity of the active flat Button. Used to create background for the flat Button.
/// @group button
$kendo-flat-button-active-opacity: .16 !default;
/// The overlay opacity of the selected flat Button. Used to create background for the flat Button.
/// @group button
$kendo-flat-button-selected-opacity: .2 !default;
/// The opacity of the flat Button focus ring. Used to create a border for the flat Button.
/// @group button
$kendo-flat-button-focus-ring-opacity: .12 !default;

/// The color transition of the flat Button.
/// @group button
$kendo-button-transition: color .2s ease-in-out !default;

// #endregion


// Chip

/// The width of the border around the Chip.
/// @group chip
$kendo-chip-border-width: 1px !default;
/// The spacing between the text and the icons of the Chip.
/// @group chip
$kendo-chip-spacing: k-spacing(1) !default;

/// The horizontal padding of the Chip.
/// @group chip
$kendo-chip-padding-x: k-spacing(1) !default;
/// The horizontal padding of the small Chip.
/// @group chip
$kendo-chip-sm-padding-x: k-spacing(1) !default;
/// The horizontal padding of the medium Chip.
/// @group chip
$kendo-chip-md-padding-x: $kendo-chip-padding-x !default;
/// The horizontal padding of the large Chip.
/// @group chip
$kendo-chip-lg-padding-x: k-spacing(1) !default;

/// The vertical padding of the Chip.
/// @group chip
$kendo-chip-padding-y: k-spacing(1) !default;
/// The vertical padding of the small Chip.
/// @group chip
$kendo-chip-sm-padding-y: k-spacing(0.5) !default;
/// The vertical padding of the medium Chip.
/// @group chip
$kendo-chip-md-padding-y: $kendo-chip-padding-y !default;
/// The vertical padding of the large Chip.
/// @group chip
$kendo-chip-lg-padding-y: k-spacing(1.5) !default;

/// The font size of the Chip.
/// @group chip
$kendo-chip-font-size: var( --kendo-font-size, inherit ) !default;
/// The font size of the small Chip.
/// @group chip
$kendo-chip-sm-font-size: var( --kendo-font-size, inherit ) !default;
/// The font size of the medium Chip.
/// @group chip
$kendo-chip-md-font-size: $kendo-chip-font-size !default;
/// The font size of the large Chip.
/// @group chip
$kendo-chip-lg-font-size: var( --kendo-font-size, inherit ) !default;

/// The Chip's line height that is related to the $kendo-font-size.
/// @group chip
$kendo-chip-line-height: 1 !default;
/// The small Chip's line height that is related to the $kendo-font-size.
/// @group chip
$kendo-chip-sm-line-height: $kendo-chip-line-height !default;
/// The medium Chip's line height that is related to the $kendo-font-size.
/// @group chip
$kendo-chip-md-line-height: $kendo-chip-line-height !default;
/// The large Chip's line height that is related to the $kendo-font-size.
/// @group chip
$kendo-chip-lg-line-height: $kendo-chip-line-height !default;

/// The calculated height of the Chip.
/// @group chip
$kendo-chip-calc-size: calc( #{$kendo-chip-line-height * 1em} + calc( #{$kendo-chip-padding-y} * 2 ) + #{$kendo-chip-border-width * 2} ) !default;
$kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height * 1em} + calc( #{$kendo-chip-sm-padding-y} * 2 ) + #{$kendo-chip-border-width * 2} ) !default;

/// The map with the sizes of the Chip.
/// @group chip
$kendo-chip-sizes: (
    sm: (
        padding-x: $kendo-chip-sm-padding-x,
        padding-y: $kendo-chip-sm-padding-y,
        font-size: $kendo-chip-sm-font-size,
        line-height: $kendo-chip-sm-line-height
    ),
    md: (
        padding-x: $kendo-chip-md-padding-x,
        padding-y: $kendo-chip-md-padding-y,
        font-size: $kendo-chip-md-font-size,
        line-height: $kendo-chip-md-line-height
    ),
    lg: (
        padding-x: $kendo-chip-lg-padding-x,
        padding-y: $kendo-chip-lg-padding-y,
        font-size: $kendo-chip-lg-font-size,
        line-height: $kendo-chip-lg-line-height
    )
) !default;

/// The base background of the Chip.
/// @group chip
$kendo-chip-base-bg: if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg) !default;

/// The theme colors map for the Chip.
/// @group chip
$kendo-chip-theme-colors: (
    "base": $kendo-chip-base-bg,
    "error": k-map-get($kendo-theme-colors, "error"),
    "info": k-map-get($kendo-theme-colors, "info"),
    "warning": k-map-get($kendo-theme-colors, "warning"),
    "success": k-map-get($kendo-theme-colors, "success")
) !default;

/// The base background color of the solid Chip.
/// @group chip
$kendo-chip-solid-bg: $kendo-chip-base-bg !default;
/// The base text color of the solid Chip.
/// @group chip
$kendo-chip-solid-text: $kendo-button-text !default;
/// The base border color of the solid Chip.
/// @group chip
$kendo-chip-solid-border: $kendo-button-border !default;
/// The base shadow of the solid Chip.
/// @group chip
$kendo-chip-solid-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
/// The base gradient of the solid Chip.
/// @group chip
$kendo-chip-solid-gradient: $kendo-button-gradient !default;

/// The base background color of the focused solid Chip.
/// @group chip
$kendo-chip-solid-focus-bg: null !default;
/// The base text color of the focused solid Chip.
/// @group chip
$kendo-chip-solid-focus-text: null !default;

/// The base background color of the hovered solid Chip.
/// @group chip
$kendo-chip-solid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg) !default;
/// The base text color of the hovered solid Chip.
/// @group chip
$kendo-chip-solid-hover-text: null !default;

/// The base background color of the selected solid Chip.
/// @group chip
$kendo-chip-solid-selected-bg: $kendo-button-active-bg !default;
/// The base text color of the selected solid Chip.
/// @group chip
$kendo-chip-solid-selected-text: null !default;

/// The base background color of the outline Chip.
/// @group chip
$kendo-chip-outline-bg: $kendo-component-bg !default;
/// The base text color of the outline Chip.
/// @group chip
$kendo-chip-outline-text: if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-chip-solid-text) !default;
/// The base border color of the outline Chip.
/// @group chip
$kendo-chip-outline-border: $kendo-chip-outline-text !default;
/// The base shadow of the outline Chip.
/// @group chip
$kendo-chip-outline-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;

/// The base background color of the hovered outline Chip.
/// @group chip
$kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default;
/// The base text color of the hovered outline Chip.
/// @group chip
$kendo-chip-outline-hover-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) !default;

/// The base background color of the selected outline Chip.
/// @group chip
$kendo-chip-outline-selected-bg: $kendo-chip-outline-hover-bg !default;
/// The base text color of the selected outline Chip.
/// @group chip
$kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;

// Chip List

/// The sizes of the Chip list.
/// @group chip
$kendo-chip-list-sizes: (
    sm: k-spacing(1),
    md: k-spacing(1),
    lg: k-spacing(1)
) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/chip/_layout.scss
@mixin kendo-chip--layout-base() {

    // Chip
    .k-chip {
        padding-block: $kendo-chip-padding-y;
        padding-inline: $kendo-chip-padding-x;
        border-width: $kendo-chip-border-width;
        border-style: solid;
        outline: 0;
        font-family: var( --kendo-font-family, inherit );
        font-size: $kendo-chip-font-size;
        line-height: $kendo-chip-line-height;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        gap: $kendo-chip-spacing;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        user-select: none;

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

        .k-selected-icon-wrapper {
            display: none !important; // stylelint-disable-line declaration-no-important
        }
    }


    // Chip content
    .k-chip-content {
        padding-block: .5em;
        padding-inline: 0;
        margin-block: -.5em;
        margin-inline: 0;
        min-width: 0;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        overflow: hidden;
        flex: 1 1 auto;

        // Adjustment for kendo-icon-wrapper
        .k-icon-wrapper-host {
            display: initial;
        }
    }
    .k-chip-content:first-child {
        margin-inline-start: $kendo-chip-spacing;
    }
    .k-chip-content:last-child {
        margin-inline-end: $kendo-chip-spacing;
    }


    // Chip text
    .k-chip-text,
    .k-chip-label {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        flex: 1 1 auto;
    }


    // Chip avatar
    .k-chip-avatar {
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        flex: none;
    }


    // Chip icon
    .k-chip-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
    }


    // Actions
    .k-chip-actions {
        margin-block: -5em;
        margin-inline: 0;
        flex: none;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-self: center;
    }
    .k-chip-action {
        flex: none;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-self: center;
    }


    // Legacy chip icons
    .k-remove-icon {
        font-size: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
    }


    // Chip list
    .k-chip-list {
        min-width: 0px;
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
    }

    // Sizes
    @each $size, $size-props in $kendo-chip-sizes {
        $_padding-x: k-map-get( $size-props, padding-x );
        $_padding-y: k-map-get( $size-props, padding-y );
        $_font-size: k-map-get( $size-props, font-size );
        $_line-height: k-map-get( $size-props, line-height );
        $_avatar-size: 1em;

        .k-chip-#{$size} {
            padding-block: $_padding-y;
            padding-inline: $_padding-x;
            font-size: $_font-size;
            line-height: $_line-height;

            .k-chip-action {
                padding: $_padding-y;
            }
        }

        .k-chip-avatar {
            width: $_avatar-size;
            height: $_avatar-size;
            flex-basis: $_avatar-size;
        }

    }

    // Sizes
    @each $name, $size in $kendo-chip-list-sizes {
        .k-chip-list-#{$name} {
            gap: $size;
        }
    }

}


@mixin kendo-chip--layout() {
    @include kendo-chip--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/chip/_theme.scss
@mixin kendo-chip--theme-base() {

    // Solid
    @each $name, $color in $kendo-chip-theme-colors {
        .k-chip-solid-#{$name} {

            @if ($name == "base") {
                @include fill(
                    $kendo-chip-solid-text,
                    $kendo-chip-solid-bg,
                    $kendo-chip-solid-border,
                    $kendo-chip-solid-gradient
                );

                &:focus,
                &.k-focus {
                    @include fill( $bg: $kendo-chip-solid-focus-bg );
                    @include focus-indicator( $kendo-chip-solid-shadow );
                }

                &:hover,
                &.k-hover {
                    @include fill( $bg: $kendo-chip-solid-hover-bg );
                }

                &.k-selected {
                    @include fill( $bg: $kendo-chip-solid-selected-bg );
                }
            } @else {
                @include fill(
                    if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 65% )),
                    if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-try-tint( $color, 80% )),
                    if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-try-tint( $color, 25% )),
                    $kendo-chip-solid-gradient
                );

                &:focus,
                &.k-focus {
                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), rgba( $color, .16 )) );
                }

                &:hover,
                &.k-hover {
                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint($color, 65% )) );
                }

                &.k-selected {
                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 50% )) );
                }
            }
        }
    }


    // Outline
    @each $name, $color in $kendo-chip-theme-colors {
        .k-chip-outline-#{$name} {
            @if ($name == "base") {
                @include fill(
                    $kendo-chip-outline-text,
                    transparent,
                    $kendo-chip-outline-border
                );

                &:focus,
                &.k-focus {
                    @include focus-indicator( $kendo-chip-outline-shadow );
                }

                &:hover,
                &.k-hover {
                    @include fill(
                        $color: $kendo-chip-outline-hover-text,
                        $bg: $kendo-chip-outline-hover-bg
                    );
                }

                &.k-selected {
                    @include fill(
                        $color: $kendo-chip-outline-selected-text,
                        $bg: $kendo-chip-outline-selected-bg
                    );
                }
            } @else if ($name == "warning") {
                @include fill(
                    if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)),
                    if($kendo-enable-color-system, transparent, if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
                    if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
                );

                &:focus,
                &.k-focus {
                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
                }

                &:hover,
                &.k-hover {
                    @include fill(
                        $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
                        $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
                    );
                }

                &.k-selected {
                    @include fill(
                        $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
                        $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
                    );
                }
            } @else {
                @include fill(
                    if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )),
                    if($kendo-enable-color-system, transparent, if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
                    if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% ))
                );

                &:focus,
                &.k-focus {
                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
                }

                &:hover,
                &.k-hover {
                    @include fill(
                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
                        if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )),
                        if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% ))
                    );
                }

                &.k-selected {
                    @include fill(
                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
                        if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )),
                        if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% ))
                    );
                }
            }
        }
    }

}


@mixin kendo-chip--theme() {
    @include kendo-chip--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-chip--styles() {
    @include module-render( "chip" ) {
        @include kendo-chip--layout();
        @include kendo-chip--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-chip--styles();
}

// #endregion
// #region @import "./color-preview/_index.scss"; -> scss/color-preview/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "color-preview",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "../colorgradient/images/alpha-slider-bgr.scss"; -> scss/colorgradient/images/alpha-slider-bgr.scss
@include exports("alpha-slider-bgr.png") {
    @include register-data-uri("alpha-slider-bgr.png", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC");
}

// #endregion
// #region @import "./_variables.scss"; -> scss/color-preview/_variables.scss
// Color Preview
$kendo-color-preview-border-radius: k-border-radius(md)!default;
$kendo-color-preview-border-width: 1px !default;
$kendo-color-preview-bg: null !default;
$kendo-color-preview-text: null !default;
$kendo-color-preview-border: $kendo-component-border !default;
$kendo-color-preview-hover-border: $kendo-hover-border !default;

$kendo-color-preview-no-color-bg: $kendo-color-white !default;
$kendo-color-preview-no-color-text: $kendo-color-error !default;
$kendo-color-preview-no-color-border: null !default;

$kendo-color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$kendo-color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
$kendo-color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/color-preview/_layout.scss
@mixin kendo-color-preview--layout-base() {

    // Color Preview
    .k-color-preview {
        width: 100%;
        height: 100%;
        border-width: $kendo-color-preview-border-width;
        border-radius: $kendo-color-preview-border-radius;
        box-sizing: border-box;
        border-style: solid;
        display: inline-flex;
        flex-flow: row nowrap;
        position: relative;
        overflow: hidden;

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


    // Current Color
    .k-coloreditor-current-color {
        cursor: pointer;
    }


    // Icon color preview
    .k-icon-color-preview {
        border-width: 0;
        border-radius: 0;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        gap: 2px;

        .k-color-preview-mask {
            width: calc( #{$kendo-icon-size} - 2px );
            height: 2px;
        }
    }


    // Color Preview Mask
    .k-color-preview-mask {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .k-color-preview-mask::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        background: $kendo-color-preview-transparent-color-image;
        background-size: contain;
        background-position: 0 0;
    }


    // No Color
    .k-no-color .k-color-preview-mask::before {
        content: "";
        background-color: $kendo-color-preview-no-color-bg;
        background-image: $kendo-color-preview-no-color-image;
        background-size: 100% 100%;
        background-position: 0 0;
    }

}


@mixin kendo-color-preview--layout() {
    @include kendo-color-preview--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/color-preview/_theme.scss
@mixin kendo-color-preview--theme-base() {

    // Color Preview
    .k-color-preview {
        @include fill(
            $kendo-color-preview-text,
            $kendo-color-preview-bg,
            $kendo-color-preview-border
        );

        &:hover,
        &.k-hover {
            @include fill( $border: $kendo-color-preview-hover-border );
        }
    }

}


@mixin kendo-color-preview--theme() {
    @include kendo-color-preview--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-color-preview--styles() {
    @include module-render( "color-preview" ) {
        @include kendo-color-preview--layout();
        @include kendo-color-preview--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-color-preview--styles();
}

// #endregion
// #region @import "./loader/_index.scss"; -> scss/loader/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "loader",
    dependencies: (
        "overlay",
    )
);


// Dependencies
// #region @import "../overlay/_index.scss"; -> scss/overlay/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/loader/_variables.scss
// Loader

/// The border radius of the Loader segment.
/// @group loader
$kendo-loader-segment-border-radius: 50% !default;

/// The size of the small Loader segment.
/// @group loader
$kendo-loader-sm-segment-size: k-spacing(1) !default;
/// The size of the medium Loader segment.
/// @group loader
$kendo-loader-md-segment-size: k-spacing(2) !default;
/// The size of the large Loader segment.
/// @group loader
$kendo-loader-lg-segment-size: k-spacing(4) !default;

/// The padding of the small Loader.
/// @group loader
$kendo-loader-sm-padding: calc( #{$kendo-loader-sm-segment-size} / 2 ) !default;
/// The padding of the medium Loader.
/// @group loader
$kendo-loader-md-padding: calc( #{$kendo-loader-md-segment-size} / 2 ) !default;
/// The padding of the large Loader.
/// @group loader
$kendo-loader-lg-padding: calc( #{$kendo-loader-lg-segment-size} / 2 ) !default;

/// The width of the small spinner-3 Loader.
/// @group loader
$kendo-loader-sm-spinner-3-width: calc( #{$kendo-loader-sm-segment-size} * 4 ) !default;
/// The width of the medium spinner-3 Loader.
/// @group loader
$kendo-loader-md-spinner-3-width: calc( #{$kendo-loader-md-segment-size} * 4 ) !default;
/// The width of the large spinner-3 Loader.
/// @group loader
$kendo-loader-lg-spinner-3-width: calc( #{$kendo-loader-lg-segment-size} * 4 ) !default;

/// The height of the small spinner-3 Loader.
/// @group loader
$kendo-loader-sm-spinner-3-height: calc( #{$kendo-loader-sm-spinner-3-width} * #{$equilateral-height} ) !default;
/// The height of the medium spinner-3 Loader.
/// @group loader
$kendo-loader-md-spinner-3-height: calc( #{$kendo-loader-md-spinner-3-width} * #{$equilateral-height} ) !default;
/// The height of the large spinner-3 Loader.
/// @group loader
$kendo-loader-lg-spinner-3-height: calc( #{$kendo-loader-lg-spinner-3-width} * #{$equilateral-height} ) !default;

/// The width of the small spinner-4 Loader.
/// @group loader
$kendo-loader-sm-spinner-4-width: calc( #{$kendo-loader-sm-segment-size} * 4 ) !default;
/// The width of the medium spinner-4 Loader.
/// @group loader
$kendo-loader-md-spinner-4-width: calc( #{$kendo-loader-md-segment-size} * 4 ) !default;
/// The width of the large spinner-4 Loader.
/// @group loader
$kendo-loader-lg-spinner-4-width: calc( #{$kendo-loader-lg-segment-size} * 4 ) !default;

/// The height of the small spinner-4 Loader.
/// @group loader
$kendo-loader-sm-spinner-4-height: $kendo-loader-sm-spinner-4-width !default;
/// The height of the medium spinner-4 Loader.
/// @group loader
$kendo-loader-md-spinner-4-height: $kendo-loader-md-spinner-4-width !default;
/// The height of the large spinner-4 Loader.
/// @group loader
$kendo-loader-lg-spinner-4-height: $kendo-loader-lg-spinner-4-width !default;

/// The color of the Loader based on the secondary theme color.
/// @group loader
$kendo-loader-secondary-bg: #656565 !default;

/// The border width of the container panel.
/// @group loader
$kendo-loader-container-panel-border-width: 1px !default;
/// The border style of the container panel.
/// @group loader
$kendo-loader-container-panel-border-style: solid !default;
/// The border color of the container panel.
/// @group loader
$kendo-loader-container-panel-border-color: $kendo-component-border !default;
/// The border radius of the container panel.
/// @group loader
$kendo-loader-container-panel-border-radius: k-border-radius(md) !default;
/// The background color of the container panel.
/// @group loader
$kendo-loader-container-panel-bg: $kendo-color-white !default;

/// The padding of the small Loader container.
/// @group loader
$kendo-loader-sm-container-padding: k-spacing(4) !default;
/// The padding of the medium Loader container.
/// @group loader
$kendo-loader-md-container-padding: k-spacing(5) !default;
/// The padding of the large Loader container.
/// @group loader
$kendo-loader-lg-container-padding: k-spacing(6) !default;

/// The gap of the small Loader container.
/// @group loader
$kendo-loader-sm-container-gap: k-spacing(1) !default;
/// The gap of the medium Loader container.
/// @group loader
$kendo-loader-md-container-gap: k-spacing(2) !default;
/// The gap of the large Loader container.
/// @group loader
$kendo-loader-lg-container-gap: k-spacing(3) !default;

/// The font size of the small Loader container.
/// @group loader
$kendo-loader-sm-container-font-size: var( --kendo-font-size-sm, inherit ) !default;
/// The font size of the medium Loader container.
/// @group loader
$kendo-loader-md-container-font-size: var( --kendo-font-size, inherit ) !default;
/// The font size of the large Loader container.
/// @group loader
$kendo-loader-lg-container-font-size: var( --kendo-font-size-lg, inherit ) !default;

// Loading indicator
/// The background color of the Loading indicator.
/// @group loading
$kendo-loading-bg: $kendo-component-bg !default;
/// The text color of the Loading indicator.
/// @group loading
$kendo-loading-text: currentColor !default;
/// The opacity of the Loading indicator.
/// @group loading
$kendo-loading-opacity: .3 !default;
/// The z-index of the Loading indicator.
/// @group loading
$kendo-zindex-loading: 100 !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/loader/_layout.scss
@mixin kendo-loader--layout-base() {

    .k-loader {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        box-sizing: border-box;

        // Prevents the inline elements from being displaced.
        // A good example is the 'pulsing' loader inside a button.
        line-height: 0;
    }

    .k-loader-canvas {
        display: flex;
        position: relative;
    }

    // Loader segment
    .k-loader-segment {
        border-radius: $kendo-loader-segment-border-radius;
        background-color: currentColor;
        position: absolute;
    }

    // Loader sizes
    .k-loader-sm {
        padding: $kendo-loader-sm-padding;

        .k-loader-segment {
            width: $kendo-loader-sm-segment-size;
            height: $kendo-loader-sm-segment-size;
        }
    }
    .k-loader-md {
        padding: $kendo-loader-md-padding;

        .k-loader-segment {
            width: $kendo-loader-md-segment-size;
            height: $kendo-loader-md-segment-size;
        }
    }
    .k-loader-lg {
        padding: $kendo-loader-lg-padding;

        .k-loader-segment {
            width: $kendo-loader-lg-segment-size;
            height: $kendo-loader-lg-segment-size;
        }
    }




    // Loader pulsing 2
    @keyframes pulsing-2-segment {
        0% { transform: scale(1); }
        50% { transform: scale(1.5); }
        100% { transform: scale(1); }
    }


    // Component
    .k-loader-pulsing-2 {

        .k-loader-canvas {
            align-items: center;
        }

        .k-loader-segment:nth-child(1) {
            left: 0;
            transform: scale( 1.5 );
            transform-origin: 0 50%;
            animation: pulsing-2-segment 1s ease infinite;
            animation-delay: -.5s;
        }
        .k-loader-segment:nth-child(2) {
            right: 0;
            transform-origin: 100% 50%;
            animation: pulsing-2-segment 1s ease infinite;
        }

        &.k-loader-sm {
            .k-loader-canvas {
                width: calc( #{$kendo-loader-sm-segment-size} * 3 );
                height: calc( #{$kendo-loader-sm-segment-size} * 1.5 );
            }
        }

        &.k-loader-md {
            .k-loader-canvas {
                width: calc( #{$kendo-loader-md-segment-size} * 3 );
                height: calc( #{$kendo-loader-md-segment-size} * 1.5 );
            }
        }

        &.k-loader-lg {
            .k-loader-canvas {
                width: calc( #{$kendo-loader-lg-segment-size} * 3 );
                height: calc( #{$kendo-loader-lg-segment-size} * 1.5 );
            }
        }
    }




    // Loader spinner 3
    @keyframes spinner-3-segment {
        0% {
            top: 0;
            left: 50%;
        }

        33.3333% {
            top: 100%;
            left: 0;
        }

        66.6666% {
            top: 100%;
            left: 100%;
        }

        100% {
            top: 0;
            left: 50%;
        }
    }


    // Component
    .k-loader-spinner-3 {

        // Note: Until we can provide a css variables solution, or something better:
        // * the dot center is on the exact point of angle
        // * offset dots by artifically reduce dimentions by 1 dot size
        // * compensate by setting margin on all sides half a dot size

        .k-loader-segment {
            transform: translate( -50%, -50% );
        }
        .k-loader-segment:nth-child(1) {
            top: 0;
            left: 50%;
            animation: spinner-3-segment 2s ease infinite;
        }
        .k-loader-segment:nth-child(2) {
            top: 100%;
            left: 0;
            animation: spinner-3-segment 2s ease infinite;
            animation-delay: calc( -2s / 3 );
        }
        .k-loader-segment:nth-child(3) {
            top: 100%;
            left: 100%;
            animation: spinner-3-segment 2s ease infinite;
            animation-delay: calc( -4s / 3 );
        }


        &.k-loader-sm {
            .k-loader-canvas {
                margin: calc( #{$kendo-loader-sm-segment-size} / 2 );
                width: calc( #{$kendo-loader-sm-spinner-3-width} - #{$kendo-loader-sm-segment-size} );
                height: calc( #{$kendo-loader-sm-spinner-3-height} - #{$kendo-loader-sm-segment-size} );
            }
        }

        &.k-loader-md {
            .k-loader-canvas {
                margin: calc( #{ $kendo-loader-md-segment-size} / 2 );
                width: calc( #{$kendo-loader-md-spinner-3-width} - #{$kendo-loader-md-segment-size} );
                height: calc( #{$kendo-loader-md-spinner-3-height} - #{$kendo-loader-md-segment-size} );
            }
        }

        &.k-loader-lg {
            .k-loader-canvas {
                margin: calc( #{$kendo-loader-lg-segment-size} / 2 );
                width: calc( #{$kendo-loader-lg-spinner-3-width} - #{$kendo-loader-lg-segment-size} );
                height: calc( #{$kendo-loader-lg-spinner-3-height} - #{$kendo-loader-lg-segment-size} );
            }
        }
    }




    // Loader spinner 4
    @keyframes spinner-4-segment-1 {
        0% {
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        33.3% {
            top: 0;
            left: 0;
            transform: translateX(0) translateY(0);
        }

        66.6% {
            top: 0;
            left: 0;
            transform: translateX(0) translateY(0);
        }

        100% {
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
    }
    @keyframes spinner-4-segment-2 {
        0% {
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        33.3% {
            top: 0;
            left: 100%;
            transform: translateX(-100%) translateY(0);
        }

        66.6% {
            top: 0;
            left: 100%;
            transform: translateX(-100%) translateY(0);
        }

        100% {
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
    }
    @keyframes spinner-4-segment-3 {
        0% {
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        33.3% {
            top: 100%;
            left: 100%;
            transform: translateX(-100%) translateY(-100%);
        }

        66.6% {
            top: 100%;
            left: 100%;
            transform: translateX(-100%) translateY(-100%);
        }

        100% {
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
    }
    @keyframes spinner-4-segment-4 {
        0% {
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        33.3% {
            top: 100%;
            left: 0;
            transform: translateX(0) translateY(-100%);
        }

        66.6% {
            top: 100%;
            left: 0;
            transform: translateX(0) translateY(-100%);
        }

        100% {
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
    }
    @keyframes spinner-4 {
        0% {
            transform: rotate(0);
        }

        33.3% {
            transform: rotate(0);
        }

        66.6% {
            transform: rotate(180deg);
        }

        100% {
            transform: rotate(180deg);
        }
    }

    .k-loader-spinner-4 {
        .k-loader-canvas {
            animation: spinner-4 1.833s ease infinite;
        }

        .k-loader-segment {
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);

            &:nth-child(1) {
                animation: spinner-4-segment-1 1.833s ease infinite;
            }

            &:nth-child(2) {
                animation: spinner-4-segment-2 1.833s ease infinite;
            }

            &:nth-child(3) {
                animation: spinner-4-segment-3 1.833s ease infinite;
            }

            &:nth-child(4) {
                animation: spinner-4-segment-4 1.833s ease infinite;
            }
        }

        &.k-loader-sm {
            .k-loader-canvas {
                width: $kendo-loader-sm-spinner-4-width;
                height: $kendo-loader-sm-spinner-4-height;
            }
        }

        &.k-loader-md {
            .k-loader-canvas {
                width: $kendo-loader-md-spinner-4-width;
                height: $kendo-loader-md-spinner-4-height;
            }
        }

        &.k-loader-lg {
            .k-loader-canvas {
                width: $kendo-loader-lg-spinner-4-width;
                height: $kendo-loader-lg-spinner-4-height;
            }
        }
    }




    // Loader container
    .k-loader-container {
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 20001;

        .k-loader {
            padding: 0;
        }
    }

    .k-loader-container,
    .k-loader-container-overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    // TODO: use k-overlay as a base class in rendering
    .k-loader-container-overlay {
        opacity: $kendo-overlay-opacity;
    }

    .k-loader-container-inner {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    .k-loader-container-panel {
        border-width: $kendo-loader-container-panel-border-width;
        border-style: $kendo-loader-container-panel-border-style;
        border-radius: $kendo-loader-container-panel-border-radius;
    }

    // Loader Container Sizes
    .k-loader-container-sm {
        .k-loader-container-inner {
            padding: $kendo-loader-sm-container-padding;
            gap: $kendo-loader-sm-container-gap;
        }

        .k-loader-container-label {
            font-size: $kendo-loader-sm-container-font-size;
        }
    }
    .k-loader-container-md {
        .k-loader-container-inner {
            padding: $kendo-loader-md-container-padding;
            gap: $kendo-loader-md-container-gap;
        }

        .k-loader-container-label {
            font-size: $kendo-loader-md-container-font-size;
        }
    }
    .k-loader-container-lg {
        .k-loader-container-inner {
            padding: $kendo-loader-lg-container-padding;
            gap: $kendo-loader-lg-container-gap;
        }

        .k-loader-container-label {
            font-size: $kendo-loader-lg-container-font-size;
        }
    }

    // Loader Position
    .k-loader-top {
        .k-loader-container-inner {
            flex-direction: column;
            text-align: center;
        }
    }
    .k-loader-end {
        .k-loader-container-label {
            order: -1;
        }
    }

}

// Legacy implementation of the loading icon inside inputs and pickers
// Replace with loader component
@mixin kendo-loading--layout-base() {

    // Loading mask
    .k-loading-mask,
    .k-loading-image,
    .k-loading-color {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;

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

    .k-loading-mask {
        z-index: $kendo-zindex-loading;

        &.k-opaque {
            .k-loading-color {
                opacity: 1;
            }
        }
    }
    .k-loading-text {
        text-indent: -4000px;
        text-align: center;
        position: absolute;
        color: $kendo-loading-text;
    }
    .k-loading-image {
        z-index: 2;
        color: $kendo-loading-text;
    }
    .k-loading-color {
        background-color: $kendo-loading-bg;
        opacity: $kendo-loading-opacity;
    }

    // Loading indicator
    .k-i-loading {
        width: 1em;
        height: 1em;
        line-height: 1;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        position: relative;
        background-color: transparent;
        box-sizing: border-box;
        color: $kendo-loading-text;

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

    .k-i-loading::before,
    .k-i-loading::after,
    .k-loading-image::before,
    .k-loading-image::after {
        position: absolute;
        top: 50%;
        left: 50%;
        display: inline-block;
        content: "";
        box-sizing: inherit;
        border-radius: 50%;
        border-width: .05em;
        border-style: solid;
        border-color: currentColor;
        border-top-color: transparent;
        border-bottom-color: transparent;
        background-color: transparent;
    }

    .k-icon.k-i-loading::before,
    .k-icon.k-i-loading::after {
        content: "";
    }

    .k-i-loading::before,
    .k-loading-image::before {
        margin-top: -.5em;
        margin-left: -.5em;
        width: 1em;
        height: 1em;
        animation: k-loading-animation .7s linear infinite;
    }

    .k-i-loading::after,
    .k-loading-image::after {
        margin-top: -.25em;
        margin-left: -.25em;
        width: .5em;
        height: .5em;
        animation: k-loading-animation reverse 1.4s linear infinite;
    }

    .k-loading-image::before,
    .k-loading-image::after {
        content: "";
        // See https://github.com/telerik/kendo-themes/issues/1925
        border-width: 1px; // TODO: Remove once we drop IE support
        border-width: clamp( .015em, 1px, 1px );
        font-size: 4em;
    }

    // Loading animation
    @keyframes k-loading-animation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

}

@mixin kendo-loader--layout() {
    @include kendo-loader--layout-base();
    @include kendo-loading--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/loader/_theme.scss
@mixin kendo-loader--theme-base() {

    @each $name, $color in $kendo-theme-colors {
        .k-loader-#{$name} {
            @if $name == "secondary" {
                color: $kendo-loader-secondary-bg;
            } @else {
                color: $color;
            }
        }
    }

    .k-loader-container-panel {
        background-color: $kendo-loader-container-panel-bg;
        border-color: $kendo-loader-container-panel-border-color;
    }

    .k-loader-container-inner {
        .k-text-secondary,
        .\!k-text-secondary { // stylelint-disable-line
            color: $kendo-loader-secondary-bg !important; // stylelint-disable-line declaration-no-important
        }
    }

}


@mixin kendo-loader--theme() {
    @include kendo-loader--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-loader--styles() {
    @include module-render( "loader" ) {
        @include kendo-loader--layout();
        @include kendo-loader--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-loader--styles();
}

// #endregion
// @import "./loading/_index.scss";
// #region @import "./skeleton/_index.scss"; -> scss/skeleton/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "skeleton",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/skeleton/_variables.scss
// Skeleton

/// The transform scale of the Skeleton text.
/// @group skeleton
$kendo-skeleton-text-transform: scale( 1, .6 ) !default;
/// The border radius of the Skeleton text.
/// @group skeleton
$kendo-skeleton-text-border-radius: k-border-radius(md) !default;

/// The border radius of the rectangular Skeleton.
/// @group skeleton
$kendo-skeleton-rect-border-radius: 0 !default;

/// The border radius of the circular Skeleton.
/// @group skeleton
$kendo-skeleton-circle-border-radius: 9999px !default;

$kendo-skeleton-item-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $kendo-color-inverse, .2 )) !default;

$kendo-skeleton-wave-bg: rgba( black, .04 ) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/skeleton/_layout.scss
@mixin kendo-skeleton--layout-base() {

    .k-skeleton {
        display: block;
    }

    .k-skeleton-text {
        border-radius: $kendo-skeleton-text-border-radius;
        transform: $kendo-skeleton-text-transform;

        &:empty::before {
            content: "\200b";
        }
    }

    .k-skeleton-rect {
        border-radius: $kendo-skeleton-rect-border-radius;
    }

    .k-skeleton-circle {
        border-radius: $kendo-skeleton-circle-border-radius;
    }


    // Legacy alias
    .k-placeholder-line {
        @extend .k-skeleton !optional;
        @extend .k-skeleton-text !optional;
    }


    // Skeleton wave
    @keyframes k-skeleton-wave {
        0% {
            transform: translateX(-100%);
        }
        60% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(100%);
        }
    }

    .k-skeleton-wave {

        .k-skeleton,
        &.k-skeleton {
            position: relative;
            overflow: hidden;

            &::after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                transform: translateX(-100%);
                animation: k-skeleton-wave 1.6s linear .5s infinite;
            }
        }

    }


    // Skeleton pulse
    @keyframes k-skeleton-pulse {
        0% {
            opacity: 1;
        }
        50% {
            opacity: .4;
        }
        100% {
            opacity: 1;
        }
    }

    .k-skeleton-pulse {

        .k-skeleton,
        &.k-skeleton {
            animation: k-skeleton-pulse 1.5s ease-in-out .5s infinite;
        }

    }

}


@mixin kendo-skeleton--layout() {
    @include kendo-skeleton--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/skeleton/_theme.scss
@mixin kendo-skeleton--theme-base() {

    .k-skeleton {
        @include fill( $bg: $kendo-skeleton-item-bg );
    }


    // Skeleton wave
    .k-skeleton-wave {

        .k-skeleton::after,
        &.k-skeleton::after {
            background-image: linear-gradient(
                to right,
                transparent,
                $kendo-skeleton-wave-bg,
                transparent
            );
        }

    }

}


@mixin kendo-skeleton--theme() {
    @include kendo-skeleton--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-skeleton--styles() {
    @include module-render( "skeleton" ) {
        @include kendo-skeleton--layout();
        @include kendo-skeleton--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-skeleton--styles();
}

// #endregion
// #region @import "./time-marker/_index.scss"; -> scss/time-marker/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "time-marker",
    dependencies: ()
);

// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/time-marker/_variables.scss
/// The border width of the current time indicator.
/// @group time-marker
$kendo-current-time-width: 1px !default;
/// The color of the current time indicator.
/// @group time-marker
$kendo-current-time-color: #ff0000 !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/time-marker/_layout.scss
@mixin kendo-time-marker--layout-base() {

    .k-current-time {
        width: $kendo-current-time-width;
        position: absolute;

        &.k-current-time-arrow-left,
        &.k-current-time-arrow-right,
        &.k-current-time-arrow-down {
            width: 0;
            height: 0;
            background: transparent;
            border: 4px solid transparent;
        }
    }

}

@mixin kendo-time-marker--layout() {
    @include kendo-time-marker--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/time-marker/_theme.scss
@mixin kendo-time-marker--theme-base() {

    .k-current-time {
        background: $kendo-current-time-color;

        &.k-current-time-arrow-left {
            border-right-color: $kendo-current-time-color;
        }

        &.k-current-time-arrow-right {
            border-left-color: $kendo-current-time-color;
        }

        &.k-current-time-arrow-down {
            border-top-color: $kendo-current-time-color;
        }
    }

}


@mixin kendo-time-marker--theme() {
    @include kendo-time-marker--theme-base();
}

// #endregion

// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );

// Expose
@mixin kendo-time-marker--styles() {
    @include module-render( "time-marker" ) {
        @include kendo-time-marker--layout();
        @include kendo-time-marker--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-time-marker--styles();
}

// #endregion


// Form helpers
// #region @import "./forms/_index.scss"; -> scss/forms/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "form",
    dependencies: (
        "actions",
        "icon",
        "toolbar",
    )
);


// Dependencies // TODO: extract variables
// #region @import "../toolbar/_index.scss"; -> scss/toolbar/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "toolbar",
    dependencies: (
        "button",
        "icon",
        "menu",
        "popup",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "button",
    dependencies: (
        "badge",
        "icon",
    )
);


// Dependencies
// #region @import "../badge/_index.scss"; -> scss/badge/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/button/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./_layout.scss"; -> scss/button/_layout.scss
@mixin kendo-button--layout-base() {

    // Button
    .k-button {
        box-sizing: border-box;
        border-width: $kendo-button-border-width;
        border-style: solid;
        border-radius: $kendo-button-border-radius;
        color: inherit;
        background: none;
        font-family: $kendo-button-font-family;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: $kendo-icon-spacing;
        vertical-align: middle;
        user-select: none;
        cursor: pointer;
        outline: none;
        -webkit-appearance: none;
        position: relative;
        transition: $kendo-button-transition;

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

        &:disabled,
        &.k-disabled {
            @include disabled( $kendo-disabled-styling... );
        }

        &::-moz-focus-inner {
            padding: 0;
            border: 0;
            outline: 0;
        }

        &:hover,
        &:focus {
            text-decoration: none;
            outline: 0;
        }
    }


    // Icon Button
    .k-icon-button {
        gap: 0;

        .k-icon {
            display: inline-flex;
        }
    }


    // Content
    .k-button-icon {
        color: inherit;
        align-self: center;
        position: relative;
    }

    .k-button-text {}


    // Sizes
    @each $size, $size-props in $kendo-button-sizes {
        $_padding-x: k-map-get( $size-props, padding-x );
        $_padding-y: k-map-get( $size-props, padding-y );
        $_font-size: k-map-get( $size-props, font-size );
        $_line-height: k-map-get( $size-props, line-height );

        .k-button-#{$size} {
            padding-block: $_padding-y;
            padding-inline: $_padding-x;
            font-size: $_font-size;
            line-height: $_line-height;
        }

        .k-button-#{$size}.k-icon-button {
            padding: $_padding-y;

            .k-button-icon {
                min-width: calc( #{$_font-size} * #{$_line-height} );
                min-height: calc( #{$_font-size} * #{$_line-height} );
                display: inline-flex;
                align-items: center;
                justify-content: center;

                &.k-svg-icon > svg,
                &.k-icon-md > svg {
                    width: $kendo-icon-size-md;
                    height: $kendo-icon-size-md;
                }

                &.k-icon-xs > svg {
                    width: $kendo-icon-size-xs;
                    height: $kendo-icon-size-xs;
                }

                &.k-icon-sm > svg {
                    width: $kendo-icon-size-sm;
                    height: $kendo-icon-size-sm;
                }

                &.k-icon-lg > svg {
                    width: $kendo-icon-size-lg;
                    height: $kendo-icon-size-lg;
                }

                &.k-icon-xl > svg {
                    width: $kendo-icon-size-xl;
                    height: $kendo-icon-size-xl;
                }

                &.k-icon-xxl > svg {
                    width: $kendo-icon-size-xxl;
                    height: $kendo-icon-size-xxl;
                }

                &.k-icon-xxxl > svg {
                    width: $kendo-icon-size-xxxl;
                    height: $kendo-icon-size-xxxl;
                }
            }
        }
    }


    // Button shape
    .k-button-square {
        aspect-ratio: 1;
    }


    // Button group
    .k-button-group {
        margin: 0;
        padding: 0;
        border-width: 0;
        box-sizing: border-box;
        list-style: none;
        outline: 0;
        display: inline-flex;
        flex-flow: row nowrap;
        vertical-align: middle;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        > .k-button + .k-button {
            margin-inline-start: if( $kendo-button-border-width == 0, null, -$kendo-button-border-width );
        }

        > .k-button:hover,
        > .k-button.k-hover,
        > .k-button:focus,
        > .k-button.k-focus,
        > .k-button:active,
        > .k-button.k-active,
        > .k-button.k-selected {
            z-index: 2;
        }

        .k-button:not(:first-child):not(:last-child) {
            border-start-end-radius: 0;
            border-end-end-radius: 0;
            border-start-start-radius: 0;
            border-end-start-radius: 0;
        }
        > .k-button:first-child:not(:only-child) {
            border-start-end-radius: 0;
            border-end-end-radius: 0;
        }
        > .k-button:last-child:not(:only-child) {
            border-start-start-radius: 0;
            border-end-start-radius: 0;
        }

        &:disabled,
        &[disabled],
        &.k-disabled {
            opacity: 1;
            filter: none;
        }
    }

    .k-button-group-stretched {
        width: 100%;

        > * {
            flex: 1 0 0%;
            overflow: hidden;
        }
    }


    // Flat button
    .k-button-flat {
        border-color: transparent !important; // stylelint-disable-line declaration-no-important
        color: inherit;
        background: none !important; // stylelint-disable-line declaration-no-important
        box-shadow: none !important; // stylelint-disable-line declaration-no-important

        // Overlay background
        &::before {
            display: block !important; // stylelint-disable-line declaration-no-important
        }

        // Focus ring
        &::after {
            box-shadow: inset 0 0 0 2px currentColor;
            display: block !important; // stylelint-disable-line declaration-no-important
        }

        &:focus::after,
        &.k-focus::after {
            opacity: $kendo-flat-button-focus-ring-opacity;
        }
    }


    // Outline button
    .k-button-outline {
        border-color: currentColor;
        color: inherit;
        background: none;
    }


    // Link button
    .k-button-link {
        border-color: transparent;
        color: inherit;
        text-decoration: none;
        background: none;

        &:hover,
        &.k-hover {
            text-decoration: underline;
        }
    }


    // Clear button
    .k-button-clear {
        border-color: transparent !important; // stylelint-disable-line declaration-no-important
        color: inherit;
        background: none !important; // stylelint-disable-line declaration-no-important
        box-shadow: none !important; // stylelint-disable-line declaration-no-important
    }




    // Button overlay
    .k-button-overlay {
        @include border-radius( inherit );
        content: "";
        background: currentColor;
        opacity: 0;
        display: none;
        pointer-events: none;
        position: absolute;
        left: -$kendo-button-border-width;
        right: -$kendo-button-border-width;
        top: -$kendo-button-border-width;
        bottom: -$kendo-button-border-width;
        z-index: 0;
        transition: opacity .2s ease-in-out;
    }


    .k-button { // stylelint-disable-line

        &::before {
            @extend .k-button-overlay !optional;
        }

        // Hovered state
        &:hover,
        &.k-hover {
            &::before {
                opacity: $kendo-flat-button-hover-opacity;
            }
        }

        // Focused state
        &:focus,
        &.k-focus {
            &::before {
                opacity: $kendo-flat-button-focus-opacity;
            }
        }
        &.k-no-focus:not(:hover),
        &.k-no-focus:not(.k-hover) {
            &::before {
                opacity: 0;
            }
        }

        // Active state
        &:active,
        &.k-active {
            &::before {
                opacity: $kendo-flat-button-active-opacity;
            }
        }

        // Selected state
        &.k-selected {
            &::before {
                opacity: $kendo-flat-button-selected-opacity;
            }
        }

    }




    // Button focus ring
    .k-button { // stylelint-disable-line

        &::after {
            @include border-radius( inherit );
            content: "";
            opacity: 0;
            display: none;
            pointer-events: none;
            position: absolute;
            left: -$kendo-button-border-width;
            right: -$kendo-button-border-width;
            top: -$kendo-button-border-width;
            bottom: -$kendo-button-border-width;
            z-index: 0;
            transition: opacity .2s ease-in-out;
        }
    }

}


@mixin kendo-button--layout() {
    @include kendo-button--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/button/_theme.scss
@mixin kendo-button--theme-base() {

    // Solid button
    .k-button-solid-base {
        @include fill(
            $kendo-button-text,
            $kendo-button-bg,
            $kendo-button-border,
            $kendo-button-gradient
        );
        @include box-shadow( $kendo-button-shadow );

        // Hover state
        &:hover,
        &.k-hover {
            @include fill(
                $kendo-button-hover-text,
                $kendo-button-hover-bg,
                $kendo-button-hover-border,
                $kendo-button-hover-gradient
            );
            @include box-shadow( $kendo-button-hover-shadow );
        }

        // Focus state
        &:focus,
        &.k-focus {
            @include focus-indicator( $kendo-button-focus-shadow, true, true );
        }

        // Active state
        &:active,
        &.k-active {
            @include fill(
                $kendo-button-active-text,
                $kendo-button-active-bg,
                $kendo-button-active-border,
                $kendo-button-active-gradient
            );
            @include box-shadow( $kendo-button-active-shadow );
        }

        // Selected state
        &.k-selected {
            @include fill(
                $kendo-button-selected-text,
                $kendo-button-selected-bg,
                $kendo-button-selected-border,
                $kendo-button-selected-gradient
            );
            @include box-shadow( $kendo-button-selected-shadow );
        }

        // Disabled state
        &:disabled,
        &.k-disabled {
            @include fill(
                $kendo-button-disabled-text,
                $kendo-button-disabled-bg,
                $kendo-button-disabled-border,
                $kendo-button-disabled-gradient
            );
            @include box-shadow( $kendo-button-disabled-shadow );
        }
    }

    $_shade-fn: k-meta-get-function( $kendo-solid-button-shade-function );

    @each $name, $color in $kendo-button-theme-colors {
        @if ($name != "base") {
            $_button-text: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
            $_button-bg: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null ));
            $_button-border: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null ));

            $_button-hover-text: null;
            $_button-hover-bg: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null ));
            $_button-hover-border: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null ));

            $_button-active-text: null;
            $_button-active-bg: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null ));
            $_button-active-border: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null ));

            .k-button-solid-#{$name} {
                @include fill(
                    $_button-text,
                    $_button-bg,
                    $_button-border,
                    $kendo-solid-button-gradient
                );

                // Hover state
                &:hover,
                &.k-hover {
                    @include fill(
                        $_button-hover-text,
                        $_button-hover-bg,
                        $_button-hover-border
                    );
                }

                // Focus state
                &:focus,
                &.k-focus {
                    @if ( $kendo-solid-button-shadow ) {
                        @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-solid-button-shadow-opacity * 100% ), transparent), rgba( $_button-border, $kendo-solid-button-shadow-opacity )), true, true );
                    }
                }

                // Active state
                &:active,
                &.k-active {
                    @include fill(
                        $_button-active-text,
                        $_button-active-bg,
                        $_button-active-border
                    );
                }

                // Selected
                &.k-selected {
                    @include fill(
                        $_button-active-text,
                        $_button-active-bg,
                        $_button-active-border
                    );
                }

                // Disabled state
                &:disabled,
                &.k-disabled {
                    @include fill(
                        $kendo-button-disabled-text,
                        $kendo-button-disabled-bg,
                        $kendo-button-disabled-border,
                        $kendo-button-disabled-gradient
                    );
                    @include box-shadow( $kendo-button-disabled-shadow );
                }
            }
        }
    }


    // Outline button
    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
        .k-button-outline-#{$name} {
            @include box-shadow( none );
            border-color: currentColor;
            color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color);
            background-color: transparent;

            // Hover state
            &:hover,
            &.k-hover {
                @if $name == "base" {
                    @include fill(
                        if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )),
                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color )),
                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color ))
                    );
                } @else {
                    @include fill(
                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
                        $color,
                        $color
                    );
                }
            }

            // Focus state
            &:focus,
            &.k-focus {
                @if $kendo-outline-button-shadow {
                    @if $name == "base" {
                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
                    } @else {
                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
                    }
                }
            }

            // Active state
            &:active,
            &.k-active {
                @if $name == "base" {
                    @include fill(
                        if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )),
                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color )),
                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color ))
                    );
                } @else {
                    @include fill(
                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
                        $color,
                        $color
                    );
                }
            }

            // Selected
            &.k-selected {
                @if $name == "base" {
                    @include fill(
                        if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )),
                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color )),
                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color ))
                    );
                } @else {
                    @include fill(
                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
                        $color,
                        $color
                    );
                }
            }

            // Disabled state
            &:disabled,
            &.k-disabled {
                color: $kendo-button-disabled-text;
            }
        }
    }


    // Flat button
    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": inherit ) ) {
        .k-button-flat-#{$name} {
            @if $name == "base" {
                color: inherit;
            } @else {
                color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color);
            }

            // Disabled state
            &:disabled,
            &.k-disabled {
                color: $kendo-button-disabled-text;
            }
        }
    }


    // Link button
    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
        .k-button-link-#{$name} {
            color: $color;

            // Hover
            &:hover,
            &.k-hover {
                @if $name == "base" {
                    color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 ));
                } @else {
                    color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 2 ));
                }
            }

            // Focus
            &:focus,
            &.k-focus {
                @if ( $kendo-link-button-shadow ) {
                    @if $name == "base" {
                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
                    } @else {
                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
                    }
                }
            }

            // Active
            &:active,
            &.k-active {
                @if $name == "base" {
                    color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 ));
                } @else {
                    color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 ));
                }
            }

            // Selected
            &.k-selected {
                @if $name == "base" {
                    color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 ));
                } @else {
                    color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 ));
                }
            }

            // Disabled state
            &:disabled,
            &.k-disabled {
                color: $kendo-button-disabled-text;
            }
        }
    }


    // Clear button
    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
        .k-button-clear-#{$name} {
            color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color);

            &:focus,
            &.k-focus,
            &:active {
                &::after {
                    background-color: currentColor;
                    opacity: $kendo-clear-button-focus-opacity;
                    display: block;
                }
            }

            // Disabled state
            &:disabled,
            &.k-disabled {
                color: $kendo-button-disabled-text;
            }
        }
    }


    // Button group
    .k-button-group {}


}


@mixin kendo-button--theme() {
    @include kendo-button--theme-base();
}
// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-button--styles() {
    @include module-render( "button" ) {
        @include kendo-button--layout();
        @include kendo-button--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-button--styles();
}

// #endregion
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../menu/_index.scss"; -> scss/menu/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "menu",
    dependencies: (
        "button",
        "icon",
        "list",
        "popup",
    )
);


// Dependencies
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/menu/_variables.scss
// Menu

$kendo-menu-padding-x: k-spacing(0) !default;
$kendo-menu-padding-y: k-spacing(0) !default;
$kendo-menu-border-width: 0px !default;
$kendo-menu-font-family: var( --kendo-font-family, inherit ) !default;
$kendo-menu-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-menu-line-height: var( --kendo-line-height, normal ) !default;

$kendo-menu-bg: transparent !default;
$kendo-menu-text: $kendo-component-text !default;
$kendo-menu-border: null !default;
$kendo-menu-gradient: null !default;

$kendo-menu-item-padding-x: k-spacing(3) !default;
$kendo-menu-item-padding-y: k-spacing(1.5) !default;
$kendo-menu-item-spacing: k-spacing(0) !default;
$kendo-menu-item-icon-spacing: $kendo-icon-spacing !default;

$kendo-menu-item-bg: null !default;
$kendo-menu-item-text: $kendo-link-text !default;
$kendo-menu-item-border: null !default;
$kendo-menu-item-gradient: null !default;

$kendo-menu-item-hover-bg: null !default;
$kendo-menu-item-hover-text: $kendo-link-hover-text !default;
$kendo-menu-item-hover-border: null !default;
$kendo-menu-item-hover-gradient: null !default;

$kendo-menu-item-expanded-bg: null !default;
$kendo-menu-item-expanded-text: $kendo-component-text !default;
$kendo-menu-item-expanded-border: null !default;
$kendo-menu-item-expanded-gradient: null !default;

$kendo-menu-item-focus-shadow: $kendo-list-item-focus-shadow !default;

$kendo-menu-separator-spacing: k-spacing(1) !default;

$kendo-menu-scroll-button-bg: $kendo-component-bg !default;
$kendo-menu-scroll-button-text: $kendo-link-text !default;
$kendo-menu-scroll-button-border: $kendo-component-border !default;
$kendo-menu-scroll-button-gradient: null !default;

$kendo-menu-scroll-button-hover-bg: null !default;
$kendo-menu-scroll-button-hover-text: $kendo-link-hover-text !default;
$kendo-menu-scroll-button-hover-border: null !default;
$kendo-menu-scroll-button-hover-gradient: null !default;


// Menu popup

/// Horizontal padding of the menu popup.
/// @group menu
$kendo-menu-popup-padding-x: null !default;

/// Vertical padding of the menu popup.
/// @group menu
$kendo-menu-popup-padding-y: null !default;

/// Width of the border around the menu popup.
/// @group menu
$kendo-menu-popup-border-width: $kendo-popup-border-width !default;

/// Font sizes of the menu popup.
/// @group menu
$kendo-menu-popup-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-menu-popup-sm-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-menu-popup-md-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-menu-popup-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;

/// Line heights used along with $kendo-font-size.
/// @group menu
$kendo-menu-popup-line-height: var( --kendo-line-height, normal ) !default;
$kendo-menu-popup-sm-line-height: var( --kendo-line-height, normal ) !default;
$kendo-menu-popup-md-line-height: var( --kendo-line-height, normal ) !default;
$kendo-menu-popup-lg-line-height: var( --kendo-line-height-lg, normal ) !default;

/// The background of the menu popup.
/// @group menu
$kendo-menu-popup-bg: $kendo-popup-bg !default;
/// The text color of the menu popup.
/// @group menu
$kendo-menu-popup-text: $kendo-popup-text !default;
/// The border color of the menu popup.
/// @group menu
$kendo-menu-popup-border: $kendo-popup-border !default;
/// The background gradient of the menu popup.
/// @group menu
$kendo-menu-popup-gradient: null !default;


// Menu popup item

/// Horizontal padding of the menu item in popup.
/// @group menu
$kendo-menu-popup-item-padding-x: k-spacing(2) !default;
$kendo-menu-popup-sm-item-padding-x: k-spacing(2) !default;
$kendo-menu-popup-md-item-padding-x: k-spacing(2) !default;
$kendo-menu-popup-lg-item-padding-x: k-spacing(2) !default;

/// Vertical padding of the menu item in popup.
/// @group menu
$kendo-menu-popup-item-padding-y: k-spacing(1) !default;
$kendo-menu-popup-sm-item-padding-y: k-spacing(0.5) !default;
$kendo-menu-popup-md-item-padding-y: k-spacing(1) !default;
$kendo-menu-popup-lg-item-padding-y: k-spacing(1.5) !default;

/// The end padding of the menu item in popup.
/// @group menu
$kendo-menu-popup-item-padding-end: calc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} ) !default;
$kendo-menu-popup-sm-item-padding-end: calc( #{$kendo-menu-popup-sm-item-padding-x} * 2 + #{$kendo-icon-size} ) !default;
$kendo-menu-popup-md-item-padding-end: calc( #{$kendo-menu-popup-md-item-padding-x} * 2 + #{$kendo-icon-size} ) !default;
$kendo-menu-popup-lg-item-padding-end: calc( #{$kendo-menu-popup-lg-item-padding-x} * 2 + #{$kendo-icon-size} ) !default;

/// The start margin of the menu item expand icon.
/// @group menu
$kendo-menu-popup-sm-item-icon-margin-start: $kendo-menu-popup-sm-item-padding-x !default;
$kendo-menu-popup-md-item-icon-margin-start: $kendo-menu-popup-md-item-padding-x !default;
$kendo-menu-popup-lg-item-icon-margin-start: $kendo-menu-popup-lg-item-padding-x !default;

/// The end margin of the menu item expand icon.
/// @group menu
$kendo-menu-popup-sm-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) ) !default;
$kendo-menu-popup-md-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-md-item-padding-end} - #{k-math-div( $kendo-menu-popup-md-item-padding-x, 2 )}) ) !default;
$kendo-menu-popup-lg-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-lg-item-padding-end} - #{k-math-div( $kendo-menu-popup-lg-item-padding-x, 2 )}) ) !default;

/// The spacing between the menu items in popup.
/// @group menu
$kendo-menu-popup-item-spacing: k-spacing(0) !default;

/// The background of the menu item in popup.
/// @group menu
$kendo-menu-popup-item-bg: null !default;
/// The text color of the menu item in popup.
/// @group menu
$kendo-menu-popup-item-text: null !default;
/// The border color of the menu item in popup.
/// @group menu
$kendo-menu-popup-item-border: null !default;
/// The background gradient of the menu item in popup.
/// @group menu
$kendo-menu-popup-item-gradient: null !default;

/// The background of hovered menu item in popup.
/// @group menu
$kendo-menu-popup-item-hover-bg: $kendo-list-item-hover-bg !default;
/// The text color of hovered menu item in popup.
/// @group menu
$kendo-menu-popup-item-hover-text: $kendo-list-item-hover-text !default;
/// The border color of hovered menu item in popup.
/// @group menu
$kendo-menu-popup-item-hover-border: null !default;
/// The background gradient of hovered menu item in popup.
/// @group menu
$kendo-menu-popup-item-hover-gradient: null !default;

/// The background of expanded menu item in popup.
/// @group menu
$kendo-menu-popup-item-expanded-bg: $kendo-list-item-selected-bg !default;
/// The text color of expanded menu item in popup.
/// @group menu
$kendo-menu-popup-item-expanded-text: $kendo-list-item-selected-text !default;
/// The border color of expanded menu item in popup.
/// @group menu
$kendo-menu-popup-item-expanded-border: null !default;
/// The background gradient of expanded menu item in popup.
/// @group menu
$kendo-menu-popup-item-expanded-gradient: null !default;

/// The base shadow of focused menu item in popup.
/// @group menu
$kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/menu/_layout.scss
@mixin kendo-menu--layout-base() {

    // Menu bar
    .k-menu-bar {
        border-width: $kendo-menu-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-menu-font-family;
        font-size: $kendo-menu-font-size;
        line-height: $kendo-menu-line-height;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        position: relative;
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
    }
    .k-menu { @extend .k-menu-bar !optional; }


    // Menu item
    .k-menu-item {
        border-width: 0;
        outline: 0;
        display: flex;
        flex-flow: column nowrap;
        flex: none;
        position: relative;
        user-select: none;
    }
    .k-menu-item-content {
        display: block;
        height: auto;
        overflow: visible;

        .k-actions {
            margin-top: 0;
        }
    }


    // Menu link
    .k-menu-link {
        padding-block: $kendo-menu-item-padding-y;
        padding-inline: $kendo-menu-item-padding-x;
        outline: 0;
        color: inherit;
        display: flex;
        flex-flow: row nowrap;
        flex: 1 1 auto;
        gap: $kendo-menu-item-icon-spacing;
        align-items: center;
        position: relative;
        white-space: nowrap;
        cursor: pointer;
    }


    // Menu item text
    .k-menu-link-text {
        display: flex;
        flex-flow: row nowrap;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    // Expand arrow
    .k-menu-expand-arrow {
        margin-inline-end: calc( #{$kendo-icon-spacing} * -1 );
        display: inline-flex;
        flex-flow: row wrap;
        align-items: center;
        flex: none;
        position: relative;
    }


    // Orientation -- horizontal
    .k-menu-horizontal {
        flex-direction: row;

        > .k-menu-item + .k-menu-item {
            margin-inline-start: $kendo-menu-item-spacing;
        }

        > .k-separator {
            margin-block: 0;
            margin-inline: $kendo-menu-separator-spacing;
            width: 0;
            height: auto;
            border-width: 0 0 0 1px;
            border-style: solid;
        }
    }


    // Orientation -- vertical
    .k-menu-vertical {
        flex-direction: column;

        > .k-menu-item + .k-menu-item {
            margin-top: $kendo-menu-item-spacing;
        }

        > .k-menu-item > .k-menu-link {
            padding-block: $kendo-menu-popup-item-padding-y;
            padding-inline: $kendo-menu-popup-item-padding-x;
            padding-inline-end: $kendo-menu-popup-item-padding-end;
        }

        > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
            margin-inline-start: $kendo-menu-popup-md-item-icon-margin-start;
            margin-inline-end: $kendo-menu-popup-md-item-icon-margin-end;
        }

        > .k-separator {
            margin-block: $kendo-menu-separator-spacing;
            margin-inline: 0;
            height: 0;
            border-width: 1px 0 0;
            border-style: solid;
            border-color: $kendo-component-border;
            display: block;
        }
    }


    // Menu popup
    .k-menu-popup {
        padding-block: $kendo-menu-popup-padding-y;
        padding-inline: $kendo-menu-popup-padding-x;
        box-sizing: border-box;
        border-width: $kendo-menu-popup-border-width;
        border-style: solid;
        overflow: auto;
        max-height: 80vh;

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


    // Sub menu
    .k-menu-group {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-flow: column nowrap;
        position: absolute;

        .k-menu-item + .k-menu-item {
            margin-top: $kendo-menu-popup-item-spacing;
        }

        .k-separator {
            margin-block: $kendo-menu-separator-spacing;
            margin-inline: 0;
            height: 0;
            border-width: 1px 0 0;
            border-style: solid;
            border-color: $kendo-component-border;
            display: block;
        }
    }
    .k-menu-popup .k-menu-group {
        position: relative;
    }


    // Sizes
    .k-menu-group-sm {
        font-size: $kendo-menu-popup-sm-font-size;
        line-height: $kendo-menu-popup-sm-line-height;

        // jquery popup overrides those
        .k-menu-item {
            font-size: $kendo-menu-popup-sm-font-size;
            line-height: $kendo-menu-popup-sm-line-height;
        }

        .k-menu-link {
            padding-block: $kendo-menu-popup-sm-item-padding-y;
            padding-inline: $kendo-menu-popup-sm-item-padding-x;
            padding-inline-end: $kendo-menu-popup-sm-item-padding-end;
        }

        .k-menu-expand-arrow {
            margin-inline-start: $kendo-menu-popup-sm-item-icon-margin-start;
            margin-inline-end: $kendo-menu-popup-sm-item-icon-margin-end;
        }
    }
    .k-menu-group-md {
        font-size: $kendo-menu-popup-md-font-size;
        line-height: $kendo-menu-popup-md-line-height;

        // jquery popup overrides those
        .k-menu-item {
            font-size: $kendo-menu-popup-md-font-size;
            line-height: $kendo-menu-popup-md-line-height;
        }

        .k-menu-link {
            padding-block: $kendo-menu-popup-md-item-padding-y;
            padding-inline: $kendo-menu-popup-md-item-padding-x;
            padding-inline-end: $kendo-menu-popup-md-item-padding-end;
        }

        .k-menu-expand-arrow {
            margin-inline-start: $kendo-menu-popup-md-item-icon-margin-start;
            margin-inline-end: $kendo-menu-popup-md-item-icon-margin-end;
        }
    }
    .k-menu-group-lg {
        font-size: $kendo-menu-popup-lg-font-size;
        line-height: $kendo-menu-popup-lg-line-height;

        // jquery popup overrides those
        .k-menu-item {
            font-size: $kendo-menu-popup-lg-font-size;
            line-height: $kendo-menu-popup-lg-line-height;
        }

        .k-menu-link {
            padding-block: $kendo-menu-popup-lg-item-padding-y;
            padding-inline: $kendo-menu-popup-lg-item-padding-x;
            padding-inline-end: $kendo-menu-popup-lg-item-padding-end;
        }

        .k-menu-expand-arrow {
            margin-inline-start: $kendo-menu-popup-lg-item-icon-margin-start;
            margin-inline-end: $kendo-menu-popup-lg-item-icon-margin-end;
        }
    }


    // Context menu
    .k-popups-wrapper {
        position: relative;
        border: 0;
        margin: 0;
        padding: 0;
    }
    .k-context-menu {
        margin: 0;
        padding-block: $kendo-menu-popup-padding-y;
        padding-inline: $kendo-menu-popup-padding-x;
        border-width: $kendo-menu-popup-border-width;
        border-style: solid;

        &.k-menu-horizontal {
            padding-block: $kendo-menu-popup-padding-x;
            padding-inline: $kendo-menu-popup-padding-y;
        }
    }
    .k-animation-container .k-context-menu.k-menu-horizontal {
        // kendo-jquery adds `display: block` via js and we need to override it.
        display: flex !important; // stylelint-disable-line declaration-no-important
        flex-wrap: nowrap;
    }
    .k-context-menu-popup {
        z-index: 12000;

        .k-context-menu {
            border-width: 0;
        }
    }
    .k-popup .k-context-menu,
    .k-context-menu-popup .k-context-menu {
        border-width: 0;
    }


    // Scrolling
    .k-menu-scroll-wrapper {
        margin: 0;
        padding: 0;
        border: 0;
        position: relative;

        .k-menu {
            overflow: hidden;
            flex-wrap: nowrap;
        }

        .k-menu-scroll-button {
            @include border-radius( 0 );
            padding: 0;
            border-width: 0;
            border-color: inherit;
            color: inherit;
            background: inherit;
            position: absolute;

            &.k-scroll-left {
                top: 0;
                inset-inline-start: 0;
                height: 100%;
                width: 16px;
                border-right-width: 1px;
            }
            &.k-scroll-right {
                top: 0;
                inset-inline-end: 0;
                height: 100%;
                width: 16px;
                border-left-width: 1px;
            }
            &.k-scroll-up {
                top: 0;
                inset-inline-start: 0;
                width: 100%;
                height: 16px;
                border-bottom-width: 1px;
            }
            &.k-scroll-down {
                bottom: 0;
                inset-inline-start: 0;
                width: 100%;
                height: 16px;
                border-top-width: 1px;
            }
        }
    }

}


@mixin kendo-menu--layout() {
    @include kendo-menu--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/menu/_theme.scss
@mixin kendo-menu--theme-base() {

    .k-menu:not(.k-context-menu) {
        @include fill(
            $kendo-menu-text,
            $kendo-menu-bg,
            $kendo-menu-border,
            $kendo-menu-gradient
        );

        > .k-item {
            @include fill(
                $kendo-menu-item-text,
                $kendo-menu-item-bg,
                $kendo-menu-item-border,
                $kendo-menu-item-gradient
            );

            &:hover,
            &.k-hover {
                @include fill(
                    $kendo-menu-item-hover-text,
                    $kendo-menu-item-hover-bg,
                    $kendo-menu-item-hover-border,
                    $kendo-menu-item-hover-gradient
                );
            }

            &:active,
            &.k-active {
                @include fill(
                    $kendo-menu-item-expanded-text,
                    $kendo-menu-item-expanded-bg,
                    $kendo-menu-item-expanded-border,
                    $kendo-menu-item-expanded-gradient
                );
            }

            &:focus,
            &.k-focus {
                @include focus-indicator( $kendo-menu-item-focus-shadow, true );
            }
        }
    }

    .k-menu-group,
    .k-menu.k-context-menu {
        @include fill(
            $kendo-menu-popup-text,
            $kendo-menu-popup-bg,
            $kendo-menu-popup-border,
            $kendo-menu-popup-gradient
        );

        .k-item > .k-link {
            @include fill(
                $kendo-menu-popup-item-text,
                $kendo-menu-popup-item-bg,
                $kendo-menu-popup-item-border,
                $kendo-menu-popup-item-gradient
            );

            &:hover,
            &.k-hover {
                @include fill(
                    $kendo-menu-popup-item-hover-text,
                    $kendo-menu-popup-item-hover-bg,
                    $kendo-menu-popup-item-hover-border,
                    $kendo-menu-popup-item-hover-gradient
                );
            }

            &:active,
            &.k-active,
            &.k-selected {
                @include fill(
                    $kendo-menu-popup-item-expanded-text,
                    $kendo-menu-popup-item-expanded-bg,
                    $kendo-menu-popup-item-expanded-border,
                    $kendo-menu-popup-item-expanded-gradient
                );
            }
        }

        .k-item:focus,
        .k-item.k-focus {
            > .k-link {
                @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true );
            }
        }
    }


    // Scrolling
    .k-menu-scroll-wrapper .k-menu-scroll-button {
        @include fill(
            $kendo-menu-scroll-button-text,
            $kendo-menu-scroll-button-bg,
            $kendo-menu-scroll-button-border,
            $kendo-menu-scroll-button-gradient
        );

        &:hover {
            @include fill(
                $kendo-menu-scroll-button-hover-text,
                $kendo-menu-scroll-button-hover-bg,
                $kendo-menu-scroll-button-hover-border,
                $kendo-menu-scroll-button-hover-gradient
            );

            &::before {
                opacity: 0;
            }
        }
    }
}


@mixin kendo-menu--theme() {
    @include kendo-menu--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-menu--styles() {
    @include module-render( "menu" ) {
        @include kendo-menu--layout();
        @include kendo-menu--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-menu--styles();
}

// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/toolbar/_variables.scss
// Toolbar

/// The horizontal padding of the Toolbar.
/// @group toolbar
$kendo-toolbar-padding-x: null !default;
/// The horizontal padding of the small Toolbar.
/// @group toolbar
$kendo-toolbar-sm-padding-x: k-spacing(1) !default;
/// The horizontal padding of the medium Toolbar.
/// @group toolbar
$kendo-toolbar-md-padding-x: k-spacing(2) !default;
/// The horizontal padding of the large Toolbar.
/// @group toolbar
$kendo-toolbar-lg-padding-x: k-spacing(2.5) !default;

/// The vertical padding of the Toolbar.
/// @group toolbar
$kendo-toolbar-padding-y: null !default;
/// The vertical padding of the small Toolbar.
/// @group toolbar
$kendo-toolbar-sm-padding-y: k-spacing(1) !default;
/// The vertical padding of the medium Toolbar.
/// @group toolbar
$kendo-toolbar-md-padding-y: k-spacing(2) !default;
/// The vertical padding of the large Toolbar.
/// @group toolbar
$kendo-toolbar-lg-padding-y: k-spacing(2.5) !default;

/// The spacing between the Toolbar tools.
/// @group toolbar
$kendo-toolbar-spacing: null !default;
/// The spacing between the tools of the small Toolbar.
/// @group toolbar
$kendo-toolbar-sm-spacing: k-spacing(1.5) !default;
/// The spacing between the tools of the medium Toolbar.
/// @group toolbar
$kendo-toolbar-md-spacing: k-spacing(2) !default;
/// The spacing between the tools of the large Toolbar.
/// @group toolbar
$kendo-toolbar-lg-spacing: k-spacing(2.5) !default;

/// The width of the border around the Toolbar.
/// @group toolbar
$kendo-toolbar-border-width: 1px !default;
/// The border radius of the Toolbar.
/// @group toolbar
$kendo-toolbar-border-radius: null !default;

/// The font family of the Toolbar.
/// @group toolbar
$kendo-toolbar-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Toolbar.
/// @group toolbar
$kendo-toolbar-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Toolbar.
/// @group toolbar
$kendo-toolbar-line-height: var( --kendo-line-height, normal ) !default;

/// The background color of the Toolbar.
/// @group toolbar
$kendo-toolbar-bg: $kendo-base-bg !default;
/// The text color of the Toolbar.
/// @group toolbar
$kendo-toolbar-text: $kendo-base-text !default;
/// The color of the border around the Toolbar.
/// @group toolbar
$kendo-toolbar-border: $kendo-base-border !default;
/// The gradient of the Toolbar.
/// @group toolbar
$kendo-toolbar-gradient: null !default;
/// The box shadow of the Toolbar.
/// @group toolbar
$kendo-toolbar-shadow: null !default;

/// The color of the separator border of the Toolbar.
/// @group toolbar
$kendo-toolbar-separator-border: inherit !default;

/// The width of the input in the Toolbar.
/// @group toolbar
$kendo-toolbar-input-width: 10em !default;

/// The box shadow of the focused Toolbar item.
/// @group toolbar
$kendo-toolbar-item-shadow: $kendo-button-focus-shadow !default;

/// Border width of the flat Toolbar.
/// @group toolbar
$kendo-toolbar-flat-border-width: 1px !default;

/// The sizes map for the Toolbar.
/// @group toolbar
$kendo-toolbar-sizes: (
    sm: (
        padding-x: $kendo-toolbar-sm-padding-x,
        padding-y: $kendo-toolbar-sm-padding-y,
        spacing: $kendo-toolbar-sm-spacing
    ),
    md: (
        padding-x: $kendo-toolbar-md-padding-x,
        padding-y: $kendo-toolbar-md-padding-y,
        spacing: $kendo-toolbar-md-spacing
    ),
    lg: (
        padding-x: $kendo-toolbar-lg-padding-x,
        padding-y: $kendo-toolbar-lg-padding-y,
        spacing: $kendo-toolbar-lg-spacing
    )
) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/toolbar/_layout.scss
@mixin kendo-toolbar--layout-base() {

    // Base
    .k-toolbar {
        margin: 0;
        padding-block: $kendo-toolbar-padding-y;
        padding-inline: $kendo-toolbar-padding-x;
        border-width: $kendo-toolbar-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-toolbar-font-family;
        font-size: $kendo-toolbar-font-size;
        line-height: $kendo-toolbar-line-height;
        list-style: none;
        display: flex;
        flex-flow: row wrap;
        gap: $kendo-toolbar-spacing;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        // Remove once we decide to not size empty containers
        &::before {
            content: "";
            height: $kendo-button-calc-size;
        }

        &.k-toolbar-resizable {
            flex-wrap: nowrap;
        }

        > * {
            flex-shrink: 0;
            display: inline-flex;
            align-content: center;
            vertical-align: middle;

            > label {
                margin-inline-end: $kendo-toolbar-spacing;
                align-self: center;
            }
        }


        // Button
        .k-button {}


        // Toggle button
        .k-toggle-button {}


        // Button group
        .k-button-group {}


        // Split button
        .k-split-button {}


        // Input
        .k-input,
        .k-picker {
            width: $kendo-toolbar-input-width;
        }
        .k-color-picker {
            width: min-content;
        }

        // Overflow anchor
        .k-toolbar-overflow-button {
            margin-inline-start: auto;
        }


        // Separator
        .k-separator,
        .k-toolbar-separator {
            width: 0;
            height: $kendo-line-height-em;
            border-width: 0 0 0 1px;
            border-style: solid;
            align-self: center;
        }


        // Spacer
        .k-toolbar-spacer {
            height: $kendo-line-height-em;
            flex: 1 0 0%;
        }


        // Template item
        .k-toolbar-item:focus,
        .k-toolbar-item.k-focus {
            text-decoration: none;
            outline: 0;
        }

    }


    // Toolbar group
    .k-toolbar-group {
        display: flex;
        flex-direction: inherit;
        flex-wrap: nowrap;
        gap: inherit;
    }


    // Angular specific
    .k-toolbar-renderer {
        display: inline-block;
        border-color: inherit;
    }

    // Toolbar sizes
    @each $size, $size-props in $kendo-toolbar-sizes {
        $_padding-x: k-map-get( $size-props, padding-x );
        $_padding-y: k-map-get( $size-props, padding-y );
        $_spacing: k-map-get( $size-props, spacing );

        .k-toolbar-#{$size} {
            padding-block: $_padding-y;
            padding-inline: $_padding-x;
            gap: $_spacing;

            // Remove once we decide to not size empty containers
            &::before {
                margin-inline-start: calc( #{$_spacing} * -1 );
            }

            > * > label {
                margin-inline-end: $_spacing;
            }
        }
    }
    // Remove once we decide to not size empty containers
    .k-toolbar-sm::before {
        height: $kendo-button-sm-calc-size;
    }
    .k-toolbar-md::before {
        height: $kendo-button-md-calc-size;
    }
    .k-toolbar-lg::before {
        height: $kendo-button-lg-calc-size;
    }

    .k-floating-toolbar,
    .editorToolbarWindow.k-window-content { // stylelint-disable-line
        padding-block: $kendo-toolbar-md-padding-y !important; // stylelint-disable-line declaration-no-important
        padding-inline: $kendo-toolbar-md-padding-x !important; // stylelint-disable-line declaration-no-important
        border-width: $kendo-toolbar-border-width;
        border-style: solid;
        display: flex;
        flex-flow: row nowrap;
        gap: $kendo-toolbar-md-spacing;
        align-items: center;

        .k-toolbar {
            padding: 0;
            border-width: 0;
            flex-shrink: 1;
            color: inherit;
            background: none;
        }
    }
    .k-editortoolbar-dragHandle { // stylelint-disable-line
        cursor: move;
        display: flex;
        align-items: center;
        align-self: stretch;
        flex-shrink: 0;
    }



    // Remove once the Overflow Popup uses
    // the proper Menu rendering in all suites.

    // Overflow container
    .k-overflow-container {
        font-size: $kendo-menu-popup-md-font-size;
        line-height: $kendo-menu-popup-md-line-height;

        > .k-item {
            border-color: inherit;
        }

        .k-separator {
            margin: k-spacing(1) 0;
        }

        // Group
        .k-overflow-tool-group {
            display: block;
        }

        // Button
        .k-overflow-button {
            padding-block: $kendo-menu-popup-md-item-padding-y;
            padding-inline: $kendo-menu-popup-md-item-padding-x;
            width: 100%;
            height: auto;
            border-width: 0;
            border-radius: 0;
            aspect-ratio: auto;
            color: inherit;
            background-color: transparent;
            background-image: none;
            font: inherit;
            cursor: pointer;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            align-content: center;
            gap: $kendo-icon-spacing;
            justify-content: flex-start;
            position: relative;
        }

        // Button group
        .k-button-group {
            @include box-shadow( none );
            display: flex;
            flex-flow: column nowrap;

            .k-button {
                margin: if( $kendo-button-border-width == 0, null, 0);
            }
        }

        // Split button
        .k-split-button {
            display: flex;
            flex-direction: column;
        }

        // Hidden items
        .k-overflow-hidden {
            display: none;
        }
    }

    // Flat Toolbar
    .k-toolbar.k-toolbar-flat {
        border-width: $kendo-toolbar-flat-border-width 0;
        border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
        border-bottom-color: inherit;
        color: inherit;
        background: none !important;  // stylelint-disable-line declaration-no-important
        box-shadow: none;
    }

}


@mixin kendo-toolbar--layout() {
    @include kendo-toolbar--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/toolbar/_theme.scss
@mixin kendo-toolbar--theme-base() {

    // Theme
    .k-toolbar {
        @include fill(
            $kendo-toolbar-text,
            $kendo-toolbar-bg,
            $kendo-toolbar-border,
            $kendo-toolbar-gradient
        );
        @include box-shadow( $kendo-toolbar-shadow );


        // Separator
        .k-separator,
        .k-toolbar-separator {
            border-color: $kendo-toolbar-separator-border;
        }


        // Template item
        .k-toolbar-item:focus,
        .k-toolbar-item.k-focus {
            @include focus-indicator( $kendo-toolbar-item-shadow );
        }


        // Button group
        .k-button-group {}

    }

    .k-floating-toolbar,
    .editorToolbarWindow.k-window-content { // stylelint-disable-line
        @include fill(
            $kendo-toolbar-text,
            $kendo-toolbar-bg,
            $kendo-toolbar-border,
            $kendo-toolbar-gradient
        );
    }

    // Overflow container
    .k-overflow-container {

        .k-button {

            // Hover state
            &:hover,
            &.k-hover {
                color: $kendo-menu-popup-item-hover-text;
                background: $kendo-menu-popup-item-hover-bg;
            }

            // Button focus state
            &:focus,
            &.k-focus {
                @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true );
            }

            // Active state
            &:active,
            &.k-active {
                color: $kendo-menu-popup-item-hover-text;
                background: $kendo-menu-popup-item-hover-bg;
            }

            // Selected
            &.k-selected {
                color: $kendo-menu-popup-item-expanded-text;
                background: $kendo-menu-popup-item-expanded-bg;
            }

            // Disabled state
            &:disabled,
            &.k-disabled {
                color: inherit;
            }
        }

    }

}


@mixin kendo-toolbar--theme() {
    @include kendo-toolbar--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-toolbar--styles() {
    @include module-render( "toolbar" ) {
        @include kendo-toolbar--layout();
        @include kendo-toolbar--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-toolbar--styles();
}

// #endregion
// #region @import "../action-buttons/_index.scss"; -> scss/action-buttons/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "actions",
    dependencies: ()
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/action-buttons/_variables.scss
// Actions
$kendo-actions-margin-top: k-spacing(4) !default;
$kendo-actions-padding-x: k-spacing(2) !default;
$kendo-actions-padding-y: k-spacing(2) !default;
$kendo-actions-border-width: 0px !default;
$kendo-actions-button-spacing: k-spacing(2) !default;

$kendo-actions-bg: null !default;
$kendo-actions-text: null !default;
$kendo-actions-border: null !default;
$kendo-actions-gradient: null !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/action-buttons/_layout.scss
@mixin kendo-actions--layout-base() {

    // Actions
    .k-actions {
        padding-block: $kendo-actions-padding-y;
        padding-inline: $kendo-actions-padding-x;
        box-sizing: border-box;
        border-width: $kendo-actions-border-width 0 0 0;
        border-style: solid;
        border-color: inherit;
        flex-shrink: 0;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: $kendo-actions-button-spacing;
        overflow: hidden;
        // TODO: remove
        clear: both;

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


    // Actions in popup
    .k-popup .k-actions {
        margin-top: $kendo-actions-margin-top;
    }

    // Actions align
    .k-actions-start {
        justify-content: flex-start;
    }
    .k-actions-center {
        justify-content: center;
    }
    .k-actions-end {
        justify-content: flex-end;
    }
    .k-actions-stretched > * {
        flex: 1 0 0%;
    }


    // Actions orientation
    .k-actions-horizontal {
        width: 100%;
        flex-flow: row nowrap;
    }
    .k-actions-vertical {
        flex-flow: column nowrap;
    }


    // Aliases
    .k-edit-buttons,
    .k-action-buttons,
    .k-columnmenu-actions {
        @extend .k-actions !optional;
    }

}


@mixin kendo-actions--layout() {
    @include kendo-actions--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/action-buttons/_theme.scss
@mixin kendo-actions--theme-base() {

    // Actions
    .k-actions {
        @include fill(
            $kendo-actions-text,
            $kendo-actions-bg,
            $kendo-actions-border,
            $kendo-actions-gradient
        );
    }

}


@mixin kendo-actions--theme() {
    @include kendo-actions--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-actions--styles() {
    @include module-render( "actions" ) {
        @include kendo-actions--layout();
        @include kendo-actions--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-actions--styles();
}

// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/forms/_variables.scss
// #region @import "../input/_variables.scss"; -> scss/input/_variables.scss
// Input

/// The default width of the Input components.
/// @group input
$kendo-input-default-width: 100% !default;

/// The border width of the Input components.
/// @group input
$kendo-input-border-width: 1px !default;
$kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
/// The border radius of the Input components.
/// @group input
$kendo-input-border-radius: null !default;

/// The horizontal padding of the Input components.
/// @group input
$kendo-input-padding-x: k-spacing(2) !default;
/// The horizontal padding of the small Input components.
/// @group input
$kendo-input-sm-padding-x: k-spacing(2) !default;
/// The horizontal padding of the medium Input components.
/// @group input
$kendo-input-md-padding-x: $kendo-input-padding-x !default;
/// The horizontal padding of the large Input components.
/// @group input
$kendo-input-lg-padding-x: k-spacing(2) !default;

/// The vertical padding of the Input components.
/// @group input
$kendo-input-padding-y: k-spacing(1) !default;
/// The vertical padding of the small Input components.
/// @group input
$kendo-input-sm-padding-y: k-spacing(0.5) !default;
/// The vertical padding of the medium Input components.
/// @group input
$kendo-input-md-padding-y: $kendo-input-padding-y !default;
/// The vertical padding of the large Input components.
/// @group input
$kendo-input-lg-padding-y: k-spacing(2) !default;

/// The font family of the Input components.
/// @group input
$kendo-input-font-family: var( --kendo-font-family, inherit ) !default;

/// The font size of the Input components.
/// @group input
$kendo-input-font-size: var( --kendo-font-size, inherit ) !default;
/// The font size of the small Input components.
/// @group input
$kendo-input-sm-font-size: var( --kendo-font-size, inherit ) !default;
/// The font size of the medium Input components.
/// @group input
$kendo-input-md-font-size: $kendo-input-font-size !default;
/// The font size of the large Input components.
/// @group input
$kendo-input-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;

/// The line height of the Input components.
/// @group input
$kendo-input-line-height: var( --kendo-line-height, normal ) !default;
/// The line height of the small Input components.
/// @group input
$kendo-input-sm-line-height: var( --kendo-line-height, normal ) !default;
/// The line height of the medium Input components.
/// @group input
$kendo-input-md-line-height: $kendo-input-line-height !default;
/// The line height of the large Input components.
/// @group input
$kendo-input-lg-line-height: var( --kendo-line-height-lg, normal ) !default;

/// The sizes map for the Input components.
/// @group input
$kendo-input-sizes: (
    sm: (
        padding-x: $kendo-input-sm-padding-x,
        padding-y: $kendo-input-sm-padding-y,
        font-size: $kendo-input-sm-font-size,
        line-height: $kendo-input-sm-line-height,
        button-padding-x: $kendo-input-sm-padding-y,
        button-padding-y: $kendo-input-sm-padding-y
    ),
    md: (
        padding-x: $kendo-input-md-padding-x,
        padding-y: $kendo-input-md-padding-y,
        font-size: $kendo-input-md-font-size,
        line-height: $kendo-input-md-line-height,
        button-padding-x: $kendo-input-md-padding-y,
        button-padding-y: $kendo-input-md-padding-y
    ),
    lg: (
        padding-x: $kendo-input-lg-padding-x,
        padding-y: $kendo-input-lg-padding-y,
        font-size: $kendo-input-lg-font-size,
        line-height: $kendo-input-lg-line-height,
        button-padding-x: $kendo-input-lg-padding-y,
        button-padding-y: $kendo-input-lg-padding-y
    )
) !default;

/// The background color of the Input components.
/// @group input
$kendo-input-bg: $kendo-component-bg !default;
/// The text color of the Input components.
/// @group input
$kendo-input-text: $kendo-component-text !default;
/// The border color of the Input components.
/// @group input
$kendo-input-border: $kendo-component-border !default;
/// The shadow of the Input components.
/// @group input
$kendo-input-shadow: null !default;

/// The background color of the hovered Input components.
/// @group input
$kendo-input-hover-bg: null !default;
/// The text color of the hovered Input components.
/// @group input
$kendo-input-hover-text: null !default;
/// The border color of the hovered Input components.
/// @group input
$kendo-input-hover-border: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 )) !default;
/// The shadow of the hovered Input components.
/// @group input
$kendo-input-hover-shadow: null !default;

/// The background color of the focused Input components.
/// @group input
$kendo-input-focus-bg: null !default;
/// The text color of the focused Input components.
/// @group input
$kendo-input-focus-text: null !default;
/// The border color of the focused Input components.
/// @group input
$kendo-input-focus-border: $kendo-input-hover-border !default;
/// The shadow of the focused Input components.
/// @group input
$kendo-input-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-input-focus-border, .08 )) !default;

/// The background color of the selected Input components.
/// @group input
$kendo-input-selected-bg: null !default;
/// The text color of the selected Input components.
/// @group input
$kendo-input-selected-text: null !default;

/// The background color of the disabled Input components.
/// @group input
$kendo-input-disabled-bg: null !default;
/// The text color of the disabled Input components.
/// @group input
$kendo-input-disabled-text: null !default;
/// The border color of the disabled Input components.
/// @group input
$kendo-input-disabled-border: null !default;
/// The gradient of the disabled Input components.
/// @group input
$kendo-input-disabled-gradient: null !default;
/// The shadow of the disabled Input components.
/// @group input
$kendo-input-disabled-shadow: null !default;

/// The background color of the outline Input components.
/// @group input
$kendo-input-outline-bg: null !default;
/// The text color of the outline Input components.
/// @group input
$kendo-input-outline-text: $kendo-input-text !default;
/// The border color of the outline Input components.
/// @group input
$kendo-input-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-button-text, .5)) !default;

/// The background color of the outline hovered Input components.
/// @group input
$kendo-input-outline-hover-bg: null !default;
/// The text color of the outline hovered Input components.
/// @group input
$kendo-input-outline-hover-text: null !default;
/// The border color of the outline hovered Input components.
/// @group input
$kendo-input-outline-hover-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 80%, transparent), rgba( $kendo-button-text, .8)) !default;

/// The background color of the outline focused Input components.
/// @group input
$kendo-input-outline-focus-bg: null !default;
/// The text color of the outline focused Input components.
/// @group input
$kendo-input-outline-focus-text: null !default;
/// The border color of the outline focused Input components.
/// @group input
$kendo-input-outline-focus-border: null !default;
/// The shadow of the outline focused Input components.
/// @group input
$kendo-input-outline-focus-shadow: $kendo-input-focus-shadow !default;

/// The background color of the flat Input components.
/// @group input
$kendo-input-flat-bg: null !default;
/// The text color of the flat Input components.
/// @group input
$kendo-input-flat-text: $kendo-input-text !default;
/// The border color of the flat Input components.
/// @group input
$kendo-input-flat-border: $kendo-input-border !default;

/// The background color of the flat hovered Input components.
/// @group input
$kendo-input-flat-hover-bg: null !default;
/// The text color of the flat hovered Input components.
/// @group input
$kendo-input-flat-hover-text: null !default;
/// The border color of the flat hovered Input components.
/// @group input
$kendo-input-flat-hover-border: $kendo-input-hover-border !default;

/// The background color of the flat focused Input components.
/// @group input
$kendo-input-flat-focus-bg: null !default;
/// The text color of the flat focused Input components.
/// @group input
$kendo-input-flat-focus-text: null !default;
/// The border color of the flat focused Input components.
/// @group input
$kendo-input-flat-focus-border: null !default;
/// The shadow of the flat focused Input components.
/// @group input
$kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;

/// The text color of the Input placeholder.
/// @group input
$kendo-input-placeholder-text: $kendo-subtle-text !default;
/// The opacity of the Input placeholder.
/// @group input
$kendo-input-placeholder-opacity: 1 !default;

/// The color of the Input clear value icon.
/// @group input
$kendo-input-clear-value-text: null !default;
/// The opacity of the Input clear value icon.
/// @group input
$kendo-input-clear-value-opacity: .5 !default;
/// The color of the hovered Input clear value icon.
/// @group input
$kendo-input-clear-value-hover-text: null !default;
/// The opacity of the hovered Input clear value icon.
/// @group input
$kendo-input-clear-value-hover-opacity: 1 !default;

/// The vertical margin of the clear value icon.
/// @group input
$kendo-input-values-margin-y: k-spacing(0.5) !default;
/// The horizontal margin of the clear value icon.
/// @group input
$kendo-input-values-margin-x: $kendo-input-values-margin-y !default;

/// The width of the Input button.
/// @group input
$kendo-input-button-width: $kendo-button-inner-calc-size !default;
/// The border width of the Input button.
/// @group input
$kendo-input-button-border-width: 1px !default;
/// The width of the Input spinner button.
/// @group input
$kendo-input-spinner-width: $kendo-button-inner-calc-size !default;
/// The icon offset of the Input spinner button.
/// @group input
$kendo-input-spinner-icon-offset: null !default;

/// The color of the Input separator.
/// @group input
$kendo-input-separator-text: $kendo-input-border !default;
/// The opacity of the Input separator.
/// @group input
$kendo-input-separator-opacity: .5 !default;

/// The text color of the Input prefix.
/// @group input
$kendo-input-prefix-text: $kendo-subtle-text !default;
/// The text color of the Input suffix.
/// @group input
$kendo-input-suffix-text: $kendo-subtle-text !default;

/// The text color of the Input prefix.
/// @group input
$kendo-input-prefix-text: $kendo-subtle-text !default;
/// The text color of the Input suffix.
/// @group input
$kendo-input-suffix-text: $kendo-subtle-text !default;

/// The border color of the invalid Input components.
/// @group input
$kendo-input-invalid-border: $kendo-invalid-border !default;
/// The shadow of the invalid Input components.
/// @group input
$kendo-input-invalid-shadow: $kendo-invalid-shadow !default;

/// The background color of the Picker components.
/// @group picker
$kendo-picker-bg: $kendo-button-bg !default;
/// The text color of the Picker components.
/// @group picker
$kendo-picker-text: $kendo-button-text !default;
/// The border color of the Picker components.
/// @group picker
$kendo-picker-border: $kendo-button-border !default;
/// The gradient of the Picker components.
/// @group picker
$kendo-picker-gradient: $kendo-button-gradient !default;
/// The shadow of the Picker components.
/// @group picker
$kendo-picker-shadow: $kendo-button-shadow !default;

/// The background color of the hovered Picker components.
/// @group picker
$kendo-picker-hover-bg: $kendo-button-hover-bg !default;
/// The text color of the hovered Picker components.
/// @group picker
$kendo-picker-hover-text: $kendo-button-hover-text !default;
/// The border color of the hovered Picker components.
/// @group picker
$kendo-picker-hover-border: $kendo-button-hover-border !default;
/// The gradient of the hovered Picker components.
/// @group picker
$kendo-picker-hover-gradient: $kendo-button-hover-gradient !default;
/// The shadow of the hovered Picker components.
/// @group picker
$kendo-picker-hover-shadow: $kendo-button-hover-shadow !default;

/// The background color of the focused Picker components.
/// @group picker
$kendo-picker-focus-bg: $kendo-button-focus-bg !default;
/// The text color of the focused Picker components.
/// @group picker
$kendo-picker-focus-text: $kendo-button-focus-text !default;
/// The border color of the focused Picker components.
/// @group picker
$kendo-picker-focus-border: $kendo-button-focus-border !default;
/// The gradient of the focused Picker components.
/// @group picker
$kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
/// The shadow of the focused Picker components.
/// @group picker
$kendo-picker-focus-shadow: $kendo-button-focus-shadow !default;

/// The background color of the disabled Picker components.
/// @group picker
$kendo-picker-disabled-bg: null !default;
/// The text color of the disabled Picker components.
/// @group picker
$kendo-picker-disabled-text: null !default;
/// The border color of the disabled Picker components.
/// @group picker
$kendo-picker-disabled-border: null !default;
/// The gradient of the disabled Picker components.
/// @group picker
$kendo-picker-disabled-gradient: null !default;
/// The shadow of the disabled Picker components.
/// @group picker
$kendo-picker-disabled-shadow: null !default;

/// The background color of the outline Picker components.
/// @group picker
$kendo-picker-outline-bg: null !default;
/// The text color of the outline Picker components.
/// @group picker
$kendo-picker-outline-text: $kendo-button-text !default;
/// The border color of the outline Picker components.
/// @group picker
$kendo-picker-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5)) !default;

/// The background color of the outline hovered Picker components.
/// @group picker
$kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
/// The text color of the outline hovered Picker components.
/// @group picker
$kendo-picker-outline-hover-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg )) !default;
/// The border color of the outline hovered Picker components.
/// @group picker
$kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;

/// The background color of the outline focused Picker components.
/// @group picker
$kendo-picker-outline-focus-bg: null !default;
/// The text color of the outline focused Picker components.
/// @group picker
$kendo-picker-outline-focus-text: null !default;
/// The border color of the outline focused Picker components.
/// @group picker
$kendo-picker-outline-focus-border: null !default;
/// The shadow of the outline focused Picker components.
/// @group picker
$kendo-picker-outline-focus-shadow: $kendo-picker-focus-shadow !default;

/// The background color of the outline hovered and focused Picker components.
/// @group picker
$kendo-picker-outline-hover-focus-bg: null !default;
/// The text color of the outline hovered and focused Picker components.
/// @group picker
$kendo-picker-outline-hover-focus-text: null !default;
/// The border color of the outline hovered and focused Picker components.
/// @group picker
$kendo-picker-outline-hover-focus-border: null !default;

/// The background color of the flat Picker components.
/// @group picker
$kendo-picker-flat-bg: null !default;
/// The text color of the flat Picker components.
/// @group picker
$kendo-picker-flat-text: $kendo-button-text !default;
/// The border color of the flat Picker components.
/// @group picker
$kendo-picker-flat-border: $kendo-button-border !default;

/// The background color of the flat hovered Picker components.
/// @group picker
$kendo-picker-flat-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 )) !default;
/// The text color of the flat hovered Picker components.
/// @group picker
$kendo-picker-flat-hover-text: null !default;
/// The border color of the flat hovered Picker components.
/// @group picker
$kendo-picker-flat-hover-border: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 )) !default;

/// The background color of the flat focused Picker components.
/// @group picker
$kendo-picker-flat-focus-bg: null !default;
/// The text color of the flat focused Picker components.
/// @group picker
$kendo-picker-flat-focus-text: null !default;
/// The border color of the flat focused Picker components.
/// @group picker
$kendo-picker-flat-focus-border: null !default;
/// The shadow of the flat focused Picker components.
/// @group picker
$kendo-picker-flat-focus-shadow: $kendo-picker-focus-shadow !default;

/// The background color of the flat hovered and focused Picker components.
/// @group picker
$kendo-picker-flat-hover-focus-bg: null !default;
/// The text color of the flat hovered and focused Picker components.
/// @group picker
$kendo-picker-flat-hover-focus-text: null !default;
/// The border color of the flat hovered and focused Picker components.
/// @group picker
$kendo-picker-flat-hover-focus-border: null !default;

// #endregion
// #region @import "../tooltip/_variables.scss"; -> scss/tooltip/_variables.scss
// Tooltip

/// The vertical padding of the Tooltip.
/// @group tooltip
$kendo-tooltip-padding-y: $kendo-padding-md-y !default;
/// The horizontal padding of the Tooltip.
/// @group tooltip
$kendo-tooltip-padding-x: $kendo-padding-md-x !default;
/// The width of the border around the Tooltip.
/// @group tooltip
$kendo-tooltip-border-width: 0px !default;
/// The border radius of the Tooltip.
/// @group tooltip
$kendo-tooltip-border-radius: k-border-radius(md) !default;

/// The font family of the Tooltip.
/// @group tooltip
$kendo-tooltip-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Tooltip.
/// @group tooltip
$kendo-tooltip-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Tooltip.
/// @group tooltip
$kendo-tooltip-line-height: var( --kendo-line-height-sm, normal ) !default;

/// The font size of the Tooltip title.
/// @group tooltip
$kendo-tooltip-title-font-size: calc( ( var( --kendo-font-size, .875rem ) * 1.25 ) ) !default;
/// The line height of the Tooltip title.
/// @group tooltip
$kendo-tooltip-title-line-height: var( --kendo-line-height-xs, normal ) !default;

/// The size of the Tooltip callout.
/// @group tooltip
$kendo-tooltip-callout-size: 6px !default;

/// The default background of the Tooltip.
/// @group tooltip
$kendo-tooltip-bg: if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-legacy( $kendo-body-bg ), .75 )) !default;
/// The default text color of the Tooltip.
/// @group tooltip
$kendo-tooltip-text: if($kendo-enable-color-system, k-color( app-surface ), k-contrast-legacy( $kendo-tooltip-bg )) !default;
/// The default border color of the Tooltip.
/// @group tooltip
$kendo-tooltip-border: $kendo-tooltip-bg !default;

/// The box-shadow of the Tooltip.
/// @group tooltip
$kendo-tooltip-shadow: k-elevation(2) !default;

@function tooltip-theme( $colors ) {
    $_theme: ();

    @each $name, $color in $colors {
        $_theme: k-map-merge(( $name: (
            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
            background-color: $color,
            border: $color,
        )), $_theme );
    }

    @return $_theme;
}

/// The theme colors map for the Tooltip.
/// @group tooltip
$kendo-tooltip-theme-colors: $kendo-theme-colors !default;
/// The generated theme colors map for the Tooltip.
/// @group tooltip
$kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default;

// #endregion
// #region @import "../typography/_variables.scss"; -> scss/typography/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../window/_variables.scss"; -> scss/window/_variables.scss
// #region @import "../action-buttons/_variables.scss"; -> scss/action-buttons/_variables.scss
// File already imported_once. Skipping output.
// #endregion

// Window

/// The width of the border around the Window.
/// @group window
$kendo-window-border-width: 0px !default;
/// The border radius of the Window.
/// @group window
$kendo-window-border-radius: 0px !default;
/// The font family of the Window.
/// @group window
$kendo-window-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Window.
/// @group window
$kendo-window-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Window.
/// @group window
$kendo-window-line-height: var( --kendo-line-height-sm, normal ) !default;

/// The horizontal padding of the Window titlebar.
/// @group window
$kendo-window-titlebar-padding-x: k-spacing(4) !default;
/// The vertical padding of the Window titlebar.
/// @group window
$kendo-window-titlebar-padding-y: k-spacing(3) !default;
/// The width of the border of the Window titlebar.
/// @group window
$kendo-window-titlebar-border-width: 0 0 1px !default;
/// The style of the border of the Window titlebar.
/// @group window
$kendo-window-titlebar-border-style: solid !default;

/// The font size of the title of the Window.
/// @group window
$kendo-window-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
/// The line height of the title of the Window.
/// @group window
$kendo-window-title-line-height: var( --kendo-line-height-sm, normal ) !default;

/// The spacing between the buttons in the Window titlebar.
/// @group window
$kendo-window-actions-gap: null !default;
/// The opacity of the buttons in the Window titlebar.
/// @group window
$kendo-window-action-opacity: null !default;
/// The opacity of the hovered buttons in the Window titlebar.
/// @group window
$kendo-window-action-hover-opacity: null !default;

/// The horizontal padding of the content of the Window.
/// @group window
$kendo-window-inner-padding-x: k-spacing(4) !default;
/// The vertical padding of the content of the Window.
/// @group window
$kendo-window-inner-padding-y: k-spacing(4) !default;

/// The horizontal padding of the Window action buttons.
/// @group window
$kendo-window-buttongroup-padding-x: $kendo-actions-padding-x !default;
/// The vertical padding of the Window action buttons.
/// @group window
$kendo-window-buttongroup-padding-y: $kendo-actions-padding-y !default;
/// The width of the top border of the Window action buttons.
/// @group window
$kendo-window-buttongroup-border-width: 1px !default;

/// The background color of the Window.
/// @group window
$kendo-window-bg: $kendo-component-bg !default;
/// The text color of the Window.
/// @group window
$kendo-window-text: $kendo-component-text !default;
/// The border color of the Window.
/// @group window
$kendo-window-border: $kendo-component-border !default;
/// The box shadow of the Window.
/// @group window
$kendo-window-shadow: k-elevation(8) !default;
/// The box shadow of the focused Window.
/// @group window
$kendo-window-focus-shadow: k-elevation(9) !default;

/// The background color of the Window titlebar.
/// @group window
$kendo-window-titlebar-bg: $kendo-component-header-bg !default;
/// The text color of the Window titlebar.
/// @group window
$kendo-window-titlebar-text: $kendo-component-header-text !default;
/// The border color of the Window titlebar.
/// @group window
$kendo-window-titlebar-border: inherit !default;
/// The background gradient of the Window titlebar.
/// @group window
$kendo-window-titlebar-gradient: null !default;

/// The map of the width for the different Window sizes.
/// @group window
$kendo-window-sizes: (
    sm: 300px,
    md: 800px,
    lg: 1200px
) !default;

/// The theme colors map for the Window.
/// @group window
$kendo-window-theme-colors: (
    "primary": k-map-get($kendo-theme-colors, "primary"),
    "light": k-map-get($kendo-theme-colors, "light"),
    "dark": k-map-get($kendo-theme-colors, "dark")
) !default;

// #endregion


// Forms

/// The padding of the inline Form.
/// @group form
$kendo-form-spacer: calc( #{$kendo-padding-md-x} * 2 ) !default;

/// The font size of the Form.
/// @group form
$kendo-form-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Form.
/// @group form
$kendo-form-line-height: var( --kendo-line-height, normal ) !default;
/// The line height of the Form in em units.
/// @group form
$kendo-form-line-height-em: calc( #{$kendo-form-line-height} * 1em ) !default;
/// The line height of the small Form.
/// @group form
$kendo-form-sm-line-height: var( --kendo-line-height-sm, normal ) !default;
/// The line height of the large Form.
/// @group form
$kendo-form-lg-line-height: var( --kendo-line-height-lg, normal ) !default;

/// The margin of the Form fieldset.
/// @group form
$kendo-form-fieldset-margin: 2em 0 0 !default;
/// The padding of the Form fieldset.
/// @group form
$kendo-form-fieldset-padding: k-spacing(0) !default;

/// The margin of the Form legend.
/// @group form
$kendo-form-legend-margin: 0 0 1em !default;
/// The padding of the Form legend.
/// @group form
$kendo-form-legend-padding: k-spacing(0) !default;
/// The border width of the Form legend.
/// @group form
$kendo-form-legend-border-width: 0 0 2px !default;
/// The border style of the Form legend.
/// @group form
$kendo-form-legend-border-style: solid !default;
/// The border color of the Form legend.
/// @group form
$kendo-form-legend-border-color: $kendo-component-border !default;
/// The width of the Form legend.
/// @group form
$kendo-form-legend-width: 100% !default;
/// The font size of the Form legend.
/// @group form
$kendo-form-legend-font-size: var( --kendo-font-size, inherit ) !default;
/// The text capitalization of the Form legend.
/// @group form
$kendo-form-legend-text-transform: uppercase !default;

/// The bottom margin of the Form label.
/// @group form
$kendo-form-label-margin-bottom: k-spacing(0) !default;

/// The horizontal margin of the Form buttons.
/// @group form
$kendo-form-button-margin-x: k-spacing(2) !default;

/// The font size of the Form hint.
/// @group form
$kendo-form-hint-font-size: var( --kendo-font-size-sm, inherit ) !default;
/// The font style of the Form hint.
/// @group form
$kendo-form-hint-font-style: italic !default;
/// The top margin of the Form hint.
/// @group form
$kendo-form-hint-margin-top: k-spacing(1) !default;

/// The row spacing of the small Form.
/// @group form
$kendo-form-sm-rows-spacing: k-spacing(2.5) !default;
/// The row spacing of the medium Form.
/// @group form
$kendo-form-md-rows-spacing: k-spacing(3.5) !default;
/// The row spacing of the large Form.
/// @group form
$kendo-form-lg-rows-spacing: k-spacing(4.5) !default;

/// The margin of the Form separator.
/// @group form
$kendo-form-separator-margin: $kendo-form-md-rows-spacing 0 0 !default;
/// The border color of the Form separator.
/// @group form
$kendo-form-separator-border-color: $kendo-form-legend-border-color !default;

/// The top padding of the label in the horizontal Form.
/// @group form
$kendo-horizontal-form-label-padding-top: calc( #{k-spacing(2.5)} / 2 ) !default;
/// The horizontal margin of the label in the horizontal Form.
/// @group form
$kendo-horizontal-form-label-margin-x: k-spacing(2.5) !default;
/// The width of the label in the horizontal Form.
/// @group form
$kendo-horizontal-form-label-width: 25% !default;
/// The horizontal alignment of the label in the horizontal Form.
/// @group form
$kendo-horizontal-form-label-align: flex-end !default;

/// The maximum width of the field wrap in the horizontal Form.
/// @group form
$kendo-horizontal-form-field-wrap-max-width: calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} ) !default;

/// The width of the inline Form element.
/// @group form
$kendo-inline-form-element-width: 25% !default;

/// The invalid text color of the Form.
/// @group form
$kendo-forms-invalid-color: $kendo-color-error !default;


/// The horizontal margin of the optional label in the Form.
/// @group form
$kendo-label-optional-margin-x: k-spacing(1.5) !default;
/// The font size of the optional label in the Form.
/// @group form
$kendo-label-optional-font-size: var( --kendo-font-size-sm, inherit ) !default;
/// The font style of the optional label in the Form.
/// @group form
$kendo-label-optional-font-style: italic !default;


/// The margin of the Form fieldset.
/// @group form
$kendo-fieldset-margin: k-spacing(7.5) !default;
/// The font size of the Form fieldset.
/// @group form
$kendo-fieldset-font-size: $kendo-h4-font-size !default;
/// The background color of the Form fieldset.
/// @group form
$kendo-fieldset-bg: null !default;
/// The text color of the Form fieldset.
/// @group form
$kendo-fieldset-text: null !default;
/// The border color of the Form fieldset.
/// @group form
$kendo-fieldset-border: null !default;

/// The background color of the Form legend.
/// @group form
$kendo-fieldset-legend-bg: null !default;
/// The text color of the Form legend.
/// @group form
$kendo-fieldset-legend-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 )) !default;
/// The border color of the Form legend.
/// @group form
$kendo-fieldset-legend-border: null !default;

/// The sizes map for the Form.
/// @group form
$kendo-form-sizes: (
    sm: (
        form-rows-spacing: $kendo-form-sm-rows-spacing
    ),
    md: (
        form-rows-spacing: $kendo-form-md-rows-spacing
    ),
    lg: (
        form-rows-spacing: $kendo-form-lg-rows-spacing
    )
) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/forms/_layout.scss
@mixin kendo-form--layout-base() {

    // Common
    .k-form,
    .k-form-inline {
        font-size: $kendo-form-font-size;
        line-height: $kendo-form-line-height;
    }


    // Fieldset
    .k-fieldset {
        margin: $kendo-fieldset-margin;
        border-width: 1px 0 0;
        border-style: solid;
        padding: 25px 0 0;

        > legend {
            margin-left: 0;
            padding: 0 $kendo-padding-md-x 0 0;
            text-transform: uppercase;
        }
    }


    // Label
    kendo-label > .k-label {
        margin: 0;
    }

    .k-label-optional {
        margin-left: $kendo-label-optional-margin-x;
        font-size: $kendo-label-optional-font-size;
        font-style: $kendo-label-optional-font-style;
        align-self: center;
    }

    .k-label-empty {
        &::before {
            content: "";
            display: inline-block;
        }
    }



    // Vertical Form
    .k-form {
        border: 0;

        .k-form-field > .k-label,
        .k-form-field > kendo-label,
        .k-form-label {
            margin-bottom: $kendo-form-label-margin-bottom;
            display: flex;
            flex-flow: row nowrap;
        }

        .k-label + .k-radio {
            margin-left: 0;
        }

        .k-form-fieldset {
            margin: $kendo-form-fieldset-margin;
            padding: $kendo-form-fieldset-padding;
            border: 0;

            > * {
                &:not(.k-hidden):first-child,
                &.k-hidden + :not(.k-hidden) {
                    margin-top: 0;
                }
            }
        }

        .k-form-legend {
            margin: $kendo-form-legend-margin;
            padding: $kendo-form-legend-padding;
            border-width: $kendo-form-legend-border-width;
            border-style: $kendo-form-legend-border-style;
            width: $kendo-form-legend-width;
            font-size: $kendo-form-legend-font-size;
            text-transform: $kendo-form-legend-text-transform;
        }


        // Form group
        .k-form-group {
            padding: 0;
        }

        > * {
            &:not(.k-hidden):first-child,
            &.k-hidden + :not(.k-hidden) {
                margin-top: 0;
            }
        }


        // Form field
        .k-form-field,
        .k-form-field-wrap {
            display: block;
        }

        .k-form-field-disabled {
            .k-label,
            .k-form-label {
                @include disabled( $kendo-disabled-styling... );
            }
        }

        .k-alert-error {
            font-size: var( --kendo-font-size-sm, inherit );
            margin-top: calc( #{$kendo-padding-md-y} * 2 );
        }

        .k-field-info {
            display: inline-block;
            font-size: var( --kendo-font-size-xs, inherit );
            line-height: 1;
            margin-block: 0;
            margin-inline: $kendo-padding-md-x;
        }


        .k-multiselect,
        .k-floating-label-container,
        .k-daterangepicker .k-dateinput,
        .k-signature {
            display: inline-flex;
            width: 100%;
        }
    }

    // Form Buttons Container
    .k-form-buttons {
        @extend .k-actions !optional;
        padding: 0;
        overflow: visible;
    }

    // Form Hint/Error Messages
    .k-form-hint,
    .k-form-error {
        margin-top: $kendo-form-hint-margin-top;
        display: flex;
        font-size: $kendo-form-hint-font-size;
        font-style: $kendo-form-hint-font-style;
    }

    .k-text-start,
    .k-buttons-start {
        justify-content: flex-start;
    }

    .k-text-end,
    .k-buttons-end {
        justify-content: flex-end;
    }

    // Form Separator
    .k-form-separator {
        margin: $kendo-form-separator-margin;
        border-width: 1px 0 0;
        border-style: solid;
        display: block;
        flex: 0 0 auto;
    }

    // Horizontal Form
    .k-form-horizontal {
        .k-form-field {
            display: flex;

            > .k-label,
            > kendo-label,
            > .k-form-label {
                margin-right: $kendo-horizontal-form-label-margin-x;
                padding-top: $kendo-horizontal-form-label-padding-top;
                width: $kendo-horizontal-form-label-width;
                text-align: end;
                flex-direction: column;
                align-items: $kendo-horizontal-form-label-align;
                justify-content: flex-start;
            }
            .k-label-optional {
                margin: 0;
                align-self: inherit;
            }
        }

        .k-form-field-wrap {
            max-width: $kendo-horizontal-form-field-wrap-max-width;
            flex: 1 1 auto;
        }
    }

    // RTL Adjustments
    .k-form {
        [dir="rtl"],
        .k-rtl & {
            .k-label-optional {
                margin-left: 0;
                margin-right: $kendo-label-optional-margin-x;
            }
        }
    }

    .k-form-horizontal {
        [dir="rtl"],
        .k-rtl & {
            &.k-form-field,
            .k-form-field {
                > .k-label,
                > kendo-label,
                > .k-form-label {
                    margin-right: 0;
                    margin-left: $kendo-horizontal-form-label-margin-x;
                }
            }
        }
    }

    // Sizes
    @each $size, $size-props in $kendo-form-sizes {
        $_form-rows-spacing: k-map-get($size-props, form-rows-spacing);

        .k-form-#{$size} {
            .k-form-field,
            .k-form-buttons {
                margin-top: $_form-rows-spacing;
            }
        }
    }


    // Scheduler
    .k-form-inline {
        padding: $kendo-form-spacer;

        fieldset {
            border-width: 1px 0 0;
            border-style: solid;
            margin: calc( #{$kendo-form-spacer} * 2 ) 0;
            padding: 0;

            &:first-child:first-of-type {
                margin-top: 0;
            }

            &:last-child:last-of-type {
                margin-bottom: 0;
            }
        }

        legend {
            font-size: var( --kendo-font-size-sm, inherit );
            text-align: start;
            font-weight: 600;
            line-height: 1;
            margin-bottom: calc( #{$kendo-padding-lg-y} * 2 );
            text-transform: uppercase;
            padding: 0 $kendo-padding-md-x 0 0;
            width: auto;
        }

        .k-form-field {
            display: flex;
            align-items: flex-start;
            text-align: start;
            margin-bottom: calc( #{$kendo-padding-lg-y} * 2 );

            > span:not(.k-widget) {
                width: $kendo-inline-form-element-width;
                text-align: end;
                line-height: var( --kendo-line-height, normal );
                // TODO: do we need the input variable?
                padding: calc( #{$kendo-padding-md-y} + #{$kendo-input-border-width} ) 0;
                padding-right: $kendo-padding-lg-x;
                align-self: center;
            }

            > input {
                align-self: center;
            }

            > input:not(.k-checkbox):not(.k-radio) {
                flex: 1 1 auto;
            }

            .k-alert-error {
                font-size: var( --kendo-font-size-sm, inherit );
                margin-top: calc( #{$kendo-padding-md-y} * 2 );
            }

            .k-field-info {
                display: block;
                font-size: var( --kendo-font-size-xs, inherit );
                line-height: 1;
                margin: 0;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }




    // Edit form
    .k-edit-form-container {
        width: 400px;
        min-width: 400px;
        border-color: inherit;
        position: relative;
    }


    // Action buttons
    .k-popup-edit-form > .k-actions,
    .k-edit-form-container .k-actions {
        // TODO: refactor
        margin: k-spacing(4) (-$kendo-window-inner-padding-x) (-$kendo-window-inner-padding-y);
    }


    .k-edit-label {
        margin: 0 0 k-spacing(4) 0;
        // TODO: do we need the input variable?
        padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
        width: 30%;
        line-height: $kendo-form-line-height;
        text-align: end;
        float: left;
        clear: both;
    }
    .k-edit-field {
        margin: 0 0 k-spacing(4) 0;
        width: 65%;
        float: right;
        clear: right;
        position: relative;

        &.k-no-editor {
            // TODO: do we need the input variable?
            padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
        }
    }

    .k-edit-field {

        > .k-widget {
            width: 100%;
            box-sizing: border-box;
        }

        input[type="radio"]:not(.k-radio),
        input[type="checkbox"]:not(.k-checkbox) {
            margin-right: .4ex;
        }

        .k-radio-label,
        .k-checkbox-label {
            margin-right: k-spacing(4);
        }

        > .k-reset > li + li {
            margin-top: k-spacing(2);
        }

        .k-reset .k-widget {
            margin: 0 .4ex 0 1ex;
        }
    }

}


@mixin kendo-form--layout() {
    @include kendo-form--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/forms/_theme.scss
@mixin kendo-form--theme-base() {

    .k-form,
    .k-form-inline {
        @include fill( $color: $kendo-body-text );

        fieldset {
            legend {
                @include fill( $color: $kendo-fieldset-legend-text );
            }
        }

        .k-form-legend {
            @include fill( $border: $kendo-form-legend-border-color );
        }

        .k-field-info {
            @include fill( $color: $kendo-subtle-text );
        }

        .k-alert-error {
            @include fill( $color: $kendo-color-error );
        }
    }

    .k-form-error,
    .k-text-error,
    .k-form-field-error .k-label {
        @include fill( $color: $kendo-color-error );
    }

    .k-form-separator {
        @include fill( $border: $kendo-form-separator-border-color );
    }

}


@mixin kendo-form--theme() {
    @include kendo-form--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-form--styles() {
    @include module-render( "form" ) {
        @include kendo-form--layout();
        @include kendo-form--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-form--styles();
}

// #endregion
// #region @import "./validator/_index.scss"; -> scss/validator/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "validator",
    dependencies: (
        "icon",
        "tooltip",
    )
);


// Dependencies
// #region @import "../tooltip/_index.scss"; -> scss/tooltip/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "tooltip",
    dependencies: (
        "icon",
        "popup",
    )
);


// Dependencies
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/tooltip/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./_layout.scss"; -> scss/tooltip/_layout.scss
@mixin kendo-tooltip--layout-base() {

    .k-tooltip {
        @include border-radius( $kendo-tooltip-border-radius );
        margin: 0;
        padding-block: $kendo-tooltip-padding-y;
        padding-inline: $kendo-tooltip-padding-x;
        border-width: $kendo-tooltip-border-width;
        border-style: solid;
        box-sizing: border-box;
        background-repeat: repeat-x;
        outline: 0;
        font-family: $kendo-tooltip-font-family;
        font-size: $kendo-tooltip-font-size;
        line-height: $kendo-tooltip-line-height;
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        position: absolute;
        z-index: 12000;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

    .k-tooltip-icon {
        margin-inline-end: $kendo-icon-spacing;
        flex-shrink: 0;
    }

    .k-tooltip-title {
        margin-bottom: .25em;
        font-size: $kendo-tooltip-title-font-size;
        line-height: $kendo-tooltip-title-line-height;
    }

    .k-tooltip-content {
        align-self: stretch;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .k-tooltip-button {
        margin-inline-start: $kendo-icon-spacing;
        flex-shrink: 0;

        .k-icon {
            color: inherit;
            vertical-align: top;
        }
    }


    // Callout
    .k-callout {
        width: calc( #{$kendo-tooltip-callout-size} * 2);
        height: calc( #{$kendo-tooltip-callout-size} * 2);
        border-width: $kendo-tooltip-callout-size;
        border-style: solid;
        border-color: transparent;
        position: absolute;
        pointer-events: none;
    }

    // TODO:
    // Some implementations rely on margin + transform-rotate to position callout
    // Remove margin tweaking and uncomment when their implementation is fixed.

    .k-callout-n {
        margin-left: calc( #{$kendo-tooltip-callout-size} * -1 );
        border-bottom-color: currentColor;
        // top: 0;
        top: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2 );
        left: 50%;
        // transform: translate(-50%, -100%);
        pointer-events: none;
    }
    .k-callout-e {
        margin-top: calc( #{$kendo-tooltip-callout-size} * -1 );
        border-left-color: currentColor;
        top: 50%;
        // right: 0;
        right: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2 );
        // transform: translate(100%, -50%);
        pointer-events: none;
    }
    .k-callout-s {
        margin-left: calc( #{$kendo-tooltip-callout-size} * -1 );
        border-top-color: currentColor;
        // bottom: 0;
        bottom: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2);
        left: 50%;
        // transform: translate(-50%, 100%);
        pointer-events: none;
    }
    .k-callout-w {
        margin-top: calc( #{$kendo-tooltip-callout-size} * -1 );
        border-right-color: currentColor;
        top: 50%;
        // left: 0;
        left: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2);
        // transform: translate(-100%, -50%);
        pointer-events: none;
    }

}


@mixin kendo-tooltip--layout() {
    @include kendo-tooltip--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/tooltip/_theme.scss
@mixin kendo-tooltip--theme-base() {
    // Default tooltip
    .k-tooltip {
        @include fill(
            $kendo-tooltip-text,
            $kendo-tooltip-bg,
            $kendo-tooltip-border
        );
        
        @include box-shadow( $kendo-tooltip-shadow );

        .k-callout {
            color: $kendo-tooltip-bg;
        }
    }

    // Tooltip variants
    @each $name, $props in $kendo-tooltip-theme {
        .k-tooltip-#{$name} {
            @include fill(
                k-map-get( $props, color ),
                k-map-get( $props, background-color ),
                k-map-get( $props, border )
            );
            
            .k-callout {
                color: k-map-get( $props, background-color );
            }
        }
    }

}


@mixin kendo-tooltip--theme() {
    @include kendo-tooltip--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-tooltip--styles() {
    @include module-render( "tooltip" ) {
        @include kendo-tooltip--layout();
        @include kendo-tooltip--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-tooltip--styles();
}

// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/validator/_variables.scss

// #endregion
// #region @import "./_layout.scss"; -> scss/validator/_layout.scss
@mixin kendo-validator--layout-base() {

    // Validator
    .k-validator {}


    // Validator tooltip
    .k-validator-tooltip {
        margin-top: calc( #{$kendo-tooltip-callout-size} + #{$kendo-tooltip-border-width} );
        width: auto;
        white-space: normal;
        display: flex;
        align-items: center;
        // NOTE: This works around popup / tooltip stacking issue
        z-index: 9999;

        // .k-callout-n { inset-inline-start: 16px; }
    }
    .k-grid .k-validator-tooltip {
        max-width: 300px;
    }

}


@mixin kendo-validator--layout() {
    @include kendo-validator--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/validator/_theme.scss
@mixin kendo-validator--theme-base() {

    // Validator
    .k-validator {}

}


@mixin kendo-validator--theme() {
    @include kendo-validator--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-validator--styles() {
    @include module-render( "validator" ) {
        @include kendo-validator--layout();
        @include kendo-validator--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-validator--styles();
}

// #endregion
// #region @import "./floating-label/_index.scss"; -> scss/floating-label/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "floating-label",
    dependencies: (
        "input",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "input",
    dependencies: (
        "button",
        "icon",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/input/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./_layout.scss"; -> scss/input/_layout.scss
@mixin kendo-input--layout-base() {

    // Generic input
    .k-input,
    .k-picker {
        @include border-radius( $kendo-input-border-radius );
        margin: 0;
        padding: 0;
        width: $kendo-input-default-width;
        min-width: 0;
        box-sizing: border-box;
        border-width: $kendo-input-border-width;
        border-style: solid;
        outline: 0;
        font-family: $kendo-input-font-family;
        font-size: $kendo-input-font-size;
        line-height: $kendo-input-line-height;
        font-weight: normal;
        text-align: start;
        box-shadow: none;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: stretch;
        vertical-align: middle;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-appearance: none;

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

        > .k-input,
        > .k-picker {
            border-width: 0 !important; // stylelint-disable-line declaration-no-important
            color: inherit;
            background: none;
            font: inherit;
            outline: 0;
            box-shadow: none;
        }

        // fix for Safari
        & > * {
            margin: 0;
        }

        &::placeholder {
            color: $kendo-input-placeholder-text;
            opacity: $kendo-input-placeholder-opacity;
            user-select: none;
        }
    }

    // Input and Textarea
    .k-input {}
    input.k-input,
    textarea.k-textarea {
        padding-block: $kendo-input-padding-y;
        padding-inline: $kendo-input-padding-x;

        &:disabled,
        &[disabled] {
            @include disabled( $kendo-disabled-styling... );

            [disabled] &,
            .k-disabled & {
                opacity: 1;
                filter: grayscale(0);
            }
        }
    }
    textarea.k-textarea {
        overflow: auto;
    }


    // Picker
    .k-picker {
        cursor: pointer;
    }
    select.k-picker {
        padding-block: $kendo-input-padding-y;
        padding-inline: $kendo-input-padding-x;
        appearance: auto;

        &:disabled,
        &[disabled] {
            @include disabled( $kendo-disabled-styling... );

            [disabled] &,
            .k-disabled & {
                opacity: 1;
                filter: grayscale(0);
            }
        }
    }


    // Input inner
    .k-input-inner {
        padding-block: $kendo-input-padding-y;
        padding-inline: $kendo-input-padding-x;
        width: 100%;
        border: 0;
        outline: 0;
        color: inherit;
        background: none;
        font: inherit;
        flex: 1;
        position: relative;
        z-index: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-appearance: none;

        // Placeholder text
        &::placeholder {
            color: $kendo-input-placeholder-text;
            opacity: $kendo-input-placeholder-opacity;
            user-select: none;
        }

        // Invalid
        &:invalid {
            box-shadow: none;
        }
    }
    span.k-input-inner {
        white-space: nowrap;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }
    textarea.k-input-inner {
        margin: 0;
    }


    // Input value
    .k-input-value-icon {
        flex: none;
    }
    .k-input-value-text {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .k-input-value-text::before {
        content: "\200b";
        width: 0px;
        overflow: hidden;
        flex: none;
        display: inline-block;
        vertical-align: top;
    }


    // Input multiple values
    .k-input-values {
        min-width: 0px;
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        cursor: text;
    }
    .k-input-values .k-chip-list {
        display: contents;
    }


    // Icon picker
    .k-icon-picker {
        .k-input-inner {
            padding: $kendo-input-padding-y;
            // TODO we need better way
            // width: $kendo-input-inner-calc-height;
            // height: $kendo-input-inner-calc-height;
            justify-content: center;
        }
    }


    // Input prefix and suffix
    .k-input-prefix,
    .k-input-suffix {
        border-color: inherit;
        display: flex;
        align-items: center;
        flex: none;

        > * {
            flex-shrink: 0;
            border: none;
        }

        &-vertical {
            flex-flow: column wrap;
        }

        &-horizontal {
            flex-flow: row wrap;
        }
    }


    // Input separator
    .k-input-separator {
        margin: 0;
        border-style: solid;
        border-color: inherit;
        border-width: 0 0 0 1px;
        height: $kendo-icon-size;
        align-self: center;

        &-horizontal {
            height: auto;
            margin-inline: $kendo-input-md-padding-y;
            align-self: stretch;
            border-width: 1px 0 0;
        }

        &-vertical {
            height: auto;
            margin-block: $kendo-input-md-padding-y;
            align-self: stretch;
            border-width: 0 0 0 1px;
        }
    }


    // Input with icon styles
    .k-input-icon,
    .k-input-validation-icon,
    .k-input-loading-icon {
        flex: none;
        align-self: center;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        box-sizing: content-box;
    }

    .k-input-loading-icon {
        width: 1em;
        height: 1em;
        font-size: $kendo-icon-size;
    }

    // Input with SVG icon
    .k-input-icon,
    .k-input-validation-icon,
    .k-input-loading-icon {
        &.k-svg-icon > svg,
        &.k-icon-md > svg {
            width: $kendo-icon-size-md;
            height: $kendo-icon-size-md;
        }

        &.k-icon-xs > svg {
            width: $kendo-icon-size-xs;
            height: $kendo-icon-size-xs;
        }

        &.k-icon-sm > svg {
            width: $kendo-icon-size-sm;
            height: $kendo-icon-size-sm;
        }

        &.k-icon-lg > svg {
            width: $kendo-icon-size-lg;
            height: $kendo-icon-size-lg;
        }

        &.k-icon-xl > svg {
            width: $kendo-icon-size-xl;
            height: $kendo-icon-size-xl;
        }

        &.k-icon-xxl > svg {
            width: $kendo-icon-size-xxl;
            height: $kendo-icon-size-xxl;
        }

        &.k-icon-xxxl > svg {
            width: $kendo-icon-size-xxxl;
            height: $kendo-icon-size-xxxl;
        }
    }


    // Clear value
    .k-clear-value {
        outline: 0;
        color: $kendo-input-clear-value-text;
        flex: none;
        align-self: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: $kendo-input-clear-value-opacity;
    }
    .k-clear-value:hover,
    .k-clear-value.k-hover {
        color: $kendo-input-clear-value-hover-text;
        opacity: $kendo-input-clear-value-hover-opacity;
    }
    .k-clear-value:focus-visible {
        outline: 1px dotted;
        outline-offset: -1px;
    }


    // Input button
    .k-input-button {
        width: if( $kendo-use-input-button-width, $kendo-input-button-width, auto );
        border-width: 0;
        border-inline-start-width: $kendo-input-button-border-width;
        flex: none;
        aspect-ratio: auto;
        box-shadow: none;

        > .k-button-icon {
            min-width: auto !important; // stylelint-disable-line declaration-no-important
            // min-height: auto !important; // stylelint-disable-line declaration-no-important
        }

        &:focus {
            box-shadow: none;
        }
    }
    .k-picker .k-input-button {
        color: inherit;
        background: none;
        border-color: transparent;
    }


    // Input spinner
    .k-input-spinner {
        width: if( $kendo-use-input-spinner-width, $kendo-input-spinner-width, auto );
        flex: none;
        display: flex;
        flex-flow: column nowrap;

        .k-spinner-increase,
        .k-spinner-decrease {
            border-width: 0;
            border-inline-start-width: $kendo-input-button-border-width;
            flex: 1 1 50%;
            box-shadow: none;
            position: relative;
            aspect-ratio: auto;

            .k-button-icon {
                margin-block: -1em;
                margin-inline: 0;
                min-width: auto !important; // stylelint-disable-line declaration-no-important
                min-height: auto !important; // stylelint-disable-line declaration-no-important
            }
        }
        .k-spinner-increase .k-icon {
            bottom: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
        }
        .k-spinner-decrease .k-icon {
            top: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
        }
    }


    // Searchbar
    .k-searchbar {
        flex: 1 1 auto;
        display: flex;
        flex-flow: row nowrap;
    }


    // Legacy wrappers
    .k-picker-wrap,
    .k-dropdown-wrap,
    .k-dateinput-wrap,
    .k-multiselect-wrap,
    .k-numeric-wrap {
        width: 100%;
        border-width: 0;
        border-color: inherit;
        box-sizing: border-box;
        flex: 1 1 auto;
        display: flex;
        flex-flow: row nowrap;
        overflow: hidden;
        position: relative;
    }


    // Fill mode
    .k-input-flat,
    .k-picker-flat {
        @include border-bottom-radius( 0 !important ); // stylelint-disable-line declaration-no-important
        border-width: $kendo-input-border-width 0;
        border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
        background-image: none !important; // stylelint-disable-line declaration-no-important
    }

    .k-input-outline {
        background: none !important; // stylelint-disable-line declaration-no-important
    }


    // Sizing
    @each $size, $size-props in $kendo-input-sizes {
        $_padding-x: k-map-get( $size-props, padding-x );
        $_padding-y: k-map-get( $size-props, padding-y );
        $_font-size: k-map-get( $size-props, font-size );
        $_line-height: k-map-get( $size-props, line-height );
        $_button-padding-x: k-map-get( $size-props, button-padding-x );
        $_button-padding-y: k-map-get( $size-props, button-padding-y );

        .k-input-#{$size},
        .k-picker-#{$size} {
            font-size: $_font-size;
            line-height: $_line-height;

            .k-input-values {
                padding: calc( #{$_padding-y} /2 );
                gap: calc( #{$_padding-y} / 2 );
            }
            .k-input-values > .k-searchbar,
            .k-input-values > .k-input-inner {
                margin: calc( calc( #{$_padding-y} / 2 ) * -1 );
            }

            .k-input-inner {
                padding-block: $_padding-y;
                padding-inline: $_padding-x;
            }

            .k-input-button,
            .k-spinner-increase,
            .k-spinner-decrease {
                padding-block: $_button-padding-y;
                padding-inline: $_button-padding-x;
            }

            .k-input-icon,
            .k-input-validation-icon,
            .k-input-loading-icon,
            .k-clear-value,
            .k-input-prefix > .k-icon,
            .k-input-prefix > .k-input-prefix-text,
            .k-input-suffix > .k-icon,
            .k-input-suffix > .k-input-suffix-text {
                padding-block: $_padding-y;
                padding-inline: $_padding-y;
                box-sizing: content-box;
            }

            .k-input-separator {
                &-horizontal {
                    margin-inline: $_padding-y;
                }

                &-vertical {
                    margin-block: $_padding-y;
                }
            }

            &.k-icon-picker .k-input-inner {
                width: calc( ( #{ $_line-height} * 1em ) );
                height: calc( ( #{ $_line-height} * 1em ) );
                padding: $_padding-y;
                box-sizing: content-box;
            }
        }
        .k-dropdown-operator.k-picker-#{$size} {
            .k-input-button {
                padding: $_padding-y;
            }
        }
        select.k-picker-#{$size} {
            padding-block: $_padding-y;
            padding-inline: $_padding-x;
        }
    }


    // Angular specific
    .k-input > kendo-popup,
    .k-picker > kendo-popup {
        position: fixed;
    }




    // This is needed for the textbox container to capture browser autofill
    @keyframes autoFillStart { // stylelint-disable-line
        from {}
        to {}
    }
    @keyframes autoFillEnd { // stylelint-disable-line
        from {}
        to {}
    }

    // Generic class for autofill animations
    .k-autofill:-webkit-autofill {
        animation-name: autoFillStart;
    }
    .k-autofill:not(:-webkit-autofill) {
        animation-name: autoFillEnd;
    }


    .k-input:-webkit-autofill {
        animation-name: autoFillStart;
    }
    .k-input:not(:-webkit-autofill) {
        animation-name: autoFillEnd;
    }

}


@mixin kendo-input--layout() {
    @include kendo-input--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/input/_theme.scss
@mixin kendo-input--theme-base() {

    // Solid input
    .k-input-solid {
        @include fill(
            $kendo-input-text,
            $kendo-input-bg,
            $kendo-input-border
        );

        // Hover
        &:hover,
        &.k-hover {
            @include fill(
                $kendo-input-hover-text,
                $kendo-input-hover-bg,
                $kendo-input-hover-border
            );
            @include box-shadow( $kendo-input-hover-shadow );
        }

        // Focus
        &:focus,
        &.k-focus {
            @include fill (
                $kendo-input-focus-text,
                $kendo-input-focus-bg,
                $kendo-input-focus-border
            );
            @include focus-indicator( $kendo-input-focus-shadow );
        }
        &:focus-within {
            @include fill (
                $kendo-input-focus-text,
                $kendo-input-focus-bg,
                $kendo-input-focus-border
            );
            @include focus-indicator( $kendo-input-focus-shadow );
        }

        // Disabled
        &:disabled,
        &[disabled],
        &.k-disabled {
            @include fill(
                $kendo-input-disabled-text,
                $kendo-input-disabled-bg,
                $kendo-input-disabled-border,
                $kendo-input-disabled-gradient
            );
            @include box-shadow( $kendo-input-disabled-shadow );
        }

        // Invalid
        &.k-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            @include fill( $border: $kendo-input-invalid-border );

            .k-input-validation-icon {
                color: $kendo-invalid-text;
            }

            &:focus,
            &.k-focus {
                @include focus-indicator( $kendo-input-invalid-shadow );
            }
            &:focus-within {
                @include focus-indicator( $kendo-input-invalid-shadow );
            }
        }

        // Prefix & Suffix
        .k-input-prefix {
            color: $kendo-input-prefix-text;
        }

        .k-input-suffix {
            color: $kendo-input-suffix-text;
        }

        .k-input-separator {
            border-color: $kendo-input-separator-text;
        }
    }


    // Solid picker
    .k-picker-solid {
        @include fill(
            $kendo-picker-text,
            $kendo-picker-bg,
            $kendo-picker-border,
            $kendo-picker-gradient
        );

        // Hover
        &:hover,
        &.k-hover {
            @include fill(
                $kendo-picker-hover-text,
                $kendo-picker-hover-bg,
                $kendo-picker-hover-border,
                $kendo-picker-hover-gradient
            );
            @include box-shadow( $kendo-picker-hover-shadow );
        }

        // Focus
        &:focus,
        &.k-focus {
            @include fill (
                $kendo-picker-focus-text,
                $kendo-picker-focus-bg,
                $kendo-picker-focus-border,
                $kendo-picker-focus-gradient
            );
            @include focus-indicator( $kendo-picker-focus-shadow );
        }
        &:focus-within {
            @include fill (
                $kendo-picker-focus-text,
                $kendo-picker-focus-bg,
                $kendo-picker-focus-border,
                $kendo-picker-focus-gradient
            );
            @include focus-indicator( $kendo-picker-focus-shadow );
        }

        // Disabled
        &:disabled,
        &[disabled],
        &.k-disabled {
            @include fill(
                $kendo-picker-disabled-text,
                $kendo-picker-disabled-bg,
                $kendo-picker-disabled-border,
                $kendo-picker-disabled-gradient
            );
            @include box-shadow( $kendo-picker-disabled-shadow );
        }

        // Invalid
        &.k-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            @include fill( $border: $kendo-input-invalid-border );

            .k-input-validation-icon {
                color: $kendo-invalid-text;
            }

            &:focus,
            &.k-focus {
                @include focus-indicator( $kendo-input-invalid-shadow );
            }
            &:focus-within {
                @include focus-indicator( $kendo-input-invalid-shadow );
            }
        }
    }


    // Outline input
    .k-input-outline {
        @include fill (
            $kendo-input-outline-text,
            $kendo-input-outline-bg,
            $kendo-input-outline-border
        );

        & > .k-input-button {
            border-color: inherit;
        }

        & > .k-input-spinner {
            border-color: inherit;

            & > .k-spinner-increase,
            & > .k-spinner-decrease {
                border-color: inherit;
           }
        }

        // Hover
        &:hover,
        &.k-hover {
            @include fill (
                $kendo-input-outline-hover-text,
                $kendo-input-outline-hover-bg,
                $kendo-input-outline-hover-border
            );
        }

        // Focus
        &:focus,
        &.k-focus {
            @include fill (
                $kendo-input-outline-focus-text,
                $kendo-input-outline-focus-bg,
                $kendo-input-outline-focus-border
             );
            @include focus-indicator( $kendo-input-outline-focus-shadow );
        }
        &:focus-within {
            @include fill (
                $kendo-input-outline-focus-text,
                $kendo-input-outline-focus-bg,
                $kendo-input-outline-focus-border
             );
            @include focus-indicator( $kendo-input-outline-focus-shadow );
        }

        // Disabled
        &:disabled,
        &[disabled],
        &.k-disabled {
            @include fill(
                $kendo-input-disabled-text,
                $kendo-input-disabled-bg,
                $kendo-input-disabled-border,
                $kendo-input-disabled-gradient
            );
            @include box-shadow( $kendo-input-disabled-shadow );
        }

        // Invalid
        &.k-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            @include fill( $border: $kendo-input-invalid-border );

            .k-input-validation-icon {
                color: $kendo-invalid-text;
            }

            &:focus,
            &.k-focus {
                @include focus-indicator( $kendo-input-invalid-shadow );
            }
            &:focus-within {
                @include focus-indicator( $kendo-input-invalid-shadow );
            }
        }

        // Prefix & Suffix
        .k-input-prefix {
            color: $kendo-input-prefix-text;
        }

        .k-input-suffix {
            color: $kendo-input-suffix-text;
        }

        .k-input-separator {
            border-color: $kendo-input-separator-text;
        }
    }


    // Outline picker
    .k-picker-outline {
        @include fill (
            $kendo-picker-outline-text,
            $kendo-picker-outline-bg,
            $kendo-picker-outline-border
        );

        // Hover
        &:hover,
        &.k-hover {
            @include fill (
                $kendo-picker-outline-hover-text,
                $kendo-picker-outline-hover-bg,
                $kendo-picker-outline-hover-border
            );
        }

        // Focus
        &:focus,
        &.k-focus {
            @include fill (
                $kendo-picker-outline-focus-text,
                $kendo-picker-outline-focus-bg,
                $kendo-picker-outline-focus-border
            );
            @include focus-indicator( $kendo-picker-outline-focus-shadow );
        }
        &:focus-within {
            @include fill (
                $kendo-picker-outline-focus-text,
                $kendo-picker-outline-focus-bg,
                $kendo-picker-outline-focus-border
            );
            @include focus-indicator( $kendo-picker-outline-focus-shadow );
        }

        &:focus:hover,
        &:focus.k-hover,
        &.k-focus:hover,
        &.k-focus.k-hover {
            @include fill (
                $kendo-picker-outline-hover-focus-text,
                $kendo-picker-outline-hover-focus-bg,
                $kendo-picker-outline-hover-focus-border
            );
        }

        // Disabled
        &:disabled,
        &[disabled],
        &.k-disabled {
            @include fill(
                $kendo-picker-disabled-text,
                $kendo-picker-disabled-bg,
                $kendo-picker-disabled-border,
                $kendo-picker-disabled-gradient
            );
            @include box-shadow( $kendo-picker-disabled-shadow );
        }

        // Invalid
        &.k-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            @include fill( $border: $kendo-input-invalid-border );

            .k-input-validation-icon {
                color: $kendo-invalid-text;
            }

            &:focus,
            &.k-focus {
                @include focus-indicator( $kendo-input-invalid-shadow );
            }
            &:focus-within {
                @include focus-indicator( $kendo-input-invalid-shadow );
            }
        }
    }


    // Flat input
    .k-input-flat {
        @include fill (
            $kendo-input-flat-text,
            $kendo-input-flat-bg,
            $kendo-input-flat-border
        );

        // Hover
        &:hover,
        &.k-hover {
            @include fill (
                $kendo-input-flat-hover-text,
                $kendo-input-flat-hover-bg,
                $kendo-input-flat-hover-border
            );
        }

        // Focus
        &:focus,
        &.k-focus {
            @include fill (
                $kendo-input-flat-focus-text,
                $kendo-input-flat-focus-bg,
                $kendo-input-flat-focus-border
            );
            @include focus-indicator( $kendo-input-flat-focus-shadow );
        }
        &:focus-within {
            @include fill (
                $kendo-input-flat-focus-text,
                $kendo-input-flat-focus-bg,
                $kendo-input-flat-focus-border
            );
            @include focus-indicator( $kendo-input-flat-focus-shadow );
        }

        // Disabled
        &:disabled,
        &[disabled],
        &.k-disabled {
            @include fill(
                $kendo-input-disabled-text,
                $kendo-input-disabled-bg,
                $kendo-input-disabled-border,
                $kendo-input-disabled-gradient
            );
            @include box-shadow( $kendo-input-disabled-shadow );
        }

        // Invalid
        &.k-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            @include fill( $border: $kendo-input-invalid-border );

            .k-input-validation-icon {
                color: $kendo-invalid-text;
            }

            &:focus,
            &.k-focus {
                @include focus-indicator( $kendo-input-invalid-shadow );
            }
            &:focus-within {
                @include focus-indicator( $kendo-input-invalid-shadow );
            }
        }

        // Prefix & Suffix
        .k-input-prefix {
            color: $kendo-input-prefix-text;
        }

        .k-input-suffix {
            color: $kendo-input-suffix-text;
        }

        .k-input-separator {
            border-color: $kendo-input-separator-text;
        }
    }


    // Flat picker
    .k-picker-flat {
        @include fill (
            $kendo-picker-flat-text,
            $kendo-picker-flat-bg,
            $kendo-picker-flat-border
        );

        // Hover
        &:hover,
        &.k-hover {
            @include fill (
                $kendo-picker-flat-hover-text,
                $kendo-picker-flat-hover-bg,
                $kendo-picker-flat-hover-border
            );
        }

        // Focus
        &:focus,
        &.k-focus {
            @include fill (
                $kendo-picker-flat-focus-text,
                $kendo-picker-flat-focus-bg,
                $kendo-picker-flat-focus-border
            );
            @include focus-indicator( $kendo-picker-flat-focus-shadow );
        }
        &:focus-within {
            @include fill (
                $kendo-picker-flat-focus-text,
                $kendo-picker-flat-focus-bg,
                $kendo-picker-flat-focus-border
            );
            @include focus-indicator( $kendo-picker-flat-focus-shadow );
        }

        &:focus:hover,
        &:focus.k-hover,
        &.k-focus:hover,
        &.k-focus.k-hover {
            @include fill (
                $kendo-picker-flat-hover-focus-text,
                $kendo-picker-flat-hover-focus-bg,
                $kendo-picker-flat-hover-focus-border
            );
        }

        // Disabled
        &:disabled,
        &[disabled],
        &.k-disabled {
            @include fill(
                $kendo-picker-disabled-text,
                $kendo-picker-disabled-bg,
                $kendo-picker-disabled-border,
                $kendo-picker-disabled-gradient
            );
            @include box-shadow( $kendo-picker-disabled-shadow );
        }

        // Invalid
        &.k-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            @include fill( $border: $kendo-input-invalid-border );

            .k-input-validation-icon {
                color: $kendo-invalid-text;
            }

            &:focus,
            &.k-focus {
                @include focus-indicator( $kendo-input-invalid-shadow );
            }
            &:focus-within {
                @include focus-indicator( $kendo-input-invalid-shadow );
            }
        }
    }

}


@mixin kendo-input--theme() {
    @include kendo-input--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-input--styles() {
    @include module-render( "input" ) {
        @include kendo-input--layout();
        @include kendo-input--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-input--styles();
}

// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/floating-label/_variables.scss
// Floating label

/// The transformation scale of the Floating Label.
/// @group floating-label
$kendo-floating-label-scale: 1 !default;
/// The font size of the Floating Label.
/// @group floating-label
$kendo-floating-label-font-size: $kendo-input-font-size !default;
/// The maximum width of the Floating Label.
/// @group floating-label
$kendo-floating-label-max-width: 90% !default;
/// The line height of the Floating Label.
/// @group floating-label
$kendo-floating-label-line-height: $kendo-input-line-height !default;
/// The height of the Floating Label.
/// @group floating-label
$kendo-floating-label-height: calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} ) !default;
/// The horizontal offset of the Floating Label.
/// @group floating-label
$kendo-floating-label-offset-x: calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) !default;
/// The vertical offset of the Floating Label.
/// @group floating-label
$kendo-floating-label-offset-y: calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} ) !default;

/// The transformation scale of the focused Floating Label.
/// @group floating-label
$kendo-floating-label-focus-scale: 1 !default;
/// The horizontal offset of the focused Floating Label.
/// @group floating-label
$kendo-floating-label-focus-offset-x: 0 !default;
/// The vertical offset of the focused Floating Label.
/// @group floating-label
$kendo-floating-label-focus-offset-y: 0 !default;

/// The transition of the Floating Label.
/// @group floating-label
$kendo-floating-label-transition: .2s ease-out !default;

/// The background color of the Floating Label.
/// @group floating-label
$kendo-floating-label-bg: null !default;
/// The text color of the Floating Label.
/// @group floating-label
$kendo-floating-label-text: null !default;

/// The background color of the focused Floating Label.
/// @group floating-label
$kendo-floating-label-focus-bg: null !default;
/// The text color of the focused Floating Label.
/// @group floating-label
$kendo-floating-label-focus-text: null !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/floating-label/_layout.scss
@mixin kendo-floating-label--layout-base() {


    // Floating label
    .k-floating-label-container {
        padding-top: $kendo-floating-label-height;
        box-sizing: border-box;
        display: inline-flex;
        vertical-align: middle;
        position: relative;
        flex-direction: column;
        justify-content: stretch;

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

        > .k-floating-label {
            max-width: $kendo-floating-label-max-width;
            font-size: $kendo-floating-label-font-size;
            line-height: $kendo-floating-label-line-height;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: absolute;
            top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
            left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
            overflow: hidden;
            cursor: text;
            transform-origin: left center;
            transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, left $kendo-floating-label-transition;
        }


        &.k-empty {
            > .k-floating-label {
                top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
                left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
                transform: scale( $kendo-floating-label-scale );
                pointer-events: none;
            }
        }

        > .k-floating-label,
        &.k-focus > .k-floating-label {
            top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
            left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
            transform: scale( $kendo-floating-label-focus-scale );
        }
        &:focus-within > .k-floating-label {
            top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
            left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
            transform: scale( $kendo-floating-label-focus-scale );
        }

        &.k-empty:not(.k-focus):not(:focus-within) ::placeholder {
            color: transparent;
        }

        [dir="rtl"] &,
        .k-rtl &,
        &[dir="rtl"] {

            > .k-floating-label {
                transform-origin: right center;
                transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, right $kendo-floating-label-transition;
            }

            &.k-empty {
                > .k-floating-label {
                    left: auto;
                    right: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
                }
            }

            > .k-floating-label,
            &.k-focus > .k-floating-label {
                left: auto;
                right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
            }
            &:focus-within > .k-floating-label {
                left: auto;
                right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
            }
        }
    }

}


@mixin kendo-floating-label--layout() {
    @include kendo-floating-label--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/floating-label/_theme.scss
@mixin kendo-floating-label--theme-base() {

    // Floating label
    .k-floating-label-container {

        > .k-floating-label {
            @include fill(
                $color: $kendo-floating-label-text,
                $bg: $kendo-floating-label-bg
            );
        }

        &.k-focus > .k-floating-label {
            @include fill(
                $color: $kendo-floating-label-focus-text,
                $bg: $kendo-floating-label-focus-bg
            );
        }

        &.k-invalid > .k-floating-label,
        &.ng-invalid.ng-touched > .k-floating-label,
        &.ng-invalid.ng-dirty > .k-floating-label {
            @include fill ( $color: $kendo-invalid-text );
        }
    }

}


@mixin kendo-floating-label--theme() {
    @include kendo-floating-label--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-floating-label--styles() {
    @include module-render( "floating-label" ) {
        @include kendo-floating-label--layout();
        @include kendo-floating-label--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-floating-label--styles();
}

// #endregion


// Native forms
// #region @import "./button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./split-button/_index.scss"; -> scss/split-button/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "split-button",
    dependencies: (
        "button",
        "icon",
        "menu",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../menu/_index.scss"; -> scss/menu/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/split-button/_variables.scss
// Split-button

/// The focus shadow of the SplitButton.
/// @group split-button
$kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;

/// The horizontal padding of the arrow Button.
/// @group split-button
$kendo-split-button-arrow-padding-x: $kendo-button-padding-y !default;
/// The horizontal padding of the small arrow Button.
/// @group split-button
$kendo-split-button-sm-arrow-padding-x: $kendo-button-sm-padding-y !default;
/// The horizontal padding of the medium arrow Button.
/// @group split-button
$kendo-split-button-md-arrow-padding-x: $kendo-button-md-padding-y !default;
/// The horizontal padding of the large arrow Button.
/// @group split-button
$kendo-split-button-lg-arrow-padding-x: $kendo-button-lg-padding-y !default;

/// The vertical padding of the arrow Button.
/// @group split-button
$kendo-split-button-arrow-padding-y: $kendo-button-padding-y !default;
/// The vertical padding of the small arrow Button.
/// @group split-button
$kendo-split-button-sm-arrow-padding-y: $kendo-button-sm-padding-y !default;
/// The vertical padding of the medium arrow Button.
/// @group split-button
$kendo-split-button-md-arrow-padding-y: $kendo-button-md-padding-y !default;
/// The vertical padding of the large arrow Button.
/// @group split-button
$kendo-split-button-lg-arrow-padding-y: $kendo-button-lg-padding-y !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/split-button/_layout.scss
@mixin kendo-split-button--layout-base() {

    // Split button
    .k-split-button {}

    // Split button arrow
    .k-split-button .k-split-button-arrow {
        padding-block: $kendo-split-button-arrow-padding-y;
        padding-inline: $kendo-split-button-arrow-padding-x;
        width: auto;
        aspect-ratio: auto;
        flex: none;

        &.k-button-sm {
            padding-block: $kendo-split-button-sm-arrow-padding-y;
            padding-inline: $kendo-split-button-sm-arrow-padding-x;
        }

        &.k-button-md {
            padding-block: $kendo-split-button-md-arrow-padding-y;
            padding-inline: $kendo-split-button-md-arrow-padding-x;
        }

        &.k-button-lg {
            padding-block: $kendo-split-button-lg-arrow-padding-y;
            padding-inline: $kendo-split-button-lg-arrow-padding-x;
        }

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

}


@mixin kendo-split-button--layout() {
    @include kendo-split-button--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/split-button/_theme.scss
@mixin kendo-split-button--theme-base() {

    // Split button
    .k-split-button:focus,
    .k-split-button.k-focus {
        @include focus-indicator( $kendo-split-button-focus-shadow );
    }

}


@mixin kendo-split-button--theme() {
    @include kendo-split-button--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-split-button--styles() {
    @include module-render( "split-button" ) {
        @include kendo-split-button--layout();
        @include kendo-split-button--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-split-button--styles();
}

// #endregion
// #region @import "./menu-button/_index.scss"; -> scss/menu-button/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "menu-button",
    dependencies: (
        "button",
        "icon",
        "menu",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../menu/_index.scss"; -> scss/menu/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/menu-button/_variables.scss
// Menu-button

/// The horizontal padding of the button arrow in the Menu Button..
/// @group menu-button
$kendo-menu-button-arrow-padding-x: $kendo-button-padding-y !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/menu-button/_layout.scss
@mixin kendo-menu-button--layout-base() {

    // Menu button
    .k-menu-button,
    .k-dropdown-button {
        aspect-ratio: auto;
        outline: 0;
        display: inline-flex;
        flex-flow: row nowrap;
        vertical-align: middle;

        > .k-button-arrow {
            margin-inline-start: calc( #{$kendo-menu-button-arrow-padding-x} * -1 );
            margin-inline-end: calc( #{$kendo-button-padding-x} * -1 );
            padding-left: $kendo-menu-button-arrow-padding-x;
            padding-right: $kendo-menu-button-arrow-padding-x;
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        &.k-icon-button > .k-button-arrow {
            margin-inline-start: 0;
            margin-inline-end: calc( #{$kendo-button-padding-y} * -1 );
        }
    }

}


@mixin kendo-menu-button--layout() {
    @include kendo-menu-button--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/menu-button/_theme.scss
@mixin kendo-menu-button--theme-base() {

    // Menu button
    .k-menu-button {}

}


@mixin kendo-menu-button--theme() {
    @include kendo-menu-button--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-menu-button--styles() {
    @include module-render( "menu-button" ) {
        @include kendo-menu-button--layout();
        @include kendo-menu-button--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-menu-button--styles();
}

// #endregion
// #region @import "./input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./textbox/_index.scss"; -> scss/textbox/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "textbox",
    dependencies: (
        "icon",
        "input",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../floating-label/_index.scss"; -> scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/textbox/_variables.scss
// Textbox

// #endregion
// #region @import "./_layout.scss"; -> scss/textbox/_layout.scss
@mixin kendo-textbox--layout-base() {

    // Textbox
    .k-textbox {}

}


@mixin kendo-textbox--layout() {
    @include kendo-textbox--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/textbox/_theme.scss
@mixin kendo-textbox--theme-base() {

    // Textbox
    .k-textbox {}

}


@mixin kendo-textbox--theme() {
    @include kendo-textbox--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-textbox--styles() {
    @include module-render( "textbox" ) {
        @include kendo-textbox--layout();
        @include kendo-textbox--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-textbox--styles();
}

// #endregion
// #region @import "./textarea/_index.scss"; -> scss/textarea/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "textarea",
    dependencies: (
        "icon",
        "input",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../floating-label/_index.scss"; -> scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/textarea/_variables.scss
// Textarea

// #endregion
// #region @import "./_layout.scss"; -> scss/textarea/_layout.scss
@mixin kendo-textarea--layout-base() {

    // Textarea
    .k-textarea:has(.k-input-inner[style*="width"]) {
        width: max-content;
    }

}


@mixin kendo-textarea--layout() {
    @include kendo-textarea--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/textarea/_theme.scss
@mixin kendo-textarea--theme-base() {

    // Textarea
    .k-textarea {}

}


@mixin kendo-textarea--theme() {
    @include kendo-textarea--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-textarea--styles() {
    @include module-render( "textarea" ) {
        @include kendo-textarea--layout();
        @include kendo-textarea--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-textarea--styles();
}

// #endregion
// #region @import "./checkbox/_index.scss"; -> scss/checkbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./listbox/_index.scss"; -> scss/listbox/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "listbox",
    dependencies: (
        "button",
        "icon",
        "list",
        "popup",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/listbox/_variables.scss
// ListBox

/// The spacing between the ListBox elements.
/// @group listbox
$kendo-listbox-spacing: k-spacing(2) !default;
/// The spacing between the ListBox buttons.
/// @group listbox
$kendo-listbox-button-spacing: k-spacing(2) !default;
/// The width of the ListBox.
/// @group listbox
$kendo-listbox-width: 10em !default;
/// The height of the ListBox.
/// @group listbox
$kendo-listbox-default-height: 200px !default;
/// The width of the border around the ListBox.
/// @group listbox
$kendo-listbox-border-width: 1px !default;
/// The font family of the ListBox.
/// @group listbox
$kendo-listbox-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the ListBox.
/// @group listbox
$kendo-listbox-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the ListBox.
/// @group listbox
$kendo-listbox-line-height: var( --kendo-line-height, normal ) !default;

/// The text color of the ListBox.
/// @group listbox
$kendo-listbox-text: $kendo-component-text !default;
/// The background color of the ListBox.
/// @group listbox
$kendo-listbox-bg: $kendo-component-bg !default;
/// The border color of the ListBox.
/// @group listbox
$kendo-listbox-border: $kendo-component-border !default;

/// The inline padding of the ListBox item.
/// @group listbox
$kendo-listbox-item-padding-x: null !default;
/// The block padding of the ListBox item.
/// @group listbox
$kendo-listbox-item-padding-y: null !default;

/// The width of the ListBox drop hint.
/// @group listbox
$kendo-listbox-drop-hint-width: 1px !default;
/// The width of the border around the ListBox drop hint.
/// @group listbox
$kendo-listbox-drop-hint-border-width: null !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/listbox/_layout.scss
@mixin kendo-listbox--layout-base() {

    .k-listbox {
        width: $kendo-listbox-width;
        height: $kendo-listbox-default-height;
        border-width: 0;
        outline: 0;
        font-family: $kendo-listbox-font-family;
        font-size: $kendo-listbox-font-size;
        line-height: $kendo-listbox-line-height;
        vertical-align: top;
        background-color: transparent;
        display: inline-flex;
        gap: $kendo-listbox-spacing;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        .k-listbox-actions {
            display: flex;
            gap: $kendo-listbox-button-spacing;
        }

        &.k-listbox-actions-left,
        &.k-listbox-actions-right {
            flex-direction: row;

            .k-listbox-actions {
                flex-direction: column;
            }
        }

        &.k-listbox-actions-right {
            flex-direction: row-reverse;
        }

        &.k-listbox-actions-top,
        &.k-listbox-actions-bottom {
            flex-direction: column;

            .k-listbox-actions {
                flex-direction: row;
            }
        }

        &.k-listbox-actions-bottom {
            flex-direction: column-reverse;
        }

        .k-list-scroller {
            width: 100%;
            min-height: 0;
            height: inherit;
            border-width: $kendo-listbox-border-width;
            border-style: solid;
            box-sizing: border-box;
            display: flex;
            flex-flow: column nowrap;

            .k-list-scroller {
                border-width: 0;
            }

            .k-list {
                height: inherit;
                background: transparent;
            }
        }

        .k-drop-hint {
            border-top-width: $kendo-listbox-drop-hint-width;
            border-top-style: solid;
        }

        .k-ghost {
            opacity: .5;
        }
    }

    .k-item {
        cursor: default;
    }

}


@mixin kendo-listbox--layout() {
    @include kendo-listbox--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/listbox/_theme.scss
@mixin kendo-listbox--theme-base() {

    // Listbox
    .k-listbox {
        .k-list-scroller {
            @include fill(
                $kendo-listbox-text,
                $kendo-listbox-bg,
                $kendo-listbox-border
            );
        }
        .k-drop-hint {
            border-top-color: $kendo-color-primary;
        }
    }

}


@mixin kendo-listbox--theme() {
    @include kendo-listbox--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-listbox--styles() {
    @include module-render( "listbox" ) {
        @include kendo-listbox--layout();
        @include kendo-listbox--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-listbox--styles();
}

// #endregion
// #region @import "./progressbar/_index.scss"; -> scss/progressbar/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "progressbar",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/progressbar/_variables.scss
// ProgressBar

/// The height of the ProgressBar.
/// @group progressbar
$kendo-progressbar-height: 22px !default;
/// The horizontal width of the ProgressBar.
/// @group progressbar
$kendo-progressbar-horizontal-width: 100% !default;
/// The animation timing of the ProgressBar.
/// @group progressbar
$kendo-progressbar-animation-timing: 1s linear infinite !default;
/// The width of the border around the ProgressBar.
/// @group progressbar
$kendo-progressbar-border-width: 0px !default;
/// The font family of the ProgressBar.
/// @group progressbar
$kendo-progressbar-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the ProgressBar.
/// @group progressbar
$kendo-progressbar-font-size: var( --kendo-font-size-sm, inherit ) !default;
/// The line height of the ProgressBar.
/// @group progressbar
$kendo-progressbar-line-height: var( --kendo-line-height-xs, normal ) !default;

/// The background color of the ProgressBar.
/// @group progressbar
$kendo-progressbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 )) !default;
/// The text color of the ProgressBar.
/// @group progressbar
$kendo-progressbar-text: $kendo-component-text !default;
/// The border color of the ProgressBar.
/// @group progressbar
$kendo-progressbar-border: $kendo-component-border !default;
/// The background gradient of the ProgressBar.
/// @group progressbar
$kendo-progressbar-gradient: null !default;

/// The progress background color of the ProgressBar.
/// @group progressbar
$kendo-progressbar-value-bg: $kendo-color-primary !default;
/// The progress text color of the ProgressBar.
/// @group progressbar
$kendo-progressbar-value-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg )) !default;
/// The progress border color of the ProgressBar.
/// @group progressbar
$kendo-progressbar-value-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg )) !default;
/// The progress background gradient of the ProgressBar.
/// @group progressbar
$kendo-progressbar-value-gradient: null !default;

/// The background color of the indeterminate ProgressBar.
/// @group progressbar
$kendo-progressbar-indeterminate-bg: $kendo-progressbar-bg !default;
/// The text color of the indeterminate ProgressBar.
/// @group progressbar
$kendo-progressbar-indeterminate-text: $kendo-progressbar-text !default;
/// The border color of the indeterminate ProgressBar.
/// @group progressbar
$kendo-progressbar-indeterminate-border: $kendo-progressbar-border !default;
/// The background gradient of the indeterminate ProgressBar.
/// @group progressbar
$kendo-progressbar-indeterminate-gradient: null !default;

/// The border color of the chunk ProgressBar.
/// @group progressbar
$kendo-progressbar-chunk-border: $kendo-body-bg !default;

// Circular Progressbar
/// The arc stroke color of the circular ProgressBar.
/// @group progressbar
$kendo-circular-progressbar-arc-stroke: $kendo-color-primary !default;
/// The scale stroke background color of the circular ProgressBar.
/// @group progressbar
$kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/progressbar/_layout.scss
@mixin kendo-progressbar--layout-base() {

    // Base
    .k-progressbar {
        @include border-radius( k-border-radius(md) );
        --kendo-progressbar-value: 0;
        border-width: $kendo-progressbar-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-progressbar-font-family;
        font-size: $kendo-progressbar-font-size;
        line-height: $kendo-progressbar-line-height;
        display: inline-grid;
        vertical-align: middle;
        position: relative;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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


        // Selection
        > .k-progressbar-value {
            border-width: 0;
            border-style: solid;
            display: flex;
            overflow: hidden;
            grid-column: 1 / -1;
            grid-row: 1 / -1;
        }


        // Chunks
        > .k-progressbar-chunks {
            border-width: inherit;
            border-style: inherit;
            white-space: nowrap;
            display: flex;
            align-items: stretch;
            flex: 1;
            gap: 1px;
            grid-column: 1 / -1;
            grid-row: 1 / -1;
        }
        .k-progressbar-chunk {
            display: block;
            border-width: 0;
            flex: 1;
        }

    }


    // Status
    .k-progress-status-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        grid-column: 1 / -1;
        grid-row: 1 / -1;

        &.k-progress-start { justify-content: flex-start; }
        &.k-progress-center { justify-content: center; }
        &.k-progress-end { justify-content: flex-end; }
    }
    .k-progress-status {
        padding-block: 0;
        padding-inline: k-spacing(2);
        min-width: 10px;
        text-align: center;
        display: inline-block;
        white-space: nowrap;
    }


    // Horizontal
    .k-progressbar-horizontal {
        width: $kendo-progressbar-horizontal-width;
        height: var( --kendo-progressbar-height, #{$kendo-progressbar-height} );
        grid-template-columns: 1fr;
        grid-template-rows: 100%;


        .k-progress-status-wrap {
            flex-direction: row;
        }

        > .k-progressbar-value {
            width: calc( var( --kendo-progressbar-value, 0 ) * 1% );
            flex-direction: row;

            > .k-progress-status-wrap {
                width: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) );
            }
        }


        // Chunks
        > .k-progressbar-chunks {
            flex-direction: row;
        }

        // Horizontal reverse
        &.k-progressbar-reverse {

            > .k-progressbar-value {
                flex-direction: row-reverse;
                justify-self: flex-end;
            }

            > .k-progressbar-chunks {
                flex-direction: row-reverse;
            }
        }
    }


    // Vertical
    .k-progressbar-vertical {
        width: var( --kendo-progressbar-height, #{$kendo-progressbar-height} );
        height: 27em;
        grid-template-columns: 100%;
        grid-template-rows: 1fr;


        .k-progress-status-wrap {
            flex-direction: column-reverse;
        }
        .k-progress-status {
            writing-mode: vertical-lr;
        }

        > .k-progressbar-value {
            height: calc( var( --kendo-progressbar-value, 0 ) * 1% );
            flex-direction: column-reverse;
            align-self: flex-end;
            align-items: flex-end;

            > .k-progress-status-wrap {
                height: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) );
            }
        }


        // Chunk
        > .k-progressbar-chunks {
            flex-direction: column-reverse;
        }

        // Vertical reverse
        &.k-progressbar-reverse {
            flex-direction: column;

            > .k-progressbar-value {
                flex-direction: column;
                align-self: flex-start;
            }

            > .k-progressbar-chunks {
                flex-direction: column;
            }
        }
    }


    // Indeterminate
    .k-progressbar-indeterminate {
        .k-progress-status-wrap,
        .k-progressbar-value,
        .k-progressbar-chunk {
            display: none;
        }
    }


    // Blazor specific
    .telerik-blazor.k-progressbar-horizontal {

        > .k-progressbar-value,
        > .k-progressbar-value > .k-progress-status-wrap {
            transition: width .1s ease-in-out;
        }
    }


    // RTL
    .k-rtl .k-progressbar,
    .k-progressbar[dir="rtl"] {
        direction: rtl;
    }


    // Circular progressbar
    .k-circular-progressbar {
        display: inline-block;
        text-align: start;
        position: relative;
    }

    .k-circular-progressbar-surface {
        height: 100%;

        & > div {
            width: 100%;
            height: 100%;
        }

        svg {
            width: 100%;
            height: 100%;
        }
    }

    .k-circular-progressbar-scale {
        fill: none;
    }

    .k-circular-progressbar-arc {
        transform-box: fill-box;
        transform-origin: center center;
        transform: rotate(-90deg);
        stroke-linecap: round;
        fill: none;
    }

    .k-circular-progressbar-label {
        position: absolute;
        text-align: center;
        padding: 0;
        margin: 0;
    }

}


@mixin kendo-progressbar--layout() {
    @include kendo-progressbar--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/progressbar/_theme.scss
@mixin kendo-progressbar--theme-base() {

    @keyframes kendo-progressbar-indeterminate-animation {
        from { background-position: 0 0; }
        to { background-position: $kendo-progressbar-height 0; }
    }

    .k-progressbar {
        @include fill( $kendo-progressbar-text, $kendo-progressbar-bg, $kendo-progressbar-border, $kendo-progressbar-gradient );

        .k-selected {
            @include fill( $kendo-progressbar-value-text, $kendo-progressbar-value-bg, $kendo-progressbar-value-border, $kendo-progressbar-value-gradient );
        }
    }

    // Chunk progressbar
    .k-chunk-progressbar {
        // TODO uncomment for 2023 R1
        // background-color: k-if-var( $progressbar-chunk-border, transparent );
        background-color: transparent;
    }
    .k-progressbar-chunk {
        background-color: $kendo-progressbar-bg;

        .k-selected {
            background-color: $kendo-progressbar-value-bg;
        }
    }

    .k-progressbar-indeterminate {
        @include fill( $kendo-progressbar-indeterminate-text, $kendo-progressbar-indeterminate-bg, $kendo-progressbar-indeterminate-border );
        @include striped-gradient( if($kendo-enable-color-system, color-mix(in srgb, k-color( base-emphasis ) 55%, transparent), k-color-shade($kendo-progressbar-indeterminate-bg)) );
        background-size: $kendo-progressbar-height $kendo-progressbar-height;
        animation: kendo-progressbar-indeterminate-animation $kendo-progressbar-animation-timing;
    }


    // Circular progressbar
    .k-circular-progressbar-scale {
        stroke: $kendo-circular-progressbar-scale-stroke;
    }

    .k-circular-progressbar-arc {
        stroke: $kendo-circular-progressbar-arc-stroke;
        transition: stroke .5s ease;
    }

}


@mixin kendo-progressbar--theme() {
    @include kendo-progressbar--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-progressbar--styles() {
    @include module-render( "progressbar" ) {
        @include kendo-progressbar--layout();
        @include kendo-progressbar--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-progressbar--styles();
}

// #endregion
// #region @import "./radio/_index.scss"; -> scss/radio/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "radio",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/radio/_variables.scss
// #region @import "../list/_variables.scss"; -> scss/list/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../checkbox/_variables.scss"; -> scss/checkbox/_variables.scss
// File already imported_once. Skipping output.
// #endregion


// Radio button

/// The border radius of the RadioButton.
/// @group radio
$kendo-radio-radius: 50% !default;
/// The border width of the RadioButton.
/// @group radio
$kendo-radio-border-width: 1px !default;

/// The size of a small RadioButton.
/// @group radio
$kendo-radio-sm-size: k-spacing(3) !default;
/// The size of a medium RadioButton.
/// @group radio
$kendo-radio-md-size: k-spacing(4) !default;
/// The size of a large RadioButton.
/// @group radio
$kendo-radio-lg-size: k-spacing(5) !default;

/// The glyph size of a small RadioButton.
/// @group radio
$kendo-radio-sm-glyph-size: k-spacing(2.5) !default;
/// The glyph size of a medium RadioButton.
/// @group radio
$kendo-radio-md-glyph-size: k-spacing(3.5) !default;
/// The glyph size of a large RadioButton.
/// @group radio
$kendo-radio-lg-glyph-size: k-spacing(4.5) !default;

/// The ripple size of a small RadioButton.
/// @group radio
$kendo-radio-sm-ripple-size: 300% !default;
/// The ripple size of a medium RadioButton.
/// @group radio
$kendo-radio-md-ripple-size: 300% !default;
/// The ripple size of a large RadioButton.
/// @group radio
$kendo-radio-lg-ripple-size: 300% !default;

/// The map with the different RadioButton sizes.
/// @group radio
$kendo-radio-sizes: (
    sm: (
        size: $kendo-radio-sm-size,
        glyph-size: $kendo-radio-sm-glyph-size,
        ripple-size: $kendo-radio-sm-ripple-size
    ),
    md: (
        size: $kendo-radio-md-size,
        glyph-size: $kendo-radio-md-glyph-size,
        ripple-size: $kendo-radio-md-ripple-size
    ),
    lg: (
        size: $kendo-radio-lg-size,
        glyph-size: $kendo-radio-lg-glyph-size,
        ripple-size: $kendo-radio-lg-ripple-size
    )
) !default;

/// The background color of the RadioButton.
/// @group radio
$kendo-radio-bg: $kendo-checkbox-bg !default;
/// The color of the RadioButton.
/// @group radio
$kendo-radio-text: $kendo-checkbox-text !default;
/// The border color of the RadioButton.
/// @group radio
$kendo-radio-border: $kendo-checkbox-border !default;

/// The background color of the hovered RadioButton.
/// @group radio
$kendo-radio-hover-bg: $kendo-checkbox-hover-bg !default;
/// The color of the hovered RadioButton.
/// @group radio
$kendo-radio-hover-text: $kendo-checkbox-hover-text !default;
/// The border color of the hovered RadioButton.
/// @group radio
$kendo-radio-hover-border: $kendo-checkbox-hover-border !default;

/// The background color of the checked RadioButton.
/// @group radio
$kendo-radio-checked-bg: $kendo-checkbox-checked-bg !default;
/// The color of the checked RadioButton.
/// @group radio
$kendo-radio-checked-text: $kendo-checkbox-checked-text !default;
/// The border color of the checked RadioButton.
/// @group radio
$kendo-radio-checked-border: $kendo-checkbox-checked-border !default;

/// The border color of the focused RadioButton.
/// @group radio
$kendo-radio-focus-border: $kendo-checkbox-focus-border !default;
/// The box shadow of the focused RadioButton.
/// @group radio
$kendo-radio-focus-shadow: $kendo-checkbox-focus-shadow !default;

/// The border color of the focused and checked RadioButton.
/// @group radio
$kendo-radio-focus-checked-border: $kendo-checkbox-focus-checked-border !default;
/// The box shadow of the focused and checked RadioButton.
/// @group radio
$kendo-radio-focus-checked-shadow: $kendo-checkbox-focus-checked-shadow !default;

/// The background color of the disabled RadioButton.
/// @group radio
$kendo-radio-disabled-bg: $kendo-checkbox-disabled-bg !default;
/// The color of the disabled RadioButton.
/// @group radio
$kendo-radio-disabled-text: $kendo-checkbox-disabled-text !default;
/// The border color of the disabled RadioButton.
/// @group radio
$kendo-radio-disabled-border: $kendo-checkbox-disabled-border !default;

/// The background color of the disabled and checked RadioButton.
/// @group radio
$kendo-radio-disabled-checked-bg: $kendo-checkbox-disabled-checked-bg !default;
/// The color of the disabled and checked RadioButton.
/// @group radio
$kendo-radio-disabled-checked-text: $kendo-checkbox-disabled-checked-text !default;
/// The border color of disabled and checked RadioButton.
/// @group radio
$kendo-radio-disabled-checked-border: $kendo-checkbox-disabled-checked-border !default;

/// The background color of the invalid RadioButton.
/// @group radio
$kendo-radio-invalid-bg: $kendo-checkbox-invalid-bg !default;
/// The color of the invalid RadioButton.
/// @group radio
$kendo-radio-invalid-text: $kendo-checkbox-invalid-text !default;
/// The border color of the invalid RadioButton.
/// @group radio
$kendo-radio-invalid-border: $kendo-checkbox-invalid-border !default;


// Radio indicator

/// The type of the RadioButton indicator.
/// @group radio
$kendo-radio-indicator-type: image !default;

/// The font family of the RadioButton indicator glyph.
/// @group radio
$kendo-radio-glyph-font-family: "WebComponentsIcons", monospace !default;
/// The glyph of the RadioButton indicator.
/// @group radio
$kendo-radio-checked-glyph: "\e308" !default;

/// The image of the checked RadioButton indicator.
/// @group radio
$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
/// The image of the disabled and checked RadioButton indicator.
/// @group radio
$kendo-radio-disabled-checked-image: null !default;


// Radio label

/// The horizontal margin of the RadioButton inside of a label.
/// @group radio
$kendo-radio-label-margin-x: k-spacing(1) !default;


// Radio list

/// The horizontal list item margin of the RadioButton.
/// @group radio
$kendo-radio-list-spacing: k-spacing(4) !default;
/// The horizontal list item padding of the RadioButton.
/// @group radio
$kendo-radio-list-item-padding-x: k-spacing(0) !default;
/// The vertical list item padding of the RadioButton.
/// @group radio
$kendo-radio-list-item-padding-y: $kendo-list-md-item-padding-y !default;


// Radio ripple

/// The background color of the RadioButton ripple.
/// @group radio
$kendo-radio-ripple-bg: $kendo-radio-checked-bg !default;
/// The opacity of the RadioButton ripple.
/// @group radio
$kendo-radio-ripple-opacity: .25 !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/radio/_layout.scss
@mixin kendo-radio--layout-base() {

    // Radio
    .k-radio {
        @include border-radius( $kendo-radio-radius );
        margin: 0;
        padding: 0;
        line-height: initial;
        border-width: $kendo-radio-border-width;
        border-style: solid;
        outline: 0;
        box-sizing: border-box;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
        flex: none;
        vertical-align: middle;
        position: relative;
        cursor: pointer;
        -webkit-appearance: none;
    }


    // Radio indicator
    .k-radio::before {
        @if $kendo-radio-indicator-type == "glyph" {
            content: $kendo-radio-checked-glyph;
            width: 1em;
            height: 1em;
            font-family: $kendo-radio-glyph-font-family;
            line-height: 1;
            transform: scale(0) translate(-50%, -50%);
            overflow: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
        }
    }


    // Checked state
    .k-radio:checked,
    .k-radio.k-checked {
        @if $kendo-radio-indicator-type == "image" {
            background-image: $kendo-radio-checked-image;
        }

        @if $kendo-radio-indicator-type == "glyph" {
            &::before {
                transform: scale(1) translate(-50%, -50%);
            }
        }
    }


    // Disabled state
    .k-radio:disabled,
    .k-radio.k-disabled {
        @include disabled( $kendo-disabled-styling... );
    }
    .k-radio:disabled:checked,
    .k-radio.k-disabled.k-checked {
        @if $kendo-radio-indicator-type == "image" {
            background-image: $kendo-radio-disabled-checked-image;
        }
    }


    // Radio wrap
    .k-radio-wrap {
        flex: none;
        display: inline-flex;
        flex-flow: row nowrap;
        gap: 0;
        align-items: center;
        align-self: start;
        vertical-align: middle;
        position: relative;

        &::before {
            content: "\200b";
            width: 0px;
            overflow: hidden;
            flex: none;
            display: inline-block;
            vertical-align: top;
        }
    }


    // Radio label
    .k-radio-label {
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: flex-start;
        gap: $kendo-radio-label-margin-x;
        vertical-align: middle;
        position: relative;
        cursor: pointer;

        .k-ripple {
            // Hide ripple temporarily
            visibility: hidden !important; // stylelint-disable-line declaration-no-important
        }
    }
    .k-radio + .k-label,
    .k-radio-wrap + .k-label,
    .k-radio + .k-radio-label,
    .k-radio-wrap + .k-radio-label {
        display: inline;
        margin-inline-start: $kendo-radio-label-margin-x;
    }


    // Empty label
    .k-radio-label:empty {
        display: none !important; // stylelint-disable-line declaration-no-important
    }
    .k-radio-label.k-no-text {
        min-width: 1px;
    }


    // Radio list
    .k-radio-list {
        margin: 0;
        padding: 0;
        display: flex;
        flex-flow: column nowrap;
        gap: 0;
        list-style: none;
    }
    .k-radio-item,
    .k-radio-list-item {
        padding-block: $kendo-radio-list-item-padding-y;
        padding-inline: $kendo-radio-list-item-padding-x;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-content: center;
        gap: k-spacing(1);

        .k-radio-label {
            margin: 0;
        }
    }
    .k-radio-list-horizontal,
    .k-radio-list.k-list-horizontal {
        display: flex;
        flex-flow: row wrap;
        gap: $kendo-radio-list-spacing;
    }


    // Ripple
    .k-ripple-container {
        .k-radio::after {
            content: "";
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 100%;
            z-index: -1;
            transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
            transform: translate(-50%, -50%) scale(0);
            transform-origin: center center;
        }

        .k-radio:focus,
        .k-radio.k-focus {
            box-shadow: none !important; // stylelint-disable-line declaration-no-important
        }

        .k-radio:disabled::after,
        .k-radio.k-disabled::after {
            display: none;
        }

        .k-radio:disabled::after,
        .k-radio.k-disabled::after {
            display: none;
        }
    }


    // Radio size
    @each $size, $size-props in $kendo-radio-sizes {
        $_size: k-map-get( $size-props, size );
        $_glyph-size: k-map-get( $size-props, glyph-size );
        $_ripple-size: k-map-get( $size-props, ripple-size );

        .k-radio-#{$size} {
            width: $_size;
            height: $_size;

            &::before {
                font-size: $_glyph-size;
            }
        }
        .k-ripple-container {
            .k-radio-#{$size}::after {
                width: $_ripple-size;
                height: $_ripple-size;
            }
        }
    }

}


@mixin kendo-radio--layout() {
    @include kendo-radio--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/radio/_theme.scss
@mixin kendo-radio--theme-base() {

    // Radio
    .k-radio {
        @include fill(
            $kendo-radio-text,
            $kendo-radio-bg,
            $kendo-radio-border
        );
    }


    // Hover state
    .k-radio:hover,
    .k-radio.k-hover {
        @include fill(
            $kendo-radio-hover-text,
            $kendo-radio-hover-bg,
            $kendo-radio-hover-border
        );
    }


    // Focus state
    .k-radio:focus,
    .k-radio.k-focus {
        @include fill( $border: $kendo-radio-focus-border );
        @include focus-indicator( $kendo-radio-focus-shadow );
    }


    // Invalid state
    .k-radio.k-invalid,
    .k-radio.ng-invalid.ng-touched,
    .k-radio.ng-invalid.ng-dirty {
        @include fill( $border: $kendo-radio-invalid-border );
    }
    .k-radio.k-invalid + .k-radio-label,
    .k-radio.ng-invalid.ng-touched + .k-radio-label,
    .k-radio.ng-invalid.ng-dirty + .k-radio-label {
        @include fill( $color: $kendo-radio-invalid-text );
    }


    // Checked
    .k-radio:checked,
    .k-radio.k-checked {
        @include fill(
            $kendo-radio-checked-text,
            $kendo-radio-checked-bg,
            $kendo-radio-checked-border
        );
    }
    .k-radio:checked:focus,
    .k-radio.k-checked.k-focus {
        @include fill( $border: $kendo-radio-focus-checked-border );
        @include focus-indicator( $kendo-radio-focus-checked-shadow );
    }


    // Disabled
    .k-radio:disabled,
    .k-radio.k-disabled {
        @include fill(
            $kendo-radio-disabled-text,
            $kendo-radio-disabled-bg,
            $kendo-radio-disabled-border
        );
    }
    .k-radio:checked:disabled,
    .k-radio.k-checked.k-disabled {
        @include fill(
            $kendo-radio-disabled-checked-text,
            $kendo-radio-disabled-checked-bg,
            $kendo-radio-disabled-checked-border
        );
    }


    // Ripple
    .k-ripple-container {
        .k-radio::after {
            background: $kendo-radio-ripple-bg;
            opacity: $kendo-radio-ripple-opacity;
        }
    }

}


@mixin kendo-radio--theme() {
    @include kendo-radio--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-radio--styles() {
    @include module-render( "radio" ) {
        @include kendo-radio--layout();
        @include kendo-radio--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-radio--styles();
}

// #endregion
// #region @import "./slider/_index.scss"; -> scss/slider/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "slider",
    dependencies: (
        "button",
        "icon",
        "tooltip",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../tooltip/_index.scss"; -> scss/tooltip/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/slider/_variables.scss
// #region @import "./images/slider-h.scss"; -> scss/slider/images/slider-h.scss
@include exports("slider-h.gif") {
    @include register-data-uri("slider-h.gif", "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7");
}

// #endregion
// #region @import "./images/slider-v.scss"; -> scss/slider/images/slider-v.scss
@include exports("slider-v.gif") {
    @include register-data-uri("slider-v.gif", "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7");
}

// #endregion


// Slider
/// The default size of the Slider.
/// @group slider
$kendo-slider-size: 200px !default;
/// The default size of the Slider tick.
/// @group slider
$kendo-slider-tick-size: null !default;
/// The default size of the Slider's track wrap.
/// @group slider
$kendo-slider-alt-size: 30px !default;

/// The font family of the Slider.
/// @group slider
$kendo-slider-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Slider.
/// @group slider
$kendo-slider-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Slider.
/// @group slider
$kendo-slider-line-height: var( --kendo-line-height, normal ) !default;

/// The offset of the Slider Buttons.
/// @group slider
$kendo-slider-button-offset: 10px !default;
/// The size of the Slider Buttons.
/// @group slider
$kendo-slider-button-size: ($kendo-slider-alt-size - 2) !default;
/// The spacing of the Slider Buttons.
/// @group slider
$kendo-slider-button-spacing: ($kendo-slider-button-size + $kendo-slider-button-offset) !default;
/// The shadow of the focused Slider Buttons.
/// @group slider
$kendo-slider-button-focus-shadow: null !default;

/// The thickness of the Slider track.
/// @group slider
$kendo-slider-track-thickness: 4px !default;
/// The size of the Slider drag handle.
/// @group slider
$kendo-slider-draghandle-size: 14px !default;
/// The border width of the Slider drag handle.
/// @group slider
$kendo-slider-draghandle-border-width: 1px !default;
/// The transition scale of the active Slider drag handle.
/// @group slider
$kendo-slider-draghandle-active-scale: 1 !default;
/// The size of the active Slider drag handle.
/// @group slider
$kendo-slider-draghandle-active-size: null !default;

/// The background color of the Slider drag handle.
/// @group slider
$kendo-slider-draghandle-bg: $kendo-color-primary !default;
/// The text color of the Slider drag handle.
/// @group slider
$kendo-slider-draghandle-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary )) !default;
/// The border color of the Slider drag handle.
/// @group slider
$kendo-slider-draghandle-border: $kendo-color-primary !default;
/// The gradient of the Slider drag handle.
/// @group slider
$kendo-slider-draghandle-gradient: null !default;

/// The background color of the hovered Slider drag handle.
/// @group slider
$kendo-slider-draghandle-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary , .5 )) !default;
/// The text color of the hovered Slider drag handle.
/// @group slider
$kendo-slider-draghandle-hover-text: null !default;
/// The border color of the hovered Slider drag handle.
/// @group slider
$kendo-slider-draghandle-hover-border: $kendo-color-primary !default;
/// The gradient of the hovered Slider drag handle.
/// @group slider
$kendo-slider-draghandle-hover-gradient: null !default;

/// The background color of the active Slider drag handle.
/// @group slider
$kendo-slider-draghandle-pressed-bg: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) !default;
/// The text color of the active Slider drag handle.
/// @group slider
$kendo-slider-draghandle-pressed-text: null !default;
/// The border color of the active Slider drag handle.
/// @group slider
$kendo-slider-draghandle-pressed-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) !default;
/// The gradient of the active Slider drag handle.
/// @group slider
$kendo-slider-draghandle-pressed-gradient: null !default;

/// The shadow of the focused Slider drag handle.
/// @group slider
$kendo-slider-draghandle-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary , .3 )) !default;

/// The transition speed of the Slider.
/// @group slider
$kendo-slider-transition-speed: .3s !default;
/// The transition function of the Slider.
/// @group slider
$kendo-slider-transition-function: ease-out !default;
/// The transition speed of the Slider drag handle.
/// @group slider
$kendo-slider-draghandle-transition-speed: .4s !default;
/// The transition function of the Slider drag handle.
/// @group slider
$kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default;

/// The background color of the Slider track.
/// @group slider
$kendo-slider-track-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 1 )) !default;
/// The background color of the Slider's track selection.
/// @group slider
$kendo-slider-selection-bg: $kendo-color-primary !default;
/// @group slider
/// The opacity of the disabled Slider.
$kendo-slider-disabled-opacity: null !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/slider/_layout.scss
@mixin kendo-slider--layout-base() {

    // Slider
    .k-slider {
        border: 0;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-slider-font-family;
        font-size: $kendo-slider-font-size;
        line-height: $kendo-slider-line-height;
        background: none;
        display: inline-flex;
        align-items: center;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

        .k-label {
            width: auto;
            font-size: .92em;
            line-height: 1;
            white-space: nowrap;
            position: absolute;
        }

        .k-tick,
        .k-slider-track {
            cursor: pointer;
        }

        .k-tick {
            background-color: transparent;
            background-position: center center;
            background-repeat: no-repeat;
            margin: 0;
            padding: 0;
            position: relative;
        }


        &.k-disabled {
            .k-tick,
            .k-slider-track,
            .k-draghandle {
                cursor: default;
            }
        }
    }

    // New rendering
    .k-slider {
        width: min-content;
        height: min-content;
        gap: calc( #{$kendo-slider-draghandle-size} / 2 );

        .k-button {
            flex: none;
        }
        .k-slider-track-wrap {
            flex: 1 1 auto;
            display: flex;
            flex-flow: inherit;
            position: relative;
            touch-action: none;

            .k-slider-items {
                margin: 0;
                padding: 0;
                list-style: none;
                // For some reason, Safari does not understand `flex-basis: 100%`
                // See telerik/kendo-themes#2197
                // flex-basis: 100%;
                flex: 1 1 100%;
                display: flex;
                flex-flow: inherit;
                justify-content: space-between;
                user-select: none;
            }
            .k-tick {
                flex: 0 0 1px;
            }

            .k-tick-horizontal {
                width: 1px;
                min-height: 100%;
            }

            .k-tick-vertical {
                width: 100%;
                min-height: 1px;
            }

            .k-draghandle {
                position: absolute;
            }
        }

        &-horizontal {
            .k-slider-track-wrap {
                height: 26px;

                .k-slider-track {
                    width: 100%;
                }

                .k-draghandle {
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
                .k-draghandle:focus,
                .k-draghandle:active {
                    transform: translate(-50%, -50%) scale($kendo-slider-draghandle-active-scale);
                }

                .k-slider-selection {
                    width: calc( (var(--kendo-slider-end, 0) - var(--kendo-slider-start, 0)) * 1% );
                    inset-inline-start: calc( var(--kendo-slider-start, 0) * 1% );
                }
                .k-draghandle-start {
                    inset-inline-start: calc( var(--kendo-slider-start, 0) * 1% );
                }
                .k-draghandle-end {
                    inset-inline-start: calc( var(--kendo-slider-end, 0) * 1% );
                }
            }
        }

        &-vertical {
            .k-slider-track-wrap {
                width: 26px;

                .k-slider-track {
                    height: 100%;
                }
                .k-draghandle {
                    left: 50%;
                    transform: translate(-50%, 50%);
                }
                .k-draghandle:focus,
                .k-draghandle:active {
                    transform: translate(-50%, 50%) scale($kendo-slider-draghandle-active-scale);
                }

                .k-slider-selection {
                    bottom: calc( var(--kendo-slider-start, 0) * 1% );
                    height: calc( (var(--kendo-slider-end, 0) - var(--kendo-slider-start, 0)) * 1% );
                }
                .k-draghandle-start {
                    bottom: calc( var(--kendo-slider-start, 0) * 1% );
                }
                .k-draghandle-end {
                    bottom: calc( var(--kendo-slider-end, 0) * 1% );
                }
            }
        }

    }


    // Slider vertical
    .k-slider-vertical {
        height: $kendo-slider-size;
        flex-flow: column-reverse nowrap;

        .k-tick {
            text-align: end;
            margin-left: 2px;
        }

        .k-slider-topleft .k-tick {
            text-align: start;
        }

        // ticks

        .k-tick { background-position: -94px center; }
        .k-slider-topleft .k-tick { background-position: -124px center; }
        .k-slider-bottomright .k-tick { background-position: -154px center; }

        .k-tick-large {
            display: flex;
            align-items: center;
            background-position: -4px center;
        }

        .k-slider-topleft .k-tick-large { background-position: -34px center; }
        .k-slider-bottomright .k-tick-large { background-position: -64px center; }

        .k-first { background-position: -94px 100%; }
        .k-tick-large.k-first { background-position: -4px 100%; }
        .k-slider-topleft .k-first { background-position: -124px 100%; }
        .k-slider-topleft .k-tick-large.k-first { background-position: -34px 100%; }
        .k-slider-bottomright .k-first { background-position: -154px 100%; }
        .k-slider-bottomright .k-tick-large.k-first { background-position: -64px 100%; }

        .k-last { background-position: -94px 0; }
        .k-tick-large.k-last { background-position: -4px 0; }
        .k-slider-topleft .k-last { background-position: -124px 0; }
        .k-slider-topleft .k-tick-large.k-last { background-position: -34px 0; }
        .k-slider-bottomright .k-last { background-position: -154px 0; }
        .k-slider-bottomright .k-tick-large.k-last { background-position: -64px 0; }

        // labels

        .k-label {
            text-align: start;
            inset-inline-start: 120%;
            top: 50%;
            transform: translateY(-50%);
        }
        .k-first .k-label { top: 100%; }
        .k-last .k-label { top: 0; }

        .k-slider-topleft .k-label {
            inset-inline-start: auto;
            inset-inline-end: 120%;
        }

    }


    // Slider horizontal
    .k-slider-horizontal {
        width: $kendo-slider-size;
        flex-flow: row nowrap;

        .k-tick { background-position: center -92px; }
        .k-slider-topleft .k-tick { background-position: center -122px; }
        .k-slider-bottomright .k-tick { background-position: center -152px; }

        .k-tick-large { background-position: center -2px; }
        .k-slider-topleft .k-tick-large { background-position: center -32px; }
        .k-slider-bottomright .k-tick-large { background-position: center -62px; }

        .k-first { background-position: 0 -92px; }
        .k-tick-large.k-first { background-position: 0 -2px; }
        .k-slider-topleft .k-first { background-position: 0 -122px; }
        .k-slider-topleft .k-tick-large.k-first { background-position: 0 -32px; }
        .k-slider-bottomright .k-first { background-position: 0 -152px; }
        .k-slider-bottomright .k-tick-large.k-first { background-position: 0 -62px; }

        .k-last { background-position: 100% -92px; }
        .k-tick-large.k-last { background-position: 100% -2px; }
        .k-slider-topleft .k-last { background-position: 100% -122px; }
        .k-slider-topleft .k-tick-large.k-last { background-position: 100% -32px; }
        .k-slider-bottomright .k-last { background-position: 100% -152px; }
        .k-slider-bottomright .k-tick-large.k-last { background-position: 100% -62px; }

        // labels

        .k-label {
            inset-inline-start: 50%;
            bottom: -1.2em;
            transform: translateX(-50%);
        }
        .k-first .k-label { inset-inline-start: 0; }
        .k-last .k-label { inset-inline-start: 100%; }

        .k-slider-topleft .k-label {
            top: -1.2em;
        }
    }

    .k-slider-track,
    .k-slider-selection {
        margin: 0;
        padding: 0;
        position: absolute;

        .k-slider-horizontal & {
            height: $kendo-slider-track-thickness;
            left: 0;
            margin-top: - k-math-div( $kendo-slider-track-thickness, 2 );
            top: 50%;
        }

        .k-slider-vertical & {
            bottom: 0;
            left: 50%;
            margin-left: - k-math-div( $kendo-slider-track-thickness, 2 );
            width: $kendo-slider-track-thickness;
        }
    }


    .k-draghandle {
        background-color: transparent;
        background-repeat: no-repeat;
        border-style: solid;
        border-width: $kendo-slider-draghandle-border-width;
        outline: 0;
        position: absolute;
        text-align: center;
        text-decoration: none;
        width: $kendo-slider-draghandle-size;
        height: $kendo-slider-draghandle-size;

        .k-slider-transitions.k-slider-horizontal & {
            transition: inset-inline-start $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
        }

        .k-slider-transitions.k-slider-vertical & {
            transition: bottom  $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
        }

        &.k-pressed {
            transition: none;
        }
    }

    .k-slider-selection {
        .k-slider-transitions.k-slider-horizontal & {
            transition: width $kendo-slider-transition-speed $kendo-slider-transition-function;
        }

        .k-slider-transitions.k-slider-vertical & {
            transition: height $kendo-slider-transition-speed $kendo-slider-transition-function;
        }

        &.k-pressed {
            transition: none;
        }
    }


    // Slider readonly
    .k-slider.k-readonly {
        .k-button,
        .k-slider-track,
        .k-tick,
        .k-draghandle {
            pointer-events: none;
        }
    }


    // Slider tooltip
    .k-slider-tooltip {
        .k-callout-n,
        .k-callout-s {
            margin-inline-start: - k-math-div( $kendo-tooltip-callout-size, 2 );
        }

        .k-callout-w,
        .k-callout-e {
            margin-top: - k-math-div( $kendo-tooltip-callout-size, 2 );
        }
    }

    // RTL
    .k-slider-rtl {
        &.k-slider-horizontal {

            .k-draghandle {
                transform: translate(50%, -50%);
            }

            .k-draghandle:focus,
            .k-draghandle:active {
                transform: if( $kendo-slider-draghandle-active-scale, translate(50%, -50%) scale($kendo-slider-draghandle-active-scale), null );
            }

            .k-label {
                transform: translateX(50%);
            }
        }
    }

    .k-slider[dir="rtl"],
    [dir="rtl"] .k-slider,
    .k-slider.k-rtl,
    .k-rtl .k-slider {
        @extend .k-slider-rtl !optional;
    }


    // Angular specific
    .k-slider kendo-resize-sensor {
        position: absolute;
    }
    
    // Aliases
    .k-draghandle { @extend .k-slider-thumb !optional; }
    .k-draghandle-start { @extend .k-slider-thumb-start !optional; }
    .k-draghandle-end { @extend .k-slider-thumb-end !optional; }
}


@mixin kendo-slider--layout() {
    @include kendo-slider--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/slider/_theme.scss
@mixin kendo-slider--theme-base() {

    // TODO: move to variables
    $kendo-slider-tick-horizontal-image: k-map-get($_kendo-data-uris, "slider-h.gif") !default;
    $kendo-slider-tick-vertical-image: k-map-get($_kendo-data-uris, "slider-v.gif") !default;


    // Slider
    .k-slider {
        // TODO: extract variables
        color: $kendo-component-text;

        .k-slider-track,
        .k-slider-selection {
            @include border-radius( k-border-radius(md) );
        }

        .k-slider-track {
            @include fill( $bg: $kendo-slider-track-bg );
        }

        .k-slider-selection {
            @include fill( $bg: $kendo-slider-selection-bg );
        }

        .k-draghandle {
            @include fill(
                $kendo-slider-draghandle-text,
                $kendo-slider-draghandle-bg,
                $kendo-slider-draghandle-border,
                $kendo-slider-draghandle-gradient
            );
            @include border-radius( 50% );

            &:hover {
                @include fill(
                    $kendo-slider-draghandle-hover-text,
                    $kendo-slider-draghandle-hover-bg,
                    $kendo-slider-draghandle-hover-border,
                    $kendo-slider-draghandle-hover-gradient
                );
            }

            &:active,
            &.k-pressed {
                @include fill(
                    $kendo-slider-draghandle-pressed-text,
                    $kendo-slider-draghandle-pressed-bg,
                    $kendo-slider-draghandle-pressed-border,
                    $kendo-slider-draghandle-pressed-gradient
                );
            }

            &:focus,
            &.k-focus {
                @include focus-indicator( $kendo-slider-draghandle-focus-shadow );
            }
        }

        &.k-focus {
            .k-draghandle {
                @include focus-indicator( $kendo-slider-draghandle-focus-shadow );
            }
        }

        &.k-disabled {
            opacity: $kendo-slider-disabled-opacity;
        }
    }

    .k-slider-horizontal .k-tick {
        @include background-image( $kendo-slider-tick-horizontal-image );
    }

    .k-slider-vertical .k-tick {
        @include background-image( $kendo-slider-tick-vertical-image );
    }

}


@mixin kendo-slider--theme() {
    @include kendo-slider--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-slider--styles() {
    @include module-render( "slider" ) {
        @include kendo-slider--layout();
        @include kendo-slider--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-slider--styles();
}

// #endregion


// Form requirements
// #region @import "./calendar/_index.scss"; -> scss/calendar/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "calendar",
    dependencies: (
        "button",
        "icon",
        "list",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/calendar/_variables.scss
// Calendar

/// The width of the border around the Calendar.
/// @group calendar
$kendo-calendar-border-width: 1px !default;

/// The font family of the Calendar.
/// @group calendar
$kendo-calendar-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Calendar.
/// @group calendar
$kendo-calendar-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Calendar.
/// @group calendar
$kendo-calendar-line-height: var( --kendo-line-height, normal ) !default;

/// The size of the cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-size: 32px !default;

/// The background color of the Calendar.
/// @group calendar
$kendo-calendar-bg: $kendo-component-bg !default;
/// The text color of the Calendar.
/// @group calendar
$kendo-calendar-text: $kendo-component-text !default;
/// The border color of the Calendar.
/// @group calendar
$kendo-calendar-border: $kendo-component-border !default;

/// The horizontal padding of the header in the Calendar.
/// @group calendar
$kendo-calendar-header-padding-x: k-spacing(1) !default;
/// The vertical padding of the header in the Calendar.
/// @group calendar
$kendo-calendar-header-padding-y: k-spacing(1) !default;

/// The border width of the header in the Calendar.
/// @group calendar
$kendo-calendar-header-border-width: 1px !default;

/// The background color of the header in the Calendar.
/// @group calendar
$kendo-calendar-header-bg: $kendo-component-header-bg !default;
/// The text color of the header in the Calendar.
/// @group calendar
$kendo-calendar-header-text: $kendo-component-header-text !default;
/// The border color of the header in the Calendar.
/// @group calendar
$kendo-calendar-header-border: $kendo-component-header-border !default;
/// The gradient of the header in the Calendar.
/// @group calendar
$kendo-calendar-header-gradient: $kendo-component-header-gradient !default;
// TODO: variable is used, but the selector using it is not! Potentially remove;
/// The shadow of the header in the Calendar.
/// @group calendar
$kendo-calendar-header-shadow: 0 1px 3px 1px rgba(black, .1) !default;

/// The gap between the items in the navigation of the Calendar.
/// @group calendar
$kendo-calendar-nav-gap: null !default;

/// The horizontal padding of the footer in the Calendar.
/// @group calendar
$kendo-calendar-footer-padding-x: k-spacing(4) !default;
/// The vertical padding of the footer in the Calendar.
/// @group calendar
$kendo-calendar-footer-padding-y: k-spacing(2) !default;

/// The horizontal padding of the cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-padding-x: .25em !default;
/// The vertical padding of the cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-padding-y: $kendo-calendar-cell-padding-x !default;

/// The line height of the cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-line-height: $kendo-calendar-line-height !default;

/// The border radius of the cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-border-radius: k-border-radius(md) !default;

/// The horizontal padding of the header cells in the Calendar.
/// @group calendar
$kendo-calendar-header-cell-padding-x: null !default;
/// The vertical padding of the header cells in the Calendar.
/// @group calendar
$kendo-calendar-header-cell-padding-y: null !default;
/// The width of the header cells in the Calendar.
/// @group calendar
$kendo-calendar-header-cell-width: $kendo-calendar-cell-size !default;
/// The height of the header cells in the Calendar.
/// @group calendar
$kendo-calendar-header-cell-height: $kendo-calendar-cell-size !default;
/// The font size of the header cells in the Calendar.
/// @group calendar
$kendo-calendar-header-cell-font-size: var( --kendo-font-size-sm, inherit ) !default;
/// The line height of the header cells in the Calendar.
/// @group calendar
$kendo-calendar-header-cell-line-height: 2 !default;

/// The background color of the header cells in the Calendar.
/// @group calendar
$kendo-calendar-header-cell-bg: null !default;
/// The text color of the header cells in the Calendar.
/// @group calendar
$kendo-calendar-header-cell-text: $kendo-subtle-text !default;
/// The opacity of the header cells in the Calendar.
/// @group calendar
$kendo-calendar-header-cell-opacity: null !default;

/// The horizontal padding of the caption in the Calendar.
/// @group calendar
$kendo-calendar-caption-padding-x: k-spacing(2) !default;
/// The vertical padding of the caption in the Calendar.
/// @group calendar
$kendo-calendar-caption-padding-y: k-spacing(1) !default;
/// The height of the caption in the Calendar.
/// @group calendar
$kendo-calendar-caption-height: $kendo-calendar-cell-size !default;
/// The font size of the caption in the Calendar.
/// @group calendar
$kendo-calendar-caption-font-size: null !default;
/// The line height of the caption in the Calendar.
/// @group calendar
$kendo-calendar-caption-line-height: null !default;
/// The font weight of the caption in the Calendar.
/// @group calendar
$kendo-calendar-caption-font-weight: var( --kendo-font-weight-bold, normal ) !default;

/// The font size of the week number cells in the Calendar.
/// @group calendar
$kendo-calendar-week-number-font-size: $kendo-font-size-sm !default;

/// The width of the Calendar view.
/// @group calendar
$kendo-calendar-view-width: ($kendo-calendar-cell-size * 8) !default;
/// The height of the Calendar view.
/// @group calendar
$kendo-calendar-view-height: ($kendo-calendar-cell-size * 7) !default;

/// The gap between the items in the Calendar view.
/// @group calendar
$kendo-calendar-view-gap: k-spacing(4) !default;

/// The background color of the weekend cells in the Calendar.
/// @group calendar
$kendo-calendar-weekend-bg: null !default;
/// The text color of the weekend cells in the Calendar.
/// @group calendar
$kendo-calendar-weekend-text: null !default;

/// The style of the current day in the Calendar.
/// @group calendar
$kendo-calendar-today-style: color !default;
/// The color of the current day in the Calendar.
/// @group calendar
$kendo-calendar-today-color: $kendo-color-primary !default;

/// The background color of the week number cells in the Calendar.
/// @group calendar
$kendo-calendar-week-number-bg: null !default;
/// The text color of the week number cells in the Calendar.
/// @group calendar
$kendo-calendar-week-number-text: $kendo-calendar-header-cell-text !default;

/// The background color of the preceding/subsequent month cells in the Calendar.
/// @group calendar
$kendo-calendar-other-month-bg: null !default;
/// The text color of the preceding/subsequent month cells in the Calendar.
/// @group calendar
$kendo-calendar-other-month-text: $kendo-calendar-header-cell-text !default;

/// The background color of the cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-bg: null !default;
/// The text color of the cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-text: null !default;
/// The border color of the cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-border: null !default;
/// The gradient of the cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-gradient: null !default;

/// The background color of the hovered cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-hover-bg: $kendo-hover-bg !default;
/// The text color of the hovered cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-hover-text: $kendo-hover-text !default;
/// The border color of the hovered cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-hover-border: $kendo-hover-border !default;
/// The gradient of the hovered cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-hover-gradient: null !default;

/// The background color of the selected cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-selected-bg: $kendo-selected-bg !default;
/// The text color of the selected cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-selected-text: $kendo-selected-text !default;
/// The border color of the selected cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-selected-border: $kendo-selected-border !default;
/// The gradient of the selected cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-selected-gradient: null !default;

/// The background color of the selected and hovered cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-selected-hover-bg: $kendo-selected-hover-bg !default;
/// The text color of the selected and hovered cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-selected-hover-text: $kendo-selected-hover-text !default;
/// The border color of the selected and hovered cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-selected-hover-border: null !default;
/// The gradient of the selected and hovered cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-selected-hover-gradient: null !default;

/// The shadow of the focused cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-focus-shadow: inset 0 0 0 2px rgba( $kendo-color-black, .08 ) !default;
/// The shadow of the selected and focused cells in the Calendar.
/// @group calendar
$kendo-calendar-cell-selected-focus-shadow: $kendo-calendar-cell-focus-shadow !default;


/// The width of the Calendar navigation.
/// @group calendar
$kendo-calendar-navigation-width: 5em !default;
/// The height of the items in the Calendar navigation.
/// @group calendar
$kendo-calendar-navigation-item-height: 2em !default;

/// The background color of the Calendar navigation.
/// @group calendar
$kendo-calendar-navigation-bg: $kendo-calendar-header-bg !default;
/// The text color of the Calendar navigation.
/// @group calendar
$kendo-calendar-navigation-text: $kendo-calendar-header-text !default;
/// The border color of the Calendar navigation.
/// @group calendar
$kendo-calendar-navigation-border: $kendo-calendar-header-border !default;

/// The text color of the hovered items in the Calendar navigation.
/// @group calendar
$kendo-calendar-navigation-hover-text: $kendo-link-hover-text !default;

/// The horizontal padding of the header in the Infinite Calendar.
/// @group calendar
$kendo-infinite-calendar-header-padding-x: k-spacing(4) !default;
/// The vertical padding of the header in the Infinite Calendar.
/// @group calendar
$kendo-infinite-calendar-header-padding-y: k-spacing(2) !default;

/// The horizontal padding of the Calendar view in the Infinite Calendar.
/// @group calendar
$kendo-infinite-calendar-view-padding-x: k-spacing(4) !default;
/// The vertical padding of the Calendar view in the Infinite Calendar.
/// @group calendar
$kendo-infinite-calendar-view-padding-y: k-spacing(0) !default;

/// The height of the Calendar view in the Infinite Calendar.
/// @group calendar
$kendo-infinite-calendar-view-height: ( $kendo-calendar-cell-size * 9 ) !default;


// Multiview calendar

/// The border radius of the range cells in the Multiview Calendar.
/// @group calendar
$kendo-calendar-range-cell-border-radius: k-border-radius(lg) !default;

// Calendar sizes

/// The font size of the small Calendar.
/// @group calendar
$kendo-calendar-sm-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the small Calendar.
/// @group calendar
$kendo-calendar-sm-line-height: var( --kendo-line-height, normal ) !default;
/// The size of the cells in the small Calendar.
/// @group calendar
$kendo-calendar-sm-cell-size: 28px !default;
/// The horizontal padding of the cells in the small Calendar.
/// @group calendar
$kendo-calendar-sm-cell-padding-x: k-spacing(0.5) !default;
/// The vertical padding of the cells in the small Calendar.
/// @group calendar
$kendo-calendar-sm-cell-padding-y: k-spacing(0.5) !default;

/// The font size of the medium Calendar.
/// @group calendar
$kendo-calendar-md-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the medium Calendar.
/// @group calendar
$kendo-calendar-md-line-height: var( --kendo-line-height, normal ) !default;
/// The size of the cells in the medium Calendar.
/// @group calendar
$kendo-calendar-md-cell-size: 32px !default;
/// The horizontal padding of the cells in the medium Calendar.
/// @group calendar
$kendo-calendar-md-cell-padding-x: k-spacing(1) !default;
/// The vertical padding of the cells in the medium Calendar.
/// @group calendar
$kendo-calendar-md-cell-padding-y: k-spacing(1) !default;

/// The font size of the large Calendar.
/// @group calendar
$kendo-calendar-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
/// The line height of the large Calendar.
/// @group calendar
$kendo-calendar-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
/// The size of the cells in the large Calendar.
/// @group calendar
$kendo-calendar-lg-cell-size: 40px !default;
/// The horizontal padding of the cells in the large Calendar.
/// @group calendar
$kendo-calendar-lg-cell-padding-x: k-spacing(2) !default;
/// The vertical padding of the cells in the large Calendar.
/// @group calendar
$kendo-calendar-lg-cell-padding-y: k-spacing(2) !default;

/// The sizes Map of the Calendar.
/// @group calendar
$kendo-calendar-sizes: (
    sm: (
        font-size: $kendo-calendar-sm-font-size,
        line-height: $kendo-calendar-sm-line-height,
        cell-size: $kendo-calendar-sm-cell-size,
        cell-padding-x: $kendo-calendar-sm-cell-padding-y,
        cell-padding-y: $kendo-calendar-sm-cell-padding-x
    ),
    md: (
        font-size: $kendo-calendar-md-font-size,
        line-height: $kendo-calendar-md-line-height,
        cell-size: $kendo-calendar-md-cell-size,
        cell-padding-x: $kendo-calendar-md-cell-padding-y,
        cell-padding-y: $kendo-calendar-md-cell-padding-x
    ),
    lg: (
        font-size: $kendo-calendar-lg-font-size,
        line-height: $kendo-calendar-lg-line-height,
        cell-size: $kendo-calendar-lg-cell-size,
        cell-padding-x: $kendo-calendar-lg-cell-padding-y,
        cell-padding-y: $kendo-calendar-lg-cell-padding-x
    )
) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/calendar/_layout.scss
@mixin kendo-calendar--layout-base() {

    // Base
    .k-calendar {
        inline-size: var( --INTERNAL--kendo-calendar-width, min-content );
        block-size: var( --INTERNAL--kendo-calendar-height, min-content );
        border-width: $kendo-calendar-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-calendar-font-family;
        font-size: $kendo-calendar-font-size;
        line-height: $kendo-calendar-line-height;
        position: relative;
        overflow: hidden;
        display: inline-flex;
        flex-flow: column nowrap;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;


        // Nested calendar
        > .k-calendar {
            border: 0;
        }
    }


    // Calendar table
    .k-calendar-table {
        margin-block: 0;
        margin-inline: auto;
        border-width: 0;
        border-color: inherit;
        border-spacing: 0;
        border-collapse: separate;
        table-layout: fixed;
        text-align: center;
        outline: 0;
        display: table;
        position: relative;
        z-index: 1;
    }
    .k-calendar-caption,
    .k-calendar-caption.k-calendar-th,
    .k-calendar .k-meta-header,
    .k-calendar .k-month-header {
        padding-block: $kendo-calendar-caption-padding-y;
        padding-inline: $kendo-calendar-caption-padding-x;
        height: $kendo-calendar-caption-height;
        box-sizing: border-box;
        font-size: $kendo-calendar-caption-font-size;
        line-height: $kendo-calendar-caption-line-height;
        text-transform: none;
        text-align: start;
        font-weight: $kendo-calendar-caption-font-weight;
        cursor: default;
    }


    // Calendar cell
    .k-calendar-th,
    .k-calendar-td {
        border-width: 0;
        padding: 0;
        text-align: center;
        border-style: solid;
        border-color: inherit;
        font-weight: normal;
        cursor: default;
    }
    .k-calendar-th {
        padding-block: $kendo-calendar-header-cell-padding-y;
        padding-inline: $kendo-calendar-header-cell-padding-x;
        inline-size: var( --INTERNAL--kendo-calendar-cell-size, $kendo-calendar-header-cell-width );
        block-size: var( --INTERNAL--kendo-calendar-cell-size, $kendo-calendar-header-cell-height );
        font-size: $kendo-calendar-header-cell-font-size;
        line-height: $kendo-calendar-header-cell-line-height;
        text-transform: uppercase;
        opacity: $kendo-calendar-header-cell-opacity;
    }
    .k-calendar-td {
        @include border-radius( $kendo-calendar-cell-border-radius );
        inline-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
        block-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
        border-color: transparent;
    }
    .k-calendar-td.k-alt {
        font-size: $kendo-calendar-week-number-font-size;
    }


    // Calendar cell inner
    // Remove .k-calendar once we remove k-link
    .k-calendar .k-calendar-cell-inner {
        @include border-radius( $kendo-calendar-cell-border-radius );
        padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, #{$kendo-calendar-cell-padding-x} );
        padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, #{$kendo-calendar-cell-padding-y} );
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        white-space: normal;
        position: relative;
        overflow: hidden;
    }


    // Calendar header
    .k-calendar .k-header {
        padding-block: $kendo-calendar-header-padding-y;
        padding-inline: $kendo-calendar-header-padding-x;
        border-bottom-width: $kendo-calendar-header-border-width;
        border-bottom-style: solid;
        display: flex;
        flex-flow: row nowrap;
        gap: $kendo-calendar-nav-gap;
        align-items: center;
        position: relative;
        z-index: 2;
    }


    // Calendar header
    .k-calendar-header {
        padding-block: $kendo-calendar-header-padding-y;
        padding-inline: $kendo-calendar-header-padding-x;
        min-width: ($kendo-calendar-cell-size * 8);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;

        .k-calendar-nav {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            gap: $kendo-calendar-nav-gap;
        }
    }


    // Calendar footer
    .k-calendar-footer,
    .k-calendar .k-footer {
        padding-block: $kendo-calendar-footer-padding-y;
        padding-inline: $kendo-calendar-footer-padding-x;
        text-align: center;
        clear: both;
    }


    // Calendar view wrapper
    .k-calendar-view {
        margin: auto;
        padding-block: 0;
        padding-inline: $kendo-calendar-header-padding-x;
        // setting width / height prevents layout changes in meta views
        width: $kendo-calendar-view-width;
        inline-size: var( --INTERNAL--kendo-calendar-view-width, #{$kendo-calendar-view-width});
        min-height: $kendo-calendar-view-height;
        box-sizing: content-box;
        gap: $kendo-calendar-view-gap;
        position: relative;
        z-index: 1;
        overflow: hidden;

        .k-today {
            font-weight: bold;
        }
    }


    // Month view
    .k-month-calendar,
    .k-calendar-monthview {
        $_month-cell-size: $kendo-calendar-cell-size;

        .k-calendar-td {
            width: $_month-cell-size;
            height: $_month-cell-size;
            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
        }
    }


    // Year view
    .k-year-calendar,
    .k-calendar-yearview {
        $_year-cell-size: ( 2 * $kendo-calendar-cell-size );

        .k-calendar-td {
            width: $_year-cell-size;
            height: $_year-cell-size;
            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
        }
    }


    // Decade view
    .k-decade-calendar,
    .k-calendar-decadeview {
        $_decade-cell-size: ( 2 * $kendo-calendar-cell-size );

        .k-calendar-td {
            width: $_decade-cell-size;
            height: $_decade-cell-size;
            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
        }
    }


    // Century view
    .k-century-calendar,
    .k-calendar-centuryview {
        $_century-cell-size: ( 2 * $kendo-calendar-cell-size );

        .k-calendar-td {
            width: $_century-cell-size;
            height: $_century-cell-size;
            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
        }
        .k-calendar-cell-inner {
            text-align: start;
        }
    }


    // Calendar in popup
    .k-popup .k-calendar {
        height: 100%;
    }
    .k-calendar-container,
    .k-datetime-container {
        padding: 0;

        .k-calendar {
            border-width: 0;
        }
    }




    .k-calendar .k-content.k-scrollable,
    .k-calendar .k-calendar-content.k-scrollable {
        box-sizing: content-box;
        overflow-x: hidden;
        overflow-y: auto;
        display: block;

        @include hide-scrollbar("right");
    }

    // scoped in calendar until it is used elsewhere
    .k-calendar .k-scrollable-placeholder {
        position: absolute;
        z-index: -1;
        width: 1px;
        top: 0;
        right: 0;
    }




    // Calendar sizes
    @each $size, $size-props in $kendo-calendar-sizes {
        $_font-size: k-map-get( $size-props, font-size );
        $_line-height: k-map-get( $size-props, line-height );
        $_cell-size: k-map-get( $size-props, cell-size );
        $_cell-padding-x: k-map-get( $size-props, cell-padding-x );
        $_cell-padding-y: k-map-get( $size-props, cell-padding-y );

        $_month-cell-size: $_cell-size;
        $_year-cell-size: ( 2 * $_cell-size );
        $_decade-cell-size: ( 2 * $_cell-size );
        $_century-cell-size: ( 2 * $_cell-size );

        .k-calendar-#{$size} {
            --INTERNAL--kendo-calendar-view-width: #{8 * $_cell-size};
            --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
            --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
            font-size: $_font-size;
            line-height: $_line-height;

            &.k-month-calendar,
            .k-calendar-monthview {
                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} );
            }
            &.k-year-calendar,
            .k-calendar-yearview {
                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} );
            }
            &.k-decade-calendar,
            .k-calendar-decadeview {
                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} );
            }
            &.k-century-calendar,
            .k-calendar-centuryview {
                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} );
            }
        }
    }




    // Legacy aliases
    .k-link {
        @extend .k-calendar-cell-inner !optional;
    }




    // Infinite calendar
    .k-calendar-infinite {
        box-sizing: content-box;
        display: inline-flex;
        flex-flow: row nowrap;

        .k-calendar-view {
            padding-block: $kendo-infinite-calendar-view-padding-y;
            padding-inline: $kendo-infinite-calendar-view-padding-x;
            height: $kendo-infinite-calendar-view-height;
            flex: 0 0 auto;
            display: flex;
            flex-flow: column nowrap;
            gap: 0;
            overflow: hidden;

            .k-content.k-scrollable {
                position: relative;
            }

            &::after {
                display: block;
                position: absolute;
                bottom: 0;
                content: "\200b";
                height: 0;
                line-height: 0;
                z-index: 1;
                width: 150%;
                left: -25%;
                box-shadow: 0 0 $kendo-calendar-cell-size k-math-div( $kendo-calendar-cell-size, 2 ) $kendo-calendar-bg;
            }
        }

        .k-calendar-header {
            margin-left: calc( #{$kendo-infinite-calendar-view-padding-x} * -1 );
            margin-right: calc( #{$kendo-infinite-calendar-view-padding-x} * -1 );
            padding-block: $kendo-infinite-calendar-header-padding-y;
            padding-inline: $kendo-infinite-calendar-header-padding-x;
            width: auto;
            min-width: 0;
        }

        .k-calendar-weekdays {
            flex: 0 0 auto;
        }
    }


    // Calendar navigation
    .k-calendar-navigation {
        width: $kendo-calendar-navigation-width;
        text-align: center;
        flex: 0 0 auto;
        display: block;
        overflow: hidden;
        position: relative;
        z-index: 1;

        &::before,
        &::after {
            display: block;
            position: absolute;
            content: "\200b";
            height: 0;
            line-height: 0;
            z-index: 1;
            width: 200%;
            left: -50%;
            $shadow-size: 3 * $kendo-calendar-navigation-item-height;
            box-shadow: 0 0 $shadow-size k-math-div( $shadow-size, 2 ) $kendo-calendar-navigation-bg;
        }

        &::before { top: 0; }
        &::after { bottom: 0; }

        .k-content,
        .k-calendar-content {
            background: transparent;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;

            ul {
                width: $kendo-calendar-navigation-width;
            }

            li {
                height: $kendo-calendar-navigation-item-height;
                line-height: $kendo-calendar-navigation-item-height;
                cursor: pointer;
                padding-block: 0;
                padding-inline: 1em;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: clip;
            }
        }

        .k-calendar-navigation-marker {
            font-weight: bold;
        }

        .k-calendar-navigation-highlight {
            width: 100%;
            border-width: 1px 0;
            border-style: solid;
            height: $kendo-calendar-navigation-item-height;
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }

        // // styles are applied to the k-link element inside
        // .k-selected {
        //     color: inherit;
        //     background: transparent;
        //     border-color: transparent;
        // }
    }

    // Multiview calendar
    .k-calendar-range {
        width: auto;

        .k-calendar-view {
            width: auto;
            white-space: nowrap;

            &::after {
                display: none;
            }

            &:focus {
                outline: 0;
            }
        }
    }

    // Range Selection
    .k-range-start {
        border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius;

        .k-calendar-cell-inner,
        .k-link {
            border-color: inherit;
            border-radius: inherit;
        }
    }
    .k-range-end {
        border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0;

        .k-calendar-cell-inner,
        .k-link {
            border-color: inherit;
            border-radius: inherit;
        }
    }
    .k-range-mid {
        border-color: inherit;
        border-radius: 0;
    }
    .k-range-start.k-range-end {
        border-radius: $kendo-calendar-range-cell-border-radius;
    }

    // RTL
    .k-rtl .k-calendar,
    [dir="rtl"] .k-calendar,
    .k-calendar.k-rtl,
    .k-calendar[dir="rtl"] {

        .k-content.k-scrollable,
        .k-calendar-content.k-scrollable {
            @include hide-scrollbar("left");
        }

        // Range Selection RTL
        .k-range-start {
            border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0;
        }
        .k-range-end {
            border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius;
        }

    }

}


@mixin kendo-calendar--layout() {
    @include kendo-calendar--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/calendar/_theme.scss
@mixin kendo-calendar--theme-base() {

    .k-calendar {
        @include fill(
            $kendo-calendar-text,
            $kendo-calendar-bg,
            $kendo-calendar-border
        );


        // TODO: do we even use this?
        // Header / footer
        .k-header {
            @include fill(
                $kendo-calendar-header-text,
                $kendo-calendar-header-bg,
                inherit,
                $kendo-calendar-header-gradient
            );
            @include box-shadow( $kendo-calendar-header-shadow );
        }


        // Header cells
        .k-calendar-th,
        .k-calendar-caption,
        .k-meta-header,
        .k-month-header {
            color: $kendo-calendar-header-cell-text;
        }


        // Special days
        .k-calendar-view .k-today {
            @if $kendo-calendar-today-style == box {
                .k-calendar-cell-inner {
                    box-shadow: inset 0 0 0 1px $kendo-calendar-today-color;
                }
                &.k-focus .k-calendar-cell-inner {
                    @include focus-indicator( $indicator: ( inset 0 0 0 1px $kendo-calendar-today-color, $kendo-calendar-cell-focus-shadow ), $inset: true );
                }
            } @else if $kendo-calendar-today-style == color {
                color: $kendo-calendar-today-color;
            }
        }
        .k-other-month {
            @include fill(
                $kendo-calendar-other-month-text,
                $kendo-calendar-other-month-bg
            );
        }
        .k-weekend {
            @include fill(
                $kendo-calendar-weekend-text,
                $kendo-calendar-weekend-bg
            );
        }
        .k-alt {
            // remove default k-alt background color
            background-color: transparent;
            @include fill(
                $kendo-calendar-week-number-text,
                $kendo-calendar-week-number-bg
            );
        }


        // Interactive states
        .k-calendar-td:hover .k-calendar-cell-inner,
        .k-calendar-td.k-hover .k-calendar-cell-inner {
            @include fill(
                $kendo-calendar-cell-hover-text,
                $kendo-calendar-cell-hover-bg,
                $kendo-calendar-cell-hover-border,
                $kendo-calendar-cell-hover-gradient
            );
        }
        .k-calendar-td.k-selected .k-calendar-cell-inner {
            @include fill(
                $kendo-calendar-cell-selected-text,
                $kendo-calendar-cell-selected-bg,
                $kendo-calendar-cell-selected-border,
                $kendo-calendar-cell-selected-gradient
            );
        }
        .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
        .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner {
            @include fill(
                $kendo-calendar-cell-selected-hover-text,
                $kendo-calendar-cell-selected-hover-bg,
                $kendo-calendar-cell-selected-hover-border,
                $kendo-calendar-cell-selected-hover-gradient
            );
        }
        .k-calendar-td:focus .k-calendar-cell-inner,
        .k-calendar-td.k-focus .k-calendar-cell-inner {
            @include focus-indicator( $kendo-calendar-cell-focus-shadow, true );
        }
        .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
        .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner {
            @include focus-indicator( $kendo-calendar-cell-selected-focus-shadow, true );
        }


        // Calendar navigation
        .k-calendar-navigation {
            @include fill(
                $kendo-calendar-navigation-text,
                $kendo-calendar-navigation-bg
            );
            box-shadow: inset -1px 0 $kendo-calendar-navigation-border;

            li:hover,
            li.k-hover {
                color: $kendo-calendar-navigation-hover-text;
            }
        }
        .k-calendar-navigation-highlight {
            @include fill(
                $kendo-calendar-text,
                $kendo-calendar-bg,
                $kendo-calendar-border
            );
        }


        &[dir="rtl"],
        .k-rtl & {
            .k-calendar-navigation {
                box-shadow: inset 1px 0 $kendo-calendar-navigation-border;
            }
        }

        // Invalid
        &.k-invalid,
        &.k-invalid:hover,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            border-color: $kendo-invalid-border;
        }
    }


    // Scheduler integration
    .k-scheduler .k-calendar .k-other-month {
        @include fill(
            $kendo-calendar-other-month-text,
            transparent
        );
    }




    // Multiview calendar
    .k-calendar { // stylelint-disable-line

        $kendo-calendar-range-gap: k-spacing(1px) !default;
        $kendo-calendar-range-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-calendar-cell-selected-bg, .25 ));
        $kendo-calendar-range-split-size: 5px !default;

        .k-range-start,
        .k-range-end,
        .k-range-mid {
            background-color: $kendo-calendar-range-bg;
        }

        .k-range-start,
        .k-range-end {
            .k-calendar-cell-inner {
                background-color: $kendo-calendar-cell-selected-bg;
            }
        }

        .k-range-start.k-active,
        .k-range-end.k-active {
            .k-calendar-cell-inner {
                box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
            }
        }

        .k-range-split-start,
        .k-range-split-end {
            position: relative;

            &::after {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                bottom: 0;
                width: $kendo-calendar-range-split-size;
            }
        }

        .k-range-split-start::after {
            left: -$kendo-calendar-range-split-size;
            right: auto;
            background-image: linear-gradient(to left, $kendo-calendar-range-bg, transparent 100%);
        }

        .k-range-split-end::after {
            right: -$kendo-calendar-range-split-size;
            left: auto;
            background-image: linear-gradient(to right, $kendo-calendar-range-bg, transparent 100%);
        }
    }

}


@mixin kendo-calendar--theme() {
    @include kendo-calendar--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-calendar--styles() {
    @include module-render( "calendar" ) {
        @include kendo-calendar--layout();
        @include kendo-calendar--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-calendar--styles();
}

// #endregion
// #region @import "./timeselector/_index.scss"; -> scss/timeselector/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "time-selector",
    dependencies: (
        "actions",
        "button",
        "icon",
        "list",
    )
);


// Dependencies
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../action-buttons/_index.scss"; -> scss/action-buttons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/timeselector/_variables.scss
// Time selector

$kendo-time-selector-border-width: 1px !default;
$kendo-time-selector-font-family: var( --kendo-font-family, inherit ) !default;
$kendo-time-selector-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-time-selector-line-height: var( --kendo-line-height, normal ) !default;

$kendo-time-selector-bg: $kendo-component-bg !default;
$kendo-time-selector-text: $kendo-component-text !default;
$kendo-time-selector-border: $kendo-component-border !default;

$kendo-time-selector-header-padding-x: $kendo-actions-padding-x !default;
$kendo-time-selector-header-padding-y: $kendo-actions-padding-y !default;
$kendo-time-selector-header-border-width: 0px !default;

$kendo-time-list-width: 4em !default;
$kendo-time-list-height: 240px !default;

$kendo-time-list-title-font-size: var( --kendo-font-size-sm, inherit ) !default;
$kendo-time-list-title-line-height: var( --kendo-line-height-lg, normal ) !default;
$kendo-time-list-title-height: calc( ( #{$kendo-time-list-title-font-size} ) * ( #{$kendo-time-list-title-line-height} ) ) !default;
$kendo-time-list-title-text: $kendo-subtle-text !default;
$kendo-time-list-title-focus-text: $kendo-component-text !default;

$kendo-time-list-item-padding-x: $kendo-list-md-item-padding-x !default;
$kendo-time-list-item-padding-y: $kendo-list-md-item-padding-y !default;

$kendo-time-list-highlight-border-width: 1px 0px !default;
$kendo-time-list-highlight-height: calc( calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} ) + calc( #{$kendo-time-list-item-padding-y} * 2 ) ) !default;
$kendo-time-list-highlight-bg: $kendo-component-bg !default;
$kendo-time-list-highlight-border: $kendo-component-border !default;

$kendo-time-list-focus-bg: rgba(0, 0, 0, .04) !default;


// Time selector sizes
$kendo-time-selector-sm-font-size: $kendo-list-sm-font-size !default;
$kendo-time-selector-sm-line-height: $kendo-list-sm-line-height !default;
$kendo-time-selector-sm-list-item-padding-x: $kendo-list-sm-item-padding-x !default;
$kendo-time-selector-sm-list-item-padding-y: $kendo-list-sm-item-padding-y !default;

$kendo-time-selector-md-font-size: $kendo-list-md-font-size !default;
$kendo-time-selector-md-line-height: $kendo-list-md-line-height !default;
$kendo-time-selector-md-list-item-padding-x: $kendo-list-md-item-padding-x !default;
$kendo-time-selector-md-list-item-padding-y: $kendo-list-md-item-padding-y !default;

$kendo-time-selector-lg-font-size: $kendo-list-lg-font-size !default;
$kendo-time-selector-lg-line-height: $kendo-list-lg-line-height !default;
$kendo-time-selector-lg-list-item-padding-x: $kendo-list-lg-item-padding-x !default;
$kendo-time-selector-lg-list-item-padding-y: $kendo-list-lg-item-padding-y !default;

$kendo-time-selector-sizes: (
    sm: (
        font-size: $kendo-time-selector-sm-font-size,
        line-height: $kendo-time-selector-sm-line-height,
        list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
        list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y
    ),
    md: (
        font-size: $kendo-time-selector-md-font-size,
        line-height: $kendo-time-selector-md-line-height,
        list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
        list-item-padding-y: $kendo-time-selector-md-list-item-padding-y
    ),
    lg: (
        font-size: $kendo-time-selector-lg-font-size,
        line-height: $kendo-time-selector-lg-line-height,
        list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
        list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
    )
) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/timeselector/_layout.scss
@mixin kendo-time-selector--layout-base() {

    // Time selector
    .k-timeselector {
        border-width: $kendo-time-selector-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-time-selector-font-family;
        font-size: $kendo-time-selector-font-size;
        line-height: $kendo-time-selector-line-height;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-flow: column nowrap;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        .k-popup > & {
            border-width: 0;
        }
    }


    // Time selector header
    .k-time-header,
    .k-time-selector-header {
        padding-block: $kendo-time-selector-header-padding-y;
        padding-inline: $kendo-time-selector-header-padding-x;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;

        .k-title,
        .k-time-selector-header-title {
            padding-block: $kendo-button-padding-y;
            padding-inline: $kendo-button-padding-x;
            font-weight: bold;
            display: inline-block;
        }

        .k-time-now {
            border-width: 0;
            line-height: inherit;
            cursor: pointer;
        }
    }

    // Fast selection
    .k-actions.k-time-fast-selection {
        margin-top: 0;
    }


    // Time selector footer
    // .k-time-footer {}
    // .k-time-selector-footer {}


    // Time list container
    .k-time-list-container {
        display: flex;
        position: relative;
        flex: 1 1 auto;
        overflow: hidden;
    }


    // Time list highlight
    .k-time-highlight,
    .k-time-list-highlight {
        width: 100%;
        height: $kendo-time-list-highlight-height;
        border-width: $kendo-time-list-highlight-border-width;
        border-style: solid;
        box-sizing: border-box;
        position: absolute;
        top: calc( 50% + #{k-math-div( $kendo-time-list-title-height, 2 )});
        left: 0;
        right: 0;
        transform: translateY(-50%);
        z-index: 1;
    }


    // Time list wrapper
    .k-time-list-wrapper {
        min-width: $kendo-time-list-width;
        height: $kendo-time-list-height;
        box-sizing: content-box;
        display: inline-flex;
        flex-flow: column nowrap;
        align-items: stretch;
        overflow: hidden;
        position: relative;
        text-align: center;
        flex: 1 1 auto;

        .k-title {
            font-size: $kendo-time-list-title-font-size;
            line-height: $kendo-time-list-title-line-height;
            font-weight: bold;
            text-align: center;
            text-transform: capitalize;
            display: block;
        }

        &.k-focus {
            &::before,
            &::after {
                display: block;
                content: "\200b";
                position: absolute;
                width: 100%;
                left: 0;
                pointer-events: none;
                height: calc( 50% - #{k-math-div( $kendo-time-list-highlight-height, 2 )} );
                box-sizing: border-box;
                border-width: 0;
                border-style: solid;
            }

            &::before {
                top: $kendo-time-list-title-height;
            }

            &::after {
                bottom: 0;
            }
        }
    }


    // Time list
    .k-time-list {
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        flex: 1;
        position: relative;
        z-index: 1;
        outline: 0;
        overflow: hidden;

        &::before,
        &::after {
            display: block;
            position: absolute;
            content: "\200b";
            height: 0;
            line-height: 0;
            z-index: 1;
            width: 200%;
            left: -50%;
        }

        &::before { top: 0; }
        &::after { bottom: 0; }
    }


    // Time list content
    .k-time-container,
    .k-time-list-content {
        position: relative;
        flex: 1 1 auto;
        display: block;
        overflow-x: hidden;
        overflow-y: scroll;

        @include hide-scrollbar("right");

        > ul {
            height: auto;
            width: $kendo-time-list-width;
            margin: auto;
        }

        .k-scrollable-placeholder {
            position: absolute;
            width: 1px;
            top: 0;
            right: 0;
        }
    }


    // Time list item
    .k-time-list-item,
    .k-time-list .k-item {
        padding-block: $kendo-time-list-item-padding-y;
        padding-inline: $kendo-time-list-item-padding-x;
    }


    // Time separator
    .k-time-separator {
        width: 0;
        height: $kendo-time-list-highlight-height;
        align-self: center;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 11;
        top: calc( #{k-math-div( $kendo-time-list-title-height, 2 )} );
    }


    // Time selector sizes
    @each $size, $size-props in $kendo-time-selector-sizes {
        $_font-size: k-map-get( $size-props, font-size );
        $_line-height: k-map-get( $size-props, line-height );
        $_list-item-padding-x: k-map-get( $size-props, list-item-padding-x );
        $_list-item-padding-y: k-map-get( $size-props, list-item-padding-y );
        $_highlight-height: calc( calc( #{$_font-size} * #{$_line-height} ) + calc( #{ $_list-item-padding-y} * 2 ) );


        .k-timeselector-#{$size} {
            font-size: $_font-size;
            line-height: $_line-height;

            .k-time-highlight,
            .k-time-list-highlight {
                height: $_highlight-height;
            }

            .k-time-separator {
                height:  $_highlight-height;
            }

            .k-time-list-item,
            .k-time-list .k-item {
                padding-block: $_list-item-padding-y;
                padding-inline: $_list-item-padding-x;
            }
        }
    }



    .k-rtl,
    [dir="rtl"] {

        // Time list content
        .k-time-container,
        .k-time-list-content {
            @include hide-scrollbar("left");
        }
    }

}


@mixin kendo-time-selector--layout() {
    @include kendo-time-selector--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/timeselector/_theme.scss
@mixin kendo-time-selector--theme-base() {

    // Time selector
    .k-timeselector {
        @include fill(
            $kendo-time-selector-text,
            $kendo-time-selector-bg,
            $kendo-time-selector-border
        );
    }


    // Time selector header
    .k-time-header,
    .k-time-selector-header {

        .k-time-now {
            // TODO: use a variable
            color: $kendo-link-text;
        }
        .k-time-now:hover {
            // TODO: use a variable
            color: $kendo-link-hover-text;
        }
    }


    // Time list wrapper
    .k-time-list-wrapper {

        .k-title {
            color: $kendo-time-list-title-text;
        }

        &.k-focus {
            .k-title {
                color: $kendo-time-list-title-focus-text;
            }

            &::before,
            &::after {
                background-color: $kendo-time-list-focus-bg;
            }
        }
    }


    // Time list
    .k-time-list {
        &::before,
        &::after {
            $shadow-size: 3em;
            box-shadow: 0 0 $shadow-size k-math-div( $shadow-size, 2 ) $kendo-time-selector-bg;
        }

        .k-item:hover {
            color: $kendo-color-primary;
        }
    }

    .k-time-container {
        background: transparent;
    }

    .k-time-highlight {
        @include fill(
            $bg: $kendo-time-list-highlight-bg,
            $border: $kendo-time-list-highlight-border
        );
    }

}


@mixin kendo-time-selector--theme() {
    @include kendo-time-selector--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-time-selector--styles() {
    @include module-render( "time-selector" ) {
        @include kendo-time-selector--layout();
        @include kendo-time-selector--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-time-selector--styles();
}

// #endregion


// Augmented forms
// #region @import "./autocomplete/_index.scss"; -> scss/autocomplete/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "autocomplete",
    dependencies: (
        "icon",
        "input",
        "list",
        "popup",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../floating-label/_index.scss"; -> scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/autocomplete/_variables.scss
// Autocomplete

// #endregion
// #region @import "./_layout.scss"; -> scss/autocomplete/_layout.scss
@mixin kendo-autocomplete--layout-base() {

    // Autocomplete
    .k-autocomplete {}

}


@mixin kendo-autocomplete--layout() {
    @include kendo-autocomplete--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/autocomplete/_theme.scss
@mixin kendo-autocomplete--theme-base() {

    // Autocomplete
    .k-autocomplete {}

}


@mixin kendo-autocomplete--theme() {
    @include kendo-autocomplete--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-autocomplete--styles() {
    @include module-render( "autocomplete" ) {
        @include kendo-autocomplete--layout();
        @include kendo-autocomplete--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-autocomplete--styles();
}

// #endregion
// #region @import "./captcha/_index.scss"; -> scss/captcha/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "captcha",
    dependencies: (
        "button",
        "icon",
        "input",
        "slider",
        "textbox",
        // "utils/layout/position",
        // "utils/typography/text-color",
    )
);


// Dependencies
// @import "../utils/_index.scss";
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../textbox/_index.scss"; -> scss/textbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../slider/_index.scss"; -> scss/slider/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/captcha/_variables.scss
// Captcha

/// The spacer of the Captcha.
/// @group captcha
$kendo-captcha-spacer: k-spacing(2) !default;

/// The width of the Captcha.
/// @group captcha
$kendo-captcha-width: 280px !default;
/// The font family of the Captcha.
/// @group captcha
$kendo-captcha-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Captcha.
/// @group captcha
$kendo-captcha-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Captcha.
/// @group captcha
$kendo-captcha-line-height: var( --kendo-line-height, normal ) !default;
/// The gap of the Captcha.
/// @group captcha
$kendo-captcha-gap: $kendo-captcha-spacer !default;
/// The background color of the Captcha.
/// @group captcha
$kendo-captcha-bg: $kendo-component-bg !default;
/// The text color of the Captcha.
/// @group captcha
$kendo-captcha-text: $kendo-component-bg !default;
/// The border color of the Captcha.
/// @group captcha
$kendo-captcha-border: $kendo-component-bg !default;

/// The gap of the Captcha image wrapper.
/// @group captcha
$kendo-captcha-image-wrap-gap: $kendo-captcha-spacer !default;
/// The gap of the Captcha image controls.
/// @group captcha
$kendo-captcha-image-controls-gap: $kendo-captcha-spacer !default;

/// The top margin of the Captcha validation message.
/// @group captcha
$kendo-captcha-validation-message-margin-top: calc( #{$kendo-captcha-spacer} / 2 ) !default;
/// The font size of the Captcha validation message.
/// @group captcha
$kendo-captcha-validation-message-font-size: var( --kendo-font-size-sm, inherit ) !default;
/// The font style of the Captcha validation message.
/// @group captcha
$kendo-captcha-validation-message-font-style: italic !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/captcha/_layout.scss
@mixin kendo-captcha--layout-base() {

    // Captcha
    .k-captcha {
        width: $kendo-captcha-width;
        box-sizing: border-box;
        font-size: $kendo-captcha-font-size;
        font-family: $kendo-captcha-font-family;
        line-height: $kendo-captcha-line-height;
        display: flex;
        flex-flow: column nowrap;
        gap: $kendo-captcha-gap;

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

    // Image
    .k-captcha-image-wrap {
        position: relative;
        gap: $kendo-captcha-image-wrap-gap;
    }

    .k-captcha-image-controls {
        position: relative;
        gap: $kendo-captcha-image-controls-gap;
    }

    .k-captcha-image {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .k-captcha-image > img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    // Loading
    .k-captcha-loading .k-captcha-image {
        height: auto;
    }

    // Volume Control
    .k-captcha-volume-control {
        height: 100%;
    }

    // Verification Success
    .k-captcha-validation-message {
        margin-top: $kendo-captcha-validation-message-margin-top;
        font-size: $kendo-captcha-validation-message-font-size;
        font-style: $kendo-captcha-validation-message-font-style;
    }

}


@mixin kendo-captcha--layout() {
    @include kendo-captcha--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/captcha/_theme.scss
@mixin kendo-captcha--theme-base() {

    // Captcha
    .k-captcha {
        @include fill(
            $kendo-captcha-text,
            $kendo-captcha-bg,
            $kendo-captcha-border
        );
    }

}


@mixin kendo-captcha--theme() {
    @include kendo-captcha--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-captcha--styles() {
    @include module-render( "captcha" ) {
        @include kendo-captcha--layout();
        @include kendo-captcha--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-captcha--styles();
}

// #endregion
// #region @import "./colorpalette/_index.scss"; -> scss/colorpalette/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "color-palette",
    dependencies: (
        // "utils/flex-grid",
    )
);


// Dependencies
// @import "../utils/_flex.scss";


// Component
// #region @import "./_variables.scss"; -> scss/colorpalette/_variables.scss
// ColorPalette

/// The font family of the ColorPalette.
/// @group color-palette
$kendo-color-palette-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the ColorPalette.
/// @group color-palette
$kendo-color-palette-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the ColorPalette.
/// @group color-palette
$kendo-color-palette-line-height: 0 !default;

/// The width of the ColorPalette tile.
/// @group color-palette
$kendo-color-palette-tile-width: k-spacing(6) !default;
/// The height of the ColorPalette tile.
/// @group color-palette
$kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
/// The shadow of the ColorPalette focused tile.
/// @group color-palette
$kendo-color-palette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
/// The shadow of the ColorPalette hovered tile.
/// @group color-palette
$kendo-color-palette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
/// The shadow of the ColorPalette selected tile.
/// @group color-palette
$kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/colorpalette/_layout.scss
@mixin kendo-color-palette--layout-base() {

    // ColorPalette
    .k-colorpalette {
        border-width: 0;
        box-sizing: border-box;
        outline: 0;
        font-size: $kendo-color-palette-font-size;
        font-family: $kendo-color-palette-font-family;
        line-height: $kendo-color-palette-line-height;
        display: inline-flex;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

    // Table
    .k-colorpalette-table {
        width: 100%;
        height: 100%;
        border-collapse: collapse;
        position: relative;
    }

    // Tile
    .k-colorpalette-tile {
        width: $kendo-color-palette-tile-width;
        height: $kendo-color-palette-tile-height;
        box-sizing: border-box;
        overflow: hidden;
        cursor: pointer;

        &:hover,
        &.k-hover {
            position: relative;
            z-index: 101;
        }

        &:focus,
        &.k-focus,
        &.k-selected,
        &.k-selected:hover {
            position: relative;
            z-index: 100;
        }
    }

}


@mixin kendo-color-palette--layout() {
    @include kendo-color-palette--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/colorpalette/_theme.scss
@mixin kendo-color-palette--theme-base() {

    // Tile
    .k-colorpalette-tile {

        &:focus,
        &.k-focus {
            @include focus-indicator( $kendo-color-palette-tile-focus-shadow );
        }

        &:hover,
        &.k-hover {
            @include box-shadow( $kendo-color-palette-tile-hover-shadow );
        }

        &.k-selected,
        &.k-selected:hover {
            @include box-shadow( $kendo-color-palette-tile-selected-shadow );
        }

    }

}


@mixin kendo-color-palette--theme() {
    @include kendo-color-palette--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-color-palette--styles() {
    @include module-render( "color-palette" ) {
        @include kendo-color-palette--layout();
        @include kendo-color-palette--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-color-palette--styles();
}

// #endregion
// #region @import "./colorgradient/_index.scss"; -> scss/colorgradient/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "color-gradient",
    dependencies: (
        "button",
        "icon",
        "numeric-textbox",
        "slider",
        "textbox",
        "utils/flex-grid",
    )
);


// Dependencies
// @import "../utils/_flex.scss";
// @import "../utils/_spacer.scss";
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../slider/_index.scss"; -> scss/slider/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../textbox/_index.scss"; -> scss/textbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../numerictextbox/_index.scss"; -> scss/numerictextbox/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "numeric-textbox",
    dependencies: (
        "input",
        "icon",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../floating-label/_index.scss"; -> scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/numerictextbox/_variables.scss
// Numeric Textbox

// #endregion
// #region @import "./_layout.scss"; -> scss/numerictextbox/_layout.scss
@mixin kendo-numeric-textbox--layout-base() {

    // Numeric textbox
    .k-numeric-textbox {}


    // Alias
    .k-numerictextbox { @extend .k-numeric-textbox !optional; }

}


@mixin kendo-numeric-textbox--layout() {
    @include kendo-numeric-textbox--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/numerictextbox/_theme.scss
@mixin kendo-numeric-textbox--theme-base() {

    // Numeric textbox
    .k-numeric-textbox {}

}


@mixin kendo-numeric-textbox--theme() {
    @include kendo-numeric-textbox--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-numeric-textbox--styles() {
    @include module-render( "numeric-textbox" ) {
        @include kendo-numeric-textbox--layout();
        @include kendo-numeric-textbox--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-numeric-textbox--styles();
}

// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/colorgradient/_variables.scss
// #region @import "./images/alpha-slider-bgr.scss"; -> scss/colorgradient/images/alpha-slider-bgr.scss
// File already imported_once. Skipping output.
// #endregion

// ColorGradient

/// The spacer of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-spacer: k-spacing(3) !default;

/// The width of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-width: 272px !default;
/// The width of the border around the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-border-width: 1px !default;
/// The border radius of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-border-radius: k-border-radius(md) !default;
/// The vertical padding of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-padding-y: $kendo-color-gradient-spacer !default;
/// The horizontal padding of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-padding-x: $kendo-color-gradient-padding-y !default;
/// The spacing between the sections of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-gap: $kendo-color-gradient-spacer !default;
/// The font family of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default;
/// The text color of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-text: $kendo-component-text !default;
/// The background color of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-bg: $kendo-component-bg !default;
/// The border color of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-border: $kendo-component-border !default;

/// The border color of the focused ColorGradient.
/// @group color-gradient
$kendo-color-gradient-focus-border: null !default;
/// The box shadow of the focused ColorGradient.
/// @group color-gradient
$kendo-color-gradient-focus-shadow: k-elevation(3) !default;

/// The border radius of the ColorGradient canvas.
/// @group color-gradient
$kendo-color-gradient-canvas-border-radius: k-border-radius(md) !default;
/// The spacing between the items of the ColorGradient canvas.
/// @group color-gradient
$kendo-color-gradient-canvas-gap: $kendo-color-gradient-spacer !default;
/// The height the ColorGradient canvas hsv rectangle.
/// @group color-gradient
$kendo-color-gradient-canvas-rectangle-height: 180px !default;

/// The width of the ColorGradient slider.
/// @group color-gradient
$kendo-color-gradient-slider-track-size: 10px !default;
/// The border radius of the ColorGradient slider.
/// @group color-gradient
$kendo-color-gradient-slider-border-radius: 10px !default;
/// The width of the border around the ColorGradient slider drag handle.
/// @group color-gradient
$kendo-color-gradient-slider-draghandle-border-width: 3px !default;

/// The height of the ColorGradient vertical slider.
/// @group color-gradient
$kendo-color-gradient-slider-vertical-size: 180px !default;
/// The width of the ColorGradient horizontal slider.
/// @group color-gradient
$kendo-color-gradient-slider-horizontal-size: 100% !default;

/// The width of the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-width: 14px !default;
/// The height of the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-height: 14px !default;
/// The width of the border around the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-border-width: 1px !default;
/// The width of the outline around the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-outline-width: 1px !default;
/// The border radius of the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-border-radius: 50% !default;
/// The text color of the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-text: null !default;
/// The background color of the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-bg: transparent !default;
/// The color of the border around the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-border: rgba( $kendo-color-white, .8) !default;
/// The color of the outline around the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-shadow: rgba( $kendo-color-black, .5 ) !default;
/// The focus color of the outline around the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-focus-shadow: $kendo-color-black !default;
/// The hover color of the outline around the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-black !default;
/// The box shadow of the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-shadow: k-elevation(2) !default;

/// The vertical margin of the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-canvas-draghandle-margin-y: - k-math-div( $kendo-color-gradient-draghandle-height, 2 ) !default;
/// The horizontal margin of the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-canvas-draghandle-margin-x: - k-math-div( $kendo-color-gradient-draghandle-width, 2 ) !default;

/// The width of the ColorGradient input.
/// @group color-gradient
$kendo-color-gradient-input-width: 46px !default;
/// The spacing between the ColorGradient inputs.
/// @group color-gradient
$kendo-color-gradient-input-gap: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;
/// The spacing between the ColorGradient inputs and their labels.
/// @group color-gradient
$kendo-color-gradient-input-label-gap: calc( #{$kendo-color-gradient-spacer} / 3 ) !default;
/// The text color of the ColorGradient input labels.
/// @group color-gradient
$kendo-color-gradient-input-label-text: $kendo-subtle-text !default;

/// The font weight of the ColorGradient contrast ratio text.
/// @group color-gradient
$kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
/// The spacing between the items in the ColorGradient contrast tool.
/// @group color-gradient
$kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/colorgradient/_layout.scss
@mixin kendo-color-gradient--layout-base() {

    // ColorGradient
    .k-colorgradient {
        @include border-radius( $kendo-color-gradient-border-radius );
        width: $kendo-color-gradient-width;
        padding-block: $kendo-color-gradient-padding-y;
        padding-inline: $kendo-color-gradient-padding-x;
        border-style: solid;
        border-width: $kendo-color-gradient-border-width;
        box-sizing: border-box;
        outline: 0;
        font-size: $kendo-color-gradient-font-size;
        font-family: $kendo-color-gradient-font-family;
        line-height: $kendo-color-gradient-line-height;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: $kendo-color-gradient-gap;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

    // Canvas
    .k-colorgradient-canvas {
        gap: $kendo-color-gradient-canvas-gap;

        .k-hsv-rectangle {
            @include border-radius( $kendo-color-gradient-canvas-border-radius );
            position: relative;
            flex: 1 1 auto;
            user-select: none;
        }

        .k-hsv-gradient {
            @include border-radius( $kendo-color-gradient-canvas-border-radius );
            height: $kendo-color-gradient-canvas-rectangle-height;
        }

        .k-hsv-draghandle {
            margin-top: $kendo-color-gradient-canvas-draghandle-margin-y;
            margin-left: $kendo-color-gradient-canvas-draghandle-margin-x;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            cursor: pointer;
        }

        .k-hsv-controls {
            position: relative;
            flex-shrink: 0;
            gap: $kendo-color-gradient-canvas-gap;
        }
    }

    // DragHandle
    .k-colorgradient .k-draghandle {
        @include border-radius( $kendo-color-gradient-draghandle-border-radius );
        width: $kendo-color-gradient-draghandle-width;
        height: $kendo-color-gradient-draghandle-height;
        border-width: $kendo-color-gradient-draghandle-border-width;
        border-style: solid;
        outline-width: $kendo-color-gradient-draghandle-outline-width;
        outline-style: solid;
        box-sizing: border-box;
    }

    // Sliders
    .k-colorgradient-slider {

        &.k-slider-vertical {
            width: $kendo-color-gradient-slider-track-size;
            height: $kendo-color-gradient-slider-vertical-size;
            flex: 0 0 $kendo-color-gradient-slider-track-size;
        }
        &.k-slider-vertical .k-slider-track {
            width: $kendo-color-gradient-slider-track-size;
            border-radius: $kendo-color-gradient-slider-border-radius;
            margin-left: - k-math-div( $kendo-color-gradient-slider-track-size, 2 );
        }

        &.k-slider-horizontal {
            width: $kendo-color-gradient-slider-horizontal-size;
            height: $kendo-color-gradient-slider-track-size;
            flex: 0 0 $kendo-color-gradient-slider-track-size;
        }
        &.k-slider-horizontal .k-slider-track {
            height: $kendo-color-gradient-slider-track-size;
            border-radius: $kendo-color-gradient-slider-border-radius;
            margin-top: - k-math-div( $kendo-color-gradient-slider-track-size, 2 );
        }

        &.k-alpha-slider .k-slider-track::before {
            content: "";
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 10px;
            position: relative;
            z-index: -1;
        }

        .k-slider-track-wrap {
            z-index: 1;
        }

        .k-slider-selection {
            display: none;
        }

        .k-draghandle {
            border-width: $kendo-color-gradient-slider-draghandle-border-width;
        }
    }

    // Inputs
    .k-colorgradient-inputs {
        gap: $kendo-color-gradient-input-gap;

        .k-colorgradient-input-label {
            text-transform: uppercase;
        }

        > .k-vstack {
            gap: $kendo-color-gradient-input-label-gap;
        }

        .k-numerictextbox {
            width: $kendo-color-gradient-input-width;
        }

        .k-input-inner {
            padding-inline-start: 2px;
            padding-inline-end: 2px;
            text-align: center;
            text-overflow: clip;
        }
    }

    // Contrast
    .k-colorgradient-color-contrast {

        > div {
            display: flex;
            flex-flow: row nowrap;
            gap: $kendo-color-gradient-contrast-spacer;
        }

        .k-contrast-ratio {
            margin-bottom: $kendo-color-gradient-contrast-spacer;
        }

        .k-contrast-ratio-text {
            font-weight: $kendo-color-gradient-contrast-ratio-font-weight;
        }

        .k-contrast-validation {
            display: inline-flex;
            align-items: center;
            gap: calc( #{$kendo-color-gradient-contrast-spacer} / 2 );

            .k-icon {
                vertical-align: middle;
            }

            // Needed for the double check icons
            .k-icon + .k-icon,
            .k-icon-wrapper-host + .k-icon-wrapper-host .k-icon {
                margin-inline-start: -13px;
            }
        }
    }
    .k-color-contrast-svg {
        position: absolute;
        top: 0;
        left: 0;
        overflow: visible;
        pointer-events: none;
    }

}


@mixin kendo-color-gradient--layout() {
    @include kendo-color-gradient--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/colorgradient/_theme.scss
@mixin kendo-color-gradient--theme-base() {

    // ColorGradient
    .k-colorgradient {
        @include fill(
            $kendo-color-gradient-text,
            $kendo-color-gradient-bg,
            $kendo-color-gradient-border
        );
    }

    .k-colorgradient:focus,
    .k-colorgradient.k-focus {
        @include fill( $border: $kendo-color-gradient-focus-border );
        @include focus-indicator( $kendo-color-gradient-focus-shadow );
    }

    // Canvas
    .k-colorgradient-canvas .k-hsv-gradient {
        background: linear-gradient( to bottom, $kendo-gradient-transparent-to-black ), linear-gradient( to right, $kendo-gradient-white-to-transparent );
    }

    // DragHandle
    .k-colorgradient .k-draghandle {
        @include fill(
            $kendo-color-gradient-draghandle-text,
            $kendo-color-gradient-draghandle-bg,
            $kendo-color-gradient-draghandle-border
        );
        outline-color: $kendo-color-gradient-draghandle-focus-shadow;
        @include box-shadow( $kendo-color-gradient-draghandle-shadow );

        &:focus,
        &.k-focus {
            @include fill( $bg: transparent, $border: $kendo-color-white );
            outline-color: $kendo-color-gradient-draghandle-focus-shadow;
            @include focus-indicator( $kendo-color-gradient-draghandle-shadow );
        }

        &:hover,
        &.k-hover,
        &.k-active,
        &:active {
            @include fill( $bg: transparent, $border: $kendo-color-white );
            outline-color: $kendo-color-gradient-draghandle-hover-shadow;
        }
    }

    // Slider
    .k-colorgradient-slider.k-hue-slider {
        &.k-slider-horizontal .k-slider-track {
            background: linear-gradient( to right, $kendo-gradient-rainbow );
        }

        &.k-slider-vertical .k-slider-track {
            background: linear-gradient( to top, $kendo-gradient-rainbow );
        }
    }

    .k-colorgradient-slider.k-alpha-slider .k-slider-track::before {
        // TODO: extract variable
        background: url(#{k-map-get($_kendo-data-uris, "alpha-slider-bgr.png")}) center repeat;
    }

    // Inputs
    .k-colorgradient-input-label {
        @include fill( $color: $kendo-color-gradient-input-label-text );
    }


    // RTL
    .k-rtl,
    [dir="rtl"] {
        .k-colorgradient {

            .k-hue-slider.k-slider-horizontal .k-slider-track {
                background: linear-gradient( to left, $kendo-gradient-rainbow );
            }

        }
    }

}


@mixin kendo-color-gradient--theme() {
    @include kendo-color-gradient--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-color-gradient--styles() {
    @include module-render( "color-gradient" ) {
        @include kendo-color-gradient--layout();
        @include kendo-color-gradient--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-color-gradient--styles();
}

// #endregion
// #region @import "./coloreditor/_index.scss"; -> scss/coloreditor/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "color-editor",
    dependencies: (
        "actions",
        "color-gradient",
        "color-palette",
        "color-preview",
    )
);


// Dependencies
// #region @import "../action-buttons/_index.scss"; -> scss/action-buttons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../color-preview/_index.scss"; -> scss/color-preview/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../colorpalette/_index.scss"; -> scss/colorpalette/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../colorgradient/_index.scss"; -> scss/colorgradient/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/coloreditor/_variables.scss
// ColorEditor/FlatColorPicker

/// The spacer of the ColorEditor.
/// @group color-editor
$kendo-color-editor-spacer: k-spacing(3) !default;

/// The minimum width of the ColorEditor.
/// @group color-editor
$kendo-color-editor-min-width: 272px !default;
/// The width of the border around the ColorEditor.
/// @group color-editor
$kendo-color-editor-border-width: 1px !default;
/// The border radius of the ColorEditor.
/// @group color-editor
$kendo-color-editor-border-radius: k-border-radius(md) !default;
/// The font family of the ColorEditor.
/// @group color-editor
$kendo-color-editor-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the ColorEditor.
/// @group color-editor
$kendo-color-editor-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the ColorEditor.
/// @group color-editor
$kendo-color-editor-line-height: var( --kendo-line-height, normal ) !default;
/// The text color of the ColorEditor.
/// @group color-editor
$kendo-color-editor-text: $kendo-component-text !default;
/// The background color of the ColorEditor.
/// @group color-editor
$kendo-color-editor-bg: $kendo-component-bg !default;
/// The border color of the ColorEditor.
/// @group color-editor
$kendo-color-editor-border: $kendo-component-border !default;

/// The border color of the focused ColorEditor.
/// @group color-editor
$kendo-color-editor-focus-border: null !default;
// TODO: does this ever get focused? Isn't it always in a popup?
/// The box shadow of the focused ColorEditor.
/// @group color-editor
$kendo-color-editor-focus-shadow: null  !default; // 1px 1px 7px 1px rgba(0, 0, 0, .3)

/// The vertical padding of the ColorEditor header.
/// @group color-editor
$kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
/// The horizontal padding of the ColorEditor header.
/// @group color-editor
$kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
/// The spacing between the ColorEditor header actions.
/// @group color-editor
$kendo-color-editor-header-actions-gap: calc( #{$kendo-color-editor-spacer} / 1.5 ) !default;

/// The width of the ColorEditor preview.
/// @group color-editor
$kendo-color-editor-color-preview-width: 32px !default;
/// The height of the ColorEditor preview.
/// @group color-editor
$kendo-color-editor-color-preview-height: 12px !default;
/// The spacing between the colors in the ColorEditor preview.
/// @group color-editor
$kendo-color-editor-preview-gap: k-spacing(1) !default;

/// The vertical padding of the ColorEditor views container.
/// @group color-editor
$kendo-color-editor-views-padding-y: $kendo-color-editor-spacer !default;
/// The horizontal padding of the ColorEditor views container.
/// @group color-editor
$kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !default;
/// The spacing of the ColorEditor views container.
/// @group color-editor
$kendo-color-editor-views-gap: $kendo-color-editor-spacer !default;

/// The outline color of the focused ColorGradient.
/// @group color-editor
$kendo-color-editor-color-gradient-focus-outline-color: rgba(0, 0, 0, .3) !default;
/// The outline width of the focused ColorGradient.
/// @group color-editor
$kendo-color-editor-color-gradient-focus-outline: 2px !default;
/// The outline offset of the focused ColorGradient.
/// @group color-editor
$kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/coloreditor/_layout.scss
@mixin kendo-color-editor--layout-base() {

    // ColorEditor/FlatColorPicker
    .k-coloreditor {
        @include border-radius( $kendo-color-editor-border-radius );
        min-width: $kendo-color-editor-min-width;
        border-width: $kendo-color-editor-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-size: $kendo-color-editor-font-size;
        font-family: $kendo-color-editor-font-family;
        line-height: $kendo-color-editor-line-height;
        display: inline-flex;
        flex-direction: column;
        align-items: stretch;

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

    // Header
    .k-coloreditor-header {
        padding: $kendo-color-editor-header-padding-y $kendo-color-editor-header-padding-x 0;
    }

    .k-coloreditor-header-actions {
        gap: $kendo-color-editor-header-actions-gap;
    }

    .k-coloreditor-preview {
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;
        justify-content: center;
        gap: $kendo-color-editor-preview-gap;
        position: relative;
        z-index: 1;
    }
    .k-coloreditor-preview .k-color-preview {
        width: $kendo-color-editor-color-preview-width;
        height: $kendo-color-editor-color-preview-height;
    }

    // Views
    .k-coloreditor-views {
        min-width: calc( var(--kendo-color-preview-width, #{$kendo-color-palette-tile-width}) * var(--kendo-color-preview-columns, 10) );
        padding-block: $kendo-color-editor-views-padding-y;
        padding-inline: $kendo-color-editor-views-padding-x;
        gap: $kendo-color-editor-views-gap;

        .k-colorgradient {
            padding: 0;
            width: auto;
            border-width: 0;
        }
        .k-colorgradient:focus,
        .k-colorgradient.k-focus {
            outline: $kendo-color-editor-color-gradient-focus-outline dotted;
            outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset;
            border-radius: 0;
        }

        .k-colorpalette {
            align-self: center;
        }

        .k-colorpalette-tile {
            width: var(--kendo-color-preview-width, $kendo-color-palette-tile-width);
            height: var(--kendo-color-preview-height, $kendo-color-palette-tile-height);
        }
    }

    // Footer
    .k-coloreditor-footer.k-actions {
        margin: 0;
    }

}


@mixin kendo-color-editor--layout() {
    @include kendo-color-editor--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/coloreditor/_theme.scss
@mixin kendo-color-editor--theme-base() {

    // ColorEditor/FlatColorPicker
    .k-coloreditor {
        @include fill(
            $kendo-color-editor-text,
            $kendo-color-editor-bg,
            $kendo-color-editor-border
        );
    }

    .k-coloreditor:focus,
    .k-coloreditor.k-focus {
        @include fill( $border: $kendo-color-editor-focus-border );
        @include focus-indicator( $kendo-color-editor-focus-shadow );
    }

    .k-coloreditor .k-colorgradient:focus,
    .k-coloreditor .k-colorgradient.k-focus {
        box-shadow: none;
        outline-color: $kendo-color-editor-color-gradient-focus-outline-color;
    }

}


@mixin kendo-color-editor--theme() {
    @include kendo-color-editor--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-color-editor--styles() {
    @include module-render( "color-editor" ) {
        @include kendo-color-editor--layout();
        @include kendo-color-editor--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-color-editor--styles();
}

// #endregion
// #region @import "./colorpicker/_index.scss"; -> scss/colorpicker/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "color-picker",
    dependencies: (
        "button",
        "color-editor",
        "icon",
        "input",
        "popup",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../coloreditor/_index.scss"; -> scss/coloreditor/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/colorpicker/_variables.scss
// Color picker

// #endregion
// #region @import "./_layout.scss"; -> scss/colorpicker/_layout.scss
@mixin kendo-color-picker--layout-base() {

    // Color picker
    .k-color-picker {
        width: min-content;
    }

    // Alias
    .k-colorpicker {
        @extend .k-color-picker !optional;
    }

}


@mixin kendo-color-picker--layout() {
    @include kendo-color-picker--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/colorpicker/_theme.scss
@mixin kendo-color-picker--theme-base() {

    // Color picker
    .k-color-picker {}

}

@mixin kendo-color-picker--theme() {
    @include kendo-color-picker--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-color-picker--styles() {
    @include module-render( "color-picker" ) {
        @include kendo-color-picker--layout();
        @include kendo-color-picker--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-color-picker--styles();
}

// #endregion
// #region @import "./combobox/_index.scss"; -> scss/combobox/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "combobox",
    dependencies: (
        "icon",
        "input",
        "list",
        "popup",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../floating-label/_index.scss"; -> scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/combobox/_variables.scss
// Combobox

// #endregion
// #region @import "./_layout.scss"; -> scss/combobox/_layout.scss
@mixin kendo-combobox--layout-base() {

    // Combobox
    .k-combobox {}

}


@mixin kendo-combobox--layout() {
    @include kendo-combobox--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/combobox/_theme.scss
@mixin kendo-combobox--theme-base() {

    // Combobox
    .k-combobox {}

}


@mixin kendo-combobox--theme() {
    @include kendo-combobox--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-combobox--styles() {
    @include module-render( "combobox" ) {
        @include kendo-combobox--layout();
        @include kendo-combobox--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-combobox--styles();
}

// #endregion
// #region @import "./dateinput/_index.scss"; -> scss/dateinput/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "date-input",
    dependencies: (
        "icon",
        "input",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/dateinput/_variables.scss
// Date input

// #endregion
// #region @import "./_layout.scss"; -> scss/dateinput/_layout.scss
@mixin kendo-date-input--layout-base() {

    // Date input
    .k-dateinput {}

}


@mixin kendo-date-input--layout() {
    @include kendo-date-input--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/dateinput/_theme.scss
@mixin kendo-date-input--theme-base() {

    // Date input
    .k-dateinput {}

}


@mixin kendo-date-input--theme() {
    @include kendo-date-input--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-date-input--styles() {
    @include module-render( "date-input" ) {
        @include kendo-date-input--layout();
        @include kendo-date-input--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-date-input--styles();
}

// #endregion
// #region @import "./datepicker/_index.scss"; -> scss/datepicker/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "date-picker",
    dependencies: (
        "calendar",
        "icon",
        "input",
        "popup",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../calendar/_index.scss"; -> scss/calendar/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/datepicker/_variables.scss
// Datepicker

// #endregion
// #region @import "./_layout.scss"; -> scss/datepicker/_layout.scss
@mixin kendo-date-picker--layout-base() {

    // Date picker
    .k-datepicker {}

}

@mixin kendo-date-picker--layout() {
    @include kendo-date-picker--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/datepicker/_theme.scss
@mixin kendo-date-picker--theme-base() {

    // Date picker
    .k-datepicker {}

}


@mixin kendo-date-picker--theme() {
    @include kendo-date-picker--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-date-picker--styles() {
    @include module-render( "date-picker" ) {
        @include kendo-date-picker--layout();
        @include kendo-date-picker--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-date-picker--styles();
}

// #endregion
// #region @import "./timepicker/_index.scss"; -> scss/timepicker/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "time-picker",
    dependencies: (
        "button",
        "icon",
        "input",
        "list",
        "popup",
        "time-selector",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../timeselector/_index.scss"; -> scss/timeselector/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/timepicker/_variables.scss
// Time picker

// #endregion
// #region @import "./_layout.scss"; -> scss/timepicker/_layout.scss
@mixin kendo-time-picker--layout-base() {

    // Time picker
    .k-time-picker {}


    // Legacy aliases
    .k-timepicker {
        @extend .k-time-picker !optional;
    }

}


@mixin kendo-time-picker--layout() {
    @include kendo-time-picker--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/timepicker/_theme.scss
@mixin kendo-time-picker--theme-base() {

    // Time picker
    .k-time-picker {}

}


@mixin kendo-time-picker--theme() {
    @include kendo-time-picker--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-time-picker--styles() {
    @include module-render( "time-picker" ) {
        @include kendo-time-picker--layout();
        @include kendo-time-picker--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-time-picker--styles();
}

// #endregion
// #region @import "./datetimepicker/_index.scss"; -> scss/datetimepicker/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "date-time-picker",
    dependencies: (
        "calendar",
        "date-input",
        "date-picker",
        "icon",
        "input",
        "list",
        "popup",
        "time-selector",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../calendar/_index.scss"; -> scss/calendar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../timeselector/_index.scss"; -> scss/timeselector/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../action-buttons/_index.scss"; -> scss/action-buttons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/datetimepicker/_variables.scss
// DateTime
$kendo-datetime-width: calc( calc( #{$kendo-calendar-cell-size} * 8 ) + calc( #{$kendo-infinite-calendar-view-padding-x} * 2 )) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/datetimepicker/_layout.scss
@mixin kendo-date-time-picker--layout-base() {

    // Datetime container
    .k-datetime-container {}

    // Datetime selector
    .k-datetime-selector {
        display: flex;
        transition: transform .2s;
    }

    // Wrap
    .k-datetime-wrap {
        width: $kendo-datetime-width;
        overflow: hidden;

        .k-datetime-buttongroup {
            padding-block: $kendo-actions-padding-y;
            padding-inline: $kendo-actions-padding-x;
        }

        .k-calendar,
        .k-timeselector {
            width: 100%;
            border-width: 0;
        }
    }

    // Inner wrap
    .k-datetime-calendar-wrap,
    .k-datetime-time-wrap {
        text-align: center;
        flex: 0 0 $kendo-datetime-width;
    }

    // Tabs
    .k-date-tab .k-datetime-selector {
        transform: translateX(0);
    }
    .k-time-tab .k-datetime-selector {
        transform: translateX(-100%);
    }

    .k-time-tab .k-datetime-selector {
        &.k-rtl,
        &[dir="rtl"],
        .k-rtl &,
        [dir="rtl"] & {
            transform: translateX(100%);
        }
    }
}


@mixin kendo-date-time-picker--layout() {
    @include kendo-date-time-picker--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/datetimepicker/_theme.scss
@mixin kendo-date-time-picker--theme-base() {

    // Datetime picker
    .k-datetimepicker {}

}


@mixin kendo-date-time-picker--theme() {
    @include kendo-date-time-picker--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-date-time-picker--styles() {
    @include module-render( "date-time-picker" ) {
        @include kendo-date-time-picker--layout();
        @include kendo-date-time-picker--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-date-time-picker--styles();
}

// #endregion
// #region @import "./timedurationpicker/_index.scss"; -> scss/timedurationpicker/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "time-duration-picker",
    dependencies: (
        "button",
        "icon",
        "input",
        "list",
        "popup",
        "time-selector",
    )
);


// Dependencies
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../timeselector/_index.scss"; -> scss/timeselector/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/timedurationpicker/_variables.scss
// Timedurationpicker

// #endregion
// #region @import "./_layout.scss"; -> scss/timedurationpicker/_layout.scss
@mixin kendo-time-duration-picker--layout-base() {

    // Time duration picker
    .k-time-duration-picker {}


    // Legacy aliases
    .k-timedurationpicker {
        @extend .k-time-duration-picker;
    }

}


@mixin kendo-time-duration-picker--layout() {
    @include kendo-time-duration-picker--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/timedurationpicker/_theme.scss
@mixin kendo-time-duration-picker--theme-base() {

    // Time duration picker
    .k-time-duration-picker {}

}


@mixin kendo-time-duration-picker--theme() {
    @include kendo-time-duration-picker--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-time-duration-picker--styles() {
    @include module-render( "time-duration-picker" ) {
        @include kendo-time-duration-picker--layout();
        @include kendo-time-duration-picker--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-time-duration-picker--styles();
}

// #endregion
// #region @import "./daterangepicker/_index.scss"; -> scss/daterangepicker/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "date-range-picker",
    dependencies: (
        "calendar",
        "date-input",
        "date-picker",
        "icon",
        "input",
        "popup",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../floating-label/_index.scss"; -> scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/daterangepicker/_variables.scss
// Daterangepicker
$kendo-daterange-picker-input-width: 10em !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/daterangepicker/_layout.scss
@mixin kendo-date-range-picker--layout-base() {

    // Daterange picker
    .k-daterange-picker {
        width: $kendo-input-default-width;
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-end;
        gap: k-spacing(2);

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

        .k-dateinput {
            width: $kendo-daterange-picker-input-width;
        }
    }


    // Angular specific
    kendo-daterange {
        // @extend .k-daterangepicker !optional;
    }


    // React specific
    .k-daterangepicker-wrap {
        display: inherit;
        flex-flow: inherit;
        align-items: inherit;
        gap: inherit;
    }


    // Alias
    .k-daterangepicker {
        @extend .k-daterange-picker !optional;
    }

}


@mixin kendo-date-range-picker--layout() {
    @include kendo-date-range-picker--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/daterangepicker/_theme.scss
@mixin kendo-date-range-picker--theme-base() {

    // Date range picker
    .k-daterangepicker {}

}


@mixin kendo-date-range-picker--theme() {
    @include kendo-date-range-picker--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-date-range-picker--styles() {
    @include module-render( "date-range-picker" ) {
        @include kendo-date-range-picker--layout();
        @include kendo-date-range-picker--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-date-range-picker--styles();
}

// #endregion
// #region @import "./dropdowngrid/_index.scss"; -> scss/dropdowngrid/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "dropdown-grid",
    dependencies: (
        "icon",
        "input",
        "popup",
        "table",
    )
);


// Dependencies
// #region @import "../floating-label/_index.scss"; -> scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../table/_index.scss"; -> scss/table/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/dropdowngrid/_variables.scss
// Dropdown grid

// #endregion
// #region @import "./_layout.scss"; -> scss/dropdowngrid/_layout.scss
@mixin kendo-dropdown-grid--layout-base() {

    // Dropdown grid
    .k-dropdown-grid {}


    // Dropdown grid popup
    .k-dropdowngrid-popup {
        overflow: hidden;
    }
    .k-dropdowngrid-popup > .k-data-table {
        border-width: 0;
    }

}


@mixin kendo-dropdown-grid--layout() {
    @include kendo-dropdown-grid--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/dropdowngrid/_theme.scss
@mixin kendo-dropdown-grid--theme-base() {

    // Dropdown grid
    .k-dropdown-grid {}

}


@mixin kendo-dropdown-grid--theme() {
    @include kendo-dropdown-grid--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-dropdown-grid--styles() {
    @include module-render( "dropdown-grid" ) {
        @include kendo-dropdown-grid--layout();
        @include kendo-dropdown-grid--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-dropdown-grid--styles();
}

// #endregion
// #region @import "./dropdownlist/_index.scss"; -> scss/dropdownlist/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "dropdown-list",
    dependencies: (
        "icon",
        "input",
        "list",
        "popup",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../floating-label/_index.scss"; -> scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/dropdownlist/_variables.scss
// Dropdownlist

// #endregion
// #region @import "./_layout.scss"; -> scss/dropdownlist/_layout.scss
@mixin kendo-dropdown-list--layout-base() {

    // Dropdown list
    .k-dropdown-list {}


    // Native select
    select.k-dropdown-list {}


    // Dropdown operator
    .k-dropdown-operator {
        width: min-content;
        flex: none;

        .k-input-button {
            border-width: 0;
            width: min-content;
        }

        .k-input-button .k-button-icon {
            width: auto;
            aspect-ratio: 1;
        }

        .k-input-inner {
            display: none;
        }
    }


    // Legacy aliases
    .k-dropdown,
    .k-dropdownlist {
        @extend .k-dropdown-list !optional;
    }

}


@mixin kendo-dropdown-list--layout() {
    @include kendo-dropdown-list--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/dropdownlist/_theme.scss
@mixin kendo-dropdown-list--theme-base() {

    // Dropdown list
    .k-dropdown-list {}

    // Native select
    select.k-dropdown-list {}

}


@mixin kendo-dropdown-list--theme() {
    @include kendo-dropdown-list--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-dropdown-list--styles() {
    @include module-render( "dropdown-list" ) {
        @include kendo-dropdown-list--layout();
        @include kendo-dropdown-list--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-dropdown-list--styles();
}

// #endregion
// #region @import "./dropdowntree/_index.scss"; -> scss/dropdowntree/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "dropdown-tree",
    dependencies: (
        "icon",
        "input",
        "popup",
        "treeview",
    )
);


// Dependencies
// #region @import "../floating-label/_index.scss"; -> scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../multiselect/_index.scss"; -> scss/multiselect/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "multiselect",
    dependencies: (
        "button",
        "chip",
        "icon",
        "input",
        "list",
        "popup",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../chip/_index.scss"; -> scss/chip/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../floating-label/_index.scss"; -> scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/multiselect/_variables.scss
// Multiselect

// #endregion
// #region @import "./_layout.scss"; -> scss/multiselect/_layout.scss
@mixin kendo-multiselect--layout-base() {

    // Multiselect
    .k-multiselect {}

}


@mixin kendo-multiselect--layout() {
    @include kendo-multiselect--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/multiselect/_theme.scss
@mixin kendo-multiselect--theme-base() {

    // Multiselect
    .k-multiselect {}

}


@mixin kendo-multiselect--theme() {
    @include kendo-multiselect--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-multiselect--styles() {
    @include module-render( "multiselect" ) {
        @include kendo-multiselect--layout();
        @include kendo-multiselect--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-multiselect--styles();
}

// #endregion
// #region @import "../treeview/_index.scss"; -> scss/treeview/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "treeview",
    dependencies: (
        "checkbox",
        "icon",
    )
);


// Dependencies
// #region @import "../checkbox/_index.scss"; -> scss/checkbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/treeview/_variables.scss
// TreeView

/// The font family of the TreeView.
/// @group treeview
$kendo-treeview-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the TreeView.
/// @group treeview
$kendo-treeview-font-size: var( --kendo-font-size, inherit ) !default;
/// The font size of the small TreeView.
/// @group treeview
$kendo-treeview-sm-font-size: var( --kendo-font-size, inherit ) !default;
/// The font size of the medium TreeView.
/// @group treeview
$kendo-treeview-md-font-size: var( --kendo-font-size, inherit ) !default;
/// The font size of the large TreeView.
/// @group treeview
$kendo-treeview-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
/// The line height of the TreeView.
/// @group treeview
$kendo-treeview-line-height: var( --kendo-line-height, normal ) !default;
/// The line height of the small TreeView.
/// @group treeview
$kendo-treeview-sm-line-height: var( --kendo-line-height, normal ) !default;
/// The line height of the medium TreeView.
/// @group treeview
$kendo-treeview-md-line-height: var( --kendo-line-height, normal ) !default;
/// The line height of the large TreeView.
/// @group treeview
$kendo-treeview-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
/// The indentation of child groups in the TreeView.
/// @group treeview
$kendo-treeview-indent: 24px !default;

/// The horizontal padding of the TreeView items.
/// @group treeview
$kendo-treeview-item-padding-x: k-spacing(2) !default;
/// The horizontal padding of the small TreeView items.
/// @group treeview
$kendo-treeview-sm-item-padding-x: k-spacing(2) !default;
/// The horizontal padding of the medium TreeView items.
/// @group treeview
$kendo-treeview-md-item-padding-x: k-spacing(2) !default;
/// The horizontal padding of the large TreeView items.
/// @group treeview
$kendo-treeview-lg-item-padding-x: k-spacing(2) !default;
/// The vertical padding of the TreeView items.
/// @group treeview
$kendo-treeview-item-padding-y: k-spacing(1) !default;
/// The vertical padding of the small TreeView items.
/// @group treeview
$kendo-treeview-sm-item-padding-y: k-spacing(0.5) !default;
/// The vertical padding of the medium TreeView items.
/// @group treeview
$kendo-treeview-md-item-padding-y: k-spacing(1) !default;
/// The vertical padding of the large TreeView items.
/// @group treeview
$kendo-treeview-lg-item-padding-y: k-spacing(2) !default;
/// The border width of the TreeView items.
/// @group treeview
$kendo-treeview-item-border-width: 0px !default;
/// The border radius of the TreeView items.
/// @group treeview
$kendo-treeview-item-border-radius: k-border-radius(md) !default;

/// The horizontal padding of the checkbox in the small TreeView.
/// @group treeview
$kendo-treeview-sm-checkbox-padding-x: k-spacing(1) !default;
/// The horizontal padding of the checkbox in the medium TreeView.
/// @group treeview
$kendo-treeview-md-checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x !default;
/// The horizontal padding of the checkbox in the large TreeView.
/// @group treeview
$kendo-treeview-lg-checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x !default;
/// The vertical padding of the checkbox in the small TreeView.
/// @group treeview
$kendo-treeview-sm-checkbox-padding-y: k-spacing(0.5) !default;
/// The vertical padding of the checkbox in the medium TreeView.
/// @group treeview
$kendo-treeview-md-checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y !default;
/// The vertical padding of the checkbox in the large TreeView.
/// @group treeview
$kendo-treeview-lg-checkbox-padding-y: null !default;


/// The sizes map of the TreeView.
/// @group treeview
$kendo-treeview-sizes: (
    sm: (
        font-size: $kendo-treeview-sm-font-size,
        line-height: $kendo-treeview-sm-line-height,
        item-padding-x: $kendo-treeview-sm-item-padding-x,
        item-padding-y: $kendo-treeview-sm-item-padding-y,
        checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x,
        checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y
    ),
    md: (
        font-size: $kendo-treeview-md-font-size,
        line-height: $kendo-treeview-md-line-height,
        item-padding-x: $kendo-treeview-md-item-padding-x,
        item-padding-y: $kendo-treeview-md-item-padding-y,
        checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x,
        checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y
    ),
    lg: (
        font-size: $kendo-treeview-lg-font-size,
        line-height: $kendo-treeview-lg-line-height,
        item-padding-x: $kendo-treeview-lg-item-padding-x,
        item-padding-y: $kendo-treeview-lg-item-padding-y,
        checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x,
        checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y
    )
) !default;


/// The background color of the TreeView.
/// @group treeview
$kendo-treeview-bg: null !default;
/// The text color of the TreeView.
/// @group treeview
$kendo-treeview-text: $kendo-component-text !default;
/// The border color of the TreeView.
/// @group treeview
$kendo-treeview-border: null !default;

/// The background color of hovered TreeView items.
/// @group treeview
$kendo-treeview-item-hover-bg: $kendo-hover-bg !default;
/// The text color of hovered TreeView items.
/// @group treeview
$kendo-treeview-item-hover-text: $kendo-hover-text !default;
/// The border color of hovered TreeView items.
/// @group treeview
$kendo-treeview-item-hover-border: null !default;
/// The background gradient of hovered TreeView items.
/// @group treeview
$kendo-treeview-item-hover-gradient: null !default;

/// The background color of selected TreeView items.
/// @group treeview
$kendo-treeview-item-selected-bg: $kendo-selected-bg !default;
/// The text color of selected TreeView items.
/// @group treeview
$kendo-treeview-item-selected-text: $kendo-selected-text !default;
/// The border color of selected TreeView items.
/// @group treeview
$kendo-treeview-item-selected-border: null !default;
/// The background gradient of selected TreeView items.
/// @group treeview
$kendo-treeview-item-selected-gradient: null !default;

/// The box shadow of focused TreeView items.
/// @group treeview
$kendo-treeview-item-focus-shadow: $kendo-focus-shadow !default;

/// The background color of the Load More button in the TreeView
/// @group treeview
$kendo-treeview-loadmore-bg: transparent !default;
/// The text color of the Load More button in the TreeView
/// @group treeview
$kendo-treeview-loadmore-text: $kendo-link-text !default;
/// The border color of the Load More button in the TreeView
/// @group treeview
$kendo-treeview-loadmore-border: null !default;

/// The background color of the hovered Load More button in the TreeView
/// @group treeview
$kendo-treeview-loadmore-hover-bg: transparent !default;
/// The text color of the hovered Load More button in the TreeView.
/// @group treeview
$kendo-treeview-loadmore-hover-text: $kendo-link-hover-text !default;
/// The border color of the hovered Load More button in the TreeView.
/// @group treeview
$kendo-treeview-loadmore-hover-border: null !default;

/// The background color of the focused Load More button in the TreeView.
/// @group treeview
$kendo-treeview-loadmore-focus-bg: transparent !default;
/// The text color of the focused Load More button in the TreeView.
/// @group treeview
$kendo-treeview-loadmore-focus-text: $kendo-link-hover-text !default;
/// The border color of the focused Load More button in the TreeView.
/// @group treeview
$kendo-treeview-loadmore-focus-border: null !default;
/// The box shadow of the focused Load More button in the TreeView.
/// @group treeview
$kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !default;


// #endregion
// #region @import "./_layout.scss"; -> scss/treeview/_layout.scss
@mixin kendo-treeview--layout-base() {

    // Treeview
    .k-treeview {
        padding: 0;
        border-width: 0;
        background: none;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-treeview-font-family;
        font-size: $kendo-treeview-font-size;
        line-height: $kendo-treeview-line-height;
        display: block;
        cursor: default;
        overflow: auto;
        white-space: nowrap;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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


    // Treeview filter
    .k-treeview-filter {
        padding: k-spacing(2);
        display: block;
        position: relative;
        flex: none;
    }


    // Treeview group
    .k-treeview-group {
        margin: 0;
        padding: 0;
        list-style: none;
        position: relative;
        outline: 0;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        &.ng-animating {
            overflow: hidden;
        }
    }


    // Treeview wrappers
    .k-treeview-top,
    .k-treeview-mid,
    .k-treeview-bot {
        display: flex;
        flex-direction: row;
        align-items: center;
        align-content: center;
    }


    // Treeview item
    .k-treeview-item {
        outline-style: none;
        margin: 0;
        padding: 0 0 0 $kendo-treeview-indent;
        border-width: 0;
        display: block;
    }


    // Treeview toggle
    .k-treeview-toggle {
        margin-inline-start: -$kendo-treeview-indent;
        flex: none;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        cursor: pointer;
    }
    .k-treeview-toggle .k-icon {
        padding: $kendo-icon-padding;
        box-sizing: content-box;
    }


    // Loading icon
    .k-treeview-loading {
        margin-right: $kendo-icon-spacing;
    }


    // Checkbox
    .k-treeview .k-checkbox-wrap,
    .k-treeview .k-checkbox-wrapper {
        align-self: center;
    }


    // Treeview leaf
    .k-treeview-leaf {
        @include border-radius( $kendo-treeview-item-border-radius );
        padding-block: $kendo-treeview-item-padding-y;
        padding-inline: $kendo-treeview-item-padding-x;
        border: $kendo-treeview-item-border-width solid transparent;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        align-content: center;
        vertical-align: middle;
        position: relative;

        .k-icon,
        .k-image,
        .k-sprite {
            margin-right: $kendo-icon-spacing;
        }

        &.k-focus {
            z-index: 1;
        }
    }


    // Treeview load more button
    .k-treeview .k-treeview-load-more-button {
        cursor: pointer;

        &:hover,
        &.k-hover,
        &:focus,
        &.k-focus {
            text-decoration: underline;
        }
    }


    // RTL
    .k-rtl .k-treeview,
    [dir="rtl"] .k-treeview,
    .k-treeview.k-rtl,
    .k-treeview[dir="rtl"] {

        // Treeview item
        .k-treeview-item {
            padding-left: 0;
            padding-right: $kendo-treeview-indent;
        }

        // Loading
        .k-treeview-loading {
            margin-right: 0;
            margin-left: $kendo-icon-spacing;
        }

        // Treeview leaf
        .k-treeview-leaf,
        .k-in {
            .k-icon,
            .k-image,
            .k-sprite {
                margin-right: 0;
                margin-left: $kendo-icon-spacing;
            }
        }
    }

    @each $size, $size-props in $kendo-treeview-sizes {
        $_font-size: k-map-get( $size-props, font-size);
        $_line-height: k-map-get( $size-props, line-height);
        $_item-padding-x: k-map-get( $size-props, item-padding-x);
        $_item-padding-y: k-map-get( $size-props, item-padding-y);
        $_checkbox-padding-x: k-map-get( $size-props, checkbox-padding-x );
        $_checkbox-padding-y: k-map-get( $size-props, checkbox-padding-y );

        .k-treeview-#{$size} {
            font-size: $_font-size;
            line-height: $_line-height;

            .k-treeview-leaf {
                padding-block: $_item-padding-y;
                padding-inline: $_item-padding-x;
            }

            .k-checkbox-wrap {
                padding-block: $_checkbox-padding-y;
                padding-inline: $_checkbox-padding-x;
            }
        }
    }

}


@mixin kendo-treeview--layout() {
    @include kendo-treeview--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/treeview/_theme.scss
@mixin kendo-treeview--theme-base() {

    // Treeview
    .k-treeview {
        @include fill(
            $kendo-treeview-text,
            $kendo-treeview-bg,
            $kendo-treeview-border
        );
    }


    // Treeview item
    .k-treeview-item {}


    // Treeview leaf
    .k-treeview-leaf {

        // Hover state
        &:hover,
        &.k-hover {
            @include fill(
                $kendo-treeview-item-hover-text,
                $kendo-treeview-item-hover-bg,
                $kendo-treeview-item-hover-border,
                $kendo-treeview-item-hover-gradient
            );
        }

        // Focus state
        &:focus,
        &.k-focus {
            @include focus-indicator( $kendo-treeview-item-focus-shadow, true );
        }

        // Selected state
        &.k-selected {
            @include fill(
                $kendo-treeview-item-selected-text,
                $kendo-treeview-item-selected-bg,
                $kendo-treeview-item-selected-border,
                $kendo-treeview-item-selected-gradient
            );
        }
    }


    // Treeview load more button
    .k-treeview .k-treeview-load-more-button {
        @include fill(
            $kendo-treeview-loadmore-text,
            $kendo-treeview-loadmore-bg,
            $kendo-treeview-loadmore-border
        );

        // Hover state
        &:hover,
        &.k-hover {
            @include fill(
                $kendo-treeview-loadmore-hover-text,
                $kendo-treeview-loadmore-hover-bg,
                $kendo-treeview-loadmore-hover-border
            );
        }

        // Focus state
        &:focus,
        &.k-focus {
            @include fill(
                $kendo-treeview-loadmore-focus-text,
                $kendo-treeview-loadmore-focus-bg,
                $kendo-treeview-loadmore-focus-border
            );
            @include focus-indicator( $kendo-treeview-loadmore-focus-shadow, true );
        }
    }

}


@mixin kendo-treeview--theme() {
    @include kendo-treeview--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-treeview--styles() {
    @include module-render( "treeview" ) {
        @include kendo-treeview--layout();
        @include kendo-treeview--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-treeview--styles();
}

// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/dropdowntree/_variables.scss
// Dropdowntree

/// The horizontal padding of the DropdownTree popup
/// @group dropdowntree
$kendo-dropdowntree-popup-padding-x: k-spacing(2) !default;
/// The vertical padding of the DropdownTree popup
/// @group dropdowntree
$kendo-dropdowntree-popup-padding-y: k-spacing(2) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/dropdowntree/_layout.scss
@mixin kendo-dropdown-tree--layout-base() {

    // Dropdown tree
    .k-dropdown-tree {}

    // Dropdowntree popup
    .k-popup-dropdowntree, // remove legacy class once updated in components
    .k-dropdowntree-popup,
    .k-multiselecttree-popup {
        .k-treeview {
            padding-block: calc( #{$kendo-dropdowntree-popup-padding-y} / 2 );
            padding-inline: calc( #{$kendo-dropdowntree-popup-padding-x} / 2 );
        }

        .k-check-all {
            padding-block: $kendo-dropdowntree-popup-padding-y;
            padding-inline: $kendo-dropdowntree-popup-padding-x;
        }
    }

    .k-multiselecttree {
        .k-input-values {
            width: auto;
            max-width: 100%;
        }

        .k-input-inner::before {
            content: "\200b";
            width: 0px;
            overflow: hidden;
            flex: none;
            display: inline-block;
            vertical-align: top;
        }
    }

}


@mixin kendo-dropdown-tree--layout() {
    @include kendo-dropdown-tree--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/dropdowntree/_theme.scss
@mixin kendo-dropdown-tree--theme-base() {

    // Dropdown tree
    .k-dropdown-tree {}

}


@mixin kendo-dropdown-tree--theme() {
    @include kendo-dropdown-tree--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-dropdown-tree--styles() {
    @include module-render( "dropdown-tree" ) {
        @include kendo-dropdown-tree--layout();
        @include kendo-dropdown-tree--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-dropdown-tree--styles();
}

// #endregion
// #region @import "./maskedtextbox/_index.scss"; -> scss/maskedtextbox/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "masked-textbox",
    dependencies: (
        "input",
        "icon",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../floating-label/_index.scss"; -> scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/maskedtextbox/_variables.scss
// Masked textbox

// #endregion
// #region @import "./_layout.scss"; -> scss/maskedtextbox/_layout.scss
@mixin kendo-masked-textbox--layout-base() {

    // Masked textbox
    .k-maskedtextbox {}

}


@mixin kendo-masked-textbox--layout() {
    @include kendo-masked-textbox--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/maskedtextbox/_theme.scss
@mixin kendo-masked-textbox--theme-base() {

    // Masked textbox
    .k-maskedtextbox {}

}


@mixin kendo-masked-textbox--theme() {
    @include kendo-masked-textbox--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-masked-textbox--styles() {
    @include module-render( "masked-textbox" ) {
        @include kendo-masked-textbox--layout();
        @include kendo-masked-textbox--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-masked-textbox--styles();
}

// #endregion
// #region @import "./multiselect/_index.scss"; -> scss/multiselect/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./numerictextbox/_index.scss"; -> scss/numerictextbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./rating/_index.scss"; -> scss/rating/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "rating",
    dependencies: (
        "icon",
    )
);


// Dependencies
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/rating/_variables.scss
// Rating

/// The font family of the Rating.
/// @group rating
$kendo-rating-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Rating.
/// @group rating
$kendo-rating-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Rating.
/// @group rating
$kendo-rating-line-height: var( --kendo-line-height, normal ) !default;

/// The horizontal margin of the Rating container.
/// @group rating
$kendo-rating-container-margin-x: $kendo-padding-sm-x !default;

/// The horizontal padding of the Rating item.
/// @group rating
$kendo-rating-item-padding-x: $kendo-padding-sm-x !default;
/// The vertical padding of the Rating item.
/// @group rating
$kendo-rating-item-padding-y: $kendo-padding-md-y !default;

/// The horizontal margin of the Rating label.
/// @group rating
$kendo-rating-label-margin-x: $kendo-padding-md-x !default;
/// The vertical margin of the Rating label.
/// @group rating
$kendo-rating-label-margin-y: $kendo-padding-md-y !default;
/// The line height of the Rating label.
/// @group rating
$kendo-rating-label-line-height: var( --kendo-line-height-lg, normal ) !default;

/// The size of the Rating icon.
/// @group rating
$kendo-rating-icon-size: ($kendo-icon-size * 1.5) !default;

/// The text color of the Rating icon.
/// @group rating
$kendo-rating-icon-text: $kendo-component-text !default;
/// The text color of the selected Rating icon.
/// @group rating
$kendo-rating-icon-selected-text: $kendo-selected-bg !default;
/// The text color of the hovered Rating icon.
/// @group rating
$kendo-rating-icon-hover-text: $kendo-selected-bg !default;
/// The text color of the focused Rating icon.
/// @group rating
$kendo-rating-icon-focus-text: $kendo-selected-bg !default;

/// The shadow of the focused Rating icon.
/// @group rating
$kendo-rating-icon-focus-shadow: k-elevation(1) !default;
/// The shadow of the focused and selected Rating icon.
/// @group rating
$kendo-rating-icon-focus-selected-shadow: k-elevation(1) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/rating/_layout.scss
@mixin kendo-rating--layout-base() {

    .k-rating {
        margin: 0;
        padding: 0;
        border-width: 0;
        box-sizing: border-box;
        outline: 0;
        background: none;
        font-family: $kendo-rating-font-family;
        font-size: $kendo-rating-font-size;
        line-height: $kendo-rating-line-height;
        display: inline-flex;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

        &.k-readonly {
            pointer-events: none;
        }
    }

    .k-rating-container {
        flex: 0 1 auto;
        position: relative;
        margin-block: 0;
        margin-inline: $kendo-rating-container-margin-x;

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

            * {
                pointer-events: none;
            }

            .k-rating-precision-part,
            .k-rating-precision-complement {
                display: inherit;
                position: absolute;
                top: $kendo-rating-item-padding-y;
                left: $kendo-rating-item-padding-x;
                overflow: hidden;
            }

            .k-rating-precision-complement {
                direction: rtl;
            }

            svg {
                fill: currentColor;
            }
        }
    }

    .k-rating-label {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        line-height: $kendo-rating-label-line-height;
        margin-block: $kendo-rating-label-margin-y;
        margin-inline: $kendo-rating-label-margin-x;
    }

    .k-rtl,
    [dir="rtl"] {
        .k-rating-precision-part {
            left: auto;
            right: $kendo-rating-item-padding-x;
        }

        .k-rating-item .k-rating-precision-complement {
            direction: ltr;
        }
    }

}


@mixin kendo-rating--layout() {
    @include kendo-rating--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/rating/_theme.scss
@mixin kendo-rating--theme-base() {

    .k-rating {
        color: $kendo-component-text;

        &:focus,
        &.k-focus {

            .k-rating-item {
                > .k-icon {
                    filter: drop-shadow( $kendo-rating-icon-focus-shadow );
                }

                &.k-selected > .k-icon {
                    filter: drop-shadow( $kendo-rating-icon-focus-selected-shadow );
                }
            }
        }
    }

    .k-rating-item {
        color: $kendo-rating-icon-text;

        &.k-selected {
            color: $kendo-rating-icon-selected-text;

            &:focus,
            &.k-focus {
                color: $kendo-rating-icon-focus-text;
            }
        }

        &:hover,
        &.k-hover {
            color: $kendo-rating-icon-hover-text;
            cursor: pointer;
        }
    }

}


@mixin kendo-rating--theme() {
    @include kendo-rating--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-rating--styles() {
    @include module-render( "rating" ) {
        @include kendo-rating--layout();
        @include kendo-rating--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-rating--styles();
}

// #endregion
// #region @import "./searchbox/_index.scss"; -> scss/searchbox/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "searchbox",
    dependencies: (
        "button",
        "icon",
        "input",
    )
);


// Dependencies
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/searchbox/_variables.scss
// Searchbox

// #endregion
// #region @import "./_layout.scss"; -> scss/searchbox/_layout.scss
@mixin kendo-searchbox--layout-base() {

    // Searchbox
    .k-searchbox {}

}


@mixin kendo-searchbox--layout() {
    @include kendo-searchbox--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/searchbox/_theme.scss
@mixin kendo-searchbox--theme-base() {

    // Searchbox
    .k-searchbox {}

}


@mixin kendo-searchbox--theme() {
    @include kendo-searchbox--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-searchbox--styles() {
    @include module-render( "searchbox" ) {
        @include kendo-searchbox--layout();
        @include kendo-searchbox--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-searchbox--styles();
}

// #endregion
// #region @import "./switch/_index.scss"; -> scss/switch/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "switch",
    dependencies: ()
);


// Dependencies
// @import "../utils/_border.scss";


// Component
// #region @import "./_variables.scss"; -> scss/switch/_variables.scss
// Switch

/// The font family of the Switch.
/// @group switch
$kendo-switch-font-family: null !default;

/// The border width of the Switch track.
/// @group switch
$kendo-switch-track-border-width: 1px !default;

/// The border width of the Switch thumb.
/// @group switch
$kendo-switch-thumb-border-width: 1px !default;

/// The text transform of the Switch label.
/// @group switch
$kendo-switch-label-text-transform: uppercase !default;

/// The display of the Switch label.
/// @group switch
$kendo-switch-label-display: inline !default;

/// The map with the different Switch sizes.
/// @group switch
$kendo-switch-sizes: (
    sm: ( font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px ),
    md: ( font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px ),
    lg: ( font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px )
) !default;

/// The background of the track when the Switch is not checked.
/// @group switch
$kendo-switch-off-track-bg: $kendo-component-bg !default;
/// The text color of the track when the Switch is not checked.
/// @group switch
$kendo-switch-off-track-text: $kendo-component-text !default;
/// The border color of the track when the Switch is not checked.
/// @group switch
$kendo-switch-off-track-border: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% )) !default;
/// The background gradient of the track when the Switch is not checked.
/// @group switch
$kendo-switch-off-track-gradient: null !default;

/// The background of the track when the hovered Switch is not checked.
/// @group switch
$kendo-switch-off-track-hover-bg: null !default;
/// The text color of the track when the hovered Switch is not checked.
/// @group switch
$kendo-switch-off-track-hover-text: null !default;
/// The border color of the track when the hovered Switch is not checked.
/// @group switch
$kendo-switch-off-track-hover-border: null !default;
/// The background gradient of the track when the hovered Switch is not checked.
/// @group switch
$kendo-switch-off-track-hover-gradient: null !default;

/// The background of the track when the focused Switch is not checked.
/// @group switch
$kendo-switch-off-track-focus-bg: null !default;
/// The text color of the track when the focused Switch is not checked.
/// @group switch
$kendo-switch-off-track-focus-text: null !default;
/// The border color of the track when the focused Switch is not checked.
/// @group switch
$kendo-switch-off-track-focus-border: null !default;
/// The background gradient of the track when the focused Switch is not checked.
/// @group switch
$kendo-switch-off-track-focus-gradient: null !default;
/// The ring around the track when the focused Switch is not checked.
/// @group switch
$kendo-switch-off-track-focus-ring: 2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 )) !default;

/// The background of the track when the disabled Switch is not checked.
/// @group switch
$kendo-switch-off-track-disabled-bg: null !default;
/// The text color of the track when the disabled Switch is not checked.
/// @group switch
$kendo-switch-off-track-disabled-text: null !default;
/// The border color of the track when the disabled Switch is not checked.
/// @group switch
$kendo-switch-off-track-disabled-border: null !default;
/// The background gradient of the track when the disabled Switch is not checked.
/// @group switch
$kendo-switch-off-track-disabled-gradient: null !default;

/// The background of the thumb when the Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-bg: $kendo-base-bg !default;
/// The text color of the thumb when the Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-text: $kendo-base-text !default;
/// The border color of the thumb when the Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-border: $kendo-base-border !default;
/// The background gradient of the thumb when the Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-gradient: null !default;

/// The background of the thumb when the hovered Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-hover-bg: null !default;
/// The text color of the thumb when the hovered Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-hover-text: null !default;
/// The border color of the thumb when the hovered Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-hover-border: null !default;
/// The background gradient of the thumb when the hovered Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-hover-gradient: null !default;


/// The background of the track when the Switch is checked.
/// @group switch
$kendo-switch-on-track-bg: $kendo-color-primary !default;
/// The text color of the track when the Switch is checked.
/// @group switch
$kendo-switch-on-track-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg )) !default;
/// The border color of the track when the Switch is checked.
/// @group switch
$kendo-switch-on-track-border: $kendo-switch-on-track-bg !default;
/// The background gradient of the track when the Switch is checked.
/// @group switch
$kendo-switch-on-track-gradient: null !default;

/// The background of the track when the hovered Switch is checked.
/// @group switch
$kendo-switch-on-track-hover-bg: null !default;
/// The text color of the track when the hovered Switch is checked.
/// @group switch
$kendo-switch-on-track-hover-text: null !default;
/// The border color of the track when the hovered Switch is checked.
/// @group switch
$kendo-switch-on-track-hover-border: null !default;
/// The background gradient of the track when the hovered Switch is checked.
/// @group switch
$kendo-switch-on-track-hover-gradient: null !default;

/// The background of the track when the focused Switch is checked.
/// @group switch
$kendo-switch-on-track-focus-bg: null !default;
/// The text color of the track when the focused Switch is checked.
/// @group switch
$kendo-switch-on-track-focus-text: null !default;
/// The border color of the track when the focused Switch is checked.
/// @group switch
$kendo-switch-on-track-focus-border: null !default;
/// The background gradient of the track when the focused Switch is checked.
/// @group switch
$kendo-switch-on-track-focus-gradient: null !default;
/// The ring around the track when the focused Switch is checked.
/// @group switch
$kendo-switch-on-track-focus-ring: 2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-switch-on-track-border, .25 )) !default;

/// The background of the track when the disabled Switch is checked.
/// @group switch
$kendo-switch-on-track-disabled-bg: null !default;
/// The text color of the track when the disabled Switch is checked.
/// @group switch
$kendo-switch-on-track-disabled-text: null !default;
/// The border color of the track when the disabled Switch is checked.
/// @group switch
$kendo-switch-on-track-disabled-border: null !default;
/// The background gradient of the track when the disabled Switch is checked.
/// @group switch
$kendo-switch-on-track-disabled-gradient: null !default;

/// The background of the thumb when the Switch is checked.
/// @group switch
$kendo-switch-on-thumb-bg: $kendo-base-bg !default;
/// The text color of the thumb when the Switch is checked.
/// @group switch
$kendo-switch-on-thumb-text: $kendo-base-text !default;
/// The border color of the thumb when the Switch is checked.
/// @group switch
$kendo-switch-on-thumb-border: $kendo-base-border !default;
/// The background gradient of the thumb when the Switch is checked.
/// @group switch
$kendo-switch-on-thumb-gradient: null !default;

/// The background of the thumb when the hovered Switch is checked.
/// @group switch
$kendo-switch-on-thumb-hover-bg: null !default;
/// The text color of the thumb when the hovered Switch is checked.
/// @group switch
$kendo-switch-on-thumb-hover-text: null !default;
/// The border color of the thumb when the hovered Switch is checked.
/// @group switch
$kendo-switch-on-thumb-hover-border: null !default;
/// The background gradient of the thumb when the hovered Switch is checked.
/// @group switch
$kendo-switch-on-thumb-hover-gradient: null !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/switch/_layout.scss
@mixin kendo-switch--layout-base() {

    .k-switch {
        box-sizing: border-box;
        font-family: $kendo-switch-font-family;
        outline: 0;
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        line-height: 1;
        position: relative;
        cursor: pointer;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

        [type="checkbox"] {
            display: none;
        }

        &[aria-readonly="true"] {
            pointer-events: none;
        }
    }


    // Readonly
    .k-switch.k-readonly {
        pointer-events: none;
    }


    // Switch track
    .k-switch-track {
        border-width: $kendo-switch-track-border-width;
        border-style: if( $kendo-switch-track-border-width == null, null, solid );
        outline: 0;
        display: flex;
        flex-flow: row nowrap;
        flex: 1 0 auto;
        position: relative;
        transition: background-color 200ms ease-in-out;
    }


    // Switch thumb
    .k-switch-thumb-wrap {
        width: 0;
        height: 0;
        overflow: visible;
        position: absolute;
        transition: left 200ms ease-in-out;
        top: 50%;
    }
    .k-switch-thumb {
        border-width: $kendo-switch-thumb-border-width;
        border-style: if( $kendo-switch-thumb-border-width == null, null, solid );
        display: block;
        position: absolute;
        transform: translate( -50%, -50% );
    }


    // Switch label
    .k-switch-label-on,
    .k-switch-label-off {
        text-transform: $kendo-switch-label-text-transform;
        display: $kendo-switch-label-display;
        position: absolute;
        top: 50%;
        transform: translateY( -50% );
        overflow: hidden;
    }


    // Switch sizes
    @each $size, $size-props in $kendo-switch-sizes {

        $_font-size: k-map-get( $size-props, font-size );
        $_track-width: k-map-get( $size-props, track-width );
        $_track-height: k-map-get( $size-props, track-height );
        $_thumb-width: k-map-get( $size-props, thumb-width );
        $_thumb-height: k-map-get( $size-props, thumb-height );
        $_thumb-offset: k-map-get( $size-props, thumb-offset );
        $_label-offset: k-map-get( $size-props, label-offset );

        .k-switch-#{$size} {
            width: $_track-width;
            height: $_track-height;
            font-size: $_font-size;

            .k-switch-track {
                width: $_track-width;
                height: $_track-height;
            }

            .k-switch-label-on { left: $_label-offset; }
            .k-switch-label-off { right: $_label-offset; }

            .k-switch-thumb {
                width: $_thumb-width;
                height: $_thumb-height;
            }

            &.k-switch-on .k-switch-thumb-wrap {
                left: calc( 100% - #{k-math-div( $_thumb-width, 2 )} - #{$_thumb-offset} );
            }
            &.k-switch-off .k-switch-thumb-wrap {
                left: calc( #{k-math-div( $_thumb-width, 2 )} + #{$_thumb-offset} );
            }
        }

        .k-switch-#{$size}[dir="rtl"],
        [dir="rtl"] .k-switch-#{$size},
        .k-rtl .k-switch-#{$size} {

            .k-switch-label-on {
                left: auto;
                right: $_label-offset;
            }
            .k-switch-label-off {
                right: auto;
                left: $_label-offset;
            }

            &.k-switch-on .k-switch-thumb-wrap {
                left: calc( #{k-math-div( $_thumb-width, 2 )} + #{$_thumb-offset} );
            }
            &.k-switch-off .k-switch-thumb-wrap {
                left: calc( 100% - #{k-math-div( $_thumb-width, 2 )} - #{$_thumb-offset} );
            }
        }
    }


    // RTL
    .k-switch[dir="rtl"],
    [dir="rtl"] .k-switch,
    .k-switch.k-rtl,
    .k-rtl .k-switch {

        .k-switch-thumb {
            transform: translate( 50%, -50% );
        }

    }

}


@mixin kendo-switch--layout() {
    @include kendo-switch--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/switch/_theme.scss
@mixin kendo-switch--theme-base() {

    // Switch
    .k-switch {}


    // Switch OFF
    .k-switch-off {

        // Normal state
        .k-switch-track {
            @include fill(
                $kendo-switch-off-track-text,
                $kendo-switch-off-track-bg,
                $kendo-switch-off-track-border,
                $kendo-switch-off-track-gradient
            );
        }
        .k-switch-thumb {
            @include fill(
                $kendo-switch-off-thumb-text,
                $kendo-switch-off-thumb-bg,
                $kendo-switch-off-thumb-border,
                $kendo-switch-off-thumb-gradient
            );
        }

        // Hover
        &:hover,
        &.k-hover {
            .k-switch-track {
                @include fill(
                    $kendo-switch-off-track-hover-text,
                    $kendo-switch-off-track-hover-bg,
                    $kendo-switch-off-track-hover-border,
                    $kendo-switch-off-track-hover-gradient
                );
            }

            .k-switch-thumb {
                @include fill(
                    $kendo-switch-off-thumb-hover-text,
                    $kendo-switch-off-thumb-hover-bg,
                    $kendo-switch-off-thumb-hover-border,
                    $kendo-switch-off-thumb-hover-gradient
                );
            }
        }

        // Focus
        &:focus,
        &.k-focus {
            .k-switch-track {
                @include fill(
                    $kendo-switch-off-track-focus-text,
                    $kendo-switch-off-track-focus-bg,
                    $kendo-switch-off-track-focus-border,
                    $kendo-switch-off-track-focus-gradient
                );
                @if $kendo-enable-focus-contrast {
                    @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
                } @else {
                    outline: $kendo-switch-off-track-focus-ring;
                }
            }
        }

        // Disabled
        &:disabled,
        &.k-disabled {
            .k-switch-track {
                @include fill(
                    $kendo-switch-off-track-disabled-text,
                    $kendo-switch-off-track-disabled-bg,
                    $kendo-switch-off-track-disabled-border,
                    $kendo-switch-off-track-disabled-gradient
                );
            }
        }

        .k-switch-label-on {
            color: transparent;
        }
    }


    // Switch ON
    .k-switch-on {

        // Normal state
        .k-switch-track {
            @include fill(
                $kendo-switch-on-track-text,
                $kendo-switch-on-track-bg,
                $kendo-switch-on-track-border,
                $kendo-switch-on-track-gradient
            );
        }
        .k-switch-thumb {
            @include fill(
                $kendo-switch-on-thumb-text,
                $kendo-switch-on-thumb-bg,
                $kendo-switch-on-thumb-border,
                $kendo-switch-on-thumb-gradient
            );
        }

        // Hover
        &:hover,
        &.k-hover {
            .k-switch-track {
                @include fill(
                    $kendo-switch-on-track-hover-text,
                    $kendo-switch-on-track-hover-bg,
                    $kendo-switch-on-track-hover-border,
                    $kendo-switch-on-track-hover-gradient
                );
            }

            .k-switch-thumb {
                @include fill(
                    $kendo-switch-on-thumb-hover-text,
                    $kendo-switch-on-thumb-hover-bg,
                    $kendo-switch-on-thumb-hover-border,
                    $kendo-switch-on-thumb-hover-gradient
                );
            }
        }

        // Focus
        &:focus,
        &.k-focus {
            .k-switch-track {
                @include fill(
                    $kendo-switch-on-track-focus-text,
                    $kendo-switch-on-track-focus-bg,
                    $kendo-switch-on-track-focus-border,
                    $kendo-switch-on-track-focus-gradient
                );
                @if $kendo-enable-focus-contrast {
                    @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
                } @else {
                    outline: $kendo-switch-on-track-focus-ring;
                }
            }
        }

        // Disabled
        &:disabled,
        &.k-disabled {
            .k-switch-track {
                @include fill(
                    $kendo-switch-on-track-disabled-text,
                    $kendo-switch-on-track-disabled-bg,
                    $kendo-switch-on-track-disabled-border,
                    $kendo-switch-on-track-disabled-gradient
                );
            }
        }

        .k-switch-label-off {
            color: transparent;
        }
    }

}


@mixin kendo-switch--theme() {
    @include kendo-switch--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-switch--styles() {
    @include module-render( "switch" ) {
        @include kendo-switch--layout();
        @include kendo-switch--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-switch--styles();
}

// #endregion
// #region @import "./upload/_index.scss"; -> scss/upload/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "upload",
    dependencies: (
        "actions",
        "button",
        "dropzone",
        "icon",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../action-buttons/_index.scss"; -> scss/action-buttons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../dropzone/_index.scss"; -> scss/dropzone/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "drop-zone",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/dropzone/_variables.scss
// DropZone

/// The horizontal padding of the DropZone.
/// @group dropzone
$kendo-dropzone-padding-x: k-spacing(2) !default;
/// The vertical padding of the DropZone.
/// @group dropzone
$kendo-dropzone-padding-y: k-spacing(2) !default;
/// The border width of the DropZone.
/// @group dropzone
$kendo-dropzone-border-width: 1px !default;
/// The minimum height of the DropZone.
/// @group dropzone
$kendo-dropzone-min-height: 220px !default;

/// The font family of the DropZone.
/// @group dropzone
$kendo-dropzone-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the DropZone.
/// @group dropzone
$kendo-dropzone-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the DropZone.
/// @group dropzone
$kendo-dropzone-line-height: var( --kendo-line-height, normal ) !default;

/// The background color of the DropZone.
/// @group dropzone
$kendo-dropzone-bg: $kendo-base-bg !default;
/// The text color of the DropZone.
/// @group dropzone
$kendo-dropzone-text: $kendo-base-text !default;
/// The border color of the DropZone.
/// @group dropzone
$kendo-dropzone-border: $kendo-base-border !default;

/// The spacing below the DropZone icon.
/// @group dropzone
$kendo-dropzone-icon-spacing: k-spacing(6) !default;
/// The text color of the DropZone icon.
/// @group dropzone
$kendo-dropzone-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 )) !default;
/// The text color of the hovered DropZone icon.
/// @group dropzone
$kendo-dropzone-icon-hover-text: $kendo-color-primary !default;

/// The font size of the DropZone hint.
/// @group dropzone
$kendo-dropzone-hint-font-size: null !default;
/// The spacing below the DropZone hint.
/// @group dropzone
$kendo-dropzone-hint-spacing: k-spacing(2) !default;
/// The text color of the DropZone hint.
/// @group dropzone
$kendo-dropzone-hint-text: null !default;

/// The font size of the DropZone note.
/// @group dropzone
$kendo-dropzone-note-font-size: var( --kendo-font-size-sm, inherit ) !default;
/// The spacing below the DropZone note.
/// @group dropzone
$kendo-dropzone-note-spacing: null !default;
/// The text color of the DropZone note.
/// @group dropzone
$kendo-dropzone-note-text: $kendo-subtle-text !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/dropzone/_layout.scss
@mixin kendo-dropzone--layout-base() {

    // Dropzone
    .k-external-dropzone {
        height: $kendo-dropzone-min-height;
        display: flex;
        flex-flow: row nowrap;
    }

    // Dropzone inner
    .k-dropzone-inner {
        padding-block: $kendo-dropzone-padding-y;
        padding-inline: $kendo-dropzone-padding-x;
        border-width: $kendo-dropzone-border-width;
        border-style: solid;
        box-sizing: border-box;
        font-size: $kendo-dropzone-font-size;
        font-family: $kendo-dropzone-font-family;
        line-height: $kendo-dropzone-line-height;
        flex: 1 1 auto;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        position: relative;

        .k-dropzone-icon {
            margin-bottom: $kendo-dropzone-icon-spacing;
        }

        .k-dropzone-hint {
            margin-bottom: $kendo-dropzone-hint-spacing;
            font-size: $kendo-dropzone-hint-font-size;
        }

        .k-dropzone-note {
            margin-bottom: $kendo-dropzone-note-spacing;
            font-size: $kendo-dropzone-note-font-size;
        }
    }

}


@mixin kendo-dropzone--layout() {
    @include kendo-dropzone--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/dropzone/_theme.scss
@mixin kendo-dropzone--theme-base() {

    // Dropzone
    .k-dropzone-inner {
        @include fill(
            $kendo-dropzone-text,
            $kendo-dropzone-bg,
            $kendo-dropzone-border
        );

        .k-icon,
        .k-dropzone-icon {
            color: $kendo-dropzone-icon-text;
        }
        .k-dropzone-hint {
            color: $kendo-dropzone-hint-text;
        }
        .k-dropzone-note {
            color: $kendo-dropzone-note-text;
        }
    }


    // Hover
    .k-external-dropzone-hover {

        .k-icon,
        .k-dropzone-icon {
            color: $kendo-dropzone-icon-hover-text;
        }
    }

}


@mixin kendo-dropzone--theme() {
    @include kendo-dropzone--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-dropzone--styles() {
    @include module-render( "dropzone" ) {
        @include kendo-dropzone--layout();
        @include kendo-dropzone--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-dropzone--styles();
}

// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/upload/_variables.scss
// Upload

/// The width of the border around the Upload.
/// @group upload
$kendo-upload-border-width: 1px !default;
/// The font family of the Upload.
/// @group upload
$kendo-upload-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Upload.
/// @group upload
$kendo-upload-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Upload.
/// @group upload
$kendo-upload-line-height: var( --kendo-line-height, normal ) !default;
/// The maximum height of the list with uploaded items.
/// @group upload
$kendo-upload-max-height: 300px !default;

/// The text color of the Upload.
/// @group upload
$kendo-upload-text: $kendo-component-text !default;
/// The background color of the Upload.
/// @group upload
$kendo-upload-bg: $kendo-component-bg !default;
/// The border color of the Upload.
/// @group upload
$kendo-upload-border: $kendo-component-border !default;

/// The horizontal padding of the Upload dropzone.
/// @group upload
$kendo-upload-dropzone-padding-x: k-spacing(2) !default;
/// The vertical padding of the Upload dropzone.
/// @group upload
$kendo-upload-dropzone-padding-y: k-spacing(2) !default;
/// The text color of the Upload dropzone.
/// @group upload
$kendo-upload-dropzone-text: $kendo-component-header-text !default;
/// The background color of the Upload dropzone.
/// @group upload
$kendo-upload-dropzone-bg: $kendo-component-header-bg !default;
/// The border color of the Upload dropzone.
/// @group upload
$kendo-upload-dropzone-border: $kendo-upload-border !default;
/// The background color of the hovered Upload dropzone.
/// @group upload
$kendo-upload-dropzone-hover-bg: $kendo-hover-bg !default;

/// The text color of the Upload status message.
/// @group upload
$kendo-upload-status-text: $kendo-subtle-text !default;
/// The opacity of the Upload status message.
/// @group upload
$kendo-upload-status-text-opacity: null !default;

/// The horizontal padding of an uploaded item.
/// @group upload
$kendo-upload-item-padding-x: k-spacing(2) !default;
/// The vertical padding of an uploaded item.
/// @group upload
$kendo-upload-item-padding-y: k-spacing(2) !default;

/// The vertical spacing between uploaded batch items.
/// @group upload
$kendo-upload-multiple-items-spacing: k-spacing(3) !default;

/// The font size of the Upload validation message.
/// @group upload
$kendo-upload-validation-font-size: var( --kendo-font-size-sm, inherit ) !default;
/// The line height of the Upload validation message.
/// @group upload
$kendo-upload-validation-line-height: var( --kendo-line-height-xs, normal ) !default;
/// The horizontal spacing of the Upload status icon.
/// @group upload
$kendo-upload-icon-spacing: $kendo-icon-spacing !default;
/// The color of the uploaded items icon.
/// @group upload
$kendo-upload-icon-color: $kendo-subtle-text !default;

/// The thickness of the Upload progress bar.
/// @group upload
$kendo-upload-progress-thickness: 2px !default;
/// The background color of the Upload progress bar.
/// @group upload
$kendo-upload-progress-bg: $kendo-color-info !default;

/// The success text color of the Upload.
/// @group upload
$kendo-upload-success-text: $kendo-color-success !default;
/// The success background color of the Upload progress bar.
/// @group upload
$kendo-upload-success-bg: $kendo-color-success !default;

/// The error text color of the Upload.
/// @group upload
$kendo-upload-error-text: $kendo-color-error !default;
/// The error background color of the Upload progress bar.
/// @group upload
$kendo-upload-error-bg: $kendo-color-error !default;

/// The shadow of the focused Upload button, actions and uploaded items.
/// @group upload
$kendo-upload-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/upload/_layout.scss
@mixin kendo-upload--layout-base() {

    .k-upload {
        border-width: $kendo-upload-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-upload-font-family;
        font-size: $kendo-upload-font-size;
        line-height: $kendo-upload-line-height;
        position: relative;
        display: block;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

        .k-upload-button {
            min-width: 7em;
        }

        // Drop zone
        .k-dropzone,
        .k-upload-dropzone {
            padding-block: $kendo-upload-dropzone-padding-y;
            padding-inline: $kendo-upload-dropzone-padding-x;
            border-width: 0;
            text-align: end;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            background-color: transparent;

            .k-dropzone-hint {
                font-style: normal;
                font-weight: normal;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                position: relative;
                flex: 1;
            }

            .k-upload-status {
                font-weight: normal;
                display: flex;
                align-items: center;
                position: relative;

                > .k-icon {
                    margin-inline-end: $kendo-upload-icon-spacing;
                }
            }

            .k-upload-status + .k-dropzone-hint {
                display: none;
            }
        }

        .k-dropzone-active {
            .k-upload-status {
                display: none;
            }

            .k-upload-status + .k-dropzone-hint {
                display: block;
            }
        }

        // Upload files list
        .k-upload-files {
            max-height: $kendo-upload-max-height;
            overflow-y: auto;
            margin: 0;
            padding: 0;
            border-width: 1px 0 0;
            border-style: solid;
            border-color: inherit;
            list-style: none;

            .k-file-multiple,
            .k-file-single {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }

            .k-file-single {
                align-items: center;
            }

            .k-file-multiple {
                align-items: flex-start;
            }

            .k-file {
                padding: $kendo-upload-item-padding-y $kendo-upload-item-padding-x calc(#{$kendo-upload-item-padding-y} + #{$kendo-upload-progress-thickness});
                border-width: 0 0 1px;
                border-style: solid;
                outline: none;
                display: flex;
                align-items: flex-start;
                position: relative;
            }

            .k-file:last-child {
                border-width: 0;
            }

            .k-filename {
                margin-left: k-spacing(4);
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                position: relative;
            }

            .k-upload-pct {
                margin-block: 0;
                margin-inline: $kendo-upload-icon-spacing;
                font-weight: normal;
                vertical-align: middle;
            }

            ~ .k-clear-selected,
            ~ .k-upload-selected {
                margin-top: -$kendo-padding-md-y;
                border-width: 0;
            }

            ~ .k-upload-selected {
                border-left-width: 1px;
                border-left-style: solid;
                margin-left: -1px;
            }

            .k-file-name,
            .k-file-size,
            .k-file-validation-message,
            .k-file-summary {
                display: block;
            }

            .k-file-name {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                position: relative;
            }

            .k-file-size,
            .k-file-summary,
            .k-file-validation-message {
                font-size: $kendo-upload-validation-font-size;
                line-height: $kendo-upload-validation-line-height;
            }


            .k-file-icon-wrapper {

                .k-file-state {
                    position: absolute;
                }
            }

            .k-file-state {
                visibility: hidden;
            }
        }

        .k-upload-files .k-file-info {
            min-height: $kendo-icon-size-xxl;
            display: block;
            overflow: hidden;
            flex: 1 0 0;
        }

        .k-multiple-files-wrapper,
        .k-file-single > .k-file-info {
            margin-inline-start: $kendo-padding-md-x;
            min-height: $kendo-icon-size-xxl;
            display: block;
            overflow: hidden;
            flex: 1 0 0;
        }

        .k-multiple-files-wrapper {
            .k-file-info {
                margin-bottom: $kendo-upload-multiple-items-spacing;
                display: block;
            }

            .k-file-summary {
                margin-top: calc( calc( #{$kendo-upload-multiple-items-spacing} / 3) * -1 );
            }
        }

        .k-progressbar {
            --kendo-progressbar-height: #{$kendo-upload-progress-thickness};
            position: absolute;
            left: $kendo-upload-item-padding-x;
            right: $kendo-upload-item-padding-x;
            bottom: calc( #{$kendo-upload-item-padding-y} / 2 );
            width: auto;
        }

        // Action buttons
        .k-actions {
            border-top-width: 1px;
        }

    }

    .k-upload-button-wrap {
        position: relative;
        direction: ltr;

        input {
            // font should not depend on outside styles, otherwise upload may break
            font: 170px monospace !important; // stylelint-disable-line declaration-no-important
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: 1;
        }
        input[disabled],
        input.k-disabled {
            visibility: hidden;
        }
    }

}


@mixin kendo-upload--layout() {
    @include kendo-upload--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/upload/_theme.scss
@mixin kendo-upload--theme-base() {

    .k-upload {
        @include fill(
            $kendo-upload-text,
            $kendo-upload-bg,
            $kendo-upload-border
        );

        .k-dropzone,
        .k-upload-dropzone {
            @include fill(
                $kendo-upload-dropzone-text,
                $kendo-upload-dropzone-bg,
                $kendo-upload-dropzone-border
            );

            &.k-hover {
                background-color: $kendo-upload-dropzone-hover-bg;
            }

            .k-dropzone-hint {
                color: $kendo-upload-status-text;
                opacity: $kendo-upload-status-text-opacity;
            }

        }

        .k-upload-files,
        .k-file {
            border-color: $kendo-upload-border;
        }

        .k-file {
            &.k-focus {
                @include focus-indicator( $indicator: ( inset $kendo-upload-focus-shadow ), $inset: true );
            }

            .k-upload-action.k-focus {
                @include focus-indicator( $kendo-upload-focus-shadow );
            }

        }

        .k-upload-status {
            color: $kendo-upload-status-text;
            opacity: $kendo-upload-status-text-opacity;
        }

        // Upload status: uploading
        .k-file-progress {
            .k-progressbar .k-selected {
                background-color: $kendo-upload-progress-bg;
            }
        }


        // Upload status: success
        .k-file-success {
            .k-file-validation-message {
                color: $kendo-upload-success-text;
            }

            .k-progressbar .k-selected {
                background-color: $kendo-upload-success-bg;
            }
        }

        // Upload status: error
        .k-file-error {
            .k-file-validation-message {
                color: $kendo-upload-error-text;
            }
            .k-progressbar .k-selected {
                background-color: $kendo-upload-error-bg;
            }
        }

        .k-file-icon-wrapper {
            color: $kendo-upload-icon-color;
            border-color: $kendo-upload-icon-color;
        }

        .k-file-size,
        .k-file-validation-message,
        .k-file-summary {
            color: $kendo-subtle-text;
        }

        .k-multiple-files-wrapper .k-file-summary {
            color: $kendo-upload-text;
        }

        // Invalid,
        &.k-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            border-color: $kendo-invalid-border;
        }
    }

}


@mixin kendo-upload--theme() {
    @include kendo-upload--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-upload--styles() {
    @include module-render( "upload" ) {
        @include kendo-upload--layout();
        @include kendo-upload--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-upload--styles();
}

// #endregion
// #region @import "./dropzone/_index.scss"; -> scss/dropzone/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Command interfaces
// #region @import "./action-buttons/_index.scss"; -> scss/action-buttons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./appbar/_index.scss"; -> scss/appbar/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "appbar",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/appbar/_variables.scss
// AppBar

/// The horizontal margin of the AppBar.
/// @group appbar
$kendo-appbar-margin-x: null !default;
/// The vertical margin of the AppBar.
/// @group appbar
$kendo-appbar-margin-y: null !default;
/// The horizontal padding of the AppBar.
/// @group appbar
$kendo-appbar-padding-x: k-spacing(2) !default;
/// The vertical padding of the AppBar.
/// @group appbar
$kendo-appbar-padding-y: k-spacing(2) !default;
/// The width of the border around the AppBar.
/// @group appbar
$kendo-appbar-border-width: 0px !default;
/// The z-index of the AppBar.
/// @group appbar
$kendo-appbar-zindex: 1000 !default;
/// The font family of the AppBar.
/// @group appbar
$kendo-appbar-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the AppBar.
/// @group appbar
$kendo-appbar-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the AppBar.
/// @group appbar
$kendo-appbar-line-height: var( --kendo-line-height, normal ) !default;

/// The spacing between the AppBar sections.
/// @group appbar
$kendo-appbar-gap: k-spacing(2) !default;

/// The background color of the AppBar based on light theme color.
/// @group appbar
$kendo-appbar-light-bg: $kendo-color-light !default;
/// The text color of the AppBar based on light theme color.
/// @group appbar
$kendo-appbar-light-text: if($kendo-enable-color-system, k-color( on-light ), k-contrast-legacy( $kendo-color-light )) !default;

/// The background color of the AppBar based on dark theme color.
/// @group appbar
$kendo-appbar-dark-bg: $kendo-color-dark !default;
/// The text color of the AppBar based on dark theme color.
/// @group appbar
$kendo-appbar-dark-text: if($kendo-enable-color-system, k-color( on-dark ), k-contrast-legacy( $kendo-color-dark )) !default;

/// The box shadow of the AppBar.
/// @group appbar
$kendo-appbar-box-shadow: k-elevation(4) !default;
/// The box shadow of the AppBar with bottom position.
/// @group appbar
$kendo-appbar-bottom-box-shadow: $kendo-appbar-box-shadow !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/appbar/_layout.scss
@mixin kendo-appbar--layout-base() {

    // Appbar
    .k-appbar {
        margin-block: $kendo-appbar-margin-y;
        margin-inline: $kendo-appbar-margin-x;
        padding-block: $kendo-appbar-padding-y;
        padding-inline: $kendo-appbar-padding-x;
        border-width: $kendo-appbar-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-appbar-font-family;
        font-size: $kendo-appbar-font-size;
        line-height: $kendo-appbar-line-height;
        list-style: none;
        display: flex;
        gap: $kendo-appbar-gap;
        flex-flow: row wrap;
        align-items: center;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

        > * {
            flex-shrink: 0;
        }

        // Appbar section
        .k-appbar-section {
            display: inline-flex;
            flex-wrap: nowrap;
            align-items: center;
        }


        // Appbar Spacer
        .k-appbar-spacer {
            flex: 1 0 auto;
        }
        .k-appbar-spacer-sized {
            flex-grow: 0;
        }


        // Separator
        .k-appbar-separator {
            margin: 0;
            width: 0;
            min-height: 1em;
            border-style: solid;
            border-width: 0 0 0 1px;
            display: inline-block;
        }


        // Input
        .k-input,
        .k-picker {
            width: 10em;
        }
        .k-color-picker {
            width: min-content;
        }

    }


    // Static appbar
    .k-appbar-static {
        position: static;
    }


    // Sticky appbar
    .k-appbar-sticky {
        width: 100%;
        position: sticky;
        top: 0;
        z-index: $kendo-appbar-zindex;
    }


    // Fixed appbar
    .k-appbar-fixed {
        width: 100%;
        position: fixed;
        z-index: 1;
    }


    // Appbar position
    .k-appbar-top {
        top: 0;
        bottom: auto;
    }
    .k-appbar-bottom {
        top: auto;
        bottom: 0;

        &.k-appbar-fixed {
            bottom: 0;
        }
    }

}


@mixin kendo-appbar--layout() {
    @include kendo-appbar--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/appbar/_theme.scss
@mixin kendo-appbar--theme-base() {

    .k-appbar {
        @include box-shadow( $kendo-appbar-box-shadow );
    }
    .k-appbar-bottom {
        @include box-shadow( $kendo-appbar-bottom-box-shadow );
    }


    // AppBar theme colors
    @each $name, $color in $kendo-theme-colors {
        .k-appbar-#{$name} {
            @if $name == "light" {
                color: $kendo-appbar-light-text;
                background-color: $kendo-appbar-light-bg;
            } @else if $name == "dark" {
                color: $kendo-appbar-dark-text;
                background-color: $kendo-appbar-dark-bg;
            } @else {
                color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
                background-color: $color;
            }
        }
    }

}


@mixin kendo-appbar--theme() {
    @include kendo-appbar--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-appbar--styles() {
    @include module-render( "appbar" ) {
        @include kendo-appbar--layout();
        @include kendo-appbar--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-appbar--styles();
}

// #endregion
// #region @import "./fab/_index.scss"; -> scss/fab/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "fab",
    dependencies: (
        "badge",
        "button",
        "icon",
        // "utils/layout/position",
    )
);


// Dependencies
// @import "../utils/_position.scss";
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../badge/_index.scss"; -> scss/badge/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/fab/_variables.scss
// Floating Action Button

/// The width of the border around the FAB.
/// @group floating-action-button
$kendo-fab-border-width: 1px !default;
/// The border radius of the FAB.
/// @group floating-action-button
$kendo-fab-border-radius: k-border-radius(md) !default;

/// The font family of the FAB.
/// @group floating-action-button
$kendo-fab-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the FAB.
/// @group floating-action-button
$kendo-fab-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the FAB.
/// @group floating-action-button
$kendo-fab-line-height: var( --kendo-line-height, normal ) !default;

/// The horizontal padding of the FAB.
/// @group floating-action-button
$kendo-fab-padding-x: k-spacing(4) !default;
/// The horizontal padding of the small FAB.
/// @group floating-action-button
$kendo-fab-sm-padding-x: calc( #{$kendo-fab-padding-x} / 2 ) !default;
/// The horizontal padding of the medium FAB.
/// @group floating-action-button
$kendo-fab-md-padding-x: $kendo-fab-padding-x !default;
/// The horizontal padding of the large FAB.
/// @group floating-action-button
$kendo-fab-lg-padding-x: calc( #{$kendo-fab-padding-x} * 1.5 ) !default;

/// The vertical padding of the FAB.
/// @group floating-action-button
$kendo-fab-padding-y: $kendo-fab-padding-x !default;
/// The vertical padding of the small FAB.
/// @group floating-action-button
$kendo-fab-sm-padding-y: calc( #{$kendo-fab-padding-y} / 2 ) !default;
/// The vertical padding of the medium FAB.
/// @group floating-action-button
$kendo-fab-md-padding-y: $kendo-fab-padding-y !default;
/// The vertical padding of the large FAB.
/// @group floating-action-button
$kendo-fab-lg-padding-y: calc( #{$kendo-fab-padding-y} * 1.5 ) !default;

/// The horizontal padding of the FAB icon.
/// @group floating-action-button
$kendo-fab-icon-padding-x: k-spacing(0.5) !default;
/// The vertical padding of the FAB icon.
/// @group floating-action-button
$kendo-fab-icon-padding-y: $kendo-fab-icon-padding-x !default;
/// The spacing of the FAB icon.
/// @group floating-action-button
$kendo-fab-icon-spacing: k-spacing(0.5) !default;

/// The horizontal padding of the FAB items.
/// @group floating-action-button
$kendo-fab-items-padding-x: k-spacing(0) !default;
/// The vertical padding of the FAB items.
/// @group floating-action-button
$kendo-fab-items-padding-y: k-spacing(4) !default;

/// The horizontal padding of the FAB item text.
/// @group floating-action-button
$kendo-fab-item-text-padding-x: k-spacing(1) !default;
/// The vertical padding of the FAB item text.
/// @group floating-action-button
$kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-x !default;
/// The width of the FAB item text border.
/// @group floating-action-button
$kendo-fab-item-text-border-width: 1px !default;
/// The border radius of the FAB item text.
/// @group floating-action-button
$kendo-fab-item-text-border-radius: 2px !default;
/// The font size of the FAB item text.
/// @group floating-action-button
$kendo-fab-item-text-font-size: var( --kendo-font-size-xs, inherit ) !default;
/// The line height of the FAB item text.
/// @group floating-action-button
$kendo-fab-item-text-line-height: 1.2 !default;

/// The horizontal padding of the FAB item icon.
/// @group floating-action-button
$kendo-fab-item-icon-padding-x: calc( #{k-spacing(2)} + #{$kendo-fab-icon-padding-x} ) !default;
/// The vertical padding of the FAB item icon.
/// @group floating-action-button
$kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
/// The width of the FAB item icon border.
/// @group floating-action-button
$kendo-fab-item-icon-border-width: 0 !default;
/// The border radius of the FAB item icon.
/// @group floating-action-button
$kendo-fab-item-icon-border-radius: 50% !default;

/// The theme colors map for the FAB.
/// @group floating-action-button
$kendo-fab-theme-colors: $kendo-theme-colors !default;

/// The size map for the FAB.
/// @group floating-action-button
$kendo-fab-sizes: (
    sm: (
        padding-x: $kendo-fab-sm-padding-x,
        padding-y: $kendo-fab-sm-padding-y
    ),
    md: (
        padding-x: $kendo-fab-md-padding-x,
        padding-y: $kendo-fab-md-padding-y
    ),
    lg: (
        padding-x: $kendo-fab-lg-padding-x,
        padding-y: $kendo-fab-lg-padding-y
    )
) !default;

/// The base shadow of the FAB.
/// @group floating-action-button
$kendo-fab-shadow: k-elevation(5) !default;
/// The shadow of the disabled FAB.
/// @group floating-action-button
$kendo-fab-disabled-shadow: k-elevation(5) !default;
/// The shadow of the active FAB.
/// @group floating-action-button
$kendo-fab-active-shadow: null !default;
/// The outline style of the FAB.
/// @group floating-action-button
$kendo-fab-outline-style: solid !default;
/// The outline width of the FAB.
/// @group floating-action-button
$kendo-fab-outline-width: k-spacing(0.5) !default;

/// The base text color of the FAB item.
/// @group floating-action-button
$kendo-fab-item-text: $kendo-component-text !default;
/// The base background color of the FAB item.
/// @group floating-action-button
$kendo-fab-item-bg: $kendo-component-bg !default;
/// The base border color of the FAB item.
/// @group floating-action-button
$kendo-fab-item-border: $kendo-component-border !default;

/// The base text color of the FAB item icon.
/// @group floating-action-button
$kendo-fab-item-icon-text: $kendo-button-text !default;
/// The base background color of the FAB item icon.
/// @group floating-action-button
$kendo-fab-item-icon-bg: $kendo-button-bg !default;
/// The base border color of the FAB item icon.
/// @group floating-action-button
$kendo-fab-item-icon-border: $kendo-button-border !default;

/// The base shadow of the FAB item.
/// @group floating-action-button
$kendo-fab-item-shadow: $kendo-fab-shadow !default;
/// The shadow of the disabled FAB item.
/// @group floating-action-button
$kendo-fab-item-disabled-shadow: $kendo-fab-disabled-shadow !default;
/// The shadow of the active FAB item.
/// @group floating-action-button
$kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
/// The outline style of the FAB item.
/// @group floating-action-button
$kendo-fab-item-outline-style: solid !default;
/// The outline width of the FAB item.
/// @group floating-action-button
$kendo-fab-item-outline-width: k-spacing(0.5) !default;
/// The outline color of the FAB item.
/// @group floating-action-button
$kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/fab/_layout.scss
@mixin kendo-fab--layout-base() {

    // Floating Action Button (FAB)
    .k-fab {
        padding: 0;
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        box-sizing: border-box;
        color: inherit;
        background-color: transparent;
        font-size: $kendo-fab-font-size;
        line-height: $kendo-fab-line-height;
        font-family: $kendo-fab-font-family;
        text-align: center;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        outline: none;

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

        &:focus {
            outline: none;
        }
    }

    // FAB Icon
    .k-fab-icon {
        padding-inline: $kendo-fab-icon-padding-x;
        padding-block: $kendo-fab-icon-padding-y;
        box-sizing: content-box;

        .k-icon-wrapper-host:not(:only-child) &,
        &:not(:only-child) {
            margin-inline-end: $kendo-fab-icon-spacing;
            margin-inline-start: calc( #{$kendo-fab-icon-spacing} * -1 );
        }
    }


    // Sizes
    @each $size, $size-props in $kendo-fab-sizes {
        $_padding-x: k-map-get( $size-props, padding-x );
        $_padding-y: k-map-get( $size-props, padding-y );

        .k-fab-#{$size} {
            padding: $_padding-y $_padding-x;
        }

    }

    // Items
    .k-fab-items {
        margin: 0;
        padding-block: $kendo-fab-items-padding-y;
        padding-inline: $kendo-fab-items-padding-x;
        display: flex;
    }

    .k-fab-items-bottom {
        flex-direction: column;
    }
    .k-fab-items-bottom .k-fab-item:last-child {
        margin-block-end: 0;
    }

    .k-fab-items-top {
        flex-direction: column-reverse;
    }
    .k-fab-items-top .k-fab-item:first-child {
        margin-block-end: 0;
    }

    .k-fab-item {
        list-style-type: none;
        margin-block-end: k-spacing(2);
        outline: none;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        cursor: pointer;

        &.k-text-right {
            flex-direction: row;

            .k-fab-item-text {
                // Needed for fab item positioning in RTL
                margin-right: k-spacing(2);
            }
        }
        &.k-text-left {
            flex-direction: row-reverse;

            .k-fab-item-text {
                // Needed for fab item positioning in RTL
                margin-left: k-spacing(2);
            }
        }
    }

    .k-fab-item-text {
        padding-block: $kendo-fab-item-text-padding-y;
        padding-inline: $kendo-fab-item-text-padding-x;
        border-width: $kendo-fab-item-text-border-width;
        border-radius: $kendo-fab-item-text-border-radius;
        font-size: $kendo-fab-item-text-font-size;
        line-height: $kendo-fab-item-text-line-height;
    }

    .k-fab-item-icon {
        padding-block: $kendo-fab-item-icon-padding-y;
        padding-inline: $kendo-fab-item-icon-padding-x;
        border-width: $kendo-fab-item-icon-border-width;
        border-radius: $kendo-fab-item-icon-border-radius;
        box-sizing: content-box;
        outline: none;
    }



    .k-rtl .k-fab-popup,
    [dir="rtl"] .k-fab-popup {
        .k-fab-item.k-text-left {
            flex-direction: row;
        }

        .k-fab-item.k-text-right {
            flex-direction: row-reverse;
        }
    }
}


@mixin kendo-fab--layout() {
    @include kendo-fab--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/fab/_theme.scss
@mixin kendo-fab--theme-base() {

    // Normal state
    @each $name, $color in $kendo-fab-theme-colors {
        .k-fab-solid-#{$name} {
            @include box-shadow($kendo-fab-shadow);
            outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
            outline-offset: -$kendo-fab-border-width;
            border-color: $color;
            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
            background-color: $color;
        }
    }

    // Hover state
    @each $name, $color in $kendo-fab-theme-colors {
        .k-hover.k-fab-solid-#{$name},
        .k-fab-solid-#{$name}:hover {
            border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
            background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
        }
    }

    // Focus state
    @each $name, $color in $kendo-fab-theme-colors {
        .k-fab-solid-#{$name}.k-focus,
        .k-fab-solid-#{$name}:focus {
            @if $kendo-enable-focus-contrast {
                @include box-shadow( inset 0 0 0 2px currentColor );
            } @else {
                outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 30%, transparent), rgba( $color, .3 ));
            }
        }
    }

    // Active state
    @each $name, $color in $kendo-fab-theme-colors {
        .k-active.k-fab-solid-#{$name},
        .k-selected.k-fab-solid-#{$name},
        .k-fab-solid-#{$name}:active {
            @include box-shadow($kendo-fab-active-shadow);
            border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
        }
    }

    // Disabled state
    @each $name, $color in $kendo-fab-theme-colors {
        .k-disabled.k-fab-solid-#{$name},
        .k-fab-solid-#{$name}:disabled {
            @include box-shadow($kendo-fab-disabled-shadow);
            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 60%, transparent), k-try-tint( $color, 5 ));
            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 60%, transparent), k-try-tint( k-contrast-legacy( $color ), 5 ));
            opacity: 1;
        }
    }

    // Items
    .k-fab-item-text {
        @include fill(
            $kendo-fab-item-text,
            $kendo-fab-item-bg,
            $kendo-fab-item-border
        );
        @include box-shadow($kendo-fab-item-shadow);

    }
    .k-fab-item-icon {
        @include fill(
            $kendo-fab-item-icon-text,
            $kendo-fab-item-icon-bg,
            $kendo-fab-item-icon-border
        );
        @include box-shadow($kendo-fab-item-shadow);
        outline: $kendo-fab-border-width $kendo-fab-item-outline-style $kendo-fab-item-outline-color;
        outline-offset: -$kendo-fab-border-width;
    }

    // Hover state
    .k-fab-item.k-hover .k-fab-item-icon,
    .k-fab-item:hover .k-fab-item-icon {
        border-color: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-fab-item-icon-border, .5 ));
        background-color: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-fab-item-icon-bg, .5 ));
    }

    // Focus state
    .k-fab-item:focus .k-fab-item-text,
    .k-fab-item:focus .k-fab-item-icon,
    .k-fab-item.k-focus .k-fab-item-text,
    .k-fab-item.k-focus .k-fab-item-icon {
        @if $kendo-enable-focus-contrast {
            @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
        } @else {
            outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color;
        }
    }

    // Active state
    .k-fab-item.k-active .k-fab-item-icon,
    .k-fab-item:active .k-fab-item-icon {
        @include box-shadow($kendo-fab-item-active-shadow);
        border-color: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-fab-item-icon-border, 1 ));
        background-color: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-fab-item-icon-bg, 1 ));
    }

    // Disabled state
    .k-fab-item.k-disabled,
    .k-fab-item:disabled {
        opacity: 1;

        .k-fab-item-text,
        .k-fab-item-icon {
            @include box-shadow($kendo-fab-item-disabled-shadow);
            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 60%, transparent), k-try-tint( $kendo-fab-item-bg, 5 ));
            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-try-tint( $kendo-fab-item-text, 5 ));
        }
    }

    // Popup
    .k-fab-popup {
        @include box-shadow( none );
    }

}


@mixin kendo-fab--theme() {
    @include kendo-fab--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-fab--styles() {
    @include module-render( "fab" ) {
        @include kendo-fab--layout();
        @include kendo-fab--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-fab--styles();
}

// #endregion
// #region @import "./menu/_index.scss"; -> scss/menu/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./toolbar/_index.scss"; -> scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Popups and modals
// #region @import "./action-sheet/_index.scss"; -> scss/action-sheet/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "action-sheet",
    dependencies: (
        "icon",
        "popup",
    )
);


// Dependencies
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../listgroup/_index.scss"; -> scss/listgroup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/action-sheet/_variables.scss
// Action sheet

$kendo-actionsheet-padding-x: null !default;
$kendo-actionsheet-padding-y: null !default;
$kendo-actionsheet-width: 360px !default;
$kendo-actionsheet-max-width: 100% !default;
$kendo-actionsheet-height: 60vh !default;
$kendo-actionsheet-max-height: 60vh !default;

$kendo-actionsheet-border-width: 0px !default;
$kendo-actionsheet-border-radius: 0px !default;

$kendo-actionsheet-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-actionsheet-font-family: var( --kendo-font-family, inherit ) !default;
$kendo-actionsheet-line-height: var( --kendo-line-height, normal ) !default;

$kendo-actionsheet-bg: $kendo-component-bg !default;
$kendo-actionsheet-text: $kendo-component-text !default;
$kendo-actionsheet-border: $kendo-component-border !default;
$kendo-actionsheet-shadow: k-elevation(7) !default;


// Actionsheet header
$kendo-actionsheet-titlebar-padding-x: k-spacing(4) !default;
$kendo-actionsheet-titlebar-padding-y: k-spacing(2) !default;
$kendo-actionsheet-titlebar-border-width: null !default;
$kendo-actionsheet-titlebar-font-size: null !default;
$kendo-actionsheet-titlebar-font-family: null !default;
$kendo-actionsheet-titlebar-line-height: null !default;
$kendo-actionsheet-titlebar-gap: k-spacing(4) !default;

$kendo-actionsheet-titlebar-bg: null !default;
$kendo-actionsheet-titlebar-text: null !default;
$kendo-actionsheet-titlebar-border: null !default;
$kendo-actionsheet-titlebar-gradient: null !default;
$kendo-actionsheet-titlebar-shadow: null !default;

$kendo-actionsheet-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
$kendo-actionsheet-subtitle-line-height: var( --kendo-line-height-sm, normal ) !default;
$kendo-actionsheet-subtitle-text: $kendo-subtle-text !default;


// Actionsheet item
$kendo-actionsheet-item-min-height: 40px !default;
$kendo-actionsheet-item-padding-x: k-spacing(4) !default;
$kendo-actionsheet-item-padding-y: k-spacing(2) !default;
$kendo-actionsheet-item-border-width: 1px !default;
$kendo-actionsheet-item-spacing: k-spacing(3) !default;

$kendo-actionsheet-item-title-font-weight: null !default;
$kendo-actionsheet-item-title-text-transform: null !default;

$kendo-actionsheet-item-description-font-size: .875em !default;
$kendo-actionsheet-item-description-text: $kendo-subtle-text !default;

$kendo-actionsheet-item-hover-bg: $kendo-hover-bg !default;
$kendo-actionsheet-item-hover-text: null !default;
$kendo-actionsheet-item-hover-border: null !default;
$kendo-actionsheet-item-hover-gradient: null !default;
$kendo-actionsheet-item-hover-shadow: null !default;

$kendo-actionsheet-item-focus-bg: null !default;
$kendo-actionsheet-item-focus-text: null !default;
$kendo-actionsheet-item-focus-border: null !default;
$kendo-actionsheet-item-focus-gradient: null !default;
$kendo-actionsheet-item-focus-shadow: $kendo-focus-shadow !default;

$kendo-actionsheet-item-disabled-bg: null !default;
$kendo-actionsheet-item-disabled-text: null !default;
$kendo-actionsheet-item-disabled-border: null !default;
$kendo-actionsheet-item-disabled-gradient: null !default;
$kendo-actionsheet-item-disabled-shadow: null !default;


// Adaptive Actionsheet
$kendo-adaptive-actionsheet-font-size: var( --kendo-font-size-lg, inherit ) !default;
$kendo-adaptive-actionsheet-titlebar-border-width: 1px !default;
$kendo-adaptive-actionsheet-titlebar-padding-y: k-spacing(4) !default;
$kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-y !default;
$kendo-adaptive-actionsheet-titlebar-border: $kendo-component-border !default;

$kendo-adaptive-actionsheet-content-padding-y: k-spacing(2) !default;
$kendo-adaptive-actionsheet-content-padding-x: k-spacing(4) !default;

$kendo-adaptive-actionsheet-footer-padding-y: k-spacing(2) !default;
$kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/action-sheet/_layout.scss
@mixin kendo-action-sheet--layout-base() {

    // Action sheet container
    .k-actionsheet-container {
        width: 100%;
        height: 100%;
        max-width: clamp(100vw, 100%, 100%);
        max-height: clamp(100vh, 100%, 100%);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        overflow: hidden;
        transform: translateZ(0);

        // Overlay
        > .k-overlay {
            position: absolute;
            z-index: 1;
        }

        // Nested animation container
        > .k-animation-container {
            width: 100%;
            height: 100%;
            border-radius: 0;
            overflow: hidden;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            pointer-events: none;

            > .k-child-animation-container {
                position: absolute;
            }
        }

        // No animation container
        > .k-actionsheet {
            position: absolute;
            z-index: 2;
        }

        // Enable mouse events for action sheet
        .k-actionsheet {
            pointer-events: all;
        }
    }


    // Actionsheet
    .k-actionsheet {
        padding-block: $kendo-actionsheet-padding-y;
        padding-inline: $kendo-actionsheet-padding-y;
        width: var( --kendo-actionsheet-width, #{$kendo-actionsheet-width} );
        height: var( --kendo-actionsheet-height, #{$kendo-actionsheet-height} );
        max-width: var( --kendo-actionsheet-max-width, #{$kendo-actionsheet-max-width} );
        max-height: var( --kendo-actionsheet-max-height, #{$kendo-actionsheet-max-height} );
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        box-sizing: border-box;
        font-size: $kendo-actionsheet-font-size;
        font-family: $kendo-actionsheet-font-family;
        line-height: $kendo-actionsheet-line-height;
        overflow: hidden;
        position: relative;

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


    // Actionsheet titlebar
    .k-actionsheet-titlebar {
        padding-block: $kendo-actionsheet-titlebar-padding-y;
        padding-inline: $kendo-actionsheet-titlebar-padding-x;
        border-width: 0;
        border-bottom-width: if( $kendo-actionsheet-titlebar-border-width, $kendo-actionsheet-titlebar-border-width, null );
        border-style: solid;
        border-color: transparent;
        font-size: $kendo-actionsheet-titlebar-font-size;
        font-family: $kendo-actionsheet-titlebar-font-family;
        line-height: $kendo-actionsheet-titlebar-line-height;
        flex: none;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        gap: $kendo-actionsheet-titlebar-gap;
    }
    .k-actionsheet-titlebar-group {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        width: 100%;
    }
    .k-actionsheet-title {
        flex: 1;
    }
    .k-actionsheet-subtitle {
        font-size: $kendo-actionsheet-subtitle-font-size;
        line-height: $kendo-actionsheet-subtitle-line-height;
    }
    .k-actionsheet-actions {
        flex: none;
    }


    // Actionsheet content
    .k-actionsheet-content {
        flex: 1;
        overflow: auto;
        position: relative;
    }


    // Actionsheet footer
    .k-actionsheet-footer {
        flex: none;
    }


    // Actionsheet items
    .k-actionsheet-items {
        margin: 0;
        padding: 0;
        list-style: none;
        flex: none;
    }


    // Actionsheet item
    .k-actionsheet-item {
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-flow: row nowrap;
        outline: none;
    }
    .k-actionsheet-action {
        margin: 0;
        padding-block: $kendo-actionsheet-item-padding-y;
        padding-inline: $kendo-actionsheet-item-padding-x;
        min-height: $kendo-actionsheet-item-min-height;
        box-sizing: border-box;
        color: inherit;
        text-decoration: none;
        outline: 0;
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        gap: $kendo-actionsheet-item-spacing;
    }
    .k-actionsheet-item-text {
        display: flex;
        flex-flow: column nowrap;
    }
    .k-actionsheet-item-title {
        font-weight: $kendo-actionsheet-item-title-font-weight;
        text-transform: $kendo-actionsheet-item-title-text-transform;
    }
    .k-actionsheet-item-description {
        font-size: $kendo-actionsheet-item-description-font-size;
    }


    // Actionsheet separator
    .k-actionsheet .k-hr {
        margin: 0;
        flex: none;
    }


    // Action sheet position
    .k-actionsheet-top {
        @include border-bottom-radius( $kendo-actionsheet-border-radius );
        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
        border-top-width: if( $kendo-actionsheet-border-width, 0, null );
        top: 0;
        inset-inline-start: 50%;
        transform: translateX( -50% );
    }
    .k-actionsheet-bottom {
        @include border-top-radius( $kendo-actionsheet-border-radius );
        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
        border-bottom-width: if( $kendo-actionsheet-border-width, 0, null );
        bottom: 0;
        inset-inline-start: 50%;
        transform: translateX( -50% );
    }
    .k-actionsheet-left {
        @include border-right-radius( $kendo-actionsheet-border-radius );
        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
        border-left-width: if( $kendo-actionsheet-border-width, 0, null );
        left: 0;
        top: 50%;
        transform: translateY( -50% );
    }
    .k-actionsheet-right {
        @include border-left-radius( $kendo-actionsheet-border-radius );
        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
        border-right-width: if( $kendo-actionsheet-border-width, 0, null );
        right: 0;
        top: 50%;
        transform: translateY( -50% );
    }
    .k-actionsheet-fullscreen {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        height: 100%;
    }


    // Action sheet in popup
    .k-animation-container > .k-actionsheet {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
    }


    // Adaptive action sheet
    .k-adaptive-actionsheet {
        max-width: 100%;
        width: 100%;
        font-size: $kendo-adaptive-actionsheet-font-size;

        // TMP: this should be moved to action sheet
        display: flex;
        flex-flow: column nowrap;

        .k-actionsheet-titlebar {
            padding-block: $kendo-adaptive-actionsheet-titlebar-padding-y;
            padding-inline: $kendo-adaptive-actionsheet-titlebar-padding-x;
            border-bottom-width: $kendo-adaptive-actionsheet-titlebar-border-width;
        }

        .k-actionsheet-content {
            padding-block: $kendo-adaptive-actionsheet-content-padding-y;
            padding-inline: $kendo-adaptive-actionsheet-content-padding-x;
        }

        .k-actionsheet-footer {
            padding-block: $kendo-adaptive-actionsheet-footer-padding-y;
            padding-inline: $kendo-adaptive-actionsheet-footer-padding-x;
        }

        .k-actionsheet-filter {
            width: calc( 360px - #{$kendo-adaptive-actionsheet-titlebar-padding-x} * 2 );
        }
        .k-actionsheet-content,
        .k-actionsheet-footer {
            margin-inline: auto;
            width: k-string-unquote("min(100%, 360px)");
        }

        .k-list-container,
        .k-treeview {
            height: 100%;
        }
        .k-list-filter {
            width: 100%;
            padding-inline: 0;
        }

        .k-menu-group {
            height: 100%;
            overflow: auto;
            position: static;
        }

        .k-calendar {
            margin-inline: auto;
            border-width: 0;
            display: flex;
        }

        .k-timeselector {
            height: 100%;
            border-width: 0;
            overflow: hidden;

            .k-time-part {
                display: contents;
            }

            .k-time-list-wrapper {
                height: 100%;
            }
        }

        .k-datetime-wrap {
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column nowrap;
        }
        .k-datetime-selector {
            flex: 1 1 auto;
        }

        .k-datetime-calendar-wrap {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            flex: 0 0 100%;
        }

        .k-datetime-time-wrap {
            width: 100%;
            position: absolute;
            top: 0;
            left: 100%;
            bottom: 0;
            flex: 0 0 100%;
        }

        .k-scrollable-wrap {
            height: 100%;
            overflow-y: auto;
        }

        .k-data-table {
            max-height: 100%;
            overflow: hidden;
            display: flex;
            flex-flow: column nowrap;
        }
    }


    // Legacy action sheet
    // TODO: remove when kendo-jquery migrate
    .k-actionsheet-jq {
        &.k-actionsheet {
            height: auto;
        }

        .k-actionsheet-header {
            @extend .k-actionsheet-titlebar !optional;
            align-items: flex-start;
        }

        .k-actionsheet-action {
            align-items: center;
        }
    }

    // RTL
    .k-rtl,
    [dir="rtl"] {
        .k-actionsheet-top,
        .k-actionsheet-bottom {
            transform: translateX( 50% );
        }
    }

}


@mixin kendo-action-sheet--layout() {
    @include kendo-action-sheet--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/action-sheet/_theme.scss
@mixin kendo-action-sheet--theme-base() {

    // Actionsheet
    .k-actionsheet {
        @include fill(
            $kendo-actionsheet-text,
            $kendo-actionsheet-bg,
            $kendo-actionsheet-border
        );
        @include box-shadow( $kendo-actionsheet-shadow );
    }


    // Actionsheet header
    .k-actionsheet-titlebar {
        @include fill(
            $kendo-actionsheet-titlebar-text,
            $kendo-actionsheet-titlebar-bg,
            $kendo-actionsheet-titlebar-border,
            $kendo-actionsheet-titlebar-gradient
        );
        @include box-shadow( $kendo-actionsheet-titlebar-shadow );
    }
    .k-actionsheet-subtitle {
        @include fill( $color: $kendo-actionsheet-subtitle-text );
    }


    // Actionsheet items
    .k-actionsheet-items {}


    // Actionsheet item
    .k-actionsheet-item {


        // Hover state
        &:hover,
        &.k-hover {
            @include fill(
                $kendo-actionsheet-item-hover-text,
                $kendo-actionsheet-item-hover-bg,
                $kendo-actionsheet-item-hover-border,
                $kendo-actionsheet-item-hover-gradient
            );
            @include box-shadow( $kendo-actionsheet-item-hover-shadow );
        }


        // Focus state
        &:focus,
        &.k-focus {
            @include fill(
                $kendo-actionsheet-item-focus-text,
                $kendo-actionsheet-item-focus-bg,
                $kendo-actionsheet-item-focus-border,
                $kendo-actionsheet-item-focus-gradient
            );
            @include focus-indicator( $kendo-actionsheet-item-focus-shadow );
        }


        // Disabled state
        &:disabled,
        &.k-disabled {
            @include fill(
                $kendo-actionsheet-item-disabled-text,
                $kendo-actionsheet-item-disabled-bg,
                $kendo-actionsheet-item-disabled-border,
                $kendo-actionsheet-item-disabled-gradient
            );
            @include box-shadow( $kendo-actionsheet-item-disabled-shadow );
        }
    }


    // Actionsheet item description
    .k-actionsheet-item-description {
        @include fill( $color: $kendo-actionsheet-item-description-text );
    }


    // Actionsheet action
    .k-actionsheet-action {}

    // Actionsheet separator
    .k-actionsheet .k-hr {
        border-color: $kendo-actionsheet-border;
    }


    // Adaptive Actionsheet
    .k-adaptive-actionsheet .k-actionsheet-titlebar {
        @include fill( $border: $kendo-adaptive-actionsheet-titlebar-border );
    }

}


@mixin kendo-action-sheet--theme() {
    @include kendo-action-sheet--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-action-sheet--styles() {
    @include module-render( "action-sheet" ) {
        @include kendo-action-sheet--layout();
        @include kendo-action-sheet--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-action-sheet--styles();
}

// #endregion
// #region @import "./dialog/_index.scss"; -> scss/dialog/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "dialog",
    dependencies: (
        "button",
        "icon",
        "window",
    )
);


// Dependencies
// #region @import "../window/_index.scss"; -> scss/window/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "window",
    dependencies: (
        "actions",
        "button",
        "form",
        "icon",
        "overlay",
    )
);


// Dependencies
// #region @import "../overlay/_index.scss"; -> scss/overlay/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../forms/_index.scss"; -> scss/forms/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../action-buttons/_index.scss"; -> scss/action-buttons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/window/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./_layout.scss"; -> scss/window/_layout.scss
@mixin kendo-window--layout-base() {

    .k-window {
        @include border-radius( $kendo-window-border-radius );
        padding: 0;
        border-width: $kendo-window-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-window-font-family;
        font-size: $kendo-window-font-size;
        line-height: $kendo-window-line-height;
        display: inline-flex;
        flex-direction: column;
        position: absolute;
        z-index: 10002;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        // overlay during dragging
        // .k-overlay {
        //    position: absolute;
        //    opacity: 0;
        // }
    }
    .k-window.k-window-maximized {
        max-width: 100vw;
        max-height: 100vh;
        box-shadow: none;
    }


    // Window sizes
    @each $size, $width in $kendo-window-sizes {
        .k-window-#{$size} { width: $width; }
    }


    // Title bar
    .k-window-titlebar {
        @include border-top-radius( $kendo-window-border-radius );
        padding-block: $kendo-window-titlebar-padding-y;
        padding-inline: $kendo-window-titlebar-padding-x;
        border-width: $kendo-window-titlebar-border-width;
        border-style: $kendo-window-titlebar-border-style;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
        flex-shrink: 0;
        align-items: center;

        .k-window-minimized & {
            border-width: 0;
        }
    }

    // Title bar title text
    .k-window-title {
        padding-block: .5em;
        padding-inline: 0;
        margin-block: -.5em;
        margin-inline: 0;
        font-size: $kendo-window-title-font-size;
        line-height: $kendo-window-title-line-height;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: default;
        flex: 1;
        display: flex;
        flex-flow: row nowrap;

        &::before {
            content: "\200b";
        }
    }


    // Actions
    .k-window-titlebar-actions {
        margin-block: -5em;
        margin-inline: 0;
        margin-inline-end: calc( #{$kendo-window-titlebar-padding-y} - #{$kendo-window-titlebar-padding-x} );
        line-height: 1;
        display: flex;
        gap: $kendo-window-actions-gap;
        flex-flow: row nowrap;
        flex-shrink: 0;
        align-items: center;
        vertical-align: top;
    }
    .k-window-titlebar-action {
        flex-shrink: 0;
        opacity: $kendo-window-action-opacity;
    }
    .k-window-titlebar-action:hover {
        opacity: $kendo-window-action-hover-opacity;
    }


    // Content
    .k-window-content,
    .k-prompt-container {
        padding-block: $kendo-window-inner-padding-y;
        padding-inline: $kendo-window-inner-padding-x;
        border-width: 0;
        border-color: inherit;
        color: inherit;
        background: none;
        outline: 0;
        overflow: auto;
        position: relative;
        flex: 1 1 auto;
    }
    .k-window-content + .k-prompt-container {
        margin-top: - k-math-div( $kendo-window-inner-padding-y, 2 );
    }
    .k-window-content:first-child {
        padding-top: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} );
    }
    .k-window-content:last-child {
        padding-bottom: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} );
    }

    .k-window-iframecontent {
        padding: 0;
        overflow: visible;

        .k-content-frame {
            vertical-align: top;
            border: 0;
            width: 100%;
            height: 100%;
        }
    }

    // Buttons Layout
    .k-window-actions {
        @include border-bottom-radius( $kendo-window-border-radius );
        padding-block: $kendo-window-buttongroup-padding-y;
        padding-inline: $kendo-window-buttongroup-padding-x;
        border-width: $kendo-window-buttongroup-border-width 0 0;
        border-style: solid;
        border-color: inherit;
        flex: 0 0 auto;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        overflow: hidden;
    }


    // Prompt
    .k-prompt-container {

        > .k-textarea {
            width: 100%;
        }

    }

    // Resize Handles
    .k-window { // stylelint-disable-line
        .k-resize-n { top: 0; }
        .k-resize-e { right: 0; }
        .k-resize-s { bottom: 0; }
        .k-resize-w { left: 0; }
    }

}


@mixin kendo-window--layout() {
    @include kendo-window--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/window/_theme.scss
@mixin kendo-window--theme-base() {

    // Window
    .k-window {
        @include fill(
            $kendo-window-text,
            $kendo-window-bg,
            $kendo-window-border
        );
        @include box-shadow( $kendo-window-shadow );
    }

    .k-window:focus,
    .k-window.k-focus {
        @include focus-indicator( $kendo-window-focus-shadow );
    }


    // Titlebar
    .k-window-titlebar {
        @include fill(
            $kendo-window-titlebar-text,
            $kendo-window-titlebar-bg,
            $kendo-window-titlebar-border,
            $kendo-window-titlebar-gradient
        );
    }

    // Window theme colors
    @each $name, $color in $kendo-window-theme-colors {
        .k-window-#{$name} .k-window-titlebar {
            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
            background-color: $color;
        }
    }

}


@mixin kendo-window--theme() {
    @include kendo-window--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-window--styles() {
    @include module-render( "window" ) {
        @include kendo-window--layout();
        @include kendo-window--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-window--styles();
}

// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/dialog/_variables.scss
// Dialog

/// The background color of the Dialog titlebar.
/// @group dialog
$kendo-dialog-titlebar-bg: $kendo-component-header-bg !default;
/// The text color of the Dialog titlebar.
/// @group dialog
$kendo-dialog-titlebar-text: $kendo-component-header-text !default;
/// The border color of the Dialog titlebar.
/// @group dialog
$kendo-dialog-titlebar-border: inherit !default;

/// The horizontal padding of the Dialog action buttons.
/// @group dialog
$kendo-dialog-buttongroup-padding-x: $kendo-actions-padding-x !default;
/// The vertical padding of the Dialog action buttons.
/// @group dialog
$kendo-dialog-buttongroup-padding-y: $kendo-actions-padding-y !default;
/// The width of the top border of the Dialog action buttons.
/// @group dialog
$kendo-dialog-buttongroup-border-width: 1px !default;
/// The spacing between the Dialog action buttons.
/// @group dialog
$kendo-dialog-button-spacing: $kendo-actions-button-spacing !default;

/// The theme colors map for the Dialog.
/// @group dialog
$kendo-dialog-theme-colors: (
    "primary": k-map-get($kendo-theme-colors, "primary"),
    "light": k-map-get($kendo-theme-colors, "light"),
    "dark": k-map-get($kendo-theme-colors, "dark")
) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/dialog/_layout.scss
@mixin kendo-dialog--layout-base() {

    .k-dialog-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        outline: 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10001;

        .k-dialog {
            position: relative;
        }
    }

    .k-dialog {
        padding: 0;
        position: fixed;
        box-sizing: border-box;

        // Centered
        &.k-dialog-centered {
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
        }

        .k-multiselect {
            width: 100%;
        }
    }


    // Titlebar
    .k-dialog-titlebar {}
    .k-dialog-title {}


    // Actions
    .k-dialog-titlebar-actions {}
    .k-dialog-action {}


    // Content
    .k-dialog-content {}


    // Buttons
    .k-dialog-actions {
        @include border-bottom-radius( $kendo-window-border-radius );
        padding-block: $kendo-dialog-buttongroup-padding-y;
        padding-inline: $kendo-dialog-buttongroup-padding-x;
        border-width: $kendo-dialog-buttongroup-border-width 0 0;
        border-style: solid;
        border-color: inherit;
        flex: 0 0 auto;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: $kendo-dialog-button-spacing;
        overflow: hidden;
    }

}


@mixin kendo-dialog--layout() {
    @include kendo-dialog--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/dialog/_theme.scss
@mixin kendo-dialog--theme-base() {

    // Dialog titlebar
    .k-dialog-titlebar {
        @include fill(
            $kendo-dialog-titlebar-text,
            $kendo-dialog-titlebar-bg,
            $kendo-dialog-titlebar-border
        );
    }

    // Dialog theme colors
    @each $name, $color in $kendo-dialog-theme-colors {
        .k-dialog-#{$name} .k-dialog-titlebar {
            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
            background-color: $color;
        }
    }

}


@mixin kendo-dialog--theme() {
    @include kendo-dialog--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-dialog--styles() {
    @include module-render( "dialog" ) {
        @include kendo-dialog--layout();
        @include kendo-dialog--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-dialog--styles();
}

// #endregion
// #region @import "./drawer/_index.scss"; -> scss/drawer/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "drawer",
    dependencies: (
        "icon",
        "list",
        "overlay",
    )
);


// Dependencies
// #region @import "../overlay/_index.scss"; -> scss/overlay/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../toolbar/_index.scss"; -> scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/drawer/_variables.scss
// Drawer

/// The background color of the Drawer.
/// @group drawer
$kendo-drawer-bg: $kendo-component-bg !default;
/// The text color of the Drawer.
/// @group drawer
$kendo-drawer-text: $kendo-component-text !default;
/// The border color of the Drawer.
/// @group drawer
$kendo-drawer-border: $kendo-component-border !default;
/// The border width of the Drawer.
/// @group drawer
$kendo-drawer-border-width: 1px !default;

/// The font family of the Drawer.
/// @group drawer
$kendo-drawer-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Drawer.
/// @group drawer
$kendo-drawer-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Drawer.
/// @group drawer
$kendo-drawer-line-height: var( --kendo-line-height, normal ) !default;

/// The horizontal padding of the Drawer content.
/// @group drawer
$kendo-drawer-content-padding-x: null !default;

/// The vertical padding of the Drawer content.
/// @group drawer
$kendo-drawer-content-padding-y: null !default;

/// The width of the Drawer scrollbar.
/// @group drawer
$kendo-drawer-scrollbar-width: 7px !default;
/// The color of the Drawer scrollbar track.
/// @group drawer
$kendo-drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
/// The background color of the Drawer scrollbar thumb.
/// @group drawer
$kendo-drawer-scrollbar-bg: #dedede !default;
/// The border radius of the Drawer scrollbar.
/// @group drawer
$kendo-drawer-scrollbar-radius: 20px !default;
/// The hover color of the Drawer scrollbar track.
/// @group drawer
$kendo-drawer-scrollbar-hover-color: rgba(156, 156, 156, 1) !default;

/// The horizontal padding of the Drawer item.
/// @group drawer
$kendo-drawer-item-padding-x: k-spacing(4) !default;
/// The vertical padding of the Drawer item.
/// @group drawer
$kendo-drawer-item-padding-y: $kendo-padding-md-x !default;
/// The font size of the Drawer item.
/// @group drawer
$kendo-drawer-item-font-size: var( --kendo-font-size-lg, inherit ) !default;
/// The line height of the Drawer item.
/// @group drawer
$kendo-drawer-item-line-height: var( --kendo-line-height-lg, normal ) !default;

/// The horizontal padding of the Drawer item in each level.
/// @group drawer
$kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
/// The count of the Drawer item levels.
/// @group drawer
$kendo-drawer-item-level-count: 5 !default;

/// The horizontal padding of the Drawer icon.
/// @group drawer
$kendo-drawer-icon-padding-x: k-spacing(0) !default;

/// The vertical padding of the Drawer icon.
/// @group drawer
$kendo-drawer-icon-padding-y: k-spacing(1) !default;

/// The initial width of the mini Drawer.
/// @group drawer
$kendo-drawer-mini-initial-width: calc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-icon-size}) !default;

/// The background color of the hovered Drawer item.
/// @group drawer
$kendo-drawer-hover-bg: $kendo-hover-bg !default;
/// The text color of the hovered Drawer item.
/// @group drawer
$kendo-drawer-hover-text: $kendo-hover-text !default;

/// The background color of the focused Drawer item.
/// @group drawer
$kendo-drawer-focus-bg: $kendo-drawer-bg !default;
/// The box shadow of the focused Drawer item.
/// @group drawer
$kendo-drawer-focus-shadow: $kendo-list-item-focus-shadow !default;

/// The background color of the selected Drawer item.
/// @group drawer
$kendo-drawer-selected-bg: $kendo-selected-bg !default;
/// The text color of the selected Drawer item.
/// @group drawer
$kendo-drawer-selected-text: $kendo-selected-text !default;

/// The background color of the selected and hovered Drawer item.
/// @group drawer
$kendo-drawer-selected-hover-bg: $kendo-selected-hover-bg !default;
/// The text color of the selected and hovered Drawer item.
/// @group drawer
$kendo-drawer-selected-hover-text: $kendo-selected-hover-text !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/drawer/_layout.scss
@mixin kendo-drawer--layout-base() {

    // Container
    .k-drawer-container {
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
    }

    kendo-drawer.k-drawer,
    kendo-drawer .k-drawer-wrapper {
        transition: none;
    }


    // Drawer
    .k-drawer {
        height: 100%;
        max-width: 100%;
        border-width: 0;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-drawer-font-family;
        font-size: $kendo-drawer-font-size;
        line-height: $kendo-drawer-line-height;
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        transition: all 300ms ease-in-out;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

        .k-drawer-mini &.k-drawer-start,
        .k-drawer-expanded &.k-drawer-start {
            border-inline-end-width: $kendo-drawer-border-width;
        }

        .k-drawer-mini &.k-drawer-end,
        .k-drawer-expanded &.k-drawer-end {
            border-inline-start-width: $kendo-drawer-border-width;
        }


        // Position
        &.k-drawer-start {
            top: 0;
            inset-inline-start: 0;
        }
        &.k-drawer-end {
            top: 0;
            inset-inline-end: 0;
        }
    }


    // Content
    .k-drawer-content {
        flex: 1 1 auto;
        overflow: auto;
        padding-block: $kendo-drawer-content-padding-y;
        padding-inline: $kendo-drawer-content-padding-x;
    }


    // Overlay
    .k-drawer-overlay {
        .k-drawer {
            max-width: 80vw; // limit width
            position: fixed;
            z-index: 10002;
            border: 0;
        }

        > .k-overlay {
            display: none;
        }
        &.k-drawer-expanded > .k-overlay {
            display: block;
        }
    }


    // Push drawer
    .k-drawer-push {
        display: flex;
        flex-direction: row;

        .k-drawer {
            height: auto;
            position: relative;
            align-self: stretch;
        }

        &:has(.k-drawer.k-drawer-end) {
            flex-direction: row-reverse;
        }
    }


    // Drawer items
    .k-drawer-wrapper {
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin; // Scrollbar styles for Mozilla
        transition: all 300ms ease-in-out;

        // Scrollbar styles for Chrome, Safari and Opera
        &::-webkit-scrollbar {
            width: $kendo-drawer-scrollbar-width;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: $kendo-drawer-scrollbar-radius;
        }
    }
    .k-drawer-items {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .k-drawer-item {
        padding-block: $kendo-drawer-item-padding-y;
        padding-inline: $kendo-drawer-item-padding-x;
        outline: 0;
        color: inherit;
        font-size: $kendo-drawer-item-font-size;
        line-height: $kendo-drawer-item-line-height;
        display: flex;
        flex-flow: row nowrap;
        gap: $kendo-drawer-item-padding-x;
        cursor: pointer;

        > .k-drawer-link {
            margin-block: calc( #{$kendo-drawer-item-padding-y} * -1 );
            margin-inline: calc( #{$kendo-drawer-item-padding-x} * -1 );
            padding-block: $kendo-drawer-item-padding-y;
            padding-inline: $kendo-drawer-item-padding-x;
            color: inherit;
            display: flex;
            flex-flow: row nowrap;
            flex: 1 0 auto;
            gap: $kendo-drawer-item-padding-x;
        }

        .k-icon {
            flex-shrink: 0;
            padding-inline: $kendo-drawer-icon-padding-x;
            padding-block: $kendo-drawer-icon-padding-y;
            box-sizing: content-box;

            &.k-i-none {
                margin: 0;
            }
        }

        .k-item-text {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .k-drawer-toggle {
            margin-inline-start: auto;
            cursor: pointer;
            display: flex;
        }

        // Hierarchy items
        @for $i from 1 through $kendo-drawer-item-level-count {
            &.k-level-#{$i} {
                padding-inline-start: calc(( #{$i} + 1) * #{$kendo-drawer-item-level-padding-x}) ;
            }
        }
    }


    // Separator
    .k-drawer-separator {
        padding: 0;
        height: 1px;
    }


    // Mini mode
    .k-drawer-mini .k-drawer-wrapper {
        width: $kendo-drawer-mini-initial-width;
    }
}


@mixin kendo-drawer--layout() {
    @include kendo-drawer--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/drawer/_theme.scss
@mixin kendo-drawer--theme-base() {

    .k-drawer {
        @include fill(
            $kendo-drawer-text,
            $kendo-drawer-bg,
            $kendo-drawer-border
        );
    }

    // Drawer items
    .k-drawer-wrapper {
        scrollbar-color: $kendo-drawer-scrollbar-color $kendo-drawer-scrollbar-bg;

        &::-webkit-scrollbar-track {
            background: $kendo-drawer-scrollbar-bg;
        }
        &::-webkit-scrollbar-thumb {
            background: $kendo-drawer-scrollbar-color;
        }
        &::-webkit-scrollbar-thumb:hover {
            background: $kendo-drawer-scrollbar-hover-color;
        }
    }
    .k-drawer-item {

        &:hover,
        &.k-hover {
            color: $kendo-drawer-hover-text;
            background-color: $kendo-drawer-hover-bg;
        }

        &:focus,
        &.k-focus {
            background-color: $kendo-drawer-focus-bg;
            @include focus-indicator( $kendo-drawer-focus-shadow, true );

            &:hover,
            &.k-hover {
                color: $kendo-drawer-hover-text;
                background-color: $kendo-drawer-hover-bg;
            }
        }

        &.k-selected {
            color: $kendo-drawer-selected-text;
            background-color: $kendo-drawer-selected-bg;

            &:hover,
            &.k-hover {
                color: $kendo-drawer-selected-hover-text;
                background-color: $kendo-drawer-selected-hover-bg;
            }
        }
    }
    .k-drawer-separator {
        background-color: $kendo-drawer-border;
    }

}


@mixin kendo-drawer--theme() {
    @include kendo-drawer--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-drawer--styles() {
    @include module-render( "drawer" ) {
        @include kendo-drawer--layout();
        @include kendo-drawer--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-drawer--styles();
}

// #endregion
// #region @import "./notification/_index.scss"; -> scss/notification/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "notification",
    dependencies: (
        "icon",
        "popup",
    )
);


// Dependencies
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/notification/_variables.scss
// Notification

/// The row-gap between the elements in the Notification group.
/// @group notification
$kendo-notification-group-gap: k-spacing(2) !default;

/// The horizontal padding of the Notification.
/// @group notification
$kendo-notification-padding-x: k-spacing(2) !default;
/// The vertical padding of the Notification.
/// @group notification
$kendo-notification-padding-y: k-spacing(1) !default;
/// The width of the border around the Notification.
/// @group notification
$kendo-notification-border-width: 1px !default;
/// The border radius of the Notification.
/// @group notification
$kendo-notification-border-radius: k-border-radius(md)!default;
/// The font family of the Notification.
/// @group notification
$kendo-notification-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Notification.
/// @group notification
$kendo-notification-font-size: var( --kendo-font-size-sm, inherit ) !default;
/// The line height of the Notification.
/// @group notification
$kendo-notification-line-height: va( --kendo-line-height, normal ) !default;
/// The background color of the Notification.
/// @group notification
$kendo-notification-bg: $kendo-component-bg !default;
/// The text color of the Notification.
/// @group notification
$kendo-notification-text: $kendo-component-text !default;
/// The border color of the Notification.
/// @group notification
$kendo-notification-border: $kendo-component-border !default;
/// The box shadow of the Notification.
/// @group notification
$kendo-notification-shadow: $kendo-popup-shadow !default;

/// The horizontal spacing of the Notification icon.
/// @group notification
$kendo-notification-icon-spacing: $kendo-icon-spacing !default;

@function notification-theme( $colors ) {
    $_theme: ();

    @each $name, $color in $colors {
        $_theme: k-map-merge(( $name: (
            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
            background-color: $color,
            border: $color,
        )), $_theme );
    }

    @return $_theme;
}

/// The theme colors map for the Notification.
/// @group notification
$kendo-notification-theme-colors: $kendo-theme-colors !default;
/// The generated theme colors map for the Notification.
/// @group notification
$kendo-notification-theme: notification-theme( $kendo-notification-theme-colors ) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/notification/_layout.scss
@mixin kendo-notification--layout-base() {

    // Base
    .k-notification-group {
        max-height: 100%;
        display: inline-flex;
        flex-flow: column-reverse wrap;
        position: fixed;
        z-index: 1000;
        gap: $kendo-notification-group-gap 0;
    }

    // Needed due to the specifics in the implementation of animations in Angular
    .k-notification-container-animating {
        overflow: hidden;
    }

    .k-notification {
        @include border-radius( $kendo-notification-border-radius );
        padding-block: $kendo-notification-padding-y;
        padding-inline: $kendo-notification-padding-x;
        border-width: $kendo-notification-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-notification-font-family;
        font-size: $kendo-notification-font-size;
        line-height: $kendo-notification-line-height;
        cursor: default;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: $kendo-notification-icon-spacing;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

        > .k-notification-content {
            flex: 1 1 auto;
        }
    }

    .k-notification-actions {
        flex: none;
        display: flex;
        gap: $kendo-notification-icon-spacing;
        flex-flow: row nowrap;
        align-items: center;
        align-self: center;
        cursor: pointer;
    }
    .k-notification-action {
        flex: none;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-self: center;
    }

}


@mixin kendo-notification--layout() {
    @include kendo-notification--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/notification/_theme.scss
@mixin kendo-notification--theme-base() {

    // Theme
    .k-notification {
        @include fill(
            $kendo-notification-text,
            $kendo-notification-bg,
            $kendo-notification-border
        );
        @include box-shadow( $kendo-notification-shadow );
    }

    @each $name, $props in $kendo-notification-theme {
        .k-notification-#{$name} {
            @include fill(
                k-map-get( $props, color ),
                k-map-get( $props, background-color ),
                k-map-get( $props, border )
            );
        }
    }

}


@mixin kendo-notification--theme() {
    @include kendo-notification--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-notification--styles() {
    @include module-render( "notification" ) {
        @include kendo-notification--layout();
        @include kendo-notification--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-notification--styles();
}

// #endregion
// #region @import "./popover/_index.scss"; -> scss/popover/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "popover",
    dependencies: (
        "card",
        "popup",
    )
);


// Dependencies
// #region @import "../card/_index.scss"; -> scss/card/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "card",
    dependencies: (
        "icon",
        "actions",
        "typography",
        // "utils/flex-grid"
    )
);


// Dependencies
// @import "../utils/_flex.scss";
// @import "../utils/_grid.scss";
// #region @import "../action-buttons/_index.scss"; -> scss/action-buttons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../typography/_index.scss"; -> scss/typography/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/card/_variables.scss
// #region @import "../button/_variables.scss"; -> scss/button/_variables.scss
// File already imported_once. Skipping output.
// #endregion

// Card

/// The horizontal padding of the Card.
/// @group card
$kendo-card-padding-x: k-spacing(4) !default;
/// The vertical padding of the Card.
/// @group card
$kendo-card-padding-y: k-spacing(3) !default;
/// The width of the border around the Card.
/// @group card
$kendo-card-border-width: 1px !default;
/// The border radius of the Card.
/// @group card
$kendo-card-border-radius: k-border-radius(lg) !default;
/// The inner border radius of the Card.
/// @group card
$kendo-card-inner-border-radius: calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} ) !default;
/// The font family of the Card.
/// @group card
$kendo-card-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Card.
/// @group card
$kendo-card-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Card.
/// @group card
$kendo-card-line-height: var( --kendo-line-height, normal ) !default;

/// The spacing between the Cards in the Card deck.
/// @group card
$kendo-card-deck-gap: k-spacing(4) !default;

/// The background color of the Card.
/// @group card
$kendo-card-bg: $kendo-component-bg !default;
/// The text color of the Card.
/// @group card
$kendo-card-text: $kendo-component-text !default;
/// The border color of the Card.
/// @group card
$kendo-card-border: $kendo-component-border !default;
/// The shadow of the Card.
/// @group card
$kendo-card-shadow: null !default;

/// The background color of the focused Card.
/// @group card
$kendo-card-focus-bg: null !default;
/// The text color of the focused Card.
/// @group card
$kendo-card-focus-text: null !default;
/// The border color of the focused Card.
/// @group card
$kendo-card-focus-border: rgba( black, .15 ) !default;

// TODO: double-check: the default theme is not supposed to elevate the Card on focus

/// The shadow of the focused Card.
/// @group card
$kendo-card-focus-shadow: null !default;

/// The horizontal padding of the Card header.
/// @group card
$kendo-card-header-padding-x: $kendo-card-padding-x !default;
/// The vertical padding of the Card header.
/// @group card
$kendo-card-header-padding-y: $kendo-card-padding-y !default;
/// The bottom border width of the Card header.
/// @group card
$kendo-card-header-border-width: 1px !default;
/// The background color of the Card header.
/// @group card
$kendo-card-header-bg: null !default;
/// The text color of the Card header.
/// @group card
$kendo-card-header-text: $kendo-component-header-text !default;
/// The border color of the Card header.
/// @group card
$kendo-card-header-border: $kendo-component-header-border !default;

/// The horizontal padding of the Card body.
/// @group card
$kendo-card-body-padding-x: k-spacing(4) !default;
/// The vertical padding of the Card body.
/// @group card
$kendo-card-body-padding-y: k-spacing(4) !default;

/// The horizontal padding of the Card footer.
/// @group card
$kendo-card-footer-padding-x: $kendo-card-padding-x !default;
/// The vertical padding of the Card footer.
/// @group card
$kendo-card-footer-padding-y: $kendo-card-padding-y !default;
/// The top border width of the Card footer.
/// @group card
$kendo-card-footer-border-width: 1px !default;
/// The background color of the Card footer.
/// @group card
$kendo-card-footer-bg: null !default;
/// The text color of the Card footer.
/// @group card
$kendo-card-footer-text: $kendo-component-header-text !default;
/// The border color of the Card footer.
/// @group card
$kendo-card-footer-border: $kendo-component-header-border !default;

/// The bottom margin of the Card title.
/// @group card
$kendo-card-title-margin-bottom: k-spacing(2) !default;
/// The font size of the Card title.
/// @group card
$kendo-card-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
/// The font family of the Card title.
/// @group card
$kendo-card-title-font-family: null !default;
/// The line height of the Card title.
/// @group card
$kendo-card-title-line-height: var( --kendo-line-height-sm, normal ) !default;
/// The font weight of the Card title.
/// @group card
$kendo-card-title-font-weight: var( --kendo-font-weight-normal, normal ) !default;
/// The letter spacing of the Card title.
/// @group card
$kendo-card-title-letter-spacing: null !default;

/// The bottom margin of the Card subtitle.
/// @group card
$kendo-card-subtitle-margin-bottom: k-spacing(2) !default;
/// The font size of the Card subtitle.
/// @group card
$kendo-card-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
/// The font family of the Card subtitle.
/// @group card
$kendo-card-subtitle-font-family: null !default;
/// The line height of the Card subtitle.
/// @group card
$kendo-card-subtitle-line-height: var( --kendo-line-height-lg, normal ) !default;
/// The font weight of the Card subtitle.
/// @group card
$kendo-card-subtitle-font-weight: var( --kendo-font-weight-normal, normal ) !default;
/// The letter spacing of the Card subtitle.
/// @group card
$kendo-card-subtitle-letter-spacing: null !default;
/// The text color of the Card subtitle.
/// @group card
$kendo-card-subtitle-text: $kendo-subtle-text !default;

/// The maximum width of the Card image.
/// @group card
$kendo-card-img-max-width: 100px !default;
/// The size of the Avatar in the Card.
/// @group card
$kendo-card-avatar-size: 45px !default;
/// The spacing between the Avatar and the text in the Card.
/// @group card
$kendo-card-avatar-spacing: $kendo-card-header-padding-x !default;

/// The horizontal padding of the Card actions.
/// @group card
$kendo-card-actions-padding-x: k-spacing(2) !default;
/// The vertical padding of the Card actions.
/// @group card
$kendo-card-actions-padding-y: k-spacing(2) !default;
/// The top border width of the Card actions.
/// @group card
$kendo-card-actions-border-width: 1px !default;
/// The spacing between the Card actions.
/// @group card
$kendo-card-actions-gap: k-spacing(2) !default;

/// The border radius of the scroll button in the Card deck.
/// @group card
$kendo-card-deck-scroll-button-radius: 0px !default;
/// The border radius of the scroll button in the Card deck.
/// @group card
$kendo-card-deck-scroll-button-offset: -$kendo-button-border-width !default;

/// The width of the Card callout.
/// @group card
$kendo-card-callout-width: 20px !default;
/// The height of the Card callout.
/// @group card
$kendo-card-callout-height: 20px !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/card/_layout.scss
@mixin kendo-card--layout-base() {


    // Angular elements
    kendo-card,
    kendo-card-header,
    kendo-card-body,
    kendo-card-actions,
    kendo-card-footer {
        display: block;
    }


    // Card
    .k-card {
        @include border-radius( $kendo-card-border-radius );
        border-width: $kendo-card-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-card-font-family;
        font-size: $kendo-card-font-size;
        line-height: $kendo-card-line-height;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

        // Card avatar
        .k-card-avatar,
        .k-avatar {
            margin-right: $kendo-card-avatar-spacing;
            width: $kendo-card-avatar-size;
            height: $kendo-card-avatar-size;
            flex-basis: $kendo-card-avatar-size;
        }
    }
    .k-card > .k-card-inner {
        @include border-radius( $kendo-card-inner-border-radius );
        display: flex;
        flex-direction: inherit;
        overflow: hidden;
        position: relative;
    }

    // Card orientation
    .k-card-horizontal { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
    .k-card-vertical { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before

    // Header
    .k-card-header {
        padding-block: $kendo-card-header-padding-y;
        padding-inline: $kendo-card-header-padding-x;
        border-width: 0 0 $kendo-card-header-border-width;
        border-style: solid;
        outline: 0;
        flex-shrink: 0;
        overflow: hidden;
        position: relative;
        z-index: 1;

        .k-card-title,
        .k-card-subtitle {
            margin-bottom: 0;
        }
        .k-card-title + .k-card-subtitle,
        .k-card-subtitle + .k-card-subtitle {
            margin-top: $kendo-card-title-margin-bottom;
        }
    }


    // Footer
    .k-card-footer {
        padding-block: $kendo-card-footer-padding-y;
        padding-inline: $kendo-card-footer-padding-x;
        border-width: $kendo-card-footer-border-width 0 0;
        border-style: solid;
        outline: 0;
        flex-shrink: 0;
    }


    // Body
    .k-card-body {
        padding-block: $kendo-card-body-padding-y;
        padding-inline: $kendo-card-body-padding-x;
        outline: 0;
        flex: 1 1 auto;

        p {
            margin: $kendo-paragraph-margin;
        }

        > .k-last,
        > :last-child {
            margin-bottom: 0;
        }

        > .k-card-actions {
            padding: 0;
        }
    }

    // Card media
    .k-card-media {
        border: 0;
        max-width: 100%;
        flex-shrink: 0;
        overflow: hidden;

        .k-card-horizontal & {
            max-width: $kendo-card-img-max-width;
            object-fit: cover;
        }
    }


    // Card title
    .k-card-title {
        margin: 0 0 $kendo-card-title-margin-bottom;
        @include typography(
            $kendo-card-title-font-size,
            $kendo-card-title-font-family,
            $kendo-card-title-line-height,
            $kendo-card-title-font-weight,
            $kendo-card-title-letter-spacing
        );
    }


    // Card subtitle
    .k-card-subtitle {
        margin: 0 0 $kendo-card-subtitle-margin-bottom;
        @include typography(
            $kendo-card-subtitle-font-size,
            $kendo-card-subtitle-font-family,
            $kendo-card-subtitle-line-height,
            $kendo-card-subtitle-font-weight,
            $kendo-card-subtitle-letter-spacing
        );
    }


    // Separator
    .k-card-separator {
        margin: 0;
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        display: block;
        flex: 0 0 auto;
        align-self: stretch;
    }

    .k-card-separator.k-separator-horizontal,
    .k-card-vertical > .k-card-separator {
        border-top-width: 1px;
    }

    .k-card-separator.k-separator-vertical,
    .k-card-horizontal > .k-card-separator {
        border-left-width: 1px;
    }

    .k-card > .k-hr {
        margin: 0;
        flex: 0 0 auto;
        border-color: inherit;
    }

    // Card actions
    .k-card-actions {
        padding-block: $kendo-card-actions-padding-y;
        padding-inline: $kendo-card-actions-padding-x;
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        overflow: hidden;
        display: flex;
        flex-shrink: 0;
        flex-basis: auto;
        gap: $kendo-card-actions-gap;
    }

    .k-card-horizontal .k-actions-horizontal {
        width: auto;
    }

    // List
    .k-card-list {
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;
        gap: $kendo-card-deck-gap;
        flex: 0 0 auto;

        .k-card {
            flex: 0 0 auto;
        }
    }


    // Deck
    .k-card-deck {
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        gap: $kendo-card-deck-gap;
        flex: 0 0 auto;

        .k-card {
            flex: 0 0 auto;
        }
    }

    .k-card-deck-scrollwrap {
        padding-bottom: 3px; // prevents trimming of card shadows on OSX (0-width scrollbar)
        width: 100%;
        box-sizing: content-box;
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        position: relative;
        overflow: hidden;

        > .k-button {
            @include border-radius( $kendo-card-deck-scroll-button-radius );
            flex: 0 0 auto;
            position: absolute;
            z-index: 1;

            &:first-child {
                left: $kendo-card-deck-scroll-button-offset;
            }

            &:last-child {
                right: $kendo-card-deck-scroll-button-offset;
            }
        }

        > .k-card-deck {
            // hide scrollbar
            $scrollbar-size: 20px;

            margin-bottom: -$scrollbar-size;
            padding-bottom: $scrollbar-size;
            flex: 1 1 auto;
        }
    }


    // Group
    .k-card-group {
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        flex: 0 0 auto;

        .k-card {
            @include border-radius( 0 );
            flex: 0 0 auto;
        }
        .k-card + .k-card {
            margin-inline-start: $kendo-card-border-width;
        }


        // Border-radius
        .k-card.k-first {
            @include border-left-radius( $kendo-card-border-radius );
        }
        .k-card.k-last {
            @include border-right-radius( $kendo-card-border-radius );
        }
        .k-card.k-only {
            @include border-radius( $kendo-card-border-radius );
        }
    }

    // Card with callout
    .k-card-with-callout {
        overflow: visible;
    }


    // Card callout
    .k-card-callout {
        margin: 0;
        width: $kendo-card-callout-width;
        height: $kendo-card-callout-height;
        border-width: $kendo-card-border-width;
        border-style: solid;
        box-sizing: border-box;
        position: absolute;
    }

    .k-card-callout.k-callout-n {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .k-card-callout.k-callout-e {
        top: 50%;
        right: 0;
        transform: translate(50%, -50%) rotate(-45deg);
    }
    .k-card-callout.k-callout-s {
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%) rotate(45deg);
    }
    .k-card-callout.k-callout-w {
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%) rotate(45deg);
    }


    // Solid card
    .k-card-solid {
        @include box-shadow( $kendo-card-shadow );
    }


    // Flat card
    .k-card-flat {
        @include box-shadow( none );
    }

}


@mixin kendo-card--layout() {
    @include kendo-card--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/card/_theme.scss
@mixin kendo-card--theme-base() {

    // Card
    .k-card {
        @include fill(
            $kendo-card-text,
            $kendo-card-bg,
            $kendo-card-border
        );
        @include box-shadow( $kendo-card-shadow );

        .k-card-inner {
            background-color: inherit;
            border-color: inherit;
        }

        &:focus,
        &.k-focus {
            @include fill(
                $kendo-card-focus-text,
                $kendo-card-focus-bg,
                $kendo-card-focus-border
            );
            @include focus-indicator( $kendo-card-focus-shadow );
        }

        &.k-selected {
            @include box-shadow( $kendo-card-focus-shadow );
        }
    }


    // Card actions
    .k-card-actions {
        border-color: $kendo-card-border;
    }


    // Header
    .k-card-header {
        @include fill( $kendo-card-header-text, $kendo-card-header-bg, $kendo-card-header-border );
    }


    // Footer
    .k-card-footer {
        @include fill( $kendo-card-footer-text, $kendo-card-footer-bg, $kendo-card-footer-border );
    }


    // Separator
    .k-card-separator,
    .k-card .k-separator {
        border-color: $kendo-card-border;
    }


    // TODO: refactor
    .k-card-subtitle {
        color: $kendo-card-subtitle-text;
    }


    // Card theme colors
    @each $name, $color in $kendo-theme-colors {
        .k-card-#{$name} {
            background-color: if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-color-tint($color, 10));
            color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-color-shade($color, 6));
            border-color: if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-color-tint($color, 9));

            .k-card-subtitle {
                color: inherit;
            }
        }
    }


    .k-card-wrap {
        &:focus,
        &.k-focus,
        &.k-selected {
            > .k-card {
                @include focus-indicator( $kendo-card-focus-shadow );
            }
        }
    }


    // Card callout
    .k-card-callout {
        @include fill(
            $bg: inherit,
            $border: inherit
        );

        @include box-shadow( inherit );
    }

}


@mixin kendo-card--theme() {
    @include kendo-card--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-card--styles() {
    @include module-render( "card" ) {
        @include kendo-card--layout();
        @include kendo-card--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-card--styles();
}

// #endregion
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/popover/_variables.scss
// Popover

/// The width of the border around the Popover.
/// @group popover
$kendo-popover-border-width: $kendo-card-border-width !default;
/// The style of the border around the Popover.
/// @group popover
$kendo-popover-border-style: solid !default;
/// The radius of the border around the Popover.
/// @group popover
$kendo-popover-border-radius: $kendo-card-border-radius !default;
/// The font family of the Popover.
/// @group popover
$kendo-popover-font-family: $kendo-card-font-family !default;
/// The font size of the Popover.
/// @group popover
$kendo-popover-font-size: $kendo-card-font-size !default;
/// The line height of the Popover.
/// @group popover
$kendo-popover-line-height: $kendo-card-line-height !default;

/// The text color of the Popover.
/// @group popover
$kendo-popover-text: $kendo-component-text !default;
/// The background color of the Popover.
/// @group popover
$kendo-popover-bg: $kendo-component-bg !default;
/// The border color of the Popover.
/// @group popover
$kendo-popover-border: $kendo-component-border !default;
/// The box shadow of the Popover.
/// @group popover
$kendo-popover-shadow: $kendo-popup-shadow !default;

/// The horizontal padding of the Popover header.
/// @group popover
$kendo-popover-header-padding-x: $kendo-card-header-padding-x !default;
/// The vertical padding of the Popover header.
/// @group popover
$kendo-popover-header-padding-y: $kendo-card-header-padding-y !default;
/// The border width of the Popover header.
/// @group popover
$kendo-popover-header-border-width: $kendo-card-header-border-width !default;
/// The border style of the Popover header.
/// @group popover
$kendo-popover-header-border-style: $kendo-popover-border-style !default;
/// The text color of the Popover header.
/// @group popover
$kendo-popover-header-text: $kendo-card-header-text !default;
/// The background color of the Popover header.
/// @group popover
$kendo-popover-header-bg: $kendo-card-header-bg !default;
/// The border color of the Popover header.
/// @group popover
$kendo-popover-header-border: $kendo-card-header-border !default;

/// The horizontal padding of the Popover body.
/// @group popover
$kendo-popover-body-padding-x: $kendo-card-body-padding-x !default;
/// The vertical padding of the Popover body.
/// @group popover
$kendo-popover-body-padding-y: $kendo-card-body-padding-y !default;

/// The border width of the Popover actions.
/// @group popover
$kendo-popover-actions-border-width: $kendo-popover-border-width !default;

/// The width of the Popover callout.
/// @group popover
$kendo-popover-callout-width: $kendo-card-callout-width !default;
/// The height of the Popover callout.
/// @group popover
$kendo-popover-callout-height: $kendo-card-callout-height !default;
/// The border width of the Popover callout.
/// @group popover
$kendo-popover-callout-border-width: $kendo-popover-border-width !default;
/// The border style of the Popover callout.
/// @group popover
$kendo-popover-callout-border-style: $kendo-popover-border-style !default;
/// The background color of the Popover callout.
/// @group popover
$kendo-popover-callout-bg: $kendo-popover-bg !default;
/// The border color of the Popover callout.
/// @group popover
$kendo-popover-callout-border: $kendo-popover-border !default;
// #endregion
// #region @import "./_layout.scss"; -> scss/popover/_layout.scss
@mixin kendo-popover--layout-base() {

    // Popover
    .k-popover {
        @include border-radius( $kendo-popover-border-radius );
        padding: 0;
        border-width: $kendo-popover-border-width;
        border-style: $kendo-popover-border-style;
        box-sizing: border-box;
        outline: 0;
        font-size: $kendo-popover-font-size;
        font-family: $kendo-popover-font-family;
        line-height: $kendo-popover-line-height;
        display: flex;
        flex-flow: column nowrap;
        z-index: 12000;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

    .k-popover-inner {
        height: inherit;
        position: relative;
        border-radius: inherit;
        border-color: inherit;
    }

    // Header
    .k-popover-header {
        @include border-top-radius( $kendo-popover-border-radius );
        padding-block: $kendo-popover-header-padding-y;
        padding-inline: $kendo-popover-header-padding-x;
        border-width: 0 0 $kendo-popover-header-border-width;
        border-style: $kendo-popover-header-border-style;
        border-color: inherit;
    }

    // Body
    .k-popover-body {
        padding-block: $kendo-popover-body-padding-y;
        padding-inline: $kendo-popover-body-padding-x;
    }

    // Actions
    .k-popover-actions {
        border-width: $kendo-popover-actions-border-width 0 0;
    }


    // Popover callout
    .k-popover-callout {
        margin: 0;
        width: $kendo-popover-callout-width;
        height: $kendo-popover-callout-height;
        border-width: $kendo-popover-callout-border-width;
        border-style: $kendo-popover-callout-border-style;
        position: absolute;

        &.k-callout-n {
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
        }

        &.k-callout-e {
            top: 50%;
            right: 0;
            transform: translate(50%, -50%) rotate(-45deg);
        }

        &.k-callout-s {
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 50%) rotate(45deg);
        }

        &.k-callout-w {
            top: 50%;
            left: 0;
            transform: translate(-50%, -50%) rotate(45deg);
        }
    }

}


@mixin kendo-popover--layout() {
    @include kendo-popover--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/popover/_theme.scss
@mixin kendo-popover--theme-base() {

    // Popover
    .k-popover {
        @include box-shadow( $kendo-popover-shadow );

        @include fill(
            $kendo-popover-text,
            $kendo-popover-bg,
            $kendo-popover-border
        );
    }

    .k-popover-inner {
        background-color: inherit;
        border-color: inherit;
    }

    // Header
    .k-popover-header {
        @include fill(
            $kendo-popover-header-text,
            $kendo-popover-header-bg,
            $kendo-popover-header-border
        );
    }

    // Callout
    .k-popover-callout {
        @include fill(
            $bg: inherit,
            $border: inherit
        );

        @include box-shadow( inherit )
    }

}


@mixin kendo-popover--theme() {
    @include kendo-popover--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-popover--styles() {
    @include module-render( "popover" ) {
        @include kendo-popover--layout();
        @include kendo-popover--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-popover--styles();
}

// #endregion
// #region @import "./responsivepanel/_index.scss"; -> scss/responsivepanel/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "responsive-panel",
    dependencies: (
        "icon",
    )
);


// Dependencies
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/responsivepanel/_variables.scss
// Responsive panel

// #endregion
// #region @import "./_layout.scss"; -> scss/responsivepanel/_layout.scss
@mixin kendo-responsive-panel--layout-base() {

    .k-rpanel {}

    // Variants
    .k-rpanel-left,
    .k-rpanel-right {
        position: fixed;
        display: block;
        overflow: auto;
        min-width: 320px;
        height: 100%;
        top: 0;

        & + * {
            overflow: auto;
        }

        &.k-rpanel-expanded {
            transform: translateX(0) translateZ(0);
        }
    }
    .k-rpanel-left {
        transform: translateX(-100%) translateZ(0);
        left: 0;
    }
    .k-rpanel-right {
        transform: translateX(100%) translateZ(0);
        right: 0;
    }

    // Top
    .k-rpanel-top {
        position: static;
        max-height: 0;
    }
    .k-rpanel-top.k-rpanel-expanded {
        max-height: 568px;
        overflow: visible !important; // stylelint-disable-line declaration-no-important
    }

    // Toggle button
    .k-rpanel-toggle {
        touch-action: manipulation;
    }

}


@mixin kendo-responsive-panel--layout() {
    @include kendo-responsive-panel--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/responsivepanel/_theme.scss
@mixin kendo-responsive-panel--theme-base() {

    .k-rpanel {}

}


@mixin kendo-responsive-panel--theme() {
    @include kendo-responsive-panel--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-responsive-panel--styles() {
    @include module-render( "responsive-panel" ) {
        @include kendo-responsive-panel--layout();
        @include kendo-responsive-panel--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-responsive-panel--styles();
}

// #endregion
// #region @import "./tooltip/_index.scss"; -> scss/tooltip/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./window/_index.scss"; -> scss/window/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Navigation
// #region @import "./bottom-navigation/_index.scss"; -> scss/bottom-navigation/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "bottom-navigation",
    dependencies: (
        "icon",
        // "utils/layout/position"
    )
);


// Dependencies
// @import "../utils/_position.scss";
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/bottom-navigation/_variables.scss
// BottomNavigation

/// The horizontal padding of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-padding-x: k-spacing(1) !default;
/// The vertical padding of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-x !default;
/// The spacing between the BottomNavigation items.
/// @group bottom-navigation
$kendo-bottom-nav-gap: $kendo-bottom-nav-padding-x !default;
/// The width of the border around the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-border-width: 1px 0px 0px 0px !default;
/// The font family of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-line-height: var( --kendo-line-height-xs, normal ) !default;
/// The letter spacing of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-letter-spacing: .2px !default;

/// The horizontal padding of the BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-padding-x: k-spacing(2) !default;
/// The vertical padding of the BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-padding-y: k-spacing(0) !default;
/// The minimum width of the BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-min-width: 72px !default;
/// The maximum width of the BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-max-width: null !default;
/// The minimum height of the BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + calc( #{$kendo-padding-md-x} * 2 ) - calc( #{$kendo-bottom-nav-padding-x} * 2 ) ) !default;
/// The border radius of the BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-border-radius: k-border-radius(md) !default;
/// The spacing of the BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-gap: 0 k-spacing(1) !default;

/// The box shadow of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-shadow: k-elevation(4) !default;

/// The text color of the flat BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-flat-text: $kendo-component-text !default;
/// The background color of the flat BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-flat-bg: $kendo-component-bg !default;
/// The border color of the flat BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-flat-border: $kendo-component-border !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/bottom-navigation/_layout.scss
@mixin kendo-bottom-navigation--layout-base() {

    // Bottom Navigation
    .k-bottom-nav {
        padding-block: $kendo-bottom-nav-padding-y;
        padding-inline: $kendo-bottom-nav-padding-x;
        width: 100%;
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        box-sizing: border-box;
        font-size: $kendo-bottom-nav-font-size;
        line-height: $kendo-bottom-nav-line-height;
        font-family: $kendo-bottom-nav-font-family;
        letter-spacing: $kendo-bottom-nav-letter-spacing;
        display: flex;
        flex-flow: row nowrap;
        white-space: nowrap;
        gap: $kendo-bottom-nav-gap;
        overflow: hidden;
        outline: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

    .k-bottom-nav-border {
        border-width: $kendo-bottom-nav-border-width;
    }

    // TODO: do we even use this?
    .k-bottom-nav-shadow {
        box-shadow: $kendo-bottom-nav-shadow;
    }

    // Items
    .k-bottom-nav-item {
        padding-block: $kendo-bottom-nav-item-padding-y;
        padding-inline: $kendo-bottom-nav-item-padding-x;
        min-width: $kendo-bottom-nav-item-min-width;
        max-width: $kendo-bottom-nav-item-max-width;
        min-height: $kendo-bottom-nav-item-min-height;
        border-width: 0;
        border-radius: $kendo-bottom-nav-item-border-radius;
        box-sizing: border-box;
        font: inherit;
        display: inline-flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        gap: $kendo-bottom-nav-item-gap;
        text-decoration: none;
        cursor: pointer;
        color: inherit;
        background-color: inherit;
        border-color: inherit;
        outline: none;

        &:focus {
            outline: none;
        }

        &:hover {
            color: inherit;
            text-decoration: none;
        }

        > .k-bottom-nav-link {
            margin-block: calc( #{$kendo-bottom-nav-item-padding-y} * -1 );
            margin-inline: calc( #{$kendo-bottom-nav-item-padding-x} * -1 );
            padding-block: $kendo-bottom-nav-item-padding-y;
            padding-inline: $kendo-bottom-nav-item-padding-x;
            width: 100%;
            color: inherit;
            display: flex;
            flex-flow: row nowrap;
            flex: 1 0 auto;
            align-items: center;
            justify-content: center;
            outline: 0;
        }
    }
    .k-bottom-nav-item.k-disabled {
        background-color: initial;
    }

    .k-bottom-nav-item-text {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    // Horizontal Item Layout
    .k-bottom-nav-item-flow-horizontal .k-bottom-nav-item {
        flex-flow: row nowrap;
    }

    // Vertical Item Layout
    .k-bottom-nav-item-flow-vertical .k-bottom-nav-item {
        flex-direction: column;
    }

    // Positioning
    .k-bottom-nav.k-pos-fixed {
        bottom: 0;
        z-index: 1;
    }

}


@mixin kendo-bottom-navigation--layout() {
    @include kendo-bottom-navigation--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/bottom-navigation/_theme.scss
@mixin kendo-bottom-navigation--theme-base() {

    // Solid
    @each $name, $color in $kendo-theme-colors {
        .k-bottom-nav-solid-#{$name} {
            @include fill(
                $color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent), k-true-mix( $color, k-contrast-legacy( $color ), 35%)),
                $bg: $color
            );

            .k-bottom-nav-item.k-focus,
            .k-bottom-nav-item:focus {
                @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 12.5%, transparent), rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2)));
            }

            .k-bottom-nav-item.k-selected {
                @include fill( $color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )) );
            }
        }
        // TODO: remove when suites update class names
        .k-bottom-nav-solid.k-bottom-nav-#{$name} {
            @extend .k-bottom-nav-solid-#{$name} !optional;
        }
    }

    // Flat
    @each $name, $color in $kendo-theme-colors {
        .k-bottom-nav-flat-#{$name} {
            @include fill(
                $kendo-bottom-nav-flat-text,
                $kendo-bottom-nav-flat-bg,
                $kendo-bottom-nav-flat-border
            );

            .k-bottom-nav-item.k-focus,
            .k-bottom-nav-item:focus {
                @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba($kendo-bottom-nav-flat-text, .05)) );
            }

            .k-bottom-nav-item.k-selected {
                @if $name == "secondary" or $name == "light" {
                    @include fill( $color: if($kendo-enable-color-system, k-color( #{$name} ), k-try-shade($color, 3)) );
                } @else {
                    @include fill( $color: $color );
                }
            }
        }
        .k-bottom-nav-flat.k-bottom-nav-#{$name} {
            @extend .k-bottom-nav-flat-#{$name} !optional;
        }
    }

}


@mixin kendo-bottom-navigation--theme() {
    @include kendo-bottom-navigation--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-bottom-navigation--styles() {
    @include module-render( "bottom-navigation" ) {
        @include kendo-bottom-navigation--layout();
        @include kendo-bottom-navigation--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-bottom-navigation--styles();
}

// #endregion
// #region @import "./breadcrumb/_index.scss"; -> scss/breadcrumb/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "breadcrumb",
    dependencies: (
        "icon",
        "input",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/breadcrumb/_variables.scss
// Breadcrumb

/// The width of the border around the Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-border-width: 0px !default;

/// The horizontal margin of the Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-margin-x: null !default;
/// The vertical margin of the Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-margin-y: null !default;
/// The horizontal padding of the Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-padding-x: null !default;
/// The vertical padding of the Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-padding-y: null !default;

/// The font family of the Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-font-family: var( --kendo-font-family, inherit ) !default;

/// The font size of the Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-font-size: var( --kendo-font-size, inherit ) !default;
/// The font size of the small Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-sm-font-size: var( --kendo-font-size, inherit ) !default;
/// The font size of the medium Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default;
/// The font size of the large Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;

/// The line-height of the Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-line-height: var( --kendo-line-height, normal ) !default;
/// The line-height of the small Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-sm-line-height: var( --kendo-line-height, normal ) !default;
/// The line-height of the medium Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
/// The line-height of the height Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-lg-line-height: var( --kendo-line-height-lg, normal ) !default;

/// The base background of the Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-bg: $kendo-component-bg !default;
/// The base text color of the Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-text: $kendo-component-text !default;
/// The base border color of the Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-border: $kendo-component-border !default;

/// The box shadow of the focused Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;

/// The horizontal padding of the Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-link-padding-x: k-spacing(2) !default;
/// The horizontal padding of the small Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-sm-link-padding-x: k-spacing(2) !default;
/// The horizontal padding of the medium Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
/// The horizontal padding of the large Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-lg-link-padding-x: k-spacing(2) !default;

/// The vertical padding of the Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-link-padding-y: k-spacing(1.5) !default;
/// The vertical padding of the small Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-sm-link-padding-y: k-spacing(1) !default;
/// The vertical padding of the medium Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
/// The vertical padding of the large Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-lg-link-padding-y: k-spacing(2) !default;

/// The border-radius of the Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-link-border-radius: k-border-radius(md) !default;

/// The vertical padding of the Breadcrumb link icon.
/// @group breadcrumb
$kendo-breadcrumb-icon-link-padding-y: k-spacing(2) !default;
/// The vertical padding of the small Breadcrumb link icon.
/// @group breadcrumb
$kendo-breadcrumb-sm-icon-link-padding-y: k-spacing(1.5) !default;
/// The vertical padding of the medium Breadcrumb link icon.
/// @group breadcrumb
$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
/// The vertical padding of the large Breadcrumb link icon.
/// @group breadcrumb
$kendo-breadcrumb-lg-icon-link-padding-y: k-spacing(3) !default;

/// The horizontal padding of the Breadcrumb link icon.
/// @group breadcrumb
$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default;
/// The horizontal padding of the small Breadcrumb link icon.
/// @group breadcrumb
$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
/// The horizontal padding of the medium Breadcrumb link icon.
/// @group breadcrumb
$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default;
/// The horizontal padding of the large Breadcrumb link icon.
/// @group breadcrumb
$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default;

/// The text color of the Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-link-initial-text: inherit !default;
/// The spacing of the Breadcrumb link icon.
/// @group breadcrumb
$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;

/// The background color of the Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-link-bg: null !default;
/// The text color of the Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-link-text: $kendo-link-text !default;
/// The border color of the Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-link-border: null !default;

/// The background color of the hovered Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-link-hover-bg: $kendo-base-bg !default;
/// The text color of the hovered Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-link-hover-text: $kendo-link-hover-text !default;
/// The border color of the hovered Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-link-hover-border: null !default;

/// The background color of the focused Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-link-focus-bg: null !default;
/// The text color of the focused Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-link-focus-text: $kendo-link-text !default;
/// The border color of the focused Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-link-focus-border: null !default;
/// The box shadow of the focused Breadcrumb link.
/// @group breadcrumb
$kendo-breadcrumb-link-focus-shadow: $kendo-focus-shadow !default;

/// The background color of the Breadcrumb root link.
/// @group breadcrumb
$kendo-breadcrumb-root-link-bg: null !default;
/// The text color of the Breadcrumb root link.
/// @group breadcrumb
$kendo-breadcrumb-root-link-text: null !default;
/// The border color of the Breadcrumb root link.
/// @group breadcrumb
$kendo-breadcrumb-root-link-border: null !default;

/// The background color of the hovered Breadcrumb root link.
/// @group breadcrumb
$kendo-breadcrumb-root-link-hover-bg: $kendo-base-bg !default;
/// The text color of the hovered Breadcrumb root link.
/// @group breadcrumb
$kendo-breadcrumb-root-link-hover-text: null !default;
/// The border color of the hovered Breadcrumb root link.
/// @group breadcrumb
$kendo-breadcrumb-root-link-hover-border: null !default;

/// The background color of the focused Breadcrumb root link.
/// @group breadcrumb
$kendo-breadcrumb-root-link-focus-bg: null !default;
/// The text color of the focused Breadcrumb root link.
/// @group breadcrumb
$kendo-breadcrumb-root-link-focus-text: null !default;
/// The border color of the focused Breadcrumb root link.
/// @group breadcrumb
$kendo-breadcrumb-root-link-focus-border: null !default;
/// The box shadow of the focused Breadcrumb root link.
/// @group breadcrumb
$kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;

/// The background color of the current Breadcrumb root link.
/// @group breadcrumb
$kendo-breadcrumb-current-item-bg: null !default;
/// The text color of the current Breadcrumb root link.
/// @group breadcrumb
$kendo-breadcrumb-current-item-text: null !default;
/// The border color of the current Breadcrumb root link.
/// @group breadcrumb
$kendo-breadcrumb-current-item-border: null !default;

/// The sizes map for the Breadcrumb.
/// @group breadcrumb
$kendo-breadcrumb-sizes: (
    sm: (
        link-padding-x: $kendo-breadcrumb-sm-link-padding-x,
        link-padding-y: $kendo-breadcrumb-sm-link-padding-y,
        icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,
        icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,
        font-size: $kendo-breadcrumb-sm-font-size,
        line-height: $kendo-breadcrumb-sm-line-height
    ),
    md: (
        link-padding-x: $kendo-breadcrumb-md-link-padding-x,
        link-padding-y: $kendo-breadcrumb-md-link-padding-y,
        icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,
        icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,
        font-size: $kendo-breadcrumb-md-font-size,
        line-height: $kendo-breadcrumb-md-line-height
    ),
    lg: (
        link-padding-x: $kendo-breadcrumb-lg-link-padding-x,
        link-padding-y: $kendo-breadcrumb-lg-link-padding-y,
        icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,
        icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,
        font-size: $kendo-breadcrumb-lg-font-size,
        line-height: $kendo-breadcrumb-lg-line-height
    )
) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/breadcrumb/_layout.scss
@mixin kendo-breadcrumb--layout-base() {

    // Breadcrumb
    .k-breadcrumb {
        margin-block: $kendo-breadcrumb-margin-y;
        margin-inline: $kendo-breadcrumb-margin-x;
        padding-block: $kendo-breadcrumb-padding-y;
        padding-inline: $kendo-breadcrumb-padding-x;
        border-width: $kendo-breadcrumb-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-breadcrumb-font-family;
        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( $kendo-breadcrumb-link-border-radius );
        color: $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: $kendo-transition;
    }

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


    // Breadcrumb delimiter
    .k-breadcrumb-delimiter,
    .k-breadcrumb-delimiter-icon {
        color: inherit;
        opacity: $kendo-disabled-opacity;
    }


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

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


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

        .k-breadcrumb-#{$size} {
            font-size: $_font-size;
            line-height: $_line-height;


            .k-breadcrumb-link,
            .k-breadcrumb-root-link {
                padding-block: $_link-padding-y;
                padding-inline: $_link-padding-x;
            }

            .k-breadcrumb-icon-link {
                padding-block: $_icon-link-padding-y;
                padding-inline: $_icon-link-padding-x;
            }
        }
    }

}


@mixin kendo-breadcrumb--layout() {
    @include kendo-breadcrumb--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/breadcrumb/_theme.scss
@mixin kendo-breadcrumb--theme-base() {

    // Breadcrumb
    .k-breadcrumb {
        @include fill(
            $kendo-breadcrumb-text,
            $kendo-breadcrumb-bg,
            $kendo-breadcrumb-border
        );

        &:focus,
        &.k-focus {
            @include box-shadow( $kendo-breadcrumb-focus-shadow );
        }
    }


    // Breadcrumb link
    .k-breadcrumb-link {
        @include fill(
            $kendo-breadcrumb-link-text,
            $kendo-breadcrumb-link-bg,
            $kendo-breadcrumb-link-border
        );

        // Hovered state
        &:hover,
        &.k-hover {
            @include fill(
                $kendo-breadcrumb-link-hover-text,
                $kendo-breadcrumb-link-hover-bg,
                $kendo-breadcrumb-link-hover-border
            );
        }

        // Focused state
        &:focus,
        &.k-focus {
            @include fill(
                $kendo-breadcrumb-link-focus-text,
                $kendo-breadcrumb-link-focus-bg,
                $kendo-breadcrumb-link-focus-border
            );
            @include focus-indicator( $kendo-breadcrumb-link-focus-shadow );
        }
    }


    // Breadcrumb root link
    .k-breadcrumb-root-link {
        @include fill(
            $kendo-breadcrumb-root-link-text,
            $kendo-breadcrumb-root-link-bg,
            $kendo-breadcrumb-root-link-border
        );

        // Hovered state
        &:hover,
        &.k-hover {
            @include fill(
                $kendo-breadcrumb-root-link-hover-text,
                $kendo-breadcrumb-root-link-hover-bg,
                $kendo-breadcrumb-root-link-hover-border
            );
        }

        // Focused state
        &:focus,
        &.k-focus {
            @include fill(
                $kendo-breadcrumb-root-link-focus-text,
                $kendo-breadcrumb-root-link-focus-bg,
                $kendo-breadcrumb-root-link-focus-border
            );
            @include focus-indicator( $kendo-breadcrumb-root-link-focus-shadow );
        }
    }


    // Breadcrumb current (last) item
    .k-breadcrumb-current-item {
        .k-breadcrumb-link {
            @include fill(
                $kendo-breadcrumb-current-item-text,
                $kendo-breadcrumb-current-item-bg,
                $kendo-breadcrumb-current-item-border
            );
        }
    }


    // Alias
    .k-breadcrumb-last-item {
        @extend .k-breadcrumb-current-item !optional;
    }

}


@mixin kendo-breadcrumb--theme() {
    @include kendo-breadcrumb--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-breadcrumb--styles() {
    @include module-render( "breadcrumb" ) {
        @include kendo-breadcrumb--layout();
        @include kendo-breadcrumb--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-breadcrumb--styles();
}

// #endregion
// #region @import "./pager/_index.scss"; -> scss/pager/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "pager",
    dependencies: (
        "button",
        "dropdown-list",
        "icon",
    )
);


// Dependencies
// #region @import "../dropdownlist/_index.scss"; -> scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/pager/_variables.scss
// #region @import "../list/_variables.scss"; -> scss/list/_variables.scss
// File already imported_once. Skipping output.
// #endregion


// Pager

/// The horizontal padding of the Pager.
/// @group pager
$kendo-pager-padding-x: k-spacing(2) !default;
/// The horizontal padding of the small Pager.
/// @group pager
$kendo-pager-sm-padding-x: k-spacing(1) !default;
/// The horizontal padding of the medium Pager.
/// @group pager
$kendo-pager-md-padding-x: k-spacing(2) !default;
/// The horizontal padding of the large Pager.
/// @group pager
$kendo-pager-lg-padding-x: k-spacing(2.5) !default;
/// The vertical padding of the Pager.
/// @group pager
$kendo-pager-padding-y: $kendo-pager-padding-x !default;
/// The vertical padding of the small Pager.
/// @group pager
$kendo-pager-sm-padding-y: $kendo-pager-sm-padding-x !default;
/// The vertical padding of the medium Pager.
/// @group pager
$kendo-pager-md-padding-y: $kendo-pager-md-padding-x !default;
/// The vertical padding of the large Pager.
/// @group pager
$kendo-pager-lg-padding-y: $kendo-pager-lg-padding-x !default;

/// The minimum width of the items in the small Pager.
/// @group pager
$kendo-pager-sm-item-min-width: $kendo-button-sm-calc-size !default;
/// The minimum width of the items in the medium Pagers.
/// @group pager
$kendo-pager-md-item-min-width: $kendo-button-md-calc-size !default;
/// The minimum width of the items in the large Pagers.
/// @group pager
$kendo-pager-lg-item-min-width: $kendo-button-lg-calc-size !default;

/// The margin between the item groups in the small Pager.
/// @group pager
$kendo-pager-sm-item-group-spacing: k-spacing(3) !default;
/// The margin between the item groups in the medium Pager.
/// @group pager
$kendo-pager-md-item-group-spacing: k-spacing(3.5) !default;
/// The margin between the item groups in the large Pager.
/// @group pager
$kendo-pager-lg-item-group-spacing: k-spacing(4) !default;

/// The border width of the Pager.
/// @group pager
$kendo-pager-border-width: 1px !default;
/// The font family of the Pager.
/// @group pager
$kendo-pager-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Pager.
/// @group pager
$kendo-pager-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Pager.
/// @group pager
$kendo-pager-line-height: var( --kendo-line-height, normal ) !default;
/// The background color of the Pager.
/// @group pager
$kendo-pager-bg: $kendo-component-header-bg !default;
/// The text color of the Pager.
/// @group pager
$kendo-pager-text: $kendo-component-header-text !default;
/// The border color of the Pager.
/// @group pager
$kendo-pager-border: $kendo-component-border !default;

/// The background color of the focused Pager.
/// @group pager
$kendo-pager-focus-bg: null !default;
/// The box shadow of the focused Pager.
/// @group pager
$kendo-pager-focus-shadow: $kendo-focus-shadow !default;

/// The border width of the Pager items.
/// @group pager
$kendo-pager-item-border-width: 0px !default;
/// The border radius of the Pager items.
/// @group pager
$kendo-pager-item-border-radius: null !default;
/// The spacing around the Pager items.
/// @group pager
$kendo-pager-item-spacing: null !default;
/// The background color of the Pager items.
/// @group pager
$kendo-pager-item-bg: null !default;
/// The text color of the Pager items.
/// @group pager
$kendo-pager-item-text: null !default;
/// The border color of the Pager items.
/// @group pager
$kendo-pager-item-border: null !default;

/// The background color of the hovered Pager items.
/// @group pager
$kendo-pager-item-hover-bg: $kendo-list-item-hover-bg !default;
/// The text color of the hovered Pager items.
/// @group pager
$kendo-pager-item-hover-text: $kendo-list-item-hover-text !default;
/// The border color of the hovered Pager items.
/// @group pager
$kendo-pager-item-hover-border: null !default;
/// The background color of the selected Pager items.
/// @group pager
$kendo-pager-item-selected-bg: $kendo-list-item-selected-bg !default;
/// The text color of the selected Pager items.
/// @group pager
$kendo-pager-item-selected-text: $kendo-list-item-selected-text !default;
/// The border color of the selected Pager items.
/// @group pager
$kendo-pager-item-selected-border: null !default;
/// The opacity of the focused Pager items.
/// @group pager
$kendo-pager-item-focus-opacity: null !default;
/// The background color of the focused Pager items.
/// @group pager
$kendo-pager-item-focus-bg: transparent !default;
/// The box shadow of the focused Pager items.
/// @group pager
$kendo-pager-item-focus-shadow: $kendo-list-item-focus-shadow !default;

/// The border radius of the Pager numbers.
/// @group pager
$kendo-pager-number-border-radius: null !default;

/// The width of the Inputs in the Pager.
/// @group pager
$kendo-pager-input-width: 5em !default;

/// The width of the DropDowns in the small Pager.
/// @group pager
$kendo-pager-sm-dropdown-width: 5em !default;
/// The width of the DropDowns in the medium Pager.
/// @group pager
$kendo-pager-md-dropdown-width: 5em !default;
/// The width of the DropDowns in the large Pager.
/// @group pager
$kendo-pager-lg-dropdown-width: 5em !default;

/// The sizes map of the Pager.
/// @group pager
$kendo-pager-sizes: (
    sm: (
        padding-x: $kendo-pager-sm-padding-x,
        padding-y: $kendo-pager-sm-padding-y,
        item-group-spacing: $kendo-pager-sm-item-group-spacing,
        item-min-width: $kendo-pager-sm-item-min-width,
        pager-dropdown-width: $kendo-pager-sm-dropdown-width
    ),
    md: (
        padding-x: $kendo-pager-md-padding-x,
        padding-y: $kendo-pager-md-padding-y,
        item-group-spacing: $kendo-pager-md-item-group-spacing,
        item-min-width: $kendo-pager-md-item-min-width,
        pager-dropdown-width: $kendo-pager-md-dropdown-width
    ),
    lg: (
        padding-x: $kendo-pager-lg-padding-x,
        padding-y: $kendo-pager-lg-padding-y,
        item-group-spacing: $kendo-pager-lg-item-group-spacing,
        item-min-width: $kendo-pager-lg-item-min-width,
        pager-dropdown-width: $kendo-pager-lg-dropdown-width
    )
) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/pager/_layout.scss
@mixin kendo-pager--layout-base() {

    .k-pager {
        padding: 0;
        border-width: $kendo-pager-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-pager-font-family;
        font-size: $kendo-pager-font-size;
        line-height: $kendo-pager-line-height;
        white-space: nowrap;
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
        cursor: default;
        flex: 0 0 auto;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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


    // Base pager section
    %base-pager-section {
        display: flex;
        flex-direction: row;
        align-items: center;
    }


    // Base pager item
    %base-pager-item {
        color: inherit;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &:hover {
            z-index: 2;
        }
        &.k-disabled {
            color: inherit;
        }
    }


    // Pager items
    .k-pager-nav {
        @extend %base-pager-item !optional;
    }


    // Pager numbers
    .k-pager-numbers-wrap {
        display: flex;
        flex-direction: row;
        position: relative;

        select.k-dropdown-list {
            width: $kendo-pager-md-dropdown-width;
        }
    }
    .k-pager-numbers {
        display: flex;
        flex-direction: row;

        // Selected state
        .k-selected {
            cursor: inherit;
            z-index: 2;
        }
    }


    // Spacing between items
    .k-pager-nav + .k-pager-nav,
    .k-pager-nav + .k-pager-numbers-wrap,
    .k-pager-numbers-wrap + .k-pager-nav {
        @if ($kendo-pager-item-spacing) {
            margin-left: $kendo-pager-item-spacing;
        }

        .k-rtl &,
        [dir="rtl"] & {
            @if ($kendo-pager-item-spacing) {
                margin-left: 0;
                margin-right: $kendo-pager-item-spacing;
            }
        }
    }


    // Pager input
    .k-pager-input {
        @extend %base-pager-section !optional;
        gap: 1ex;

        .k-textbox,
        .k-numerictextbox {
            margin-block: 0;
            width: $kendo-pager-input-width;
        }
    }


    // Pager sizes
    .k-pager-sizes {
        @extend %base-pager-section !optional;
        gap: 1ex;

        .k-input-inner,
        .k-input-value-text {
            text-overflow: clip;
        }
    }


    // Pager info
    .k-pager-info {
        @extend %base-pager-section !optional;
        text-align: end;
        justify-content: flex-end;
        flex: 1 1 0%;
        order: 9;
    }


    // Pager refresh
    .k-pager-refresh {
        margin-inline-start: auto;
        color: inherit;
        order: 10;
    }

    // Pager sizes
    @each $size, $size-props in $kendo-pager-sizes {
        $_padding-x: k-map-get($size-props, padding-x);
        $_padding-y: k-map-get($size-props, padding-y);
        $_item-group-spacing: k-map-get($size-props, item-group-spacing);
        $_item-min-width: k-map-get($size-props, item-min-width);
        $_pager-dropdown-width: k-map-get($size-props, pager-dropdown-width);

        .k-pager-#{$size} {
            padding-inline: $_padding-x;
            padding-block: $_padding-y;
            gap: $_item-group-spacing;

            .k-pager-numbers-wrap {
                .k-button {
                    min-width: $_item-min-width;
                }

                .k-pager-input,
                > select.k-dropdown-list {
                    margin-inline-start: $_item-group-spacing;
                    margin-inline-end: $_item-group-spacing;
                }
            }

            .k-pager-sizes {
                .k-dropdown-list,
                > select {
                    width: $_pager-dropdown-width;
                }
            }
        }
    }

}


@mixin kendo-pager--layout() {
    @include kendo-pager--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/pager/_theme.scss
@mixin kendo-pager--theme-base() {

    // Pager
    .k-pager {
        @include fill(
            $kendo-pager-text,
            $kendo-pager-bg,
            $kendo-pager-border
        );

        &:focus,
        &.k-focus {
            @include fill( $bg: $kendo-pager-focus-bg );
            @include focus-indicator( $kendo-pager-focus-shadow, true );
        }
    }

}


@mixin kendo-pager--theme() {
    @include kendo-pager--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-pager--styles() {
    @include module-render( "pager" ) {
        @include kendo-pager--layout();
        @include kendo-pager--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-pager--styles();
}

// #endregion
// #region @import "./stepper/_index.scss"; -> scss/stepper/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "stepper",
    dependencies: (
        "icon",
        "progressbar",
    )
);


// Dependencies
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../progressbar/_index.scss"; -> scss/progressbar/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/stepper/_variables.scss
// Stepper

/// The horizontal margin the Stepper.
/// @group stepper
$kendo-stepper-margin-x: null !default;
/// The vertical margin the Stepper.
/// @group stepper
$kendo-stepper-margin-y: null !default;
/// The horizontal padding the Stepper.
/// @group stepper
$kendo-stepper-padding-x: null !default;
/// The vertical padding the Stepper.
/// @group stepper
$kendo-stepper-padding-y: null !default;
/// The horizontal margin the Stepper label.
/// @group stepper
$kendo-stepper-label-margin-x: k-spacing(3) !default;
/// The horizontal padding the Stepper label.
/// @group stepper
$kendo-stepper-label-padding-x: k-spacing(3) !default;
/// The vertical padding the Stepper label.
/// @group stepper
$kendo-stepper-label-padding-y: calc( #{k-spacing(2.5)} / 2 ) !default;
/// The width of the border around the Stepper.
/// @group stepper
$kendo-stepper-border-width: 0px !default;

/// The horizontal padding of the Stepper content.
/// @group stepper
$kendo-stepper-inline-content-padding-x: k-spacing(5) !default;
/// The vertical padding of the Stepper content.
/// @group stepper
$kendo-stepper-inline-content-padding-y: k-spacing(2.5) !default;

// The font size of the Stepper.
/// @group stepper
$kendo-stepper-font-size: var( --kendo-font-size, inherit ) !default;
// The line height of the Stepper.
/// @group stepper
$kendo-stepper-line-height: var( --kendo-line-height, normal ) !default;
// The font family of the Stepper.
/// @group stepper
$kendo-stepper-font-family: var( --kendo-font-family, inherit ) !default;

/// The background color of the Stepper.
/// @group stepper
$kendo-stepper-bg: null !default;
/// The text color of the Stepper.
/// @group stepper
$kendo-stepper-text: $kendo-component-text !default;
/// The border color of the Stepper.
/// @group stepper
$kendo-stepper-border: null !default;

/// The width of the Stepper indicator.
/// @group stepper
$kendo-stepper-indicator-width: 28px !default;
/// The height of the Stepper indicator.
/// @group stepper
$kendo-stepper-indicator-height: $kendo-stepper-indicator-width !default;
/// The border width of the Stepper indicator.
/// @group stepper
$kendo-stepper-indicator-border-width: 1px !default;
/// The border radius of the Stepper indicator.
/// @group stepper
$kendo-stepper-indicator-border-radius: 50% !default;

/// The border width of the focused Stepper indicator.
/// @group stepper
$kendo-stepper-indicator-focus-border-width: 1px !default;
/// The size of the focused Stepper indicator.
/// @group stepper
$kendo-stepper-indicator-focus-size: 2px !default;
/// The offset of the Stepper's focused indicator.
/// @group stepper
$kendo-stepper-indicator-focus-offset: 3px !default;
/// The calculated offset of the Stepper's focused indicator.
/// @group stepper
$kendo-stepper-indicator-focus-calc-offset: calc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} ) !default;

/// The background color of the Stepper indicator.
/// @group stepper
$kendo-stepper-indicator-bg: $kendo-component-bg !default;
/// The text color of the Stepper indicator.
/// @group stepper
$kendo-stepper-indicator-text: $kendo-component-text !default;
/// The border color of the Stepper indicator.
/// @group stepper
$kendo-stepper-indicator-border: #cccccc !default;

/// The background color of the hovered Stepper indicator.
/// @group stepper
$kendo-stepper-indicator-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg )) !default;
/// The text color of the hovered Stepper indicator.
/// @group stepper
$kendo-stepper-indicator-hover-text: null !default;
/// The border color of the hovered Stepper indicator.
/// @group stepper
$kendo-stepper-indicator-hover-border: null !default;

/// The background color of the disabled Stepper indicator.
/// @group stepper
$kendo-stepper-indicator-disabled-bg: null !default;
/// The text color of the disabled Stepper indicator.
/// @group stepper
$kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), #8f8f8f) !default;
/// The border color of the disabled Stepper indicator.
/// @group stepper
$kendo-stepper-indicator-disabled-border: null !default;

/// The background color of the Stepper's done indicator.
/// @group stepper
$kendo-stepper-indicator-done-bg: $kendo-color-primary !default;
/// The text color of the Stepper's done indicator.
/// @group stepper
$kendo-stepper-indicator-done-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) !default;
/// The border color of the Stepper's done indicator.
/// @group stepper
$kendo-stepper-indicator-done-border: $kendo-stepper-indicator-done-bg !default;

/// The background color of the Stepper's hovered done indicator.
/// @group stepper
$kendo-stepper-indicator-done-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg )) !default;
/// The text color of the Stepper's hovered done indicator.
/// @group stepper
$kendo-stepper-indicator-done-hover-text: null !default;
/// The border color of the Stepper's hovered done indicator.
/// @group stepper
$kendo-stepper-indicator-done-hover-border: null !default;

/// The background color of the Stepper's disabled done indicator.
/// @group stepper
$kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 60%, transparent), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%)) !default;
/// The text color of the Stepper's disabled done indicator.
/// @group stepper
$kendo-stepper-indicator-done-disabled-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) !default;
/// The border color of the Stepper's disabled done indicator.
/// @group stepper
$kendo-stepper-indicator-done-disabled-border: $kendo-stepper-indicator-done-disabled-bg !default;

/// The background color of the Stepper current indicator.
/// @group stepper
$kendo-stepper-indicator-current-bg: $kendo-stepper-indicator-done-bg !default;
/// The text color of the Stepper current indicator.
/// @group stepper
$kendo-stepper-indicator-current-text: $kendo-stepper-indicator-done-text !default;
/// The border color of the Stepper current indicator.
/// @group stepper
$kendo-stepper-indicator-current-border: $kendo-stepper-indicator-done-border !default;

/// The background color of the Stepper's hovered current indicator.
/// @group stepper
$kendo-stepper-indicator-current-hover-bg: $kendo-stepper-indicator-done-hover-bg !default;
/// The text color of the Stepper's hovered current indicator.
/// @group stepper
$kendo-stepper-indicator-current-hover-text: $kendo-stepper-indicator-done-hover-text !default;
/// The border color of the Stepper's hovered current indicator.
/// @group stepper
$kendo-stepper-indicator-current-hover-border: $kendo-stepper-indicator-done-hover-border !default;

/// The background color of the Stepper's disabled current indicator.
/// @group stepper
$kendo-stepper-indicator-current-disabled-bg: $kendo-stepper-indicator-done-disabled-bg !default;
/// The text color of the Stepper's disabled current indicator.
/// @group stepper
$kendo-stepper-indicator-current-disabled-text: $kendo-stepper-indicator-done-disabled-text !default;
/// The border color of the Stepper's disabled current indicator.
/// @group stepper
$kendo-stepper-indicator-current-disabled-border: $kendo-stepper-indicator-done-disabled-border !default;

/// The text color of the Stepper label.
/// @group stepper
$kendo-stepper-label-text: null !default;
/// The success text color of the Stepper label.
/// @group stepper
$kendo-stepper-label-success-text: $kendo-color-success !default;
/// The error text color of the Stepper label.
/// @group stepper
$kendo-stepper-label-error-text: $kendo-color-error !default;
/// The text color of the hovered Stepper label.
/// @group stepper
$kendo-stepper-label-hover-text: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-stepper-text, 2 )) !default;
/// The text color of the disabled Stepper label.
/// @group stepper
$kendo-stepper-label-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), #8f8f8f) !default;

/// The text color of the optional Stepper label.
/// @group stepper
$kendo-stepper-optional-label-text: $kendo-subtle-text !default;
/// The opacity of the optional Stepper label.
/// @group stepper
$kendo-stepper-optional-label-opacity: null !default;
/// The font size of the optional Stepper label.
/// @group stepper
$kendo-stepper-optional-label-font-size: null !default;
/// The font style of the optional Stepper label.
/// @group stepper
$kendo-stepper-optional-label-font-style: italic !default;

/// The size of the Stepper ProgressBar.
/// @group stepper
$kendo-stepper-progressbar-size: 2px !default;
/// The background color of the Stepper ProgressBar.
/// @group stepper
$kendo-stepper-progressbar-bg: null !default;
/// The text color of the Stepper ProgressBar.
/// @group stepper
$kendo-stepper-progressbar-text: null !default;
/// The background color of the selected Stepper ProgressBar.
/// @group stepper
$kendo-stepper-progressbar-fill-bg: null !default;
/// The text color of the selected Stepper ProgressBar.
/// @group stepper
$kendo-stepper-progressbar-fill-text: null !default;

/// The property name of the Stepper transition.
/// @group stepper
$kendo-stepper-content-transition-property: height !default;
/// The duration of the Stepper transition.
/// @group stepper
$kendo-stepper-content-transition-duration: 300ms !default;
/// The timing function of the Stepper transition.
/// @group stepper
$kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/stepper/_layout.scss
@mixin kendo-stepper--layout-base() {

    // Base
    .k-stepper {
        margin-block: $kendo-stepper-margin-y;
        margin-inline: $kendo-stepper-margin-x;
        padding-block: $kendo-stepper-padding-y;
        padding-inline: $kendo-stepper-padding-x;
        border-width: $kendo-stepper-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-size: $kendo-stepper-font-size;
        line-height: $kendo-stepper-line-height;
        font-family: $kendo-stepper-font-family;
        display: block;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
        // TODO: remove those once k-widget styles are removed. Link: https://github.com/telerik/kendo-themes/issues/1359
        color: inherit;
        background: none;

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


        // Step list
        .k-step-list {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            position: relative;
            z-index: 1;
        }


        // Step
        .k-step { }


        // Step link
        .k-step-link {
            outline: none;
            color: inherit;
            text-decoration: none;
            white-space: nowrap;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        // Step indicator
        .k-step-indicator {
            @include border-radius( $kendo-stepper-indicator-border-radius );
            margin: if($kendo-stepper-indicator-focus-offset > 0, $kendo-stepper-indicator-focus-offset, null);
            width: $kendo-stepper-indicator-width;
            height: $kendo-stepper-indicator-height;
            border-width: $kendo-stepper-indicator-border-width;
            border-style: solid;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: none;
            position: relative;
            z-index: 1;
            overflow: visible;
            transition-property: color, background-color, border-color;
            transition-duration: .4s;
            transition-timing-function: ease-in-out;

            &::before {
                @include border-radius( $kendo-stepper-indicator-border-radius );
                content: "";
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }

            &::after {
                @include border-radius( 100% );
                content: "";
                border-width: $kendo-stepper-indicator-focus-border-width;
                border-style: solid;
                border-color: inherit;
                pointer-events: none;
                display: none;
                position: absolute;
                top: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
                right: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
                bottom: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
                left: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
                z-index: 2;
            }
        }

        .k-step.k-focus,
        .k-step-link:focus {
            .k-step-indicator::after {
                display: block;
            }
        }


        // Step label
        .k-step-label {
            max-width: clamp(100%, 10em, 100%);
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }
        .k-step-label:only-child {
            @include border-radius( k-math-div( ( $kendo-stepper-indicator-height + 2 * $kendo-stepper-indicator-border-width ), 2 ) );
            padding-block: $kendo-stepper-label-padding-y;
            padding-inline: $kendo-stepper-label-padding-x;
            border-width: 0;
        }
        .k-step-label .k-step-text {
            max-width: calc(10em - (#{$kendo-icon-size} + #{$kendo-icon-spacing}));
            flex-grow: 1;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .k-step-label .k-icon  {
            margin-left: $kendo-icon-spacing;
        }

        .k-step-current .k-step-label {
            font-weight: bold;
        }


        // Optional label
        .k-step-label-optional {
            flex-basis: 100%;
            font-size: $kendo-stepper-optional-label-font-size;
            font-style: $kendo-stepper-optional-label-font-style;
            opacity: $kendo-stepper-optional-label-opacity;
        }


        .k-step-disabled,
        .k-step.k-disabled {
            opacity: 1;
            pointer-events: none;

            .k-step-link { cursor: default; }

            .k-step-label-optional {
                color: inherit;
            }
        }


        // Progressbar
        .k-progressbar {
            pointer-events: none;
            z-index: 0;
            overflow: visible;
        }

        .k-progressbar-horizontal {
            grid-row: 1 / -1;
        }

        .k-progressbar-vertical {
            position: absolute;
        }
    }


    // Horizontal
    .k-step-list-horizontal {
        flex-direction: row;
        grid-row: 1;

        .k-step {
            flex: 1 0 auto;
            text-align: center;
        }

        .k-step-link {
            margin: auto;
            max-width: 10em;
            flex-direction: column;
        }

        // Label
        .k-step-label {
            text-align: center;
        }
        .k-step-indicator + .k-step-label {
            margin-top: if($kendo-stepper-indicator-focus-offset > 0, calc(8px - #{$kendo-stepper-indicator-focus-offset}), 8px);
        }

        // Progressbar
        & ~ .k-progressbar {
            width: 100%;
            height: $kendo-stepper-progressbar-size;
            top: calc(((#{$kendo-stepper-indicator-height} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2) + #{$kendo-stepper-indicator-focus-size} / 2);
        }
    }

    // Vertical
    .k-step-list-vertical {
        flex-direction: column;

        .k-step {
            min-height: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) + 20px);
        }

        // Label
        .k-step-label {
            justify-content: flex-start;
        }
        .k-step-indicator + .k-step-label {
            margin-left: $kendo-stepper-label-margin-x;
        }


        // Progressbar
        & ~ .k-progressbar {
            width: $kendo-stepper-progressbar-size;
            height: 100%;
            min-height: 20px;
            left: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2);
        }

        // Inline content
        .k-step-content {
            height: 0;
            overflow: hidden;
            transition: $kendo-stepper-content-transition-property $kendo-stepper-content-transition-duration $kendo-stepper-content-transition-timing-function;
        }

        .k-step-current .k-step-content {
            height: auto;
            overflow: visible;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: $kendo-stepper-indicator-width + 2 * $kendo-stepper-indicator-border-width;
            padding-block: $kendo-stepper-inline-content-padding-x;
            padding-inline: $kendo-stepper-inline-content-padding-y;
        }
    }


    // Stepper rtl
    .k-rtl .k-stepper,
    .k-stepper[dir="rtl"] {
        direction: rtl;

        .k-step-label .k-icon {
            margin-left: 0;
            margin-right: $kendo-icon-spacing;
        }

        // Horizontal
        .k-step-list-horizontal { }


        // Vertical
        .k-step-list-vertical {
            .k-step-indicator + .k-step-label {
                margin-left: 0;
                margin-right: $kendo-stepper-label-margin-x;
            }

            & ~ .k-progressbar {
                left: auto;
                right: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2);
            }
        }
    }

}


@mixin kendo-stepper--layout() {
    @include kendo-stepper--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/stepper/_theme.scss
@mixin kendo-stepper--theme-base() {

    // Base
    .k-stepper {
        @include fill(
            $kendo-stepper-text,
            $kendo-stepper-bg,
            $kendo-stepper-border
        );


        // Not done steps
        .k-step {
            // Hover
            &:hover,
            &.k-hover,
            &.k-step-hover {
                .k-step-label {
                    color: $kendo-stepper-label-hover-text;
                }

                .k-step-indicator {
                    @include fill(
                        $kendo-stepper-indicator-hover-text,
                        $kendo-stepper-indicator-hover-bg,
                        $kendo-stepper-indicator-hover-border
                    );
                }
            }

            &.k-focus,
            .k-step-link:focus  {
                // Labels only
                .k-step-label:only-child {
                    @include focus-indicator( $indicator: ( inset 0 0 0 $kendo-stepper-indicator-focus-size $kendo-component-border ), $inset: true );
                }
            }

            // Disabled
            &.k-step-disabled,
            &.k-disabled,
            &:disabled {
                .k-step-indicator {
                    @if($kendo-enable-color-system) {
                        @include fill(
                            $kendo-stepper-indicator-disabled-text,
                            k-color( app-surface ),
                            $kendo-stepper-indicator-disabled-border
                        );
                        
                        &::before {
                            background-color: $kendo-stepper-indicator-disabled-bg;
                        }
                    } @else {
                        @include fill(
                            $kendo-stepper-indicator-disabled-text,
                            $kendo-stepper-indicator-disabled-bg,
                            $kendo-stepper-indicator-disabled-border
                        );
                    }
                }

                .k-step-label {
                    @include fill( $color: $kendo-stepper-label-disabled-text );
                }
            }
        }
        .k-step-indicator {
            @include fill(
                $kendo-stepper-indicator-text,
                $kendo-stepper-indicator-bg,
                $kendo-stepper-indicator-border
            );
        }
        .k-step-indicator::after {
            @include box-shadow( inset 0 0 0 $kendo-stepper-indicator-focus-size $kendo-component-bg );
        }
        .k-step-label:only-child {
            @include fill(
                $kendo-component-text,
                $kendo-component-bg,
                $kendo-component-border
            );
        }


        // Done steps
        .k-step-done {

            .k-step-indicator {
                @include fill(
                    $kendo-stepper-indicator-done-text,
                    $kendo-stepper-indicator-done-bg,
                    $kendo-stepper-indicator-done-border
                );
            }


            // Hover
            &:hover,
            &.k-hover,
            &.k-step-hover {
                .k-step-indicator {
                    @include fill(
                        $kendo-stepper-indicator-done-hover-text,
                        $kendo-stepper-indicator-done-hover-bg,
                        $kendo-stepper-indicator-done-hover-border
                    );
                }
            }


            // Disabled
            &.k-step-disabled,
            &.k-disabled,
            &:disabled {
                .k-step-indicator {
                    @if($kendo-enable-color-system) {
                        @include fill(
                            $kendo-stepper-indicator-done-disabled-text,
                            k-color( app-surface ),
                            $kendo-stepper-indicator-done-disabled-border
                        );
                        
                        &::before {
                            background-color: $kendo-stepper-indicator-done-disabled-bg;
                        }
                    } @else {
                        @include fill(
                            $kendo-stepper-indicator-done-disabled-text,
                            $kendo-stepper-indicator-done-disabled-bg,
                            $kendo-stepper-indicator-done-disabled-border
                        );
                    }
                }
            }
        }


        // Current
        .k-step-current {

            .k-step-indicator {
                @include fill(
                    $kendo-stepper-indicator-current-text,
                    $kendo-stepper-indicator-current-bg,
                    $kendo-stepper-indicator-current-border
                );
            }


            // Hover
            &:hover,
            &.k-hover,
            &.k-step-hover {
                .k-step-indicator {
                    @include fill(
                        $kendo-stepper-indicator-current-hover-text,
                        $kendo-stepper-indicator-current-hover-bg,
                        $kendo-stepper-indicator-current-hover-border
                    );
                }
            }


            // Disabled
            &.k-step-disabled,
            &.k-disabled,
            &:disabled {
                .k-step-indicator {
                    @if($kendo-enable-color-system) {
                        @include fill(
                            $kendo-stepper-indicator-current-disabled-text,
                            k-color( app-surface ),
                            $kendo-stepper-indicator-current-disabled-border
                        );
                        
                        &::before {
                            background-color: $kendo-stepper-indicator-current-disabled-bg;
                        }
                    } @else {
                        @include fill(
                            $kendo-stepper-indicator-current-disabled-text,
                            $kendo-stepper-indicator-current-disabled-bg,
                            $kendo-stepper-indicator-current-disabled-border
                        );
                    }
                }
            }
        }

        // Label
        .k-step-label {
            @include fill( $color: $kendo-stepper-label-text );
        }
        .k-step-success .k-step-label .k-icon {
            @include fill( $color: $kendo-stepper-label-success-text );
        }

        .k-step-error {
            .k-step-label {
                @include fill( $color: $kendo-stepper-label-error-text );
            }

            &:hover,
            &.k-hover,
            &.k-step-hover {
                .k-step-label {
                    @include fill( $color: $kendo-stepper-label-error-text );
                }
            }
        }

        // Optional Label
        .k-step-label-optional {
            color: $kendo-stepper-optional-label-text;
        }

        // Progressbar
        .k-progressbar {
            @include fill(
                $color: $kendo-stepper-progressbar-text,
                $bg: $kendo-stepper-progressbar-bg
            );

            .k-selected {
                @include fill(
                    $color: $kendo-stepper-progressbar-fill-text,
                    $bg: $kendo-stepper-progressbar-fill-bg
                );
            }
        }
    }

}


@mixin kendo-stepper--theme() {
    @include kendo-stepper--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-stepper--styles() {
    @include module-render( "stepper" ) {
        @include kendo-stepper--layout();
        @include kendo-stepper--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-stepper--styles();
}

// #endregion
// #region @import "./tabstrip/_index.scss"; -> scss/tabstrip/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "tabstrip",
    dependencies: (
        "button",
        "icon",
        "list",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/tabstrip/_variables.scss
// TabStrip


/// The horizontal padding of the TabStrip wrapper.
/// @group tabstrip
$kendo-tabstrip-wrapper-padding-x: k-spacing(0) !default;
/// The vertical padding of the TabStrip wrapper.
/// @group tabstrip
$kendo-tabstrip-wrapper-padding-y: k-spacing(0) !default;
/// The border width around the TabStrip wrapper.
/// @group tabstrip
$kendo-tabstrip-wrapper-border-width: 0px !default;

/// The font family of the TabStrip.
/// @group tabstrip
$kendo-tabstrip-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the TabStrip.
/// @group tabstrip
$kendo-tabstrip-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the TabStrip.
/// @group tabstrip
$kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default;
/// The border width around the TabStrip.
/// @group tabstrip
$kendo-tabstrip-border-width: 1px !default;

/// The background color of the TabStrip wrapper.
/// @group tabstrip
$kendo-tabstrip-wrapper-bg: null !default;
/// The text color of the TabStrip wrapper.
/// @group tabstrip
$kendo-tabstrip-wrapper-text: null !default;
/// The border color of the TabStrip wrapper.
/// @group tabstrip
$kendo-tabstrip-wrapper-border: null !default;

/// The background color of the TabStrip.
/// @group tabstrip
$kendo-tabstrip-bg: null !default;
/// The text color of the TabStrip.
/// @group tabstrip
$kendo-tabstrip-text: $kendo-component-text !default;
/// The border color of the TabStrip.
/// @group tabstrip
$kendo-tabstrip-border: $kendo-component-border !default;

/// The horizontal padding of the TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-padding-x: k-spacing(3) !default;
/// The vertical padding of the TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-padding-y: k-spacing(1.5) !default;
/// The border width around the TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-border-width: 1px !default;
/// The border radius of the TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-border-radius: k-border-radius(md) !default;
/// The gap between the TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-gap: k-spacing(0) !default;

///  The background color of the TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-bg: null !default;
/// The text color of the TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-text: $kendo-link-text !default;
/// The border color of the TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-border: null !default;
/// The gradient of the TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-gradient: null !default;

/// The background color of the hovered TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-hover-bg: null !default;
/// The text color of the hovered TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-hover-text: $kendo-link-hover-text !default;
/// The border color of the hovered TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-hover-border: null !default;
/// The gradient of the hovered TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-hover-gradient: null !default;

/// The background color of the selected TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-selected-bg: $kendo-component-bg !default;
/// The text color of the selected TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-selected-text: $kendo-component-text !default;
/// The border color of the selected TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-selected-border: $kendo-component-border !default;
/// The gradient of the selected TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-selected-gradient: null !default;

/// The shadow of the focused TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;

/// The shadow of the dragged TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-dragging-shadow: k-elevation(3) !default;

/// The background color of the disabled TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-disabled-bg: null !default;
/// The text color of the disabled TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-disabled-text: null !default;
/// The border color of the disabled TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-disabled-border: null !default;
/// The gradient of the disabled TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-disabled-gradient: null !default;
/// The opacity of the disabled TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-disabled-opacity: null !default;
/// The filter of the disabled TabStrip items.
/// @group tabstrip
$kendo-tabstrip-item-disabled-filter: null !default;

/// The border width of the TabStrip indicator.
/// @group tabstrip
$kendo-tabstrip-indicator-size: null !default;
/// The border color of the TabStrip ripple.
/// @group tabstrip
$kendo-tabstrip-indicator-color: null !default;

/// The horizontal padding of the TabStrip content.
/// @group tabstrip
$kendo-tabstrip-content-padding-x: k-spacing(4) !default;
/// The vertical padding of the TabStrip content.
/// @group tabstrip
$kendo-tabstrip-content-padding-y: k-spacing(4) !default;
/// The border width around the TabStrip content.
/// @group tabstrip
$kendo-tabstrip-content-border-width: 1px !default;

/// The background color of the TabStrip content.
/// @group tabstrip
$kendo-tabstrip-content-bg: $kendo-component-bg !default;
/// The text color of the TabStrip content.
/// @group tabstrip
$kendo-tabstrip-content-text: $kendo-component-text !default;
/// The border color of the TabStrip content.
/// @group tabstrip
$kendo-tabstrip-content-border: $kendo-component-border !default;
/// The border color of the focused TabStrip content.
/// @group tabstrip
$kendo-tabstrip-content-focus-border: $kendo-component-text !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/tabstrip/_layout.scss
@mixin kendo-tabstrip--layout-base() {

    // Tabstrip wrapper
    .k-tabstrip-wrapper {
        padding-block: $kendo-tabstrip-wrapper-padding-y;
        padding-inline: $kendo-tabstrip-wrapper-padding-x;
        box-sizing: border-box;
        border-width: $kendo-tabstrip-wrapper-border-width;
        border-style: solid;
        display: flex;
        flex-direction: column;
        position: relative;
    }


    // Tabstrip
    .k-tabstrip {
        border-width: 0;
        border-color: transparent;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-tabstrip-font-family;
        font-size: $kendo-tabstrip-font-size;
        line-height: $kendo-tabstrip-line-height;
        color: inherit;
        background-color: transparent;
        display: flex;
        flex-flow: column nowrap;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
    }
    .k-tabstrip-wrapper > .k-tabstrip {
        flex: 1 1 auto;
    }


    // Tabstrip items wrapper
    .k-tabstrip-items-wrapper {
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        position: relative;
    }


    // Tabstrip items
    .k-tabstrip-items {
        box-sizing: border-box;
        outline: 0;
        display: flex;
        flex-direction: inherit;
        flex-wrap: wrap;
        flex: 1 1 auto;
        gap: $kendo-tabstrip-item-gap;

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

        .k-item {
            margin: 0;
            padding: 0;
            border: $kendo-tabstrip-item-border-width solid transparent;
            position: relative;
            flex-shrink: 0;
            display: flex;
            flex-direction: row;
            align-items: stretch;
            justify-items: stretch;
            outline: 0;
        }

        .k-tab-on-top {
            z-index: 1;
        }

        .k-link {
            padding-block: $kendo-tabstrip-item-padding-y;
            padding-inline: $kendo-tabstrip-item-padding-x;
            color: inherit;
            cursor: pointer;
            display: inline-flex;
            vertical-align: middle;
            flex: 1 1 auto;
            flex-direction: row;
            align-content: center;
            align-items: center;
        }


        // Disabled state
        .k-item.k-disabled,
        .k-item[disabled] {
            opacity: $kendo-tabstrip-item-disabled-opacity;
            filter: $kendo-tabstrip-item-disabled-filter;
        }
    }


    // Tabstrip content
    .k-tabstrip-content,
    .k-tabstrip > .k-content {
        margin: 0 !important; // stylelint-disable-line declaration-no-important
        padding-block: $kendo-tabstrip-content-padding-y;
        padding-inline: $kendo-tabstrip-content-padding-x;
        box-sizing: border-box;
        border-width: $kendo-tabstrip-content-border-width;
        border-style: solid;
        border-color: inherit;
        display: none;
        overflow: auto;
        flex: 1 1 auto;
        position: relative;

        &.k-active {
            display: block;
        }

        &:focus,
        &.k-focus {
            outline-width: 1px;
            outline-style: dotted;
            outline-offset: -1px;
        }
    }


    // Loading indicator
    .k-tabstrip-items .k-loading {
        width: 20%;
        height: 0;
        border: 0;
        border-top: 1px solid transparent;
        border-color: inherit;
        background: none;
        position: absolute;
        top: 0;
        left: 0;
        transition: width .2s linear;

        // TODO: a better name
        display: none;

        &.k-complete {
            width: 100%;
            border-top-width: 0;
        }
    }


    // Scrolling
    .k-tabstrip-scrollable {
        > .k-tabstrip-items-wrapper {

            > .k-tabstrip-items {
                flex-wrap: nowrap;
                white-space: nowrap;
                overflow: hidden;
            }

            > .k-button {
                padding-block: k-spacing(1);
                padding-inline: k-spacing(1);
                width: auto;
                height: auto;
                flex: none;
                align-self: stretch;
                aspect-ratio: auto;

                .k-button-icon {
                    min-width: auto;
                    min-height: auto;
                }
            }
        }
    }


    // Tabstrip orientation
    .k-tabstrip-horizontal {
        flex-direction: row;
    }
    .k-tabstrip-vertical {
        flex-direction: column;
    }


    // Tabstrip position
    .k-tabstrip-top {
        > .k-tabstrip-items-wrapper {
            @extend .k-tabstrip-horizontal !optional;
            border-bottom-width: $kendo-tabstrip-border-width;

            .k-item {
                @include border-top-radius( $kendo-tabstrip-item-border-radius );
                border-bottom-width: 0;
            }
            .k-item:active,
            .k-item.k-active {
                margin-bottom: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
                border-bottom-width: $kendo-tabstrip-border-width;
                border-bottom-color: transparent !important; // stylelint-disable-line declaration-no-important
            }
        }

        > .k-content,
        > .k-tabstrip-content {
            @include border-bottom-radius( $kendo-tabstrip-item-border-radius );
            border-top-width: 0 !important; // stylelint-disable-line declaration-no-important
        }
    }
    .k-tabstrip-bottom {
        > .k-tabstrip-items-wrapper {
            @extend .k-tabstrip-horizontal !optional;
            border-top-width: $kendo-tabstrip-border-width;

            .k-item {
                @include border-bottom-radius( $kendo-tabstrip-item-border-radius );
                border-top-width: 0;
            }
            .k-item:active,
            .k-item.k-active {
                margin-top: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
                border-top-width: $kendo-tabstrip-border-width;
                border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
            }
        }

        > .k-content,
        > .k-tabstrip-content {
            @include border-top-radius( $kendo-tabstrip-item-border-radius );
            border-bottom-width: 0 !important; // stylelint-disable-line declaration-no-important
        }
    }
    .k-tabstrip-left {
        flex-direction: row;

        > .k-tabstrip-items-wrapper {
            @extend .k-tabstrip-vertical !optional;
            border-right-width: $kendo-tabstrip-border-width;

            .k-item {
                @include border-left-radius( $kendo-tabstrip-item-border-radius );
                border-right-width: 0;
            }
            .k-item:active,
            .k-item.k-active {
                margin-right: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
                border-right-width: $kendo-tabstrip-border-width;
                border-right-color: transparent !important; // stylelint-disable-line declaration-no-important
            }
        }

        > .k-content,
        > .k-tabstrip-content {
            @include border-right-radius( $kendo-tabstrip-item-border-radius );
            border-left-width: 0 !important; // stylelint-disable-line declaration-no-important
        }

    }
    .k-tabstrip-right {
        flex-direction: row-reverse;

        > .k-tabstrip-items-wrapper {
            @extend .k-tabstrip-vertical !optional;
            border-left-width: $kendo-tabstrip-border-width;

            .k-item {
                @include border-right-radius( $kendo-tabstrip-item-border-radius );
                border-left-width: 0;
            }
            .k-item:active,
            .k-item.k-active {
                margin-left: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
                border-left-width: $kendo-tabstrip-border-width;
                border-left-color: transparent !important; // stylelint-disable-line declaration-no-important
            }
        }

        > .k-content,
        > .k-tabstrip-content {
            @include border-left-radius( $kendo-tabstrip-item-border-radius );
            border-right-width: 0;
        }
    }


    // Tabstrip align
    .k-tabstrip-items-start {
        justify-content: flex-start;
    }
    .k-tabstrip-items-center {
        justify-content: center;
    }
    .k-tabstrip-items-end {
        justify-content: flex-end;
    }
    .k-tabstrip-items-justify {
        justify-content: space-between;
    }
    .k-tabstrip-items-stretched > * {
        flex: 1 0 0;
    }


    // Selected indicator
    @if ($kendo-tabstrip-indicator-size) {

        .k-tabstrip-items-wrapper {

            .k-item::after {
                content: "";
                border-width: 0;
                border-style: solid;
                display: none;
                position: absolute;
                z-index: 2;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                pointer-events: none;
            }
            .k-item.k-active::after {
                display: block;
            }

            .k-item > .k-link {
                z-index: 1;
            }
        }


        // Variants
        .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item::after {
            border-bottom-width: $kendo-tabstrip-indicator-size;
        }
        .k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item::after {
            border-top-width: $kendo-tabstrip-indicator-size;
        }
        .k-tabstrip-left > .k-tabstrip-items-wrapper .k-item::after {
            border-right-width: $kendo-tabstrip-indicator-size;
        }
        .k-tabstrip-right > .k-tabstrip-items-wrapper .k-item::after {
            border-left-width: $kendo-tabstrip-indicator-size;
        }


        // Hide tabstrip indicator when dragging
        .k-tabstrip-items-wrapper .k-item.k-tabstrip-dragging {
            &::after {
                display: none !important; // stylelint-disable-line declaration-no-important
            }
        }

    }


    // RTL
    .k-rtl .k-tabstrip,
    .k-tabstrip[dir="rtl"] {

        &.k-tabstrip-left,
        &.k-tabstrip-right {
            > .k-tabstrip-items-wrapper {
                order: 1;
            }

            > .k-content { order: 0; }
            > .k-tabstrip-content { order: 0; }
        }

    }

}


@mixin kendo-tabstrip--layout() {
    @include kendo-tabstrip--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/tabstrip/_theme.scss
@mixin kendo-tabstrip--theme-base() {

    // Wrapper
    .k-tabstrip-wrapper {
        @include fill(
            $kendo-tabstrip-wrapper-text,
            $kendo-tabstrip-wrapper-bg,
            $kendo-tabstrip-wrapper-border
        );
    }


    // Items
    .k-tabstrip-items-wrapper {
        @include fill(
            $kendo-tabstrip-text,
            $kendo-tabstrip-bg,
            $kendo-tabstrip-border
        );

        .k-item {
            @include fill(
                $kendo-tabstrip-item-text,
                $kendo-tabstrip-item-bg,
                $kendo-tabstrip-item-border,
                $kendo-tabstrip-item-gradient
            );

            &:hover,
            &.k-hover {
                @include fill(
                    $kendo-tabstrip-item-hover-text,
                    $kendo-tabstrip-item-hover-bg,
                    $kendo-tabstrip-item-hover-border,
                    $kendo-tabstrip-item-hover-gradient
                );
            }

            &:active,
            &.k-active,
            &.k-selected {
                @include fill(
                    $kendo-tabstrip-item-selected-text,
                    $kendo-tabstrip-item-selected-bg,
                    $kendo-tabstrip-item-selected-border,
                    $kendo-tabstrip-item-selected-gradient
                );
            }

            &:focus,
            &.k-focus {
                @include focus-indicator( $kendo-tabstrip-item-focus-shadow, true );
            }

            &.k-tabstrip-dragging {
                @include focus-indicator( $kendo-tabstrip-item-dragging-shadow );
            }


            // Disabled
            &.k-disabled,
            &[disabled] {
                @include fill(
                    $kendo-tabstrip-item-disabled-text,
                    $kendo-tabstrip-item-disabled-bg,
                    $kendo-tabstrip-item-disabled-border,
                    $kendo-tabstrip-item-disabled-gradient
                );
            }
        }

    }


    // Content
    .k-tabstrip-content,
    .k-tabstrip > .k-content {
        @include fill(
            $kendo-tabstrip-content-text,
            $kendo-tabstrip-content-bg,
            $kendo-tabstrip-content-border
        );

        &:focus,
        &.k-focus {
            outline-color: $kendo-tabstrip-content-focus-border;
        }
    }


    // Selected indicator
    @if ($kendo-tabstrip-indicator-size) {

        .k-tabstrip-items-wrapper {
            .k-item.k-active::after {
                border-color: $kendo-tabstrip-indicator-color;
            }
        }
    }

}


@mixin kendo-tabstrip--theme() {
    @include kendo-tabstrip--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-tabstrip--styles() {
    @include module-render( "tabstrip" ) {
        @include kendo-tabstrip--layout();
        @include kendo-tabstrip--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-tabstrip--styles();
}

// #endregion
// #region @import "./treeview/_index.scss"; -> scss/treeview/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./wizard/_index.scss"; -> scss/wizard/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "wizard",
    dependencies: (
        "button",
        "form",
        "icon",
        "stepper",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../stepper/_index.scss"; -> scss/stepper/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../forms/_index.scss"; -> scss/forms/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/wizard/_variables.scss
// Wizard

/// The horizontal padding of the Wizard.
/// @group wizard
$kendo-wizard-padding-x: calc( #{$kendo-padding-md-x} * 2.5 ) !default;
/// The vertical padding of the Wizard.
/// @group wizard
$kendo-wizard-padding-y: $kendo-wizard-padding-x !default;
/// The horizontal padding of the Wizard content.
/// @group wizard
$kendo-wizard-content-padding-x: calc( #{$kendo-padding-md-x} * 4 ) !default;
/// The vertical padding of the Wizard content.
/// @group wizard
$kendo-wizard-content-padding-y: calc( #{$kendo-padding-md-y} * 8 ) !default;
/// The horizontal margin of the Wizard's Button container.
/// @group wizard
$kendo-wizard-buttons-margin-x: k-spacing(2.5) !default;

/// The border width of the Wizard.
/// @group wizard
$kendo-wizard-border-width: 0px !default;
/// The font size of the Wizard.
/// @group wizard
$kendo-wizard-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Wizard.
/// @group wizard
$kendo-wizard-line-height: var( --kendo-line-height, normal ) !default;
/// The font family of the Wizard.
/// @group wizard
$kendo-wizard-font-family: var( --kendo-font-family, inherit ) !default;

/// The outline of the focused Wizard step.
/// @group wizard
$kendo-wizard-step-focus-border: #656565 !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/wizard/_layout.scss
@mixin kendo-wizard--layout-base() {

    // Wizard
    .k-wizard {
        padding-block: $kendo-wizard-padding-y;
        padding-inline: $kendo-wizard-padding-x;
        border-width: $kendo-wizard-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-size: $kendo-wizard-font-size;
        line-height: $kendo-wizard-line-height;
        font-family: $kendo-wizard-font-family;
        position: relative;
        color: inherit;
        background: none;
        display: flex;
        align-items: stretch;
        overflow: hidden;

        .k-wizard-steps {
            box-sizing: border-box;
            display: flex;
            overflow: hidden;
        }

        .k-wizard-step {
            box-sizing: border-box;
            padding: calc(#{k-math-div( $kendo-wizard-content-padding-x, 4 )} + 2px);
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: space-between;

            &:focus,
            &.k-focus {
                outline-width: 1px;
                outline-style: dotted;
                outline-offset: -1px;
            }
        }

        .k-wizard-content {
            box-sizing: border-box;
            overflow-y: auto;
        }

        .k-wizard-buttons {
            margin-top: $kendo-wizard-content-padding-y;
            box-sizing: border-box;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;

            .k-button {
                margin-right: $kendo-wizard-buttons-margin-x;
            }

            .k-wizard-pager {
                vertical-align: middle;
            }
        }

        .k-wizard-buttons-right {
            .k-button:last-of-type {
                margin-right: 0;
            }
        }

        .k-stepper {
            .k-step-list-vertical {
                .k-step {
                    flex: 1 0 auto;
                }
            }

            .k-step-indicator {
                flex-shrink: 0;
            }
        }
    }

    .k-wizard-horizontal {
        flex-direction: column;

        .k-wizard-steps {
            margin-top: $kendo-wizard-content-padding-y;
        }

        .k-wizard-steps,
        .k-wizard-content {
            flex: 1 1 auto;
        }
    }

    .k-wizard-vertical {

        .k-wizard-steps {
            margin-left: $kendo-wizard-content-padding-x;
            flex: 1 0 0%;
        }

        .k-wizard-content {
            flex: 1 1 0%;
        }

    }

    .k-wizard-left {
        flex-direction: row-reverse;

        .k-wizard-steps {
            margin-right: $kendo-wizard-content-padding-x;
            margin-left: 0;
        }
    }

}


@mixin kendo-wizard--layout() {
    @include kendo-wizard--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/wizard/_theme.scss
@mixin kendo-wizard--theme-base() {

    .k-wizard-step {
        &:focus,
        &.k-focus {
            outline-color: $kendo-wizard-step-focus-border;
        }
    }

}


@mixin kendo-wizard--theme() {
    @include kendo-wizard--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-wizard--styles() {
    @include module-render( "wizard" ) {
        @include kendo-wizard--layout();
        @include kendo-wizard--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-wizard--styles();
}

// #endregion


// Layout & containers
// #region @import "./card/_index.scss"; -> scss/card/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./expansion-panel/_index.scss"; -> scss/expansion-panel/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "expander",
    dependencies: (
        "icon",
        "list",
        // "utils/layout/display",
    )
);


// Dependencies
// @import "../utils/_display.scss";
// @import "../utils/_spacer.scss";
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/expansion-panel/_variables.scss
// ExpansionPanel

/// The vertical spacing of the ExpansionPanel.
/// @group expander
$kendo-expander-spacing-y: k-spacing(2) !default;
/// The width of the border around the ExpansionPanel.
/// @group expander
$kendo-expander-border-width: 1px !default;
/// The font family of the ExpansionPanel.
/// @group expander
$kendo-expander-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the ExpansionPanel.
/// @group expander
$kendo-expander-font-size: var( --kendo-font-size, inherit ) !default;
/// The hine height of the ExpansionPanel.
/// @group expander
$kendo-expander-line-height: var( --kendo-line-height, normal ) !default;

/// The text color of the ExpansionPanel.
/// @group expander
$kendo-expander-text: $kendo-component-text !default;
/// The background color of the ExpansionPanel.
/// @group expander
$kendo-expander-bg: $kendo-component-bg !default;
/// The border color of the ExpansionPanel.
/// @group expander
$kendo-expander-border: $kendo-component-border !default;

/// The box shadow of the focused ExpansionPanel.
/// @group expander
$kendo-expander-focus-shadow: $kendo-list-item-focus-shadow !default;

/// The horizontal padding of the ExpansionPanel header.
/// @group expander
$kendo-expander-header-padding-x: k-spacing(4) !default;
/// The vertical padding of the ExpansionPanel header.
/// @group expander
$kendo-expander-header-padding-y: k-spacing(3) !default;

/// The text color of the ExpansionPanel header.
/// @group expander
$kendo-expander-header-text: $kendo-expander-text !default;
/// The background color of the ExpansionPanel header.
/// @group expander
$kendo-expander-header-bg: transparent !default;
/// The border color of the ExpansionPanel header.
/// @group expander
$kendo-expander-header-border: null !default;

/// The background color of the hovered ExpansionPanel header.
/// @group expander
$kendo-expander-header-hover-bg: rgba(0, 0, 0, .04) !default;
/// The background color of the focused ExpansionPanel header.
/// @group expander
$kendo-expander-header-focus-bg: null !default;
/// The box shadow of the focused ExpansionPanel header.
/// @group expander
$kendo-expander-header-focus-shadow: $kendo-list-item-focus-shadow !default;

/// The text color of the ExpansionPanel title.
/// @group expander
$kendo-expander-title-text: $kendo-color-primary !default;

/// The text color of the ExpansionPanel sub-title.
/// @group expander
$kendo-expander-header-sub-title-text: $kendo-subtle-text !default;

/// The horizontal margin of the ExpansionPanel indicator.
/// @group expander
$kendo-expander-indicator-margin-x: k-spacing(3) !default;

/// The horizontal padding of the ExpansionPanel content.
/// @group expander
$kendo-expander-content-padding-x: k-spacing(4) !default;
/// The vertical padding of the ExpansionPanel content.
/// @group expander
$kendo-expander-content-padding-y: k-spacing(4) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/expansion-panel/_layout.scss
@mixin kendo-expander--layout-base() {

    // Base
    .k-expander {
        border-width: $kendo-expander-border-width;
        border-style: solid;
        box-sizing: border-box;
        overflow: hidden;
        outline: 0;
        font-family: $kendo-expander-font-family;
        font-size: $kendo-expander-font-size;
        line-height: $kendo-expander-line-height;
        display: flex;
        flex-direction: column;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

        .k-rtl &,
        &.k-rtl,
        &[dir = "rtl"] {
            // Expand / collapse icon
            .k-expander-indicator {
                margin-left: 0;
                margin-right: $kendo-expander-indicator-margin-x;
            }
        }
    }

    // Header
    .k-expander-header {
        padding-block: $kendo-expander-header-padding-y;
        padding-inline: $kendo-expander-header-padding-x;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    // Expander spacer
    .k-expander-spacer {
        flex: 1 1 auto;
    }

    // Title
    .k-expander-title {
        text-transform: uppercase;
        font-weight: 500;
    }

    // Expand / collapse icon
    .k-expander-indicator {
        margin-left: $kendo-expander-indicator-margin-x;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    // Expander content
    .k-expander-content {
        padding-block: $kendo-expander-content-padding-y;
        padding-inline: $kendo-expander-content-padding-x;
    }

    // Multiple expanders
    .k-expander + .k-expander.k-expanded,
    .k-expander.k-expanded + .k-expander {
        margin-top: $kendo-expander-spacing-y;
    }

    .k-expander:not(.k-expanded) + .k-expander:not(.k-expanded) {
        border-top-width: 0;
    }
}


@mixin kendo-expander--layout() {
    @include kendo-expander--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/expansion-panel/_theme.scss
@mixin kendo-expander--theme-base() {

    .k-expander {
        @include fill(
            $kendo-expander-text,
            $kendo-expander-bg,
            $kendo-expander-border
        );

        &.k-focus {
            @include focus-indicator( $kendo-expander-focus-shadow, true );
        }
    }

    .k-expander-header {
        @include fill(
            $kendo-expander-header-text,
            $kendo-expander-header-bg,
            $kendo-expander-header-border
        );
        outline: none;

        &:hover,
        &.k-hover {
            background-color: $kendo-expander-header-hover-bg;
        }

        &.k-focus {
            @include focus-indicator( $kendo-expander-header-focus-shadow, true );
            background-color: $kendo-expander-header-focus-bg;
        }
    }

    .k-expander-title {
        color: $kendo-expander-title-text;
    }

    .k-expander-sub-title {
        color: $kendo-expander-header-sub-title-text;
    }
}


@mixin kendo-expander--theme() {
    @include kendo-expander--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-expander--styles() {
    @include module-render( "expander" ) {
        @include kendo-expander--layout();
        @include kendo-expander--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-expander--styles();
}

// #endregion
// #region @import "./panel/_index.scss"; -> scss/panel/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "panel",
    dependencies: ()
);


// Dependencies


// Component
// #region @import "./_variables.scss"; -> scss/panel/_variables.scss

/// The border radius of the Panel.
/// @group panel
$kendo-panel-border-radius: k-border-radius(md);
/// The width of the border around the Panel.
/// @group panel
$kendo-panel-border-width: 1px;
/// The style of the border around the Panel.
/// @group panel
$kendo-panel-border-style: solid;

/// The inline padding of the Panel header.
/// @group panel
$kendo-panel-header-padding-inline: k-spacing(2);
/// The block padding of the Panel header.
/// @group panel
$kendo-panel-header-padding-block: k-spacing(1);

/// The inline padding of the Panel content.
/// @group panel
$kendo-panel-content-padding-inline: k-spacing(2);
/// The block padding of the Panel content.
/// @group panel
$kendo-panel-content-padding-block: k-spacing(1);

/// The text color of the Panel.
/// @group panel
$kendo-panel-text: var(--kendo-component-text, #{$kendo-component-text});
/// The background color of the Panel.
/// @group panel
$kendo-panel-bg: var(--kendo-component-bg, #{$kendo-component-bg});
/// The color of the border around the Panel.
/// @group panel
$kendo-panel-border: var(--kendo-component-border, #{$kendo-component-border});

// #endregion
// #region @import "./_layout.scss"; -> scss/panel/_layout.scss
@mixin kendo-panel--layout--base() {
        // Panels
        .k-block,
        .k-panel {
            @include border-radius( $kendo-panel-border-radius );
            padding: 0;
            border-width: $kendo-panel-border-width;
            border-style: $kendo-panel-border-style;
            box-sizing: border-box;

            > .k-header {
                @include border-top-radius( $kendo-panel-border-radius );
                @include fill(
                    var( --kendo-component-text, #{$kendo-component-text} ),
                    var( --kendo-component-bg, #{$kendo-component-bg} ),
                    var( --kendo-component-border, #{$kendo-component-border} )
                );
                padding-inline: $kendo-panel-header-padding-inline;
                padding-block: $kendo-panel-header-padding-block;
            }
            > .k-content {
                padding-inline: $kendo-panel-content-padding-inline;
                padding-block: $kendo-panel-content-padding-block;
            }
        }
}

@mixin kendo-panel--layout() {
    @include kendo-panel--layout--base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/panel/_theme.scss
@mixin kendo-panel--theme--base() {
    // Panels
    .k-block,
    .k-panel {
        @include fill(
            $kendo-panel-text,
            $kendo-panel-bg,
            $kendo-panel-border
        );
    }

    :where(.k-content) {
        @include fill(
            $kendo-panel-text,
            $kendo-panel-bg,
            $kendo-panel-border
        );
    }
}

@mixin kendo-panel--theme() {
    @include kendo-panel--theme--base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-panel--styles() {
    @include module-render( "panel" ) {
        @include kendo-panel--layout();
        @include kendo-panel--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-panel--styles();
}

// #endregion
// #region @import "./panelbar/_index.scss"; -> scss/panelbar/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "panelbar",
    dependencies: (
        "icon",
        "list",
    )
);


// Dependencies
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/panelbar/_variables.scss
// Panelbar

/// The horizontal padding of the PanelBar.
/// @group panelbar
$kendo-panelbar-padding-x: k-spacing(0) !default;
/// The vertical padding of the PanelBar.
/// @group panelbar
$kendo-panelbar-padding-y: k-spacing(0) !default;
/// The font family of the PanelBar.
/// @group panelbar
$kendo-panelbar-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the PanelBar.
/// @group panelbar
$kendo-panelbar-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the PanelBar.
/// @group panelbar
$kendo-panelbar-line-height: var( --kendo-line-height, normal ) !default;
/// The width of the border around the PanelBar.
/// @group panelbar
$kendo-panelbar-border-width: 1px !default;
/// The border style around the the PanelBar.
/// @group panelbar
$kendo-panelbar-border-style: solid !default;
/// The width of the border around the PanelBar items.
/// @group panelbar
$kendo-panelbar-item-border-width: 1px !default;
/// The style of the border around the PanelBar items.
/// @group panelbar
$kendo-panelbar-item-border-style: solid !default;

/// The horizontal padding of the PanelBar header.
/// @group panelbar
$kendo-panelbar-header-padding-x: k-spacing(4) !default;
/// The vertical padding of the PanelBar header.
/// @group panelbar
$kendo-panelbar-header-padding-y: k-spacing(3) !default;

/// The horizontal padding of the PanelBar items.
/// @group panelbar
$kendo-panelbar-item-padding-x: k-spacing(4) !default;
/// The vertical padding of the PanelBar items.
/// @group panelbar
$kendo-panelbar-item-padding-y: k-spacing(2) !default;

/// The maximum nesting of the PanelBar items.
/// @group panelbar
$kendo-panelbar-item-level-count: 4 !default;

/// The background color of the PanelBar.
/// @group panelbar
$kendo-panelbar-bg: $kendo-component-bg !default;
/// The text color of the PanelBar.
/// @group panelbar
$kendo-panelbar-text: $kendo-component-text !default;
/// The border color of the PanelBar.
/// @group panelbar
$kendo-panelbar-border: $kendo-component-border !default;

/// The background color of the PanelBar header.
/// @group panelbar
$kendo-panelbar-header-bg: $kendo-panelbar-bg !default;
/// The text color of the PanelBar header.
/// @group panelbar
$kendo-panelbar-header-text: $kendo-link-text !default;
/// The border color of the PanelBar header.
/// @group panelbar
$kendo-panelbar-header-border: null !default;
/// The gradient of the PanelBar header.
/// @group panelbar
$kendo-panelbar-header-gradient: null !default;

/// The background color of the hovered PanelBar header.
/// @group panelbar
$kendo-panelbar-header-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 )) !default;
/// The text color of the hovered PanelBar header.
/// @group panelbar
$kendo-panelbar-header-hover-text: null !default;
/// The border color of the hovered PanelBar header.
/// @group panelbar
$kendo-panelbar-header-hover-border: null !default;
/// The gradient of the hovered PanelBar header.
/// @group panelbar
$kendo-panelbar-header-hover-gradient: null !default;

/// The background color of the focused PanelBar header.
/// @group panelbar
$kendo-panelbar-header-focus-bg: null !default;
/// The text color of the focused PanelBar header.
/// @group panelbar
$kendo-panelbar-header-focus-text: null !default;
/// The border color of the focused PanelBar header.
/// @group panelbar
$kendo-panelbar-header-focus-border: null !default;
/// The gradient of the focused PanelBar header.
/// @group panelbar
$kendo-panelbar-header-focus-gradient: null !default;
/// The shadow of the focused PanelBar header.
/// @group panelbar
$kendo-panelbar-header-focus-shadow: $kendo-list-item-focus-shadow !default;

/// The background color of the focused and hovered PanelBar header.
/// @group panelbar
$kendo-panelbar-header-hover-focus-bg: null !default;
/// The text color of the focused and hovered PanelBar header.
/// @group panelbar
$kendo-panelbar-header-hover-focus-text: null !default;
/// The border color of the focused and hovered PanelBar header.
/// @group panelbar
$kendo-panelbar-header-hover-focus-border: null !default;
/// The gradient of the focused and hovered PanelBar header.
/// @group panelbar
$kendo-panelbar-header-hover-focus-gradient: null !default;

/// The background color of the selected PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-bg: $kendo-selected-bg !default;
/// The text color of the selected PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-text: $kendo-selected-text !default;
/// The border color of the selected PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-border: null !default;
/// The gradient of the selected PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-gradient: null !default;

/// The background color of the selected and hovered PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg )) !default;
/// The text color of the selected and hovered PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-hover-text: null !default;
/// The border color of the selected and hovered PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-hover-border: null !default;
/// The gradient of the selected and hovered PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-hover-gradient: null !default;

/// The background color of the selected and focused PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-focus-bg: null !default;
/// The text color of the selected and focused PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-focus-text: null !default;
/// The border color of the selected and focused PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-focus-border: null !default;
/// The gradient of the selected and focused PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-focus-gradient: null !default;

/// The background color of the selected, hovered and focused PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-hover-focus-bg: null !default;
/// The text color of the selected, hovered and focused PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-hover-focus-text: null !default;
/// The border color of the selected, hovered and focused PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-hover-focus-border: null !default;
/// The gradient of the selected, hovered and focused PanelBar header.
/// @group panelbar
$kendo-panelbar-header-selected-hover-focus-gradient: null !default;

/// The background color of the hovered PanelBar items.
/// @group panelbar
$kendo-panelbar-item-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, .5 )) !default;
/// The text color of the hovered PanelBar items.
/// @group panelbar
$kendo-panelbar-item-hover-text: null !default;
/// The border color of the hovered PanelBar items.
/// @group panelbar
$kendo-panelbar-item-hover-border: null !default;
/// The gradient of the hovered PanelBar items.
/// @group panelbar
$kendo-panelbar-item-hover-gradient: null !default;

/// The background color of the focused PanelBar items.
/// @group panelbar
$kendo-panelbar-item-focus-bg: null !default;
/// The text color of the focused PanelBar items.
/// @group panelbar
$kendo-panelbar-item-focus-text: null !default;
/// The border color of the focused PanelBar items.
/// @group panelbar
$kendo-panelbar-item-focus-border: null !default;
/// The gradient of the focused PanelBar items.
/// @group panelbar
$kendo-panelbar-item-focus-gradient: null !default;
/// The box shadow of the focused PanelBar items.
/// @group panelbar
$kendo-panelbar-item-focus-shadow: $kendo-list-item-focus-shadow !default;

/// The background color of the focused and hovered PanelBar items.
/// @group panelbar
$kendo-panelbar-item-hover-focus-bg: null !default;
/// The text color of the focused and hovered PanelBar items.
/// @group panelbar
$kendo-panelbar-item-hover-focus-text: null !default;
/// The border color of the focused and hovered PanelBar items.
/// @group panelbar
$kendo-panelbar-item-hover-focus-border: null !default;
/// The gradient of the focused and hovered PanelBar items.
/// @group panelbar
$kendo-panelbar-item-hover-focus-gradient: null !default;

/// The background color of the selected PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-bg: $kendo-selected-bg !default;
/// The text color of the selected PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-text: $kendo-selected-text !default;
/// The border color of the selected PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-border: null !default;
/// The gradient of the selected PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-gradient: null !default;

/// The background color of the selected and hovered PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg )) !default;
/// The text color of the selected and hovered PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-hover-text: null !default;
/// The border color of the selected and hovered PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-hover-border: null !default;
/// The gradient of the selected and hovered PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-hover-gradient: null !default;

/// The background color of the selected and focused PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-focus-bg: null !default;
/// The text color of the selected and focused PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-focus-text: null !default;
/// The border color of the selected and focused PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-focus-border: null !default;
/// The gradient of the selected and focused PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-focus-gradient: null !default;

/// The background color of the selected, hovered and focused PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-hover-focus-bg: null !default;
/// The text color of the selected, hovered and focused PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-hover-focus-text: null !default;
/// The border color of the selected, hovered and focused PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-hover-focus-border: null !default;
/// The gradient of the selected, hovered and focused PanelBar items.
/// @group panelbar
$kendo-panelbar-item-selected-hover-focus-gradient: null !default;

/// The background color of the expanded PanelBar header.
/// @group panelbar
$kendo-panelbar-header-expanded-bg: null !default;
/// The text color of the expanded PanelBar header.
/// @group panelbar
$kendo-panelbar-header-expanded-text: null !default;
/// The border color of the expanded PanelBar header.
/// @group panelbar
$kendo-panelbar-header-expanded-border: null !default;
/// The gradient of the expanded PanelBar header.
/// @group panelbar
$kendo-panelbar-header-expanded-gradient: null !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/panelbar/_layout.scss
@mixin kendo-panelbar--layout-base() {

    // Base
    .k-panelbar {
        margin: 0;
        padding: 0;
        border-width: $kendo-panelbar-border-width;
        border-style: $kendo-panelbar-border-style;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-panelbar-font-family;
        font-size: $kendo-panelbar-font-size;
        line-height: $kendo-panelbar-line-height;
        list-style: none;
        display: block;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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


        // Root
        > .k-panelbar-header {
            // TODO
            border-width: 0;
            border-style: $kendo-panelbar-item-border-style;
            border-color: inherit;
            display: block;

            > .k-link {
                padding-block: $kendo-panelbar-header-padding-y;
                padding-inline: $kendo-panelbar-header-padding-x;
                color: inherit;
                background: none;
                text-decoration: none;
                font-weight: 500;
                display: flex;
                flex-flow: row nowrap;
                gap: $kendo-icon-spacing;
                align-items: center;
                align-content: center;
                position: relative;
                user-select: none;
                cursor: default;
                transition: $kendo-transition;
            }
        }
        > .k-panelbar-header + .k-panelbar-header {
            border-top-width: $kendo-panelbar-item-border-width;
        }


        // Sub
        .k-panelbar-group {
            margin: 0;
            padding: 0;
            border-width: 0;
            border-color: inherit;
            color: inherit;
            background-color: transparent;
            list-style: none;
        }
        .k-panelbar-group > .k-panelbar-item {
            display: block;

            > .k-link {
                padding-block: $kendo-panelbar-item-padding-y;
                padding-inline: $kendo-panelbar-item-padding-x;
                color: inherit;
                text-decoration: none;
                display: flex;
                flex-flow: row nowrap;
                gap: $kendo-icon-spacing;
                align-items: center;
                align-content: center;
                position: relative;
                user-select: none;
                cursor: default;
                transition: $kendo-transition;
            }

            // Hierarchy items
            @for $i from 1 through $kendo-panelbar-item-level-count {
                &.k-level-#{$i} {
                    .k-link {
                        padding-left: calc( #{$kendo-panelbar-item-padding-x} * #{$i} );
                    }
                }
            }
        }

        // Panelbar item
        .k-panelbar-item {
            outline-style: none;
        }

        // Panelbar content
        .k-panelbar-content {
            display: flow-root;
        }


        // Toggle icon
        .k-panelbar-expand,
        .k-panelbar-collapse,
        .k-panelbar-toggle {
            margin-inline-start: auto;
        }
        .k-panelbar-group .k-panelbar-expand,
        .k-panelbar-group .k-panelbar-collapse,
        .k-panelbar-group .k-panelbar-toggle {
            margin-inline-end: calc( #{$kendo-panelbar-header-padding-x} - #{$kendo-panelbar-item-padding-x} );
        }


        .k-rtl &,
        &.k-rtl,
        &[dir = "rtl"] {
            .k-panelbar-group > .k-panelbar-item {
                // Hierarchy items
                @for $i from 1 through $kendo-panelbar-item-level-count {
                    &.k-level-#{$i} {
                        .k-link {
                            padding-left: $kendo-panelbar-item-padding-x;
                            padding-right: calc( #{$kendo-panelbar-item-padding-x} * #{$i} );
                        }
                    }
                }
            }
        }

    }

}


@mixin kendo-panelbar--layout() {
    @include kendo-panelbar--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/panelbar/_theme.scss
@mixin kendo-panelbar--theme-base() {

    // Panelbar
    .k-panelbar {
        @include fill(
            $kendo-panelbar-text,
            $kendo-panelbar-bg,
            $kendo-panelbar-border
        );


        // Root
        > .k-panelbar-header {

            &.k-expanded.k-level-0 > .k-link  {
                @include fill(
                    $kendo-panelbar-header-expanded-text,
                    $kendo-panelbar-header-expanded-bg,
                    $kendo-panelbar-header-expanded-border,
                    $kendo-panelbar-header-expanded-gradient
                );
            }

            // Normal
            > .k-link {
                @include fill(
                    $kendo-panelbar-header-text,
                    $kendo-panelbar-header-bg,
                    $kendo-panelbar-header-border,
                    $kendo-panelbar-header-gradient
                );

                .k-icon,
                .k-panelbar-item-icon {
                    color: $kendo-panelbar-text;
                }
            }

            // Hover
            > .k-link:hover,
            > .k-link.k-hover {
                @include fill(
                    $kendo-panelbar-header-hover-text,
                    $kendo-panelbar-header-hover-bg,
                    $kendo-panelbar-header-hover-border,
                    $kendo-panelbar-header-hover-gradient
                );
            }

            // Focus
            > .k-link:focus,
            > .k-link.k-focus {
                @include fill(
                    $kendo-panelbar-header-focus-text,
                    $kendo-panelbar-header-focus-bg,
                    $kendo-panelbar-header-focus-border,
                    $kendo-panelbar-header-focus-gradient
                );
                @include focus-indicator( $kendo-panelbar-header-focus-shadow, true );
            }

            // Focus & Hover
            > .k-link:focus:hover,
            > .k-link.k-focus.k-hover {
                @include fill(
                    $kendo-panelbar-header-hover-focus-text,
                    $kendo-panelbar-header-hover-focus-bg,
                    $kendo-panelbar-header-hover-focus-border,
                    $kendo-panelbar-header-hover-focus-gradient
                );
            }

            // Selected
            > .k-link.k-selected {
                @include fill(
                    $kendo-panelbar-header-selected-text,
                    $kendo-panelbar-header-selected-bg,
                    $kendo-panelbar-header-selected-border,
                    $kendo-panelbar-header-selected-gradient
                );

                .k-icon,
                .k-panelbar-item-icon {
                    color: inherit;
                }
            }

            // Selected Hover
            > .k-link.k-selected:hover,
            > .k-link.k-selected.k-hover {
                @include fill(
                    $kendo-panelbar-header-selected-hover-text,
                    $kendo-panelbar-header-selected-hover-bg,
                    $kendo-panelbar-header-selected-hover-border,
                    $kendo-panelbar-header-selected-hover-gradient
                );
            }

            // Selected Focus
            > .k-link.k-selected:focus,
            > .k-link.k-selected.k-focus {
                @include fill(
                    $kendo-panelbar-header-selected-focus-text,
                    $kendo-panelbar-header-selected-focus-bg,
                    $kendo-panelbar-header-selected-focus-border,
                    $kendo-panelbar-header-selected-focus-gradient
                );
            }

            // Selected Focus & Hover
            > .k-link.k-selected:hover:focus,
            > .k-link.k-selected.k-hover.k-focus {
                @include fill(
                    $kendo-panelbar-header-selected-hover-focus-text,
                    $kendo-panelbar-header-selected-hover-focus-bg,
                    $kendo-panelbar-header-selected-hover-focus-border,
                    $kendo-panelbar-header-selected-hover-focus-gradient
                );
            }
        }


        // Sub
        .k-panelbar-group {

            // Hover
            > .k-panelbar-item > .k-link:hover,
            > .k-panelbar-item > .k-link.k-hover {
                @include fill(
                    $kendo-panelbar-item-hover-text,
                    $kendo-panelbar-item-hover-bg,
                    $kendo-panelbar-item-hover-border,
                    $kendo-panelbar-item-hover-gradient
                );
            }

            // Focus
            > .k-panelbar-item > .k-link:focus,
            > .k-panelbar-item > .k-link.k-focus {
                @include fill(
                    $kendo-panelbar-item-focus-text,
                    $kendo-panelbar-item-focus-bg,
                    $kendo-panelbar-item-focus-border,
                    $kendo-panelbar-item-focus-gradient
                );
                @include focus-indicator( $kendo-panelbar-item-focus-shadow, true );
            }

            // Focus & Hover
            > .k-panelbar-item > .k-link:focus:hover,
            > .k-panelbar-item > .k-link.k-focus.k-hover {
                @include fill(
                    $kendo-panelbar-item-hover-focus-text,
                    $kendo-panelbar-item-hover-focus-bg,
                    $kendo-panelbar-item-hover-focus-border,
                    $kendo-panelbar-item-hover-focus-gradient
                );
            }

            // Selected
            > .k-panelbar-item > .k-link.k-selected {
                @include fill(
                    $kendo-panelbar-item-selected-text,
                    $kendo-panelbar-item-selected-bg,
                    $kendo-panelbar-item-selected-border,
                    $kendo-panelbar-item-selected-gradient
                );
            }

            // Selected Hover
            > .k-panelbar-item > .k-link.k-selected:hover,
            > .k-panelbar-item > .k-link.k-selected.k-hover {
                @include fill(
                    $kendo-panelbar-item-selected-hover-text,
                    $kendo-panelbar-item-selected-hover-bg,
                    $kendo-panelbar-item-selected-hover-border,
                    $kendo-panelbar-item-selected-hover-gradient
                );
            }

            // Selected Focus
            > .k-panelbar-item > .k-link.k-selected:focus,
            > .k-panelbar-item > .k-link.k-selected.k-focus {
                @include fill(
                    $kendo-panelbar-item-selected-focus-text,
                    $kendo-panelbar-item-selected-focus-bg,
                    $kendo-panelbar-item-selected-focus-border,
                    $kendo-panelbar-item-selected-focus-gradient
                );
            }

            // Selected Focus & Hover
            > .k-panelbar-item > .k-link.k-selected:focus:hover,
            > .k-panelbar-item > .k-link.k-selected.k-focus.k-hover {
                @include fill(
                    $kendo-panelbar-item-selected-hover-focus-text,
                    $kendo-panelbar-item-selected-hover-focus-bg,
                    $kendo-panelbar-item-selected-hover-focus-border,
                    $kendo-panelbar-item-selected-hover-focus-gradient
                );
            }
        }

    }

}


@mixin kendo-panelbar--theme() {
    @include kendo-panelbar--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-panelbar--styles() {
    @include module-render( "panelbar" ) {
        @include kendo-panelbar--layout();
        @include kendo-panelbar--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-panelbar--styles();
}

// #endregion
// #region @import "./splitter/_index.scss"; -> scss/splitter/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "splitter",
    dependencies: (
        "draggable",
        "icon",
        // "resizable",
    )
);


// Dependencies
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/splitter/_variables.scss
// Splitter

/// The width of the border around the Splitter.
/// @group splitter
$kendo-splitter-border-width: 1px !default;
/// The font family of the Splitter.
/// @group splitter
$kendo-splitter-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Splitter.
/// @group splitter
$kendo-splitter-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Splitter.
/// @group splitter
$kendo-splitter-line-height: var( --kendo-line-height, normal ) !default;

/// The background color of the Splitter.
/// @group splitter
$kendo-splitter-bg: $kendo-component-bg !default;
/// The text color of the Splitter.
/// @group splitter
$kendo-splitter-text: $kendo-component-text !default;
/// The border color of the Splitter.
/// @group splitter
$kendo-splitter-border: $kendo-component-border !default;

/// The size of the Splitter split bar.
/// @group splitter
$kendo-splitter-splitbar-size: k-spacing(3) !default;
/// The length of the Splitter drag handle.
/// @group splitter
$kendo-splitter-drag-handle-length: 20px !default;
/// The thickness of the Splitter drag handle.
/// @group splitter
$kendo-splitter-drag-handle-thickness: 2px !default;
/// The margin of the Splitter drag handle icon.
/// @group splitter
$kendo-splitter-drag-icon-margin: calc( #{k-spacing(3.5)} / 2 ) !default;
/// The horizontal padding of the collapse icon in the Splitter.
/// @group splitter
$kendo-splitter-collapse-icon-padding-x: null !default;
/// The vertical padding of the collapse icon in the Splitter.
/// @group splitter
$kendo-splitter-collapse-icon-padding-y: k-spacing(0.5) !default;

/// The background color of the Splitter split bar.
/// @group splitter
$kendo-splitbar-bg: $kendo-base-bg !default;
/// The text color of the Splitter split bar.
/// @group splitter
$kendo-splitbar-text: $kendo-base-text !default;

/// The hover background color of the Splitter split bar.
/// @group splitter
$kendo-splitbar-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 )) !default;
/// The hover text color of the Splitter split bar.
/// @group splitter
$kendo-splitbar-hover-text: $kendo-splitbar-text !default;

/// The selected background color of the Splitter split bar.
/// @group splitter
$kendo-splitbar-selected-bg: $kendo-selected-bg !default;
/// The selected text color of the Splitter split bar.
/// @group splitter
$kendo-splitbar-selected-text: $kendo-selected-text !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/splitter/_layout.scss
@mixin kendo-splitter--layout-base() {

    // Base
    .k-splitter {
        height: 300px;
        border-width: $kendo-splitter-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-splitter-font-family;
        font-size: $kendo-splitter-font-size;
        line-height: $kendo-splitter-line-height;
        display: block;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        // Pane
        .k-pane {
            overflow: hidden;
            box-sizing: border-box;
        }
        .k-scrollable {
            overflow: auto;
        }
        .k-splitter-resizing {
            overflow: hidden;
        }

        // Nested
        .k-pane > & {
            border-width: 0;
            overflow: hidden;
        }

        // Loading
        .k-pane-loading {
            position: static;
            top: 50%;
            left: 50%;
        }

    }


    // Splitbar
    .k-ghost-splitbar,
    .k-splitbar {
        border-style: solid;
        outline: 0;
        position: absolute;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;

        .k-collapse-prev,
        .k-collapse-next {
            cursor: pointer;
            padding: $kendo-splitter-collapse-icon-padding-y $kendo-splitter-collapse-icon-padding-x;
        }

    }

    .k-splitbar-draggable-horizontal { cursor: col-resize; }
    .k-splitbar-draggable-vertical { cursor: row-resize; }

    .k-ghost-splitbar-horizontal,
    .k-splitbar-horizontal {
        width: $kendo-splitter-splitbar-size;
        border-width: 0;
        background-repeat: repeat-y;
        flex-direction: column;
        top: 0;
    }
    .k-ghost-splitbar-vertical,
    .k-splitbar-vertical {
        height: $kendo-splitter-splitbar-size;
        border-width: 0;
        background-repeat: repeat-x;
        flex-direction: row;
        left: 0;
    }

    .k-splitbar-static-horizontal { width: 1px; }
    .k-splitbar-static-vertical { height: 1px; }

    .k-splitbar-draggable-horizontal .k-resize-handle {
        width: $kendo-splitter-drag-handle-thickness;
        height: $kendo-splitter-drag-handle-length;
        position: static;
        z-index: 1;
    }

    .k-splitbar .k-resize-handle {
        display: none;
        background-color: currentColor;
    }

    .k-splitbar-draggable-horizontal,
    .k-splitbar-draggable-vertical {

        .k-resize-handle {
            display: block;
        }
    }

    .k-splitbar-horizontal .k-collapse-prev {
        margin-bottom: $kendo-splitter-drag-icon-margin;
    }

    .k-splitbar-horizontal .k-collapse-next {
        margin-top: $kendo-splitter-drag-icon-margin;
    }

    .k-splitbar-vertical .k-collapse-prev {
        margin-right: $kendo-splitter-drag-icon-margin;
    }

    .k-splitbar-vertical .k-collapse-next {
        margin-left: $kendo-splitter-drag-icon-margin;
    }

    .k-splitbar-draggable-vertical .k-resize-handle {
        width: $kendo-splitter-drag-handle-length;
        height: $kendo-splitter-drag-handle-thickness;
        position: static;
        z-index: 1;
    }

    .k-pane > .k-splitter-overlay {
        opacity: 0;
        position: absolute;
    }

    // flexbox-based splitter

    .k-splitter-flex {
        display: flex;
        width: 100%;
        height: auto;

        .k-pane {
            position: relative;
            flex: 1 1 auto;
            min-width: 0;
            max-width: 100%;
            min-height: 0;
            max-height: 100%;
            height: 100%; // allows nested elements to use height: 100%
        }

        .k-pane-static {
            flex-grow: 0;
            flex-shrink: 0;
        }

        .k-pane-flex {
            display: flex;
        }

        .k-splitbar {
            position: static;
            flex: 0 0 auto;
        }

        .k-pane,
        .k-pane-flex {
            &.k-hidden,
            &[hidden] {
                // hidden panes need to be zero-width to allow pane animation
                flex: 0 1 0% !important; // stylelint-disable-line declaration-no-important
                overflow: hidden !important; // stylelint-disable-line declaration-no-important
                display: block !important; // stylelint-disable-line declaration-no-important
            }
        }

        &.k-splitter-horizontal {
            flex-direction: row;
        }
        &.k-splitter-vertical {
            flex-direction: column;
        }
    }

}


@mixin kendo-splitter--layout() {
    @include kendo-splitter--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/splitter/_theme.scss
@mixin kendo-splitter--theme-base() {

    // Splitter
    .k-splitter {
        @include fill(
            $kendo-splitter-text,
            $kendo-splitter-bg,
            $kendo-splitter-border
        );
    }

    // Splitbar
    .k-splitbar {
        color: $kendo-splitbar-text;
        background-color: $kendo-splitbar-bg;
    }
    .k-splitbar:hover,
    .k-splitbar.k-hover,
    .k-splitbar-horizontal-hover,
    .k-splitbar-vertical-hover {
        color: $kendo-splitbar-hover-text;
        background-color: $kendo-splitbar-hover-bg;
    }
    .k-splitbar:focus,
    .k-splitbar.k-focus {
        color: $kendo-splitbar-selected-text;
        background: $kendo-splitbar-selected-bg;
    }

    // Ghost splitbar
    .k-ghost-splitbar {
        background-color: $kendo-splitbar-hover-bg;
    }

}


@mixin kendo-splitter--theme() {
    @include kendo-splitter--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-splitter--styles() {
    @include module-render( "splitter" ) {
        @include kendo-splitter--layout();
        @include kendo-splitter--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-splitter--styles();
}

// #endregion
// #region @import "./tilelayout/_index.scss"; -> scss/tilelayout/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "tile-layout",
    dependencies: (
        "card",
        "icon",
    )
);


// Dependencies
// #region @import "../card/_index.scss"; -> scss/card/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/tilelayout/_variables.scss
// TileLayout

/// The width of the border around the TileLayout.
/// @group tile-layout
$kendo-tile-layout-border-width: 0px !default;
/// The background color of the TileLayout.
/// @group tile-layout
$kendo-tile-layout-bg: $kendo-base-bg !default;

/// The horizontal padding of the TileLayout.
/// @group tile-layout
$kendo-tile-layout-padding-x: k-spacing(4) !default;

/// The vertical padding of the TileLayout
/// @group tile-layout
$kendo-tile-layout-padding-y: $kendo-tile-layout-padding-x !default;

/// The width of the border around the TileLayout card.
/// @group tile-layout
$kendo-tile-layout-card-border-width: $kendo-card-border-width !default;
/// The focus box shadow of the TileLayout card.
/// @group tile-layout
$kendo-tile-layout-card-focus-shadow: $kendo-card-focus-shadow !default;

/// The width of the border around the TileLayout hint.
/// @group tile-layout
$kendo-tile-layout-hint-border-width: 1px !default;
/// The radius of the border around the TileLayout hint.
/// @group tile-layout
$kendo-tile-layout-hint-border-radius: k-border-radius(lg) !default;
/// The color of the border around the TileLayout hint.
/// @group tile-layout
$kendo-tile-layout-hint-border: $kendo-component-border !default;
/// The background color of the TileLayout hint.
/// @group tile-layout
$kendo-tile-layout-hint-bg: rgba(255, 255, 255, .2) !default;




// #endregion
// #region @import "./_layout.scss"; -> scss/tilelayout/_layout.scss
@mixin kendo-tile-layout--layout-base() {

    .k-tilelayout {
        border-width: $kendo-tile-layout-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        display: grid;
        position: relative;
        padding: $kendo-tile-layout-padding-y $kendo-tile-layout-padding-x;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        .k-card {
            @include box-shadow( none );
            border-width: $kendo-tile-layout-card-border-width;
        }
    }

    .k-tilelayout-item {
        position: relative;
        z-index: 0;
    }

    .k-layout-item-hint {
        @include border-radius( $kendo-tile-layout-hint-border-radius );
        border-width: $kendo-tile-layout-hint-border-width;
        border-style: solid;
        position: relative;

        &.k-layout-item-hint-resize {
            z-index: 3;
        }
    }

    .k-tilelayout-item-header.k-card-header {
        z-index: 0;
    }

    .k-tilelayout-item-body {
        min-height: 0;
    }

}


@mixin kendo-tile-layout--layout() {
    @include kendo-tile-layout--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/tilelayout/_theme.scss
@mixin kendo-tile-layout--theme-base() {

    .k-tilelayout {
        @include fill(
            $bg: $kendo-tile-layout-bg
        );
    }

    .k-tilelayout-item:focus,
    .k-tilelayout-item.k-focus {
        @include focus-indicator($kendo-tile-layout-card-focus-shadow);
    }

    .k-layout-item-hint {
        @include fill(
            $bg: $kendo-tile-layout-hint-bg,
            $border: $kendo-tile-layout-hint-border
        );
    }

}


@mixin kendo-tile-layout--theme() {
    @include kendo-tile-layout--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-tile-layout--styles() {
    @include module-render( "tile-layout" ) {
        @include kendo-tile-layout--layout();
        @include kendo-tile-layout--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-tile-layout--styles();
}

// #endregion
// #region @import "./dock-manager/_index.scss"; -> scss/dock-manager/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion

// Module meta
$_kendo-module-meta: (
    name: "dock-manager",
    dependencies: (
        "splitter",
        "toolbar",
        "tabstrip"
    )
);

// Dependencies
// #region @import "../splitter/_index.scss"; -> scss/splitter/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../toolbar/_index.scss"; -> scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../tabstrip/_index.scss"; -> scss/tabstrip/_index.scss
// File already imported_once. Skipping output.
// #endregion

// Component
// #region @import "./_variables.scss"; -> scss/dock-manager/_variables.scss
///  The width of the border around the DockManager component.
/// @group dock-manager
$kendo-dock-manager-border-width: 1px !default;
/// The style of the border around the DockManager component.
/// @group dock-manager
$kendo-dock-manager-border-style: solid !default;
/// The color of the border around the DockManager component.
/// @group dock-manager
$kendo-dock-manager-border: $kendo-base-border !default;

/// The vertical padding of the pane header in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-pane-header-padding-y: k-spacing(2) !default;
/// The horizontal padding of the pane header in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-pane-header-padding-x: k-spacing(4) !default;
/// The width of the border around the pane header in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-border-width !default;
///  The style of the border around the pane header in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-pane-header-border-style: solid !default;
/// The background color of the pane header in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-pane-header-bg: $kendo-component-header-bg !default;

/// The vertical padding of the pane title in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-pane-title-padding-y: null !default;
/// The horizontal padding of the pane title in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-pane-title-padding-x: null !default;
/// The font family of the pane title in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-pane-title-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the pane title in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-pane-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
/// The line height of the pane title in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-pane-title-line-height: var( --kendo-line-height-sm, normal ) !default;
/// The font weight of the pane title in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-pane-title-font-weight: var( --kendo-font-weight-normal, normal ) !default;

/// The horizontal padding of the pane content in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-pane-content-padding-x: $kendo-dock-manager-pane-header-padding-x !default;
/// The vertical padding of the pane content in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-pane-content-padding-y: $kendo-dock-manager-pane-header-padding-x !default;

/// The horizontal padding of the tabbed pane in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-tabbed-pane-padding-y: k-spacing(3.5) !default;
/// The horizontal padding of the tabbed pane in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-tabbed-pane-padding-x: k-spacing(2) !default;

/// The width of the unpinned pane container in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-unpinned-container-width: 300px !default;
/// The background-color of the unpinned pane container in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-unpinned-container-bg: $kendo-color-white !default;
/// The box shadow of the unpinned pane container in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-unpinned-container-shadow: 4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03) !default;

/// The padding of the dock indicator in the DockManager component.
/// @group dock-manager
$kendo-dock-indicator-padding: k-spacing(1.5) !default;
/// The background color of the dock indicator in the DockManager component.
/// @group dock-manager
$kendo-dock-indicator-bg: #f5f5f5 !default;
/// The text color of the dock indicator in the DockManager component.
/// @group dock-manager
$kendo-dock-indicator-text: $kendo-color-primary !default;
/// The outline width of the dock indicator in the DockManager component.
/// @group dock-manager
$kendo-dock-indicator-outline-width: 1px !default;
/// The outline style of the dock indicator in the DockManager component.
/// @group dock-manager
$kendo-dock-indicator-outline-style: solid !default;
/// The outline color of the dock indicator in the DockManager component.
/// @group dock-manager
$kendo-dock-indicator-outline: $kendo-dock-indicator-text !default;
/// The box shadow of the dock indicator in the DockManager component.
/// @group dock-manager
$kendo-dock-indicator-shadow: drop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) drop-shadow( 0px 6px 10px rgba(0, 0, 0, 0.14) ) drop-shadow( 0px 3px 5px rgba(0, 0, 0, 0.20) ) !default;

///  The background color of the hovered dock indicator in the DockManager component.
/// @group dock-manager
$kendo-dock-indicator-hover-bg: $kendo-color-primary !default;
/// The text color of the hovered dock indicator in the DockManager component.
/// @group dock-manager
$kendo-dock-indicator-hover-text: $kendo-color-white !default;

/// The width of the border around the dropping area in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-dock-preview-border-width: 1px !default;
/// The style of the border around the dropping area in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-dock-preview-border-style: dashed !default;
/// The border radius of the dropping area in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-dock-preview-border-radius: k-border-radius(sm) !default;
/// The background color of the dropping area in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 )) !default;
/// The border color of the dropping area in the DockManager component.
/// @group dock-manager
$kendo-dock-manager-dock-preview-border: $kendo-color-primary !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/dock-manager/_layout.scss
@mixin kendo-dock-manager--layout-base() {

    // DockManager
    .k-dock-manager {
        width: 100%;
        height: 100%;
        border-width: $kendo-dock-manager-border-width;
        border-style: $kendo-dock-manager-border-style;
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        overflow: auto;
        box-sizing: border-box;
    }

    // Toolbar
    .k-dock-manager-toolbar {
        border-width: 0 $kendo-dock-manager-border-width 0 0;
        border-color: inherit;
        flex-shrink: 0;
        writing-mode: vertical-lr;
        box-shadow: none;

        &::before {
            height: 0;
        }

        .k-separator-horizontal {
            width:  $kendo-line-height-em;
            height: 0;
            border-width: $kendo-dock-manager-border-width 0 0;
        }
    }

    // Panes
    .k-dock-manager-pane-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-grow: 1;
        overflow: hidden;
    }

    // Splitter
    .k-dock-manager-splitter,
    .k-dock-manager-unpinned-container {
        height: 100%;
        border-width: 0;
        align-items: stretch;

        > .k-pane {
            height: auto;
            flex-direction: column;
            border-color: inherit;
        }

        .k-pane-header {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-block: $kendo-dock-manager-pane-header-padding-y;
            padding-inline: $kendo-dock-manager-pane-header-padding-x;
            border-block-end-width: $kendo-dock-manager-pane-header-border-width;
            border-block-end-style: $kendo-dock-manager-pane-header-border-style;
            border-color: inherit;
        }

        .k-pane-title {
            padding-block: $kendo-dock-manager-pane-title-padding-y;
            padding-inline: $kendo-dock-manager-pane-title-padding-x;
            font-family: $kendo-dock-manager-pane-title-font-family;
            font-size: $kendo-dock-manager-pane-title-font-size;
            line-height: $kendo-dock-manager-pane-title-line-height;
            font-weight: $kendo-dock-manager-pane-title-font-weight;
            flex: 1 1 auto;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .k-pane-scrollable {
            height: 100%;
            display: flex;
            flex-direction: column;
            border-color: inherit;
        }

        .k-pane-content {
            height: 100%;
            padding-block: $kendo-dock-manager-pane-content-padding-y;
            padding-inline: $kendo-dock-manager-pane-content-padding-x;
            overflow: auto;
            flex: 1;
        }

        .k-pane-actions {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: center;
        }

        .k-pane-tabbed {
            padding-block-start: $kendo-dock-manager-tabbed-pane-padding-y;
            padding-block-end: $kendo-dock-manager-tabbed-pane-padding-x;
            padding-inline: $kendo-dock-manager-tabbed-pane-padding-x;
        }

        .k-splitbar {
            border-width: 0 1px;
            border-style: solid;
            border-color: inherit;
        }
        .k-splitbar-vertical {
            border-width: 1px 0;
        }
    }

    // Unpinned pane
    .k-dock-manager-unpinned-container {
        width: $kendo-dock-manager-unpinned-container-width;
        position: absolute;
        display: flex;
        height: 100%;
        border-color: inherit;
        z-index: 20;

        .k-pane {
            display: inline-flex;
            flex-direction: column;
            position: relative;
            flex: 1 1 auto;
        }

        .k-splitbar {
            height: 100%;
            position: relative;
            flex: none;
        }
    }

    // Docking preview
    .k-docking-preview {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        border-width: $kendo-dock-manager-dock-preview-border-width;
        border-style: $kendo-dock-manager-dock-preview-border-style;
        border-radius: $kendo-dock-manager-dock-preview-border-radius;
        z-index: 10;
    }

}

@mixin kendo-dock-navigator--layout() {

    // DockNavigator
    .k-dock-navigator-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        z-index: 10001;
        pointer-events: none;
    }

    .k-dock-navigator {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
        justify-content: center;
        position: absolute;
    }

    .k-dock-indicator {
        padding: $kendo-dock-indicator-padding;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        position: relative;
        pointer-events: all;
        outline-width: $kendo-dock-indicator-outline-width;
        outline-style: $kendo-dock-indicator-outline-style;

        &.k-dock-indicator-middle {
            filter: none;
        }
    }

    .k-dock-indicator-top {
        grid-area: 1 / 2 / auto;
    }
    .k-dock-indicator-right {
        grid-area: 2 / 3 / auto;
    }
    .k-dock-indicator-bottom {
        grid-area: 3 / 2 / auto;
    }
    .k-dock-indicator-left {
        grid-area: 2 / 1 / auto;
    }
    .k-dock-indicator-middle {
        grid-area: 2 / 2 / auto;
    }

}

@mixin kendo-dock-manager--layout() {
    @include kendo-dock-manager--layout-base();
    @include kendo-dock-navigator--layout();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/dock-manager/_theme.scss
@mixin kendo-dock-manager--theme-base() {

    // DockManager
    .k-dock-manager {
        border-color: $kendo-dock-manager-border;
    }

    // Splitter
    .k-dock-manager-splitter .k-pane-header,
    .k-dock-manager-unpinned-container .k-pane-header {
        background-color: $kendo-dock-manager-pane-header-bg;
    }

    .k-dock-manager-unpinned-container {
        background-color: $kendo-dock-manager-unpinned-container-bg;
        @include box-shadow( $kendo-dock-manager-unpinned-container-shadow );
    }

    // Docking preview
    .k-docking-preview {
        background-color: $kendo-dock-manager-dock-preview-bg;
        border-color: $kendo-dock-manager-dock-preview-border;
    }

}

@mixin kendo-dock-navigator--theme() {

    .k-dock-indicator {
        color: $kendo-dock-indicator-text;
        background-color: $kendo-dock-indicator-bg;
        outline-color: $kendo-dock-indicator-outline;
        filter: $kendo-dock-indicator-shadow;

        &:hover,
        &.k-hover {
            background-color: $kendo-dock-indicator-hover-bg;
            color: $kendo-dock-indicator-hover-text;
        }
    }

}

@mixin kendo-dock-manager--theme() {
    @include kendo-dock-manager--theme-base();
    @include kendo-dock-navigator--theme();
}

// #endregion

// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );

// Expose
@mixin kendo-dock-manager--styles() {
    @include module-render("dock-manager") {
        @include kendo-dock-manager--layout();
        @include kendo-dock-manager--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-dock-manager--styles();
}

// #endregion
// #region @import "./chart-wizard/_index.scss"; -> scss/chart-wizard/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "chart-wizard",
    dependencies: (
        "icon",
        "window",
        "splitter",
        "dataviz",
        "expansion-panel",
        "grid",
        "tabstrip",
        "listview",
        "forms",
        "combobox"
    )
);


// Dependencies
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../window/_index.scss"; -> scss/window/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../splitter/_index.scss"; -> scss/splitter/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../dataviz/_index.scss"; -> scss/dataviz/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "dataviz",
    dependencies: (
        "icon",
        "popup",
        "tooltip",
    )
);


// Dependencies
// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../tooltip/_index.scss"; -> scss/tooltip/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/dataviz/_variables.scss
// #region @import "../button/_variables.scss"; -> scss/button/_variables.scss
// File already imported_once. Skipping output.
// #endregion


// Chart

/// The first base series color and its light and dark shades.
/// @group charts
$kendo-series-a: if($kendo-enable-color-system, k-color( series-a ), #ff6358) !default;
$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), k-color-mix(black, $kendo-series-a, 25%)) !default;
$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), k-color-mix(black, $kendo-series-a, 50%)) !default;
$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), k-color-mix(white, $kendo-series-a, 25%)) !default;
$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), k-color-mix(white, $kendo-series-a, 50%)) !default;

/// The second base series color and its light and dark shades.
/// @group charts
$kendo-series-b: if($kendo-enable-color-system, k-color( series-b ), #ffe162) !default;
$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), k-color-mix(black, $kendo-series-b, 25%)) !default;
$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), k-color-mix(black, $kendo-series-b, 50%)) !default;
$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), k-color-mix(white, $kendo-series-b, 25%)) !default;
$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), k-color-mix(white, $kendo-series-b, 50%)) !default;

/// The third base series color and its light and dark shades.
/// @group charts
$kendo-series-c: if($kendo-enable-color-system, k-color( series-c ), #4cd180) !default;
$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), k-color-mix(black, $kendo-series-c, 25%)) !default;
$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), k-color-mix(black, $kendo-series-c, 50%)) !default;
$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), k-color-mix(white, $kendo-series-c, 25%)) !default;
$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), k-color-mix(white, $kendo-series-c, 50%)) !default;

/// The fourth base series color and its light and dark shades.
/// @group charts
$kendo-series-d: if($kendo-enable-color-system, k-color( series-d ), #4b5ffa) !default;
$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), k-color-mix(black, $kendo-series-d, 25%)) !default;
$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), k-color-mix(black, $kendo-series-d, 50%)) !default;
$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), k-color-mix(white, $kendo-series-d, 25%)) !default;
$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), k-color-mix(white, $kendo-series-d, 50%)) !default;

/// The fifth base series color and its light and dark shades.
/// @group charts
$kendo-series-e: if($kendo-enable-color-system, k-color( series-e ), #ac58ff) !default;
$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), k-color-mix(black, $kendo-series-e, 25%)) !default;
$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), k-color-mix(black, $kendo-series-e, 50%)) !default;
$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), k-color-mix(white, $kendo-series-e, 25%)) !default;
$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), k-color-mix(white, $kendo-series-e, 50%)) !default;

/// The sixth base series color and its light and dark shades.
/// @group charts
$kendo-series-f: if($kendo-enable-color-system, k-color( series-f ), #ff5892) !default;
$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), k-color-mix(black, $kendo-series-f, 25%)) !default;
$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), k-color-mix(black, $kendo-series-f, 50%)) !default;
$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), k-color-mix(white, $kendo-series-f, 25%)) !default;
$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), k-color-mix(white, $kendo-series-f, 50%)) !default;

/// The series colors in order:
/// base, light, dark, lighter, darker
/// @group charts
$kendo-series-1: $kendo-series-a !default;
$kendo-series-2: $kendo-series-b !default;
$kendo-series-3: $kendo-series-c !default;
$kendo-series-4: $kendo-series-d !default;
$kendo-series-5: $kendo-series-e !default;
$kendo-series-6: $kendo-series-f !default;
$kendo-series-7: $kendo-series-a-light !default;
$kendo-series-8: $kendo-series-b-light !default;
$kendo-series-9: $kendo-series-c-light !default;
$kendo-series-10: $kendo-series-d-light !default;
$kendo-series-11: $kendo-series-e-light !default;
$kendo-series-12: $kendo-series-f-light !default;
$kendo-series-13: $kendo-series-a-dark !default;
$kendo-series-14: $kendo-series-b-dark !default;
$kendo-series-15: $kendo-series-c-dark !default;
$kendo-series-16: $kendo-series-d-dark !default;
$kendo-series-17: $kendo-series-e-dark !default;
$kendo-series-18: $kendo-series-f-dark !default;
$kendo-series-19: $kendo-series-a-lighter !default;
$kendo-series-20: $kendo-series-b-lighter !default;
$kendo-series-21: $kendo-series-c-lighter !default;
$kendo-series-22: $kendo-series-d-lighter !default;
$kendo-series-23: $kendo-series-e-lighter !default;
$kendo-series-24: $kendo-series-f-lighter !default;
$kendo-series-25: $kendo-series-a-darker !default;
$kendo-series-26: $kendo-series-b-darker !default;
$kendo-series-27: $kendo-series-c-darker !default;
$kendo-series-28: $kendo-series-d-darker !default;
$kendo-series-29: $kendo-series-e-darker !default;
$kendo-series-30: $kendo-series-f-darker !default;

$kendo-chart-border-width: 0px !default;
$kendo-chart-font-family: var( --kendo-font-family, inherit ) !default;
$kendo-chart-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-chart-line-height: var( --kendo-line-height, normal ) !default;
$kendo-chart-sm-font-size: 11px !default;
$kendo-chart-md-font-size: 12px !default;
$kendo-chart-lg-font-size: 16px !default;
$kendo-chart-tooltip-font-size: calc( #{$kendo-font-size} * .929) !default;
$kendo-chart-label-font-size: .857em !default;
$kendo-chart-title-font-size: 1.143em !default;
$kendo-chart-pane-title-font-size: $kendo-chart-label-font-size !default;
$kendo-chart-pane-title-font-weight: var( --kendo-font-weight-normal, normal ) !default;

/// The color of the Chart grid lines (major).
/// @group charts
$kendo-chart-major-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;

/// The color of the Chart grid lines (minor).
/// @group charts
$kendo-chart-minor-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )) !default;

$kendo-chart-inactive: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-body-text, .5 )) !default;
$kendo-chart-area-opacity: .6 !default;
$kendo-chart-area-inactive-opacity: .1 !default;
$kendo-chart-line-inactive-opacity: .3 !default;

$kendo-chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default;

$kendo-chart-bg: $kendo-component-bg !default;
$kendo-chart-text: $kendo-component-text !default;
$kendo-chart-border: $kendo-component-border !default;

$kendo-chart-crosshair-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
$kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-text !default;
$kendo-chart-crosshair-shared-tooltip-background: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-chart-bg, 1 )) !default;
$kendo-chart-crosshair-shared-tooltip-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;

$kendo-chart-notes-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
$kendo-chart-notes-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
$kendo-chart-notes-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;

$kendo-chart-error-bars-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;

$kendo-chart-selection-handle-size: 22px !default;
$kendo-chart-selection-border-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;
$kendo-chart-selection-shadow: inset 0 1px 7px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .15 )) !default;


// TreeMap
$kendo-treemap-font-family: var( --kendo-font-family, inherit ) !default;
$kendo-treemap-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-treemap-line-height: var( --kendo-line-height, normal ) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/dataviz/_layout.scss
@mixin kendo-dataviz--layout-base() {

    // Barcode
    .k-barcode {
        display: inline-block;

        > div {
            height: 150px;
        }
    }


    // Exported variables
    // stylelint-disable selector-class-pattern
    .k-var--chart-font {
        font-size: $kendo-chart-font-size;
    }

    .k-var--chart-title-font {
        font-size: $kendo-chart-title-font-size;
    }

    .k-var--chart-pane-title-font {
        font-size: $kendo-chart-pane-title-font-size;
        font-weight: $kendo-chart-pane-title-font-weight;
    }

    .k-var--chart-label-font {
        font-size: $kendo-chart-label-font-size;
    }
    // stylelint-enable selector-class-pattern

    // Elements
    .k-chart,
    .k-sparkline,
    .k-stockchart {
        border-width: $kendo-chart-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-chart-font-family;
        font-size: $kendo-chart-font-size;
        line-height: $kendo-chart-line-height;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
    }

    .k-chart,
    .k-stockchart {
        display: block;
        height: 400px;
    }

    .k-chart-surface {
        height: 100%;
    }

    .k-chart .k-popup {
        border-width: 0;
    }

    .k-chart-tooltip-wrapper .k-animation-container-shown,
    .k-chart-tooltip-wrapper.k-animation-container-shown {
        transition: $kendo-chart-tooltip-transition;
    }

    .k-sparkline-tooltip-wrapper,
    .k-chart-tooltip-wrapper {
        z-index: 12000;

        .k-popup {
            padding: 0;
            border-width: 0;
            background: transparent;
        }
    }

    .k-chart-tooltip table {
        border-spacing: 0;
        border-collapse: collapse;
    }

    .k-chart-tooltip {
        @include border-radius( k-border-radius(md) );
        font-size: $kendo-chart-tooltip-font-size;
        line-height: var( --kendo-line-height, normal );
        padding-block: $kendo-tooltip-padding-y;
        padding-inline: $kendo-tooltip-padding-x;
    }

    .k-chart-tooltip th {
        width: auto;
        text-align: center;
        padding: 1px;
    }

    .k-chart-tooltip td {
        width: auto;
        text-align: start;
        padding-block: $kendo-padding-sm-y;
        padding-inline: $kendo-padding-sm-x;
        line-height: var( --kendo-line-height, normal );
        vertical-align: middle;
    }

    .k-chart-crosshair-tooltip,
    .k-chart-shared-tooltip {
        border-width: 1px;
        border-style: solid;
    }

    .k-chart-shared-tooltip .k-chart-shared-tooltip-marker {
        display: block;
        width: 15px;
        height: 3px;
        vertical-align: middle;
    }

    // Selection
    .k-selector {
        position: absolute;
        transform: translateZ(0);
    }

    .k-selection {
        position: absolute;
        height: 100%;
        border-width: 1px;
        border-style: solid;
        border-bottom: 0;
    }

    .k-selection-bg {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .k-handle {
        @include border-radius( 50% );
        width: $kendo-chart-selection-handle-size;
        height: $kendo-chart-selection-handle-size;
        border-width: 1px;
        border-style: solid;
        z-index: 1;
        position: absolute;
        box-sizing: content-box;
    }

    .k-handle div {
        width: 100%;
        height: 100%;
    }

    .k-left-handle {
        left: - k-math-div( $kendo-chart-selection-handle-size, 2 );
    }

    .k-right-handle {
        right: - k-math-div( $kendo-chart-selection-handle-size, 2 );
    }

    .k-left-handle div {
        margin: -($kendo-chart-selection-handle-size) 0 0 (- k-math-div( $kendo-chart-selection-handle-size, 1.5 ));
        padding: ($kendo-chart-selection-handle-size * 2) (k-math-div( $kendo-chart-selection-handle-size, 1.5 ) * 2) 0 0;
    }

    .k-right-handle div {
        margin: -($kendo-chart-selection-handle-size) 0 0 (- k-math-div( $kendo-chart-selection-handle-size, 1.5 ));
        padding: ($kendo-chart-selection-handle-size * 2) 0 0 (k-math-div( $kendo-chart-selection-handle-size, 1.5 ) * 2);
    }

    .k-left-handle.k-handle-active div {
        margin-left: -($kendo-chart-selection-handle-size * 2);
        padding-left: ($kendo-chart-selection-handle-size * 2) + k-math-div( $kendo-chart-selection-handle-size, 1.5 );
    }

    .k-right-handle.k-handle-active div {
        margin-left: -($kendo-chart-selection-handle-size * 2);
        padding-right: ($kendo-chart-selection-handle-size * 2) + k-math-div( $kendo-chart-selection-handle-size, 1.5 );
    }

    .k-mask {
        position: absolute;
        height: 100%;
    }

    // Navigator hint
    .k-navigator-hint div {
        position: absolute;
    }

    .k-navigator-hint .k-scroll {
        @include border-radius( k-border-radius(md) );
        position: absolute;
        height: 4px;
    }

    .k-navigator-hint .k-tooltip {
        margin-top: 20px;
        min-width: 160px;
        opacity: 1;
        text-align: center;
    }

    // Sparklines
    .k-sparkline,
    .k-sparkline span {
        display: inline-block;
        vertical-align: top;
    }

    .k-sparkline span {
        height: 100%;
        width: 100%;
    }

    .k-chart-dragging {
        user-select: none;
    }

    .k-chart-donut-center {
        position: absolute;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        border-radius: 50%;
        text-align: center;

        border: 4px solid transparent;
        box-sizing: border-box;
    }

    .k-pdf-export {
        .k-chart,
        .k-sparkline,
        .k-stockchart {
            .k-animation-container {
                display: none;
            }
        }
    }




    // Diagram
    .k-diagram {
        height: 600px;
    }

    .k-diagram .km-scroll-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .k-diagram .km-scroll-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .k-canvas-container {
        width: 100%;
        height: 100%;
    }


    // Sankey labels
    .k-sankey text {
        pointer-events: none;
    }

    // Treemap
    .k-treemap {
        height: 400px;
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        outline: 0;
        font-family: $kendo-treemap-font-family;
        font-size: $kendo-treemap-font-size;
        line-height: $kendo-treemap-line-height;
        display: block;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        // Tile
        .k-treemap-tile {
            margin: -1px 0 0 -1px;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid;
            border-color: inherit;
            color: inherit;
            background-color: inherit;
            overflow: hidden;
            position: absolute;
        }
        > .k-treemap-tile {
            position: relative;
        }

        // Title
        .k-treemap-title {
            padding-block: $kendo-padding-sm-y;
            padding-inline: $kendo-padding-sm-x;
            border-width: 0 0 1px;
            border-style: solid;
            border-color: inherit;
            font-size: var( --kendo-font-size, inherit );
            background-position: 0 0;
            background-repeat: repeat-x;
        }
        .k-treemap-title-vertical {
            padding-block: $kendo-padding-sm-x;
            padding-inline: $kendo-padding-sm-y;
            width: $kendo-line-height-em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: absolute;
            top: 0;
            bottom: 0;

            > div {
                transform-origin: right;
                transform: rotate(-90deg);
                position: absolute;
                top: 0;
                right: 1em;
            }
        }


        // Wrap
        .k-treemap-wrap {
            border-color: inherit;
            color: inherit;
            background-color: inherit;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        .k-treemap-title + .k-treemap-wrap {
            top: calc( calc( #{$kendo-padding-sm-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
        }
        .k-treemap-title-vertical + .k-treemap-wrap {
            left: calc( calc( #{$kendo-padding-sm-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
        }


        // Leaf
        .k-leaf {
            padding: $kendo-padding-sm-x;
        }
    }




    // Gauge
    .k-gauge {
        text-align: start;
        position: relative;
    }

    .k-arcgauge,
    .k-circulargauge {
        display: inline-block;
    }

    .k-arcgauge-label,
    .k-circulargauge-label {
        position: absolute;
        text-align: center;
        padding: 0;
        margin: 0;
    }


    // qrcode
    .k-qrcode {
        display: inline-block;

        > div {
            height: 150px;
        }
    }




    // export variables to allow use in scripts
    $exported: (
        primary: $kendo-color-primary,
        primary-contrast: $kendo-color-primary-contrast,
        base: $kendo-base-bg,
        background: $kendo-chart-bg,

        border-radius: k-border-radius(md),

        normal-background: $kendo-base-bg,
        normal-text-color: $kendo-base-text,
        hover-background: $kendo-hover-bg,
        hover-text-color: $kendo-hover-text,
        selected-background: $kendo-selected-bg,
        selected-text-color: $kendo-selected-text,

        success: $kendo-color-success,
        info: $kendo-color-info,
        warning: $kendo-color-warning,
        error: $kendo-color-error,

        series-a: $kendo-series-a,
        series-b: $kendo-series-b,
        series-c: $kendo-series-c,
        series-d: $kendo-series-d,
        series-e: $kendo-series-e,
        series-f: $kendo-series-f,

        series-1: $kendo-series-1,
        series-2: $kendo-series-2,
        series-3: $kendo-series-3,
        series-4: $kendo-series-4,
        series-5: $kendo-series-5,
        series-6: $kendo-series-6,
        series-7: $kendo-series-7,
        series-8: $kendo-series-8,
        series-9: $kendo-series-9,
        series-10: $kendo-series-10,
        series-11: $kendo-series-11,
        series-12: $kendo-series-12,
        series-13: $kendo-series-13,
        series-14: $kendo-series-14,
        series-15: $kendo-series-15,
        series-16: $kendo-series-16,
        series-17: $kendo-series-17,
        series-18: $kendo-series-18,
        series-19: $kendo-series-19,
        series-20: $kendo-series-20,
        series-21: $kendo-series-21,
        series-22: $kendo-series-22,
        series-23: $kendo-series-23,
        series-24: $kendo-series-24,
        series-25: $kendo-series-25,
        series-26: $kendo-series-26,
        series-27: $kendo-series-27,
        series-28: $kendo-series-28,
        series-29: $kendo-series-29,
        series-30: $kendo-series-30,

        gauge-pointer: $kendo-color-primary,
        gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-chart-bg ))
    );

    @each $name, $value in $exported {
        $type: k-meta-type-of($value);

        .k-var--#{$name} {
            @if $type == "color" or $type == "string" {
                // background-color can store any color
                background-color: $value;
            } @else if $type == "number" {
                // margin-top can store positive & negative values
                margin-top: $value;
            }
        }
    }

}


@mixin kendo-dataviz--layout() {
    @include kendo-dataviz--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/dataviz/_theme.scss
@mixin kendo-dataviz--theme-base() {

    // Exported variables
    // stylelint-disable  selector-class-pattern
    .k-var--chart-inactive {
        background-color: $kendo-chart-inactive;
    }

    .k-var--chart-major-lines {
        background-color: $kendo-chart-major-lines;
    }

    .k-var--chart-minor-lines {
        background-color: $kendo-chart-minor-lines;
    }

    .k-var--chart-area-opacity {
        opacity: $kendo-chart-area-opacity;
    }

    .k-var--chart-area-inactive-opacity {
        opacity: $kendo-chart-area-inactive-opacity;
    }

    .k-var--chart-line-inactive-opacity {
        opacity: $kendo-chart-line-inactive-opacity;
    }

    .k-var--chart-notes-background {
        background-color: $kendo-chart-notes-background;
    }

    .k-var--chart-notes-border {
        background-color: $kendo-chart-notes-border;
    }

    .k-var--chart-notes-lines {
        background-color: $kendo-chart-notes-lines;
    }

    .k-var--chart-crosshair-background {
        background-color: $kendo-chart-crosshair-background;
    }

    .k-var--chart-error-bars-background {
        background-color: $kendo-chart-error-bars-background;
    }
    // stylelint-enable  selector-class-pattern

    // Elements
    .k-chart,
    .k-sparkline,
    .k-stockchart {
        @include fill(
            $kendo-chart-text,
            transparent,
            $kendo-chart-border
        );

        .k-popup {
            background: transparent;
        }
    }


    // Tooltip
    // TODO
    .k-chart-tooltip {
        color: $kendo-color-white;
    }
    .k-chart-tooltip-inverse {
        color: $kendo-color-black;
    }

    .k-chart-crosshair-tooltip,
    .k-chart-shared-tooltip {
        color: $kendo-chart-crosshair-shared-tooltip-color;
        background-color: $kendo-chart-crosshair-shared-tooltip-background;
        border-color: $kendo-chart-crosshair-shared-tooltip-border;
    }

    .k-selection {
        border-color: $kendo-chart-selection-border-color;
        box-shadow: $kendo-chart-selection-shadow;
    }

    .k-selection-bg {
        background-color: transparent;
    }

    .k-handle {
        cursor: e-resize;

        // TODO: refactor and remove button dependency
        @include fill(
            $kendo-button-text,
            $kendo-button-bg,
            $kendo-button-border,
            $kendo-button-gradient
        );

        &:hover {
            @include fill(
                $kendo-button-hover-text,
                $kendo-button-hover-bg,
                $kendo-button-hover-border,
                $kendo-button-hover-gradient
            );
        }
    }

    .k-handle div {
        background-color: transparent;
    }

    .k-mask {
        background-color: $kendo-component-bg;
        opacity: .8;
    }




    // Treemap
    .k-treemap {
        @include fill(
            $kendo-component-text,
            $kendo-component-bg,
            $kendo-component-border
        );

        // Title
        .k-treemap-title {
            @include fill(
                $kendo-component-header-text,
                $kendo-component-header-bg,
                $kendo-component-header-border,
                $kendo-component-header-gradient
            );
        }

        // Leaf
        .k-leaf {
            color: $kendo-component-bg;
        }
        .k-leaf.k-inverse {
            color: $kendo-component-text;
        }
        .k-leaf:hover,
        .k-leaf.k-hover {
            box-shadow: inset 0 0 0 3px $kendo-component-border;
        }
    }

}


@mixin kendo-dataviz--theme() {
    @include kendo-dataviz--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-dataviz--styles() {
    @include module-render( "dataviz" ) {
        @include kendo-dataviz--layout();
        @include kendo-dataviz--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-dataviz--styles();
}

// #endregion
// #region @import "../expansion-panel/_index.scss"; -> scss/expansion-panel/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../grid/_index.scss"; -> scss/grid/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "grid",
    dependencies: (
        "actions",
        "autocomplete",
        "badge",
        "button",
        "checkbox",
        "chip",
        "date-time-picker",
        "dialog",
        "dropdown-list",
        "icon",
        "input",
        "list",
        "menu",
        "numeric-textbox",
        "pager",
        "progressbar",
        "radio",
        "skeleton",
        "table",
        "tabstrip",
        "textbox",
        "toolbar",
        "validator",
        "utils/layout/float",
    )
);


// Dependencies
// #region @import "../adaptive/_index.scss"; -> scss/adaptive/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "adaptive",
    dependencies: (
        "checkbox",
        "listgroup",
        "radio",
        "switch",
        "toolbar",
    )
);


// Dependencies (TODO: extract variables)
// #region @import "../listgroup/_index.scss"; -> scss/listgroup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../checkbox/_index.scss"; -> scss/checkbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../radio/_index.scss"; -> scss/radio/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../switch/_index.scss"; -> scss/switch/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../toolbar/_index.scss"; -> scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/adaptive/_variables.scss
// Adaptive
$kendo-adaptive-bg: $kendo-component-bg !default;
$kendo-adaptive-text: $kendo-component-text !default;
$kendo-adaptive-border: $kendo-component-border !default;

$kendo-adaptive-content-bg: $kendo-app-bg !default;
$kendo-adaptive-content-text: $kendo-app-text !default;

$kendo-adaptive-menu-bg: $kendo-color-primary !default;
$kendo-adaptive-menu-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-adaptive-menu-bg )) !default;

$kendo-adaptive-menu-clear-text: $kendo-color-primary !default;

$kendo-adaptive-menu-item-border: $kendo-component-border !default;
$kendo-adaptive-menu-title-text: $kendo-component-text !default;

$kendo-adaptive-border-width: 1px !default;
$kendo-adaptive-font-family: var( --kendo-font-family, inherit ) !default;
$kendo-adaptive-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default;


// Adaptive Grid
$kendo-adaptive-grid-sort-text: $kendo-color-primary !default;


// Adaptive Scheduler
$kendo-adaptive-scheduler-current-text: $kendo-color-primary !default;
$kendo-adaptive-scheduler-base-text: inherit !default;
$kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/adaptive/_layout.scss
@mixin kendo-adaptive--layout-base() {

    .k-pane-wrapper {
        border-width: $kendo-adaptive-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-adaptive-font-family;
        font-size: $kendo-adaptive-font-size;
        line-height: $kendo-adaptive-line-height;
        display: block;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        .k-pane {
            width: 100%;
            height: 100%;
            user-select: none;
            box-sizing: border-box;
            font-family: sans-serif;
            overflow-x: hidden;
        }

        .k-view {
            top: 0;
            left: 0;
            position: relative;
            border: 0;
            box-sizing: border-box;
            outline: 0;
            font-family: $kendo-adaptive-font-family;
            font-size: $kendo-adaptive-font-size;
            line-height: $kendo-adaptive-line-height;
            display: flex;
            height: 100%;
            width: 100%;
            flex-direction: column;
            align-items: stretch;
            align-content: stretch;
            vertical-align: top;
            -webkit-touch-callout: none;
            -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
        }

        .k-content {
            min-height: 1px;
            flex: 1;
            align-items: stretch;
            display: block;
            width: auto;
            overflow: hidden;
            position: relative;
        }
    }




    // Grid specific styles
    .k-pane-wrapper { // stylelint-disable-line

        > div.k-pane {
            box-shadow: none;
            font-weight: normal;
        }

        .k-popup-edit-form,
        .k-grid-edit-form,
        .k-grid-header-menu,
        .k-grid-filter-menu {

            .k-content {
                overflow-y: auto;

                > .k-scroll-container {
                    position: absolute;
                    width: 100%;
                    min-height: 100%;
                    box-sizing: border-box;
                }
            }
        }

        .k-grid-edit-form {

            .k-popup-edit-form,
            .k-edit-form-container {
                width: auto;
                min-width: auto;
            }
        }
    }

    .k-grid.k-grid-mobile {
        border-width: 0;
    }

    .k-grid-mobile {
        .k-resize-handle-inner::before {
            content: "\e01e";
            position: absolute;
            font: 16px/1 "WebComponentsIcons"; // stylelint-disable-line
            // The Calc is needed due to the the negative margin
            // that removes the double bottom border of the header
            top: calc(50% - 1px);
            left: 50%;
            transform: translate(-50%, -50%);
            padding: .2em;
        }

        .k-header a {
            user-select: none;
        }
    }




    // Scheduler specific styles
    .k-pane-wrapper { // stylelint-disable-line

        .k-scheduler-edit-form {

            .k-recur-view {
                padding: 0;
                flex-direction: column;
                align-items: stretch;

                > .k-listgroup-form-row {
                    margin: 0;
                }
            }

            .k-recur-items-wrap {
                width: 100%;
                margin-block: -1px;
                margin-inline: 0;
            }

            .k-scheduler-recur-end-wrap {
                white-space: nowrap;
            }
        }
    }

    .k-scheduler {
        &.k-scheduler-mobile {
            border-width: 0;
        }
    }

    .k-scheduler-mobile {

        th {
            font-weight: normal;
        }

        .k-event:hover .k-resize-handle {
            visibility: hidden;
        }

        .k-scheduler-toolbar {
            padding-block: $kendo-toolbar-md-padding-y;
            padding-inline: $kendo-toolbar-md-padding-x;

            > * {
                margin: 0;
            }

            &::before {
                display: none;
            }

            .k-scheduler-navigation {
                width: 100%;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                margin: 0;

                .k-nav-current {
                    line-height: 1;
                    display: flex;
                    flex-flow: column nowrap;
                    align-items: center;
                    justify-content: space-evenly;
                    gap: 0;
                }
            }

            .k-scheduler-views-wrapper {
                .k-views-dropdown {
                    display: inline-block;
                }
            }
        }

        .k-scheduler-footer {
            padding-block: $kendo-toolbar-md-padding-y;
            padding-inline: $kendo-toolbar-md-padding-x;
            display: flex;
            justify-content: space-between;

            > * {
                margin: 0;
            }

            &::before {
                display: none;
            }
        }

        .k-scheduler-monthview {

            .k-hidden {
                height: 40px;
            }

            .k-scheduler-table td {
                height: 40px;
                vertical-align: top;
                text-align: center;
            }

            .k-events-container {
                position: absolute;
                text-align: center;
                height: 6px;
                line-height: 6px;
            }

            .k-event {
                position: static;
                padding: 4px;
                border-radius: 50%;
                display: inline-block;
                width: 4px;
                height: 4px;
                min-height: 0;
                margin: 1px;
            }
        }

        // Removing the "Days" header from the Mobile Scheduler will break the Web Scheduler
        // Thus, the below selector is needed
        .k-scheduler-dayview .k-mobile-header {

            &.k-mobile-horizontal-header .k-scheduler-times table tr:first-child {
                display: none;
            }

            .k-scheduler-header .k-scheduler-date-group {
                display: none;
            }
        }

        .k-scheduler-header-wrap > div {
            overflow: visible;
        }

        .k-scheduler-agendaview {
            .k-mobile-header {
                display: none;
            }

            .k-scheduler-table {
                table-layout: auto;

                .k-scheduler-groupcolumn {
                    width: 1%;
                }

                td {
                    white-space: normal;
                }
            }
        }

        .k-mobile-header {
            .k-scheduler-table td,
            .k-scheduler-table th {
                height: 1.5em;
            }
        }

        .k-time-text,
        .k-time-period {
            display: block;
            line-height: 1;
        }

        .k-time-period {
            font-size: .7em;
        }

        .k-scheduler-table td,
        .k-scheduler-table th {
            height: 2em;
            vertical-align: middle;
        }

        .k-scheduler-datecolumn-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .k-task {
            display: flex;
            align-items: center;
            gap: .5em;

            .k-scheduler-mark {
                border-radius: 50%;
                margin: 0;
            }

            .k-scheduler-task-text {
                flex: 1 1 0%;
            }
        }

        .k-scheduler-times,
        .k-scheduler-agenda {

            .k-scheduler-group-cell,
            .k-scheduler-groupcolumn {
                vertical-align: top;

                .k-scheduler-group-text {
                    writing-mode: vertical-lr;
                    transform: rotate(180deg);
                    white-space: nowrap;
                }
            }
        }

        .k-scrollbar-h tr + tr .k-scheduler-times {
            border-bottom-width: 0;
        }
    }




    // Common styles for the Adaptive Layout
    .k-pane-wrapper { // stylelint-disable-line

        .k-appbar {
            padding: k-spacing(1);
        }

        .k-list-title,
        .k-filter-help-text {
            padding-block: $kendo-listgroup-item-padding-y;
            padding-inline: $kendo-listgroup-item-padding-x;
            display: block;
        }

        .k-listgroup-title {
            padding-block: $kendo-listgroup-item-padding-y;
            padding-inline: $kendo-listgroup-item-padding-x;
            font-weight: bold;
            text-transform: uppercase;
        }

        .k-listgroup {

            .k-listgroup-item {
                border-color: inherit;
            }
        }
        .k-listgroup + .k-listgroup {
            margin-top: k-spacing(4);
        }

        // Column menu
        .k-column-menu {
            padding: k-spacing(2);
            display: flex;
            flex-flow: column nowrap;
            gap: k-spacing(2);

            .k-filter-item .k-filterable * {
                pointer-events: none;
            }

            .k-list-title,
            .k-listgroup-title {
                padding: 0;
            }

            .k-listgroup {
                margin-inline: calc( #{k-spacing(2)} * -1 );
            }
        }

        // Filter menu
        .k-filter-menu {
            padding: k-spacing(2);
            display: flex;
            flex-flow: column nowrap;
            gap: k-spacing(2);

            .k-list-title {
                padding: 0;
            }

            .k-list-filter {
                padding: 0;
                display: flex;
                flex-flow: column nowrap;
                gap: inherit;
            }

            .k-filter-tools {
                display: flex;
                flex-flow: row nowrap;
                gap: inherit;
            }

            .k-listgroup {
                margin-inline: calc( #{k-spacing(2)} * -1 );
            }
        }

        .k-popup-edit-form {

            .k-recur-editor-wrap {
                display: flex;
            }

            .k-mobiletimezoneeditor {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                position: relative;
                flex: 1 1 auto;
            }
        }

        .k-multicheck-wrap.k-listgroup {
            overflow-y: auto;
        }

        // Pager
        .k-pager-wrap.k-pager-sm,
        .k-pager.k-pager-sm {
            justify-content: center;

            .k-pager-refresh {
                display: none;
            }

        }

        // RTL
        .k-rtl &,
        &[dir="rtl"],
        [dir="rtl"] & {

            .k-scheduler-mobile {

                .k-scheduler-toolbar {
                    > ul > li {
                        border: 0;
                    }
                }

                .k-task .k-i-reload {
                    margin-left: .5em;
                    margin-right: 0;
                }
            }
        }
    }

}


@mixin kendo-adaptive--layout() {
    @include kendo-adaptive--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/adaptive/_theme.scss
@mixin kendo-adaptive--theme-base() {

    .k-pane-wrapper,
    .k-view {
        @include fill(
            $kendo-adaptive-text,
            $kendo-adaptive-bg,
            $kendo-adaptive-border
        );
    }

    .k-pane-wrapper .k-pane {

        > .k-view > .k-content {
            background-position: 50% 50%;
            background-color: $kendo-adaptive-content-bg;
        }

        .k-grid-mobile {

            .k-column-active + th.k-header {
                border-left-color: $kendo-body-text;
            }

            .k-resize-handle-inner::before {
                background-color: $kendo-base-bg;
            }
        }

        .k-scheduler-mobile {

            .k-nav-current {
                color: $kendo-adaptive-scheduler-current-text;
            }

            .k-scheduler-times,
            .k-scheduler-header,
            .k-scheduler-groupcolumn,
            .k-mobile-scheduler-agendadate {
                color: $kendo-adaptive-scheduler-base-text;
            }

            .k-time-period,
            .k-mobile-scheduler-agendaweekday {
                color: $kendo-adaptive-scheduler-subtle-text;
            }

            .k-scheduler-times,
            .k-scheduler-header,
            .k-scheduler-header-wrap,
            .k-scheduler-datecolumn,
            .k-scheduler-groupcolumn,
            .k-scheduler-group-cell,
            .k-scheduler-header-all-day {
                background-color: $kendo-adaptive-content-bg;
            }

            .k-scheduler-toolbar .k-scheduler-tools > li {
                display: inline-block;
                background-color: inherit;
            }
        }

        .k-grid-edit-form,
        .k-grid-header-menu,
        .k-grid-filter-menu,
        .k-scheduler-edit-form {

            .k-item,
            .k-link {
                color: $kendo-base-text;
            }

            .k-clear,
            .k-select-all,
            .k-scheduler-delete,
            .k-scheduler-resetSeries { // stylelint-disable-line
                color: $kendo-adaptive-menu-clear-text;
            }

        }

        .k-column-menu {

            .k-listgroup-item.k-selected {
                color: $kendo-adaptive-grid-sort-text;
                background: none;
            }
            .k-listgroup-item.k-selected .k-link {
                color: inherit;
            }
        }

    }

}


@mixin kendo-adaptive--theme() {
    @include kendo-adaptive--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-adaptive--styles() {
    @include module-render( "adaptive" ) {
        @include kendo-adaptive--layout();
        @include kendo-adaptive--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-adaptive--styles();
}

// #endregion
// #region @import "../progressbar/_index.scss"; -> scss/progressbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../action-buttons/_index.scss"; -> scss/action-buttons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../toolbar/_index.scss"; -> scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../textbox/_index.scss"; -> scss/textbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../checkbox/_index.scss"; -> scss/checkbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../radio/_index.scss"; -> scss/radio/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../validator/_index.scss"; -> scss/validator/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../autocomplete/_index.scss"; -> scss/autocomplete/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../datetimepicker/_index.scss"; -> scss/datetimepicker/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../numerictextbox/_index.scss"; -> scss/numerictextbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../menu/_index.scss"; -> scss/menu/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../dialog/_index.scss"; -> scss/dialog/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../pager/_index.scss"; -> scss/pager/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../chip/_index.scss"; -> scss/chip/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../skeleton/_index.scss"; -> scss/skeleton/_index.scss
// File already imported_once. Skipping output.
// #endregion
// @import "../utils/_float.scss";
// @import "../utils/_spacer.scss";
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../table/_index.scss"; -> scss/table/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../tabstrip/_index.scss"; -> scss/tabstrip/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/grid/_variables.scss
// Grid
$kendo-grid-border-width: 1px !default;
$kendo-grid-font-family: var( --kendo-font-family, inherit ) !default;
$kendo-grid-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-grid-line-height: var( --kendo-line-height, normal ) !default;

/// The horizontal padding of the Grid.
/// @group grid
$kendo-grid-padding-x: $kendo-table-md-cell-padding-x !default;
/// The vertical padding of the Grid.
/// @group grid
$kendo-grid-padding-y: $kendo-table-md-cell-padding-y !default;

/// The horizontal padding of the Grid header.
/// @group grid
$kendo-grid-header-padding-x: $kendo-grid-padding-x !default;
/// The vertical padding of the Grid header.
/// @group grid
$kendo-grid-header-padding-y: $kendo-grid-padding-y !default;

/// The horizontal padding of the Grid grouping header.
/// @group grid
$kendo-grid-grouping-header-padding-x: $kendo-grid-padding-y !default;
/// The vertical padding of the Grid grouping header.
/// @group grid
$kendo-grid-grouping-header-padding-y: $kendo-grid-grouping-header-padding-x !default;

/// The horizontal padding of the Grid cell.
/// @group grid
$kendo-grid-cell-padding-x: $kendo-grid-padding-x !default;
/// The vertical padding of the Grid cell.
/// @group grid
$kendo-grid-cell-padding-y: $kendo-grid-padding-y !default;

/// The horizontal padding of the Grid filter cell.
/// @group grid
$kendo-grid-filter-cell-padding-x: $kendo-grid-padding-y !default;
/// The vertical padding of the Grid filter cell.
/// @group grid
$kendo-grid-filter-cell-padding-y: $kendo-grid-filter-cell-padding-x !default;

/// The horizontal padding of the Grid edit cell.
/// @group grid
$kendo-grid-edit-cell-padding-x: $kendo-grid-cell-padding-x !default;
/// The vertical padding of the Grid filter cell.
/// @group grid
$kendo-grid-edit-cell-padding-y: calc( #{k-spacing(1.5)} / 2 ) !default;

$kendo-grid-group-drop-hint-size: 6px !default;
$kendo-grid-group-drop-hint-line-size: k-math-div( $kendo-grid-group-drop-hint-size, 3 ) !default;
$kendo-grid-group-drop-hint-height: calc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-drop-hint-size}) !default;
$kendo-grid-group-drop-hint-top: 3px !default;

$kendo-grid-sm-padding-x: k-spacing(2) !default;
$kendo-grid-sm-padding-y: k-spacing(1) !default;
$kendo-grid-sm-header-padding-x: $kendo-grid-sm-padding-x !default;
$kendo-grid-sm-header-padding-y: $kendo-grid-sm-padding-y !default;
$kendo-grid-sm-grouping-header-padding-x: $kendo-grid-sm-padding-x !default;
$kendo-grid-sm-grouping-header-padding-y: $kendo-grid-sm-padding-y !default;
$kendo-grid-sm-cell-padding-x: $kendo-grid-sm-padding-x !default;
$kendo-grid-sm-cell-padding-y: $kendo-grid-sm-padding-y !default;
$kendo-grid-sm-filter-cell-padding-x: k-spacing(1.5) !default;
$kendo-grid-sm-filter-cell-padding-y: $kendo-grid-sm-filter-cell-padding-x !default;
$kendo-grid-sm-edit-cell-padding-x: $kendo-grid-sm-cell-padding-x !default;
$kendo-grid-sm-edit-cell-padding-y: k-spacing(0.5) !default;
$kendo-grid-sm-group-dropclue-height: calc( #{$kendo-chip-sm-calc-size} + #{$kendo-grid-group-drop-hint-size}) !default;
$kendo-grid-sm-selection-aggregates-padding-x: $kendo-grid-sm-padding-y !default;
$kendo-grid-sm-selection-aggregates-padding-y: $kendo-grid-sm-padding-y !default;

$kendo-grid-md-padding-x: $kendo-grid-padding-x !default;
$kendo-grid-md-padding-y: $kendo-grid-padding-y !default;
$kendo-grid-md-header-padding-x: $kendo-grid-header-padding-x !default;
$kendo-grid-md-header-padding-y: $kendo-grid-header-padding-y !default;
$kendo-grid-md-grouping-header-padding-x: $kendo-grid-grouping-header-padding-x !default;
$kendo-grid-md-grouping-header-padding-y: $kendo-grid-grouping-header-padding-y !default;
$kendo-grid-md-cell-padding-x: $kendo-grid-cell-padding-x !default;
$kendo-grid-md-cell-padding-y: $kendo-grid-cell-padding-y !default;
$kendo-grid-md-filter-cell-padding-x: $kendo-grid-filter-cell-padding-x !default;
$kendo-grid-md-filter-cell-padding-y: $kendo-grid-filter-cell-padding-y !default;
$kendo-grid-md-edit-cell-padding-x: $kendo-grid-edit-cell-padding-x !default;
$kendo-grid-md-edit-cell-padding-y: $kendo-grid-edit-cell-padding-y !default;
$kendo-grid-md-group-dropclue-height: $kendo-grid-group-drop-hint-height !default;
$kendo-grid-md-selection-aggregates-padding-x: $kendo-grid-padding-y !default;
$kendo-grid-md-selection-aggregates-padding-y: $kendo-grid-padding-y !default;


// Kendo Grid sizes
$kendo-grid-sizes: (
    sm: (
        header-padding-x: $kendo-grid-sm-header-padding-x,
        header-padding-y: $kendo-grid-sm-header-padding-y,
        grouping-header-padding-x: $kendo-grid-sm-grouping-header-padding-x,
        grouping-header-padding-y: $kendo-grid-sm-grouping-header-padding-y,
        cell-padding-x: $kendo-grid-sm-cell-padding-x,
        cell-padding-y: $kendo-grid-sm-cell-padding-y,
        filter-cell-padding-x: $kendo-grid-sm-filter-cell-padding-x,
        filter-cell-padding-y: $kendo-grid-sm-filter-cell-padding-y,
        edit-cell-padding-x: $kendo-grid-sm-edit-cell-padding-x,
        edit-cell-padding-y: $kendo-grid-sm-edit-cell-padding-y,
        button-padding-y: $kendo-button-sm-padding-y,
        button-calc-size: $kendo-button-sm-calc-size,
        group-dropclue-height: $kendo-grid-sm-group-dropclue-height,
        selection-aggregates-padding-x: $kendo-grid-sm-selection-aggregates-padding-x,
        selection-aggregates-padding-y: $kendo-grid-sm-selection-aggregates-padding-y
    ),
    md: (
        header-padding-x: $kendo-grid-md-header-padding-x,
        header-padding-y: $kendo-grid-md-header-padding-y,
        grouping-header-padding-x: $kendo-grid-md-grouping-header-padding-x,
        grouping-header-padding-y: $kendo-grid-md-grouping-header-padding-y,
        cell-padding-x: $kendo-grid-md-cell-padding-x,
        cell-padding-y: $kendo-grid-md-cell-padding-y,
        filter-cell-padding-x: $kendo-grid-md-filter-cell-padding-x,
        filter-cell-padding-y: $kendo-grid-md-filter-cell-padding-y,
        edit-cell-padding-x: $kendo-grid-md-edit-cell-padding-x,
        edit-cell-padding-y: $kendo-grid-md-edit-cell-padding-y,
        button-padding-y: $kendo-button-md-padding-y,
        button-calc-size: $kendo-button-md-calc-size,
        group-dropclue-height: $kendo-grid-md-group-dropclue-height,
        selection-aggregates-padding-x: $kendo-grid-md-selection-aggregates-padding-x,
        selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-y
    ),
) !default;

$kendo-grid-header-font-size: null !default;
$kendo-grid-header-first-border: 1px !default;
$kendo-grid-header-menu-icon-spacing: $kendo-icon-spacing !default;

$kendo-grid-filterable-icon-spacing: calc( #{$kendo-button-calc-size} + #{$kendo-grid-header-menu-icon-spacing} ) !default;

$kendo-grid-toolbar-border-width: $kendo-grid-border-width !default;

$kendo-grid-cell-horizontal-border-width: $kendo-table-cell-horizontal-border-width !default;
$kendo-grid-cell-vertical-border-width: $kendo-table-cell-vertical-border-width !default;

/// The background color of the Grid.
/// @group grid
$kendo-grid-bg: $kendo-table-bg !default;
/// The text color of the Grid.
/// @group grid
$kendo-grid-text: $kendo-table-text !default;
/// The border color of the Grid.
/// @group grid
$kendo-grid-border: $kendo-table-border !default;

/// The background color of Grid header.
/// @group grid
$kendo-grid-header-bg: $kendo-table-header-bg !default;
/// The text color of Grid header.
/// @group grid
$kendo-grid-header-text: $kendo-table-header-text !default;
/// The border color of Grid header.
/// @group grid
$kendo-grid-header-border: $kendo-table-header-border !default;
/// The background gradient of Grid header.
/// @group grid
$kendo-grid-header-gradient: $kendo-table-header-gradient !default;

/// The background color of Grid footer.
/// @group grid
$kendo-grid-footer-bg: $kendo-grid-header-bg !default;
/// The text color of Grid footer.
/// @group grid
$kendo-grid-footer-text: $kendo-grid-header-text !default;
/// The border color of Grid footer.
/// @group grid
$kendo-grid-footer-border: $kendo-grid-header-border !default;

/// The background color of the Grid alternating rows.
/// @group grid
$kendo-grid-alt-bg: $kendo-table-alt-row-bg !default;
/// The text color of the Grid alternating rows.
/// @group grid
$kendo-grid-alt-text: $kendo-table-alt-row-text !default;
/// The border color of the Grid alternating rows.
/// @group grid
$kendo-grid-alt-border: $kendo-table-alt-row-border !default;

/// The background color of hovered Grid rows.
/// @group grid
$kendo-grid-hover-bg: $kendo-table-hover-bg !default;
/// The text color of hovered Grid rows.
/// @group grid
$kendo-grid-hover-text: $kendo-table-hover-text !default;
/// The border color of hovered Grid rows.
/// @group grid
$kendo-grid-hover-border: $kendo-table-hover-border !default;

/// The background color of selected Grid rows.
/// @group grid
$kendo-grid-selected-bg: $kendo-table-selected-bg !default;
/// The text color of selected Grid rows.
/// @group grid
$kendo-grid-selected-text: $kendo-table-selected-text !default;
/// The border color of selected Grid rows.
/// @group grid
$kendo-grid-selected-border: $kendo-table-selected-border !default;

/// The background color of the Grid selection aggregates container.
/// @group grid
$kendo-grid-selection-aggregates-bg: $kendo-grid-header-bg !default;
/// The text color of the Grid selection aggregates container.
/// @group grid
$kendo-grid-selection-aggregates-text: $kendo-grid-text !default;
/// The border color of the Grid selection aggregates container.
/// @group grid
$kendo-grid-selection-aggregates-border: $kendo-grid-border !default;
/// The border width of the Grid selection aggregates container.
/// @group grid
$kendo-grid-selection-aggregates-border-width: $kendo-grid-border-width !default;
/// The spacing between the selection aggregates items.
/// @group grid
$kendo-grid-selection-aggregates-spacing: k-spacing(2) !default;
/// The line height of the Grid selection aggregates container.
/// @group grid
$kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default;
/// The font weight of the Grid selection aggregates container.
/// @group grid
$kendo-grid-selection-aggregates-font-weight: var( --kendo-font-weight-bold, normal ) !default;

$kendo-grid-grouping-row-bg: $kendo-base-bg !default;
$kendo-grid-grouping-row-text: $kendo-grid-text !default;

$kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default;
$kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( k-contrast-legacy( $kendo-grid-bg ), .02 )) !default;
$kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
$kendo-grid-sorting-index-font-size: var( --kendo-font-size-sm, inherit ) !default;
$kendo-grid-sorting-index-height: $kendo-icon-size !default;
$kendo-grid-sorting-index-spacing-y: calc( #{$kendo-icon-spacing} / 2 ) !default;
$kendo-grid-sorting-index-spacing-x: calc( #{$kendo-grid-sorting-index-spacing-y} * -1) !default;


$kendo-grid-focus-shadow: $kendo-table-focus-shadow !default;

$kendo-grid-command-cell-button-spacing: k-spacing(2) !default;
// be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
$kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em}) / 2 ) !default;

// Must be a solid color
$kendo-grid-sticky-bg: $kendo-component-bg !default;
$kendo-grid-sticky-text: $kendo-grid-text !default;
$kendo-grid-sticky-border: rgba( black, .3 ) !default;

// Must be a solid color
$kendo-grid-sticky-alt-bg: if($kendo-enable-color-system, k-color( base ), k-color-shade($kendo-grid-bg, 3.5%)) !default;

$kendo-grid-sticky-header-bg: $kendo-grid-header-bg !default;
$kendo-grid-sticky-header-text: $kendo-grid-header-text !default;
$kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;

$kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
$kendo-grid-sticky-footer-hover-bg: $kendo-grid-hover-bg !default;

$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), k-color-mix($kendo-selected-bg, #ffffff, 25%)) !default;
$kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 24%, transparent), k-color-shade($kendo-grid-sticky-selected-bg, .4)) !default;

// Must be a solid color
$kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-grid-bg, 8%)) !default;
$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 24%, transparent), k-color-shade($kendo-grid-sticky-selected-bg, .7)) !default;

$kendo-grid-column-menu-width: 230px !default;
$kendo-grid-column-menu-max-width: 320px !default;

$kendo-grid-filter-menu-check-all-border-bottom-width: 1px !default;

$kendo-grid-filter-menu-item-spacing-x: k-spacing(2) !default;
$kendo-grid-filter-menu-item-spacing-y: $kendo-grid-filter-menu-item-spacing-x !default;

$kendo-grid-column-menu-popup-padding-x: null !default;
$kendo-grid-column-menu-popup-padding-y: null !default;

$kendo-grid-column-menu-item-padding-x: $kendo-menu-popup-item-padding-x !default;
$kendo-grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y !default;

$kendo-grid-column-menu-list-item-padding-x: $kendo-list-md-item-padding-x !default;
$kendo-grid-column-menu-list-item-padding-y: $kendo-list-md-item-padding-y !default;

$kendo-grid-column-menu-items-wrap-padding-x: k-spacing(0) !default;
$kendo-grid-column-menu-items-wrap-padding-y: k-spacing(1.5) !default;

$kendo-grid-column-menu-group-header-padding-x: $kendo-menu-popup-md-item-padding-x !default;
$kendo-grid-column-menu-group-header-padding-y: $kendo-menu-popup-md-item-padding-y !default;

$kendo-grid-column-menu-group-header-font-size: var( --kendo-font-size-sm, inherit ) !default;
$kendo-grid-column-menu-group-header-line-height: var( --kendo-line-height, normal ) !default;
$kendo-grid-column-menu-group-header-text-transform: uppercase !default;
$kendo-grid-column-menu-group-header-border-bottom-width: 1px !default;

$kendo-grid-column-menu-group-header-bg: null !default;
$kendo-grid-column-menu-group-header-text: $kendo-popup-text !default;
$kendo-grid-column-menu-group-header-border: $kendo-popup-border !default;

$kendo-grid-column-menu-tabbed-tabstrip-content-padding-x: k-spacing(0) !default;
$kendo-grid-column-menu-tabbed-tabstrip-content-padding-y: k-spacing(2) !default;

$kendo-grid-column-menu-tabbed-bg: $kendo-base-bg !default;

$kendo-grid-drag-cell-width: ($kendo-icon-size * 2.25) !default;

$kendo-grid-row-inner-height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-cell-padding-y} * 2 ) ) !default;

$kendo-grid-hierarchy-col-width: ($kendo-icon-size * 2) !default;

$kendo-grid-grouping-row-border-top: 1px !default;
$kendo-grid-group-footer-border-y: 1px !default;
$kendo-grid-group-footer-second-cell-border: 1px !default;

/// The background color of the Grid row resize indicator.
/// @group grid
$kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) !default;
/// The background color of the active Grid row resize indicator.
/// @group grid
$kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
/// The height of the Grid row resize indicator.
/// @group grid
$kendo-grid-row-resizer-height: k-spacing(0.5) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/grid/_layout.scss
@mixin kendo-grid--layout-base() {

    // Grid
    .k-grid {
        border-width: $kendo-grid-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-grid-font-family;
        font-size: $kendo-grid-font-size;
        line-height: $kendo-grid-line-height;
        display: flex;
        flex-direction: column;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        &.k-grid-display-block {
            display: block;
        }

        .k-grid-container {
            display: flex;
            flex: 1 1 auto;
            overflow: hidden;
            position: relative;
        }

        .k-grid-aria-root {
            border-color: inherit;
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            overflow: hidden;
        }

        .k-table {
            margin: 0;
            width: 100%;
            max-width: none;
            border-width: 0;
            border-color: inherit;
            border-collapse: separate;
            border-spacing: 0;
            box-sizing: content-box;
            empty-cells: show;
            outline: 0;
        }

        .k-grid-header,
        .k-grid-content,
        .k-grid-content-locked,
        .k-grid-footer {
            .k-table {
                table-layout: fixed;
            }
        }

        .k-table-thead,
        .k-table-tbody,
        .k-table-tfoot {
            text-align: start;
            border-color: inherit;
        }

        .k-table-row {
            border-color: inherit;
        }

        .k-table-th,
        td,
        .k-table-td {
            border-width: 0;
            border-inline-start-width: $kendo-grid-cell-vertical-border-width;
            border-style: solid;
            border-color: inherit;
            outline: 0;
            font-weight: inherit;
            text-align: inherit;
            position: static;
            overflow: hidden;
            text-overflow: ellipsis;
            box-sizing: content-box;

            &:first-child {
                border-inline-start-width: 0;
            }

            &:focus {
                outline: none;
            }

            > .k-radio,
            > .k-radio-wrap,
            > .k-checkbox,
            > .k-checkbox-wrap {
                vertical-align: top;
            }
        }

        .k-table-th {
            border-block-end-width: 1px;
            white-space: nowrap;
        }

        td,
        .k-table-td {
            border-block-end-width: $kendo-grid-cell-horizontal-border-width;
            white-space: unset;
            vertical-align: middle;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        .k-grid-header-wrap {
            box-sizing: content-box;
        }

        .k-grid-header {
            border-bottom-width: 1px;
            font-size: $kendo-grid-header-font-size;

            .k-table {
                margin-bottom: -1px;
            }

            &.k-grid-draggable-header {
                user-select: none;
                touch-action: none;
            }

            .k-table-th {
                position: relative;
                vertical-align: bottom;
                cursor: default;

                &:first-child {
                    border-inline-start-width: 0;
                }

                &.k-first {
                    border-inline-start-width: $kendo-grid-header-first-border;
                }
            }

            .k-table-th > .k-link {
                line-height: inherit;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                outline: 0;
            }

            .k-table-th > .k-link:focus {
                text-decoration: none;
            }

            .k-grid-filter,
            .k-header-column-menu,
            .k-grid-header-menu {
                box-sizing: border-box;
                outline: 0;
                display: flex;
                align-items: center;
                align-content: center;
                justify-content: center;
                position: absolute;
                inset-inline-end: $kendo-grid-header-menu-icon-spacing;
                z-index: 1;

                &:hover {
                    cursor: pointer;
                }
            }

            .k-cell-inner > .k-link {
                > .k-sort-icon {
                    vertical-align: text-top;
                    margin-inline-start: $kendo-grid-sorted-icon-spacing;
                }
            }

            .k-cell-inner > .k-link > .k-sort-icon .k-icon {
                display: flex;
            }

            .k-sort-order {
                display: inline-block;
                vertical-align: top;
                height: $kendo-icon-size;
                font-size: $kendo-grid-sorting-index-font-size;
                margin-top: $kendo-grid-sorting-index-spacing-y;
                margin-inline-start: $kendo-grid-sorting-index-spacing-x;
            }
        }

        .k-grid-header .k-filterable {
            > .k-cell-inner {
                .k-link {
                    padding-inline-end: 0;
                }
            }
        }

        .k-cell-inner {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: inherit;
            overflow: hidden;

            > .k-link {
                width: auto;
                display: flex;
                flex-flow: row nowrap;
                align-items: center;
                justify-content: inherit;
                flex: 1;
                overflow: hidden;

                > .k-sort-icon {
                    margin-inline-start: 0;
                    display: inline-block;
                    flex-shrink: 0;
                }

            }

            .k-sort-order {
                flex-shrink: 0;
                line-height: normal;
            }

            .k-grid-filter,
            .k-header-column-menu,
            .k-grid-header-menu {
                position: static;
                margin-inline-end: $kendo-grid-header-menu-icon-spacing;
            }
        }


        // Grouping, hierarcy
        .k-group-col,
        .k-hierarchy-col {
            padding: 0;
            width: $kendo-grid-hierarchy-col-width;
        }

        .k-grouping-row p {
            margin: 0;
            display: flex;
            align-items: center;
            align-content: center;
        }

        .k-grouping-row td,
        .k-grouping-row .k-table-td {
            overflow: visible;
        }

        .k-grouping-row + .k-table-row td,
        .k-grouping-row + .k-table-row .k-table-td {
            border-top-width: $kendo-grid-grouping-row-border-top;
        }

        .k-grouping-row .k-group-cell,
        .k-grouping-row + .k-table-row .k-group-cell {
            border-top-width: 0;
            text-overflow: clip;
        }

        .k-grouping-row .k-icon {
            margin-inline-start: calc( #{k-math-div( $kendo-icon-size, 2 )} - #{$kendo-grid-cell-padding-x} );
            margin-inline-end: k-math-div( $kendo-icon-size, 2 );
            text-decoration: none;
        }

        .k-table .k-group-footer td,
        .k-table .k-group-footer .k-table-td {
            border-style: solid;
            border-width: $kendo-grid-group-footer-border-y 0;
        }

        .k-group-footer .k-group-cell + td,
        .k-group-footer .k-group-cell + .k-table-td {
            border-inline-start-width: $kendo-grid-cell-vertical-border-width;
        }

        .k-hierarchy-cell,
        .k-drag-cell {
            text-align: center;
            overflow: visible;

            > .k-font-icon {
                padding-block: $kendo-grid-cell-padding-y;
                padding-inline: 0;
                width: 100%;
                height: 100%;
                // That causes an issue with grid material. Commenting it for now
                // -- joneff
                // line-height: $kendo-line-height-md;
                display: inline-block;
                outline: 0;
            }
        }

        .k-hierarchy-cell + .k-grid-content-sticky {
            border-inline-start-width: $kendo-grid-cell-vertical-border-width;
        }
        .k-detail-cell {}
        .k-master-row {}

        .k-detail-row {
            .k-detail-cell {
                border-inline-start-width: 0;
            }
        }

        .k-dirty-cell {
            position: relative;

            &.k-edit-cell {
                position: static;
            }

            &.k-grid-content-sticky {
                position: sticky;
            }
        }

        .k-dirty {
            border-width: 5px;
            border-color: transparent;
            border-block-start-color: currentColor;
            border-inline-start-color: currentColor;
            inset-inline-start: 0;
            inset-inline-end: auto;
        }

        .k-grid-content-locked + .k-grid-content {
            box-sizing: content-box;
        }

        .k-grid-content-expander {
            position: absolute;
            visibility: hidden;
            height: 1px;
            bottom: 1px; // fix for vertical scrollbar appearing when no records template is displayed
        }

        .k-grid-filter,
        .k-header-column-menu,
        .k-grid-header-menu,
        .k-hierarchy-cell .k-icon {
            border-width: 0;
        }

        // Drag column
        .k-drag-col {
            padding: 0;
            width: $kendo-grid-drag-cell-width;
        }

        .k-drag-cell {
            cursor: move;
        }
    }

    // Toolbar
    .k-grid-toolbar {
        border-width: 0 0 $kendo-grid-toolbar-border-width;
        flex-shrink: 0;
    }
    .k-grid-toolbar-bottom {
        border-width: $kendo-grid-toolbar-border-width 0 0;
    }


    // Grouping header
    .k-grouping-header {
        border-width: 0 0 1px;
        border-style: solid;
        border-color: inherit;
        white-space: normal;
        display: flex;
        align-items: center;
        position: relative;
        flex-wrap: wrap;

        &::before {
            content: "";
            height: $kendo-chip-calc-size;
            display: inline-block;
            vertical-align: middle;
        }

        .k-chip-list {
            flex-grow: 0;
            display: contents;
        }

        > .k-grouping-drop-container {
            flex-grow: 1;
            padding-block: $kendo-grid-grouping-header-padding-y;
            margin-block: calc( #{$kendo-grid-grouping-header-padding-y} * -1 );
            display: inline-flex;
            align-self: stretch;
            align-items: center;
        }
    }

    .k-grouping-dropclue {
        width: ($kendo-grid-group-drop-hint-size * 2);
        position: absolute;
        top: $kendo-grid-group-drop-hint-top;
        box-sizing: content-box;

        &::before,
        &::after {
            display: inline-block;
            content: "";
            position: absolute;
        }

        &::before {
            border-width: $kendo-grid-group-drop-hint-size;
            border-style: solid;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            top: 0;
        }

        &::after {
            width: $kendo-grid-group-drop-hint-line-size;
            height: calc(100% - #{$kendo-grid-group-drop-hint-size});
            top: $kendo-grid-group-drop-hint-size;
            inset-inline-start: calc( #{$kendo-grid-group-drop-hint-size} - #{k-math-div( $kendo-grid-group-drop-hint-line-size, 2 )} );
        }
    }


    // Grid header / footer
    .k-grid-header-wrap,
    .k-grid-footer-wrap {
        margin-inline-end: -#{$kendo-grid-cell-vertical-border-width};
        width: 100%;
        border-width: 0;
        border-inline-end-width: $kendo-grid-cell-vertical-border-width;
        border-style: solid;
        border-color: inherit;
        position: relative;
        overflow: hidden;
    }

    .k-grid-header-locked + .k-grid-header-wrap.k-auto-scrollable {
        margin-inline-end: 0;
    }

    .k-grid-header,
    .k-grid-footer {
        padding-inline-start: 0;
        padding-inline-end: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width});
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        flex: 0 0 auto;
    }

    div.k-grid-header,
    div.k-grid-footer {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    .k-column-resizer {
        width: .5em;
        height: 1000%;
        display: block;
        position: absolute;
        top: 0;
        inset-inline-end: 0;
        cursor: col-resize;
    }

    .k-row-resizer {
        display: block;
        height: $kendo-grid-row-resizer-height;
        width: 100%;
        background: none;
    }

    .k-grid-footer {
        border-top-width: 1px;

        td,
        .k-table-td {
            height: $kendo-line-height-em;
        }
    }

    .k-grid-footer td,
    .k-group-footer td,
    .k-grouping-row td,
    .k-grid-footer .k-table-td,
    .k-group-footer .k-table-td,
    .k-grouping-row .k-table-td {
        font-weight: bold;
    }

    .k-grid-filter-popup {
        min-width: $kendo-grid-column-menu-width;
        max-width: $kendo-grid-column-menu-max-width;
    }

    // Standalone column menu
    .k-grid-column-menu-standalone a.k-grid-filter {
        position: initial;
        display: inline-block;
        margin-block: -4px;
        margin-inline: 0;
        padding-block: 4px;
        padding-inline: 8px;
    }

    // Filter row
    .k-filter-row {
        line-height: $kendo-form-line-height;

        td,
        .k-table-td,
        .k-table-th {
            border-width: 0;
            border-block-end-width: 1px;
            border-inline-start-width: $kendo-grid-cell-vertical-border-width;
            white-space: nowrap;
        }

        td:first-child,
        .k-table-td:first-child {
            border-inline-start-width: 0;
        }

        .k-multiselect {
            height: auto;
        }
    }

    .k-filtercell {
        width: auto;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        > span,
        .k-filtercell-wrapper {
            width: 100%;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            flex: 1 1 auto;

            > .k-button {
                flex: none;
            }
        }

    }

    // Grid content
    .k-grid-content,
    .k-grid-content-locked {
        border-color: inherit;
        outline: 0;

        .k-table-row:last-child > td,
        .k-table-row:last-child > .k-table-td {
            border-bottom-width: 0;
        }
    }

    .k-grid-content {
        width: 100%;
        min-height: 0;
        overflow: auto;
        overflow-x: auto;
        overflow-y: scroll;
        position: relative;
        flex: 1;
    }

    // Virtualization
    .k-virtual-scrollable-wrap {
        height: 100%;
        overflow-y: hidden;
        position: relative;
    }

    // Edit row
    .k-grid .k-edit-cell,
    .k-grid .k-command-cell,
    .k-grid .k-grid-edit-row td,
    .k-grid .k-grid-edit-row .k-table-td {
        text-overflow: clip;
    }

    .k-grid .k-edit-cell,
    .k-grid .k-grid-edit-row td,
    .k-grid .k-grid-edit-row .k-table-td {

        > input:not([type="checkbox"]):not([type="radio"]),
        > select,
        > .k-widget:not(.k-switch) {
            width: 100%;
            vertical-align: middle;
            box-sizing: border-box;
        }
        > .k-radio,
        > .k-checkbox,
        > .k-radio-wrap,
        > .k-checkbox-wrap {
            vertical-align: middle;
        }
    }

    .k-grid .k-command-cell > .k-button {
        margin-inline-end: $kendo-grid-command-cell-button-spacing;
        vertical-align: middle;

        &:last-child {
            margin-inline-end: unset;
        }
    }


    // Resize handle
    .k-grid > .k-resize-handle,
    .k-grid-header .k-resize-handle {
        height: 25px;
        cursor: col-resize;
        position: absolute;
        z-index: 2;
    }


    // Selection Aggregates
    .k-selection-aggregates {
        border-width: $kendo-grid-selection-aggregates-border-width 0 0;
        border-style: solid;
        line-height: $kendo-grid-selection-aggregates-line-height;
        display: flex;
        justify-content: flex-end;
        gap: $kendo-grid-selection-aggregates-spacing;
    }
    .k-selection-aggregates-item-value {
        font-weight: $kendo-grid-selection-aggregates-font-weight;
    }


    // Pager
    .k-grid-pager {
        border-width: 1px 0 0;
        border-color: inherit;
        font-size: inherit;
    }
    .k-grid-pager-top {
        border-width: 0 0 1px;
    }

    .k-grid-virtual .k-grid-content {
        .k-grid-table-wrap {
            float: left;
            width: 100%;
        }

        .k-grid-table {
            position: relative;
            float: left;
            z-index: 1;
        }

        > .k-height-container {
            position: relative;
            float: left;
        }

        &::after {
            content: "";
            display: block;
            clear: both;
        }
    }

    .k-width-container {
        position: absolute;
        visibility: hidden;
    }

    .k-width-container  div {
        height: 1px;
    }

    .k-grid-add-row td,
    .k-grid-add-row .k-table-td {
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }

    // Locked columns
    .k-grid-lockedcolumns {
        white-space: nowrap;
    }

    .k-grid-content,
    .k-grid-content-locked {
        white-space: normal;
    }

    .k-grid-content-locked,
    .k-grid-footer-locked,
    .k-grid-header-locked {
        flex: 0 0 auto;
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
        position: relative;
        border-style: solid;
        border-width: 0;
        border-inline-end-width: $kendo-grid-cell-vertical-border-width;
        box-sizing: content-box;

        & + .k-grid-content.k-auto-scrollable {
            display: inline-block;
        }

        .k-table {
            border-width: 0;
        }
    }

    .k-grid-content,
    .k-grid-footer-wrap,
    .k-grid-header-wrap {
        flex: 1 1 auto;
        display: inline-block;
        vertical-align: top;

        &.k-auto-scrollable {
            display: block;
        }
    }

    .k-grid-header-locked > .k-grid-header-table,
    .k-grid-header-wrap > .k-grid-header-table {
        margin-bottom: -1px;
    }

    .k-grid-header .k-table-th.k-grid-header-sticky,
    .k-grid-header .k-filter-row .k-grid-header-sticky,
    .k-grid .k-grid-content-sticky,
    .k-grid .k-grid-row-sticky,
    .k-grid .k-grid-footer-sticky {
        position: sticky;
        z-index: 2;

        &.k-edit-cell {
            overflow: visible;
            z-index: 3;
        }
    }

    .k-master-row .k-grid-content-sticky::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    kendo-grid {
        .k-table-row.k-grid-row-sticky {
            border: 0;
            position: static;
            z-index: auto;
        }

        .k-grid-row-sticky td,
        .k-grid-row-sticky .k-table-td {
            border-bottom-width: $kendo-grid-border-width;
            border-top-width: $kendo-grid-border-width;

            position: sticky;
            top: inherit;
            bottom: inherit;
            z-index: 2;
        }

        .k-grid-row-sticky td.k-grid-content-sticky,
        .k-grid-row-sticky.k-table-alt-row td.k-grid-content-sticky,
        .k-grid-row-sticky .k-table-td.k-grid-content-sticky,
        .k-grid-row-sticky.k-table-alt-row .k-table-td.k-grid-content-sticky {
            z-index: 3;
        }

        // Locked and sticky
        .k-grid-header-locked .k-table-th.k-grid-header-sticky:last-child,
        .k-grid-content-locked .k-table-row .k-grid-content-sticky:last-child {
            border-inline-end: 0;
        }

        .k-grid-header .k-grid-column-menu,
        .k-grid-header .k-grid-header-menu {
            z-index: 1;
        }
    }

    .k-grid-content-sticky.k-grid-row-sticky {
        z-index: 3;
    }

    .k-grid .k-table .k-grid-header-sticky,
    .k-grid .k-table .k-grid-content-sticky,
    .k-grid .k-table .k-grid-footer-sticky {
        border-inline-end-width: $kendo-grid-cell-vertical-border-width;

        &:not([style*="display: none"]) + td,
        &:not([style*="display: none"]) + .k-table-td,
        &:not([style*="display: none"]) + .k-table-th {
            border-inline-start-width: 0;
        }
    }

    .k-grid .k-grid-row-sticky {
        border-bottom-width: $kendo-grid-border-width;
        border-top-width: $kendo-grid-border-width;
    }

    .k-grid-header-sticky.k-table-th.k-grid-no-left-border.k-first {
        border-inline-start-width: 0;
    }

    .k-grid.k-grid-no-scrollbar {

        .k-grid-header-wrap,
        .k-grid-footer-wrap {
            margin: 0;
            border-width: 0;
        }

        .k-grid-header,
        .k-grid-footer {
            padding: 0;
        }

        .k-grid-content {
            overflow-y: auto;
        }
    }

    .k-grid-norecords {
        text-align: center;
    }

    div.k-grid-norecords {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .k-grid-norecords-template {
        box-sizing: border-box;
        margin-block: 0;
        margin-inline: auto;
        width: 20em;
        height: 4em;
        border: 1px solid;
        line-height: 4em;
    }

    .k-column-title {
        min-width: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-shrink: 1;
        overflow: hidden;
    }


    // Grid Sizes
    @each $size, $size-props in $kendo-grid-sizes {
        $_header-padding-x: k-map-get( $size-props, header-padding-x );
        $_header-padding-y: k-map-get( $size-props, header-padding-y );
        $_grouping-header-padding-x: k-map-get( $size-props, grouping-header-padding-x );
        $_grouping-header-padding-y: k-map-get( $size-props, grouping-header-padding-y );
        $_cell-padding-x: k-map-get( $size-props, cell-padding-x );
        $_cell-padding-y: k-map-get( $size-props, cell-padding-y );
        $_filter-cell-padding-x: k-map-get( $size-props, filter-cell-padding-x );
        $_filter-cell-padding-y: k-map-get( $size-props, filter-cell-padding-y );
        $_edit-cell-padding-x: k-map-get( $size-props, edit-cell-padding-x );
        $_edit-cell-padding-y: k-map-get( $size-props, edit-cell-padding-y );
        $_button-padding-y: k-map-get( $size-props, button-padding-y );
        $_button-calc-size: k-map-get( $size-props, button-calc-size );
        $_button-line-height: k-map-get( $size-props, button-line-height );
        $_group-dropclue-height: k-map-get( $size-props, group-dropclue-height );
        $_selection-aggregates-padding-x: k-map-get( $size-props, selection-aggregates-padding-x );
        $_selection-aggregates-padding-y: k-map-get( $size-props, selection-aggregates-padding-y );

        .k-grid .k-grid-#{$size},
        .k-grid-#{$size} {

            .k-table-th {
                padding-block: $_header-padding-y;
                padding-inline: $_header-padding-x;
            }

            td,
            .k-table-td {
                padding-block: $_cell-padding-y;
                padding-inline: $_cell-padding-x;
            }

            .k-grouping-header {
                padding-block: $_grouping-header-padding-y;
                padding-inline: $_grouping-header-padding-x;
                gap: $_grouping-header-padding-y;

                &::before {
                    margin-inline-start: calc( #{$_grouping-header-padding-y} * -1 );
                }
            }

            .k-grid-header {
                .k-table-th > .k-link {
                    margin-block: calc( #{$_header-padding-y} * -1 );
                    margin-inline: calc( #{$_header-padding-x} * -1 );
                    padding-block: $_header-padding-y;
                    padding-inline: $_header-padding-x;
                }

                .k-grid-filter,
                .k-header-column-menu,
                .k-grid-header-menu {
                    padding: $_button-padding-y;
                    width: $_button-calc-size;
                    height: $_button-calc-size;
                    line-height: $_button-line-height;
                    bottom: calc( #{$_header-padding-y} + #{k-math-div( $kendo-line-height-em, 2)} - #{k-math-div( $kendo-button-inner-calc-size, 2 )} );
                }
            }

            .k-table-th {
                > .k-cell-inner {
                    margin-block: calc( #{$_header-padding-y} * -1 );
                    margin-inline: calc( #{$_header-padding-x} * -1 );

                    > .k-link {
                        padding-block: $_header-padding-y;
                        padding-inline: $_header-padding-x;
                    }
                }
            }

            .k-grouping-row .k-icon {
                margin-inline-start: calc( #{k-math-div( $kendo-icon-size, 2 )} - #{$_cell-padding-x} );
            }

            .k-grouping-dropclue {
                height: $_group-dropclue-height;
            }

            .k-hierarchy-cell,
            .k-drag-cell {
                padding: 0;

                > .k-icon {
                    padding-block: $_cell-padding-y;
                    padding-inline: 0;
                }
            }


            // Edit row
            .k-edit-cell,
            .k-command-cell,
            .k-grid-edit-row td,
            .k-grid-edit-row .k-table-td {
                padding-block: $_edit-cell-padding-y;
                padding-inline: $_edit-cell-padding-x;
            }


            // Filter row
            .k-filter-row {
                td,
                .k-table-td,
                .k-table-th {
                    padding-block: $_filter-cell-padding-y;
                    padding-inline: $_filter-cell-padding-x;
                }
            }

            .k-filtercell {
                > span,
                .k-filtercell-wrapper {
                    gap: calc( #{$_cell-padding-y} / 2 );
                }
            }


            // Selection Aggregates
            .k-selection-aggregates {
                padding-block: $_selection-aggregates-padding-x;
                padding-inline: $_selection-aggregates-padding-y;
            }

            // Resizing wrapper
            .k-resizer-wrap {
                display: block;
                width: 100%;
                padding-block-start: calc( #{$_edit-cell-padding-y} - #{$kendo-grid-row-resizer-height} );
                padding-block-end: $_edit-cell-padding-y;
                position: absolute;
                background: none;
                cursor: row-resize;
                z-index: 2;
            }
        }

    }


    // PDF export
    .k-loading-pdf-mask {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 100;

        > .k-i-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 64px;
        }

        .k-loading-pdf-progress {
            margin: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

    }

    .k-pdf-export .k-loading-pdf-mask {
        display: none;
    }

    .k-grid-pdf-export-element {
        position: absolute;
        left: -10000px;
        top: -10000px;

        .k-filter-row {
            display: none;
        }
    }

    // Remove Grid scrollbar during built-in export
    // stylelint-disable declaration-no-important
    .k-pdf-export-shadow {
        .k-grid {
            float: left;
            width: auto !important;
        }

        // Remove all sizes and scrolling
        .k-grid,
        .k-grid-content,
        .k-grid-content-locked {
            height: auto !important;
            overflow: visible;
        }

        .k-grid-header-locked {
            & + .k-grid-header-wrap,
            & + .k-grid-content,
            & + .k-grid-footer-wrap {
                width: auto !important;
            }
        }

        // Remove empty space reserved above .k-table-the scrollbar
        .k-grid-header,
        .k-grid[data-role="grid"] .k-grid-footer {
            padding: 0 !important;
        }
    }
    // stylelint-enable declaration-no-important


    // Filter menu
    .k-filter-menu-popup {
        min-width: $kendo-grid-column-menu-width;
        max-width: $kendo-grid-column-menu-max-width;
    }
    .k-filter-menu {
        box-sizing: border-box;
    }
    .k-filter-menu-container {
        padding: k-spacing(2);
        box-sizing: border-box;
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;
        gap: k-spacing(2);

        .k-filter-and {
            width: min-content;
            align-self: start;
        }

        .k-actions {
            margin: 0;
            padding: 0;
        }

        // Angular specific
        kendo-numeric-filter-menu,
        kendo-grid-string-filter-menu,
        kendo-grid-date-filter-menu,
        kendo-grid-numeric-filter-menu,
        kendo-grid-filter-menu-input-wrapper,
        kendo-treelist-string-filter-menu,
        kendo-treelist-date-filter-menu,
        kendo-treelist-numeric-filter-menu,
        kendo-treelist-filter-menu-input-wrapper {
            display: flex;
            flex-flow: column nowrap;
            align-items: stretch;
            gap: k-spacing(2);
        }
    }

    .k-filter-menu.k-popup,
    .k-grid-filter-popup.k-popup {

        .k-filter-menu-container {
            min-width: $kendo-grid-column-menu-width;
            max-width: $kendo-grid-column-menu-max-width;
        }
    }

    .k-popup .k-multicheck-wrap {
        margin: 0;
        padding: 0;
        max-height: 300px;
        font-size: $kendo-list-font-size;
        line-height: $kendo-list-line-height;
        white-space: nowrap;
        overflow: auto;
        list-style: none;

        .k-item,
        .k-check-all-wrap {
            padding-block: $kendo-grid-column-menu-list-item-padding-y;
            padding-inline: $kendo-grid-column-menu-list-item-padding-x;
            display: flex;
            flex-flow: row nowrap;
        }
    }

    .k-filter-selected-items {
        font-weight: bold;
        line-height: normal;
        white-space: nowrap;
    }

    // autofitting requires automatic table layout to measure sizes
    .k-autofitting {
        width: auto !important; // stylelint-disable-line declaration-no-important
        table-layout: auto !important; // stylelint-disable-line declaration-no-important

        .k-table-th,
        td,
        .k-table-td {
            white-space: nowrap !important; // stylelint-disable-line declaration-no-important
        }

        .k-detail-row {
            display: none !important; // stylelint-disable-line declaration-no-important
        }
    }



    // Column menu
    .k-column-menu-popup,
    .k-grid-columnmenu-popup {
        min-width: $kendo-grid-column-menu-width;
        box-sizing: border-box;

        &.k-popup {
            padding-block: $kendo-grid-column-menu-popup-padding-y;
            padding-inline: $kendo-grid-column-menu-popup-padding-x;
            max-width: $kendo-grid-column-menu-max-width;
        }

        .k-actions {
            margin: 0;
        }

    }
    .k-column-menu {
        box-sizing: border-box;

        .k-menu:not(.k-context-menu) {
            font-weight: 400;
        }

        .k-expander {
            border: 0;
            background: inherit;

            .k-columnmenu-item {
                display: flex;
                align-items: center;
            }
        }
    }
    .k-column-menu-tabbed {
        border-radius: $kendo-tabstrip-item-border-radius $kendo-tabstrip-item-border-radius 0 0;

        .k-tabstrip-items {
            margin: (-$kendo-tabstrip-item-border-width) (-$kendo-tabstrip-item-border-width) 0;

            .k-item {
                flex: 1;
            }

            .k-link {
                justify-content: center;
            }
        }

        .k-tabstrip-content {
            padding-inline: $kendo-grid-column-menu-tabbed-tabstrip-content-padding-x;
            padding-block: $kendo-grid-column-menu-tabbed-tabstrip-content-padding-y;
            border-width: 0;
        }
    }

    .k-column-list {
        padding: 0;
        margin: 0;
        list-style: none;
        max-height: 200px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .k-column-chooser-title,
    .k-column-list-item {
        padding-block: $kendo-grid-column-menu-list-item-padding-y;
        padding-inline: $kendo-grid-column-menu-list-item-padding-x;
    }

    .k-column-list-item {
        margin: 0;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        position: relative;

        .k-checkbox-label {
            margin: 0;
        }

        &:focus {
            outline: none;
        }
    }

    .k-columns-items-wrap {
        padding-block: $kendo-grid-column-menu-items-wrap-padding-y;
        padding-inline: $kendo-grid-column-menu-items-wrap-padding-x;
    }

    .k-columnmenu-item {
        padding-block: $kendo-grid-column-menu-item-padding-y;
        padding-inline: $kendo-grid-column-menu-item-padding-x;
        outline: 0;
        cursor: pointer;

        > .k-icon,
        > .k-expander-indicator {
            margin-inline-end: $kendo-icon-spacing;
        }
    }

    .k-columnmenu-item-wrapper + .k-columnmenu-item-wrapper {
        border-top: 1px solid;
        border-top-color: $kendo-popup-border;
    }

    .k-columnmenu-item-content {
        overflow: hidden;
    }

    .k-column-menu-group-header {
        padding-block: $kendo-grid-column-menu-group-header-padding-y;
        padding-inline: $kendo-grid-column-menu-group-header-padding-x;
        display: flex;
        flex: 0 0 auto;
        position: relative;
        user-select: none;
    }

    .k-column-menu-group-header-text {
        border-bottom-width: $kendo-grid-column-menu-group-header-border-bottom-width;
        border-bottom-style: solid;
        font-size: $kendo-grid-column-menu-group-header-font-size;
        line-height: $kendo-grid-column-menu-group-header-line-height;
        font-weight: bold;
        text-transform: $kendo-grid-column-menu-group-header-text-transform;
        flex: 1 1 auto;
    }

    .k-rtl .k-grid-virtual .k-grid-content,
    [dir="rtl"] .k-grid-virtual .k-grid-content,
    .k-rtl.k-grid-virtual .k-grid-content,
    [dir="rtl"].k-grid-virtual .k-grid-content {

        .k-grid-table-wrap,
        .k-grid-table,
        > .k-height-container {
            float: right;
        }
    }

}


@mixin kendo-grid--layout() {
    @include kendo-grid--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/grid/_theme.scss
@mixin kendo-grid--theme-base() {

    .k-grid-header,
    .k-grid-header-wrap,
    .k-grouping-header,
    .k-grid .k-table-th,
    .k-grid td,
    .k-grid .k-table-td,
    .k-grid-footer,
    .k-grid-footer-wrap,
    .k-grid-content-locked,
    .k-grid-footer-locked,
    .k-grid-header-locked,
    .k-filter-row > .k-table-th,
    .k-filter-row > td,
    .k-filter-row > .k-table-td {
        @include fill( $border: $kendo-grid-header-border );
    }

    .k-grid-header,
    .k-grouping-header,
    .k-grid-add-row,
    .k-grid-footer {
        @include fill(
            $color: $kendo-grid-header-text,
            $bg: $kendo-grid-header-bg
        );
    }

    .k-grid .k-table {
        background-color: inherit;
    }

    .k-grid-toolbar {
        @include fill(
            null,
            null,
            inherit,
            null
        );
        @include box-shadow( none );
    }

    .k-grid-content {
        // setting this background color resolves glitches in iOS
        @include fill($bg: $kendo-grid-bg );
    }

    .k-group-footer td,
    .k-grouping-row td,
    .k-group-footer .k-table-td,
    .k-grouping-row .k-table-td,
    .k-table-tbody .k-group-cell {
        @include fill(
            $color: $kendo-grid-grouping-row-text,
            $bg: $kendo-grid-grouping-row-bg
        );
    }

    .k-grouping-dropclue {
        &::before {
            border-color: $kendo-grid-header-text transparent transparent;
        }

        &::after {
            background-color: $kendo-grid-header-text;
        }
    }

    .k-grid {
        @include fill( $kendo-grid-text, $kendo-grid-bg, $kendo-grid-border );

        // Alt row
        .k-table-row.k-table-alt-row {
            background-color: $kendo-grid-alt-bg;
        }

        // Hover state
        .k-table-tbody > .k-table-row:not(.k-detail-row):hover,
        .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover {
            color: $kendo-grid-hover-text;
            background-color: $kendo-grid-hover-bg;
        }

        // Selected state
        td.k-selected,
        .k-table-row.k-selected > td,
        .k-table-td.k-selected,
        .k-table-row.k-selected > .k-table-td {
            color: $kendo-grid-selected-text;
            background-color: $kendo-grid-selected-bg;
        }

        // Focused state
        .k-table-th,
        td,
        .k-table-td,
        .k-master-row > td,
        .k-grouping-row > td,
        .k-detail-row > td,
        .k-group-footer > td,
        .k-master-row > .k-table-td,
        .k-grouping-row > .k-table-td,
        .k-detail-row > .k-table-td,
        .k-group-footer > .k-table-td,
        .k-grid-pager {
            &:focus,
            &.k-focus {
                @include focus-indicator( $kendo-grid-focus-shadow, true );
            }
        }

        .k-grid-filter,
        .k-header-column-menu,
        .k-grid-header-menu,
        .k-hierarchy-cell .k-icon {
            color: $kendo-grid-header-text;
        }

        .k-grouping-row {
            background-color: $kendo-grid-grouping-row-bg;

            .k-icon {
                color: $kendo-grid-header-text;
            }

            .k-grid-content-sticky {
                border-color: $kendo-grid-sticky-border;
                border-top-color: $kendo-grid-header-border;
            }
        }

        // Locked columns
        .k-grid-header-locked,
        .k-grid-content-locked,
        .k-grid-header-locked .k-table-th,
        .k-grid-content-locked td,
        .k-grid-content-locked .k-table-td {
            border-color: $kendo-grid-sticky-header-border;
        }

        .k-grid-content-locked {
            .k-group-footer td,
            .k-group-footer .k-table-td,
            .k-group-cell {
                @include fill( $border: $kendo-grid-header-border );
            }

            .k-grouping-row + .k-table-row td,
            .k-grouping-row + .k-table-row .k-table-td {
                border-top-color: $kendo-grid-header-border;
            }

            // Selected state
            .k-selected td,
            .k-selected .k-table-td {
                @include fill( $bg: $kendo-grid-sticky-selected-bg );
            }

            .k-selected.k-table-alt-row td,
            .k-selected.k-table-alt-row .k-table-td {
                @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
            }

            // Selected hover
            .k-selected:hover td,
            .k-selected.k-hover td,
            .k-selected:hover .k-table-td,
            .k-selected.k-hover .k-table-td {
                @include fill( $bg: $kendo-grid-sticky-selected-hover-bg );
            }
        }

        .k-grid-header-locked .k-table-th {
            border-bottom-color: $kendo-grid-header-border;
        }
    }

    col.k-sorted,
    .k-table-th.k-sorted {
        background-color: $kendo-grid-sorted-bg;
    }

    // Grid header
    .k-grid-header {

        .k-sort-icon,
        .k-sort-order {
            color: $kendo-grid-sorting-indicator-text;
        }

        .k-grid-filter,
        .k-header-column-menu,
        .k-grid-header-menu,
        .k-hierarchy-cell .k-icon {
            &:hover {
                color: $kendo-button-hover-text;
                background-color: $kendo-button-hover-bg;
            }
            &:focus,
            &.k-focus {
                @include focus-indicator( inset 0 0 0 2px rgba( $kendo-color-black, .1 ), true );
            }
            &.k-active {
                color: $kendo-selected-text;
                background-color: $kendo-selected-bg;
            }
        }

        .k-table-th.k-grid-header-sticky,
        td.k-grid-header-sticky,
        .k-table-td.k-grid-header-sticky,
        .k-grid-header-sticky.k-sorted {
            @include fill(
                $color: $kendo-grid-sticky-header-text,
                $bg: $kendo-grid-sticky-header-bg
            );

            border-right-color: $kendo-grid-sticky-header-border;
            border-left-color: $kendo-grid-sticky-header-border;
        }
    }

    // Grid footer
    .k-grid-footer {
        @include fill(
            $kendo-grid-footer-text,
            $kendo-grid-footer-bg,
            $kendo-grid-footer-border
        );
        .k-grid-footer-sticky {
            border-left-color: $kendo-grid-sticky-border;
            border-right-color: $kendo-grid-sticky-border;
            background-color: $kendo-grid-sticky-footer-bg;
        }
    }

    // Selection Aggregates
    .k-selection-aggregates {
        @include fill(
            $kendo-grid-selection-aggregates-text,
            $kendo-grid-selection-aggregates-bg,
            $kendo-grid-selection-aggregates-border
        );
    }

    // Content
    .k-master-row {
        .k-grid-content-sticky {
            border-color: $kendo-grid-sticky-border;
            border-top-color: $kendo-grid-header-border;
            background-color: $kendo-grid-sticky-bg;
        }

        .k-grid-row-sticky {
            border-top-color: $kendo-grid-sticky-border;
            border-bottom-color: $kendo-grid-sticky-border;
            background-color: $kendo-grid-sticky-bg;
        }

        &.k-table-alt-row {
            .k-grid-content-sticky,
            .k-grid-row-sticky {
                @include fill( $bg: $kendo-grid-sticky-alt-bg );
            }
        }

        // Selected state
        &.k-table-row.k-selected td.k-grid-content-sticky,
        &.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
        &.k-table-row td.k-grid-content-sticky.k-selected,
        &.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
            @if($kendo-enable-color-system) {
                @include fill( $bg: $kendo-grid-sticky-bg );

                &::before {
                    @include fill( $bg: $kendo-grid-sticky-selected-bg );
                }
            } @else {
                @include fill( $bg: $kendo-grid-sticky-selected-bg );
            }
        }

        &.k-selected.k-table-alt-row td.k-grid-content-sticky,
        &.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky,
        &.k-table-alt-row td.k-grid-content-sticky.k-selected,
        &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
            @if($kendo-enable-color-system) {
                @include fill( $bg: $kendo-grid-sticky-alt-bg );

                &::before {
                    @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
                }
            } @else {
                @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
            }
        }


        // Hovered state
        &:hover .k-grid-content-sticky,
        &:hover .k-grid-row-sticky,
        &.k-hover .k-grid-content-sticky,
        &.k-hover .k-grid-row-sticky {
            background-color: $kendo-grid-sticky-hover-bg;
        }


        // Selected hover
        &.k-selected:hover td.k-grid-content-sticky,
        &.k-selected:hover .k-table-td.k-grid-row-sticky,
        &.k-selected.k-hover td.k-grid-content-sticky,
        &.k-selected.k-hover .k-table-td.k-grid-row-sticky,
        &:hover td.k-grid-content-sticky.k-selected,
        &.k-hover td.k-grid-content-sticky.k-selected,
        &:hover .k-table-td.k-grid-content-sticky.k-selected,
        &.k-hover .k-table-td.k-grid-content-sticky.k-selected {
            @if($kendo-enable-color-system) {
                background-color: $kendo-grid-sticky-hover-bg;

                &::before {
                    background-color: $kendo-grid-sticky-selected-hover-bg;
                }
            } @else {
                background-color: $kendo-grid-sticky-selected-hover-bg;
            }
        }
    }

    kendo-grid.k-grid {
        .k-grid-content-sticky {
            border-top-color: $kendo-grid-header-border;
            border-left-color: $kendo-grid-sticky-border;
            border-right-color: $kendo-grid-sticky-border;
            background-color: $kendo-grid-sticky-bg;

            &:hover,
            &.k-hover {
                background-color: $kendo-grid-sticky-hover-bg;
            }
        }

        .k-grid-row-sticky {
            td,
            .k-table-td {
                border-top-color: $kendo-grid-sticky-border;
                border-bottom-color: $kendo-grid-sticky-border;
                background-color: $kendo-grid-sticky-bg;
            }

            &:hover td,
            &.k-hover td,
            &:hover .k-table-td,
            &.k-hover .k-table-td {
                background-color: $kendo-grid-sticky-hover-bg;
            }
        }

        .k-table-alt-row .k-grid-content-sticky,
        .k-grid-row-sticky.k-table-alt-row td,
        .k-grid-row-sticky.k-table-alt-row .k-table-td {
            @include fill( $bg: $kendo-grid-sticky-alt-bg );
        }

        // Selected state
        .k-table-row.k-selected .k-grid-content-sticky,
        .k-selected.k-grid-row-sticky td,
        .k-grid-row-sticky td.k-selected,
        .k-selected.k-grid-row-sticky .k-table-td,
        .k-grid-row-sticky .k-table-td.k-selected,
        .k-selected.k-grid-content-sticky {
            @if($kendo-enable-color-system) {
                @include fill( $bg: $kendo-grid-sticky-bg );

                &::before {
                    @include fill( $bg: $kendo-grid-sticky-selected-bg );
                }
            } @else {
                @include fill( $bg: $kendo-grid-sticky-selected-bg );
            }
        }

        .k-table-row.k-selected.k-table-alt-row .k-grid-content-sticky,
        .k-selected.k-table-alt-row.k-grid-row-sticky td,
        .k-selected.k-table-alt-row.k-grid-row-sticky .k-table-td,
        .k-table-alt-row .k-selected.k-grid-content-sticky {
            @if($kendo-enable-color-system) {
                @include fill( $bg: $kendo-grid-sticky-alt-bg );

                &::before {
                    @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
                }
            } @else {
                @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
            }
        }

        // Hover state
        .k-table-row:hover .k-grid-content-sticky,
        .k-table-row.k-hover .k-grid-content-sticky,
        .k-grid-row-sticky:hover td,
        .k-grid-row-sticky.k-hover td,
        .k-grid-row-sticky.k-table-alt-row:hover td,
        .k-grid-row-sticky.k-table-alt-row.k-hover td,
        .k-grid-row-sticky:hover .k-table-td,
        .k-grid-row-sticky.k-hover .k-table-td,
        .k-grid-row-sticky.k-table-alt-row:hover .k-table-td,
        .k-grid-row-sticky.k-table-alt-row.k-hover .k-table-td,
        .k-table-alt-row:hover .k-grid-content-sticky,
        .k-table-alt-row.k-hover .k-grid-content-sticky {
            background-color: $kendo-grid-sticky-hover-bg;
        }

        // Selected + Hover
        .k-table-row.k-selected:hover .k-grid-content-sticky,
        .k-table-row.k-selected.k-hover .k-grid-content-sticky,
        .k-selected.k-grid-row-sticky:hover td,
        .k-selected.k-grid-row-sticky.k-hover td,
        .k-selected.k-table-alt-row.k-grid-row-sticky:hover td,
        .k-selected.k-table-alt-row.k-grid-row-sticky.k-hover td,
        .k-selected.k-grid-row-sticky:hover .k-table-td,
        .k-selected.k-grid-row-sticky.k-hover .k-table-td,
        .k-selected.k-table-alt-row.k-grid-row-sticky:hover .k-table-td,
        .k-selected.k-table-alt-row.k-grid-row-sticky.k-hover .k-table-td,
        .k-table-row.k-selected.k-table-alt-row:hover .k-grid-content-sticky,
        .k-table-row.k-selected.k-table-alt-row.k-hover .k-grid-content-sticky,
        .k-grid-row-sticky:hover td.k-selected,
        .k-grid-row-sticky.k-hover td.k-selected,
        .k-grid-row-sticky:hover .k-table-td.k-selected,
        .k-grid-row-sticky.k-hover .k-table-td.k-selected,
        .k-table-row:hover .k-grid-content-sticky.k-selected,
        .k-table-row.k-hover .k-grid-content-sticky.k-selected {
            @if($kendo-enable-color-system) {
                background-color: $kendo-grid-sticky-hover-bg;

                &::before {
                    background-color: $kendo-grid-sticky-selected-hover-bg;
                }
            } @else {
                background-color: $kendo-grid-sticky-selected-hover-bg;
            }
        }
    }

    .k-grouping-row {
        .k-grid-content-sticky {
            @include fill( $bg: $kendo-grid-sticky-header-bg );
        }

        &:hover .k-grid-content-sticky,
        &.k-hover .k-grid-content-sticky {
            @include fill( $bg: $kendo-grid-sticky-hover-bg );
        }
    }

    .k-column-list-item:hover,
    .k-columnmenu-item:hover {
        @include fill(
            $kendo-list-item-hover-text,
            $kendo-list-item-hover-bg
        );
    }
    .k-column-list-item:focus,
    .k-column-list-item.k-focus,
    .k-columnmenu-item:focus,
    .k-columnmenu-item.k-focus {
        @include focus-indicator( $kendo-list-item-focus-shadow, true );
    }

    .k-columnmenu-item {
        &.k-selected {
            @include fill(
                $kendo-list-item-selected-text,
                $kendo-list-item-selected-bg
            );
        }
    }

    .k-column-menu {

        .k-menu:not(.k-context-menu) {

            @include fill(
                $kendo-popup-text,
                $kendo-popup-bg,
                $kendo-popup-border
            );

            .k-item {
                @include fill(
                    $kendo-list-item-text,
                    $kendo-list-item-bg
                );

                &:hover,
                &.k-hover {
                    @include fill(
                        $kendo-list-item-hover-text,
                        $kendo-list-item-hover-bg
                    );
                }

                &.k-selected {
                    @include fill(
                        $kendo-list-item-selected-text,
                        $kendo-list-item-selected-bg
                    );
                }

                &:focus,
                &.k-focus {
                    @include focus-indicator( $kendo-list-item-focus-shadow, true );
                }
            }
        }
    }
    .k-column-menu-tabbed {
        background-color: $kendo-grid-column-menu-tabbed-bg;
    }

    .k-column-menu-group-header-text {
        @include fill(
            $kendo-grid-column-menu-group-header-text,
            $kendo-grid-column-menu-group-header-bg,
            $kendo-grid-column-menu-group-header-border
        );
    }

    .k-check-all-wrap {
        @include fill( $border: $kendo-popup-border );
    }

    .k-grid-norecords-template {
        background-color: $kendo-grid-bg;
        border-color: $kendo-grid-border;
    }

    // Row resizing
    .k-resizer-wrap {

        &.k-hover .k-row-resizer {
            @include fill( $bg: $kendo-grid-row-resizer-hover-bg );
        }

        &.k-active .k-row-resizer {
            @include fill( $bg: $kendo-grid-row-resizer-active-bg );
        }

    }

}


@mixin kendo-grid--theme() {
    @include kendo-grid--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-grid--styles() {
    @include module-render( "grid" ) {
        @include kendo-grid--layout();
        @include kendo-grid--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-grid--styles();
}

// #endregion
// #region @import "../tabstrip/_index.scss"; -> scss/tabstrip/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../listview/_index.scss"; -> scss/listview/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "listview",
    dependencies: (
        "icon",
        "pager",
        // "utils/flex-grid",
    )
);


// Dependencies
// @import "../utils/_flex.scss";
// @import "../utils/_grid.scss";
// #region @import "../pager/_index.scss"; -> scss/pager/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/listview/_variables.scss
// ListView

/// The horizontal padding of the ListView.
/// @group listview
$kendo-listview-padding-x: k-spacing(1) !default;
/// The vertical padding of the ListView.
/// @group listview
$kendo-listview-padding-y: k-spacing(1) !default;
/// The width of the border around bordered ListView.
/// @group listview
$kendo-listview-border-width: 1px !default;
/// The font family of the ListView.
/// @group listview
$kendo-listview-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the ListView.
/// @group listview
$kendo-listview-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the ListView.
/// @group listview
$kendo-listview-line-height: var( --kendo-line-height, normal ) !default;

/// The text color of the ListView.
/// @group listview
$kendo-listview-text: $kendo-component-text !default;
/// The background color of the ListView.
/// @group listview
$kendo-listview-bg: $kendo-component-bg !default;
/// The border color of the ListView.
/// @group listview
$kendo-listview-border: $kendo-component-border !default;

/// The horizontal padding of the ListView items.
/// @group listview
$kendo-listview-item-padding-x: k-spacing(1) !default;
/// The vertical padding of the ListView items.
/// @group listview
$kendo-listview-item-padding-y: k-spacing(1) !default;

/// The text color of the selected ListView items.
/// @group listview
$kendo-listview-item-selected-text: null !default;
/// The background color of the selected ListView items.
/// @group listview
$kendo-listview-item-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default;
/// The border color of the selected ListView items.
/// @group listview
$kendo-listview-item-selected-border: null !default;

/// The text color of the focused ListView items.
/// @group listview
$kendo-listview-item-focus-text: null !default;
/// The background color of the focused ListView items.
/// @group listview
$kendo-listview-item-focus-bg: null !default;
/// The border color of the focused ListView items.
/// @group listview
$kendo-listview-item-focus-border: null !default;
/// The box shadow of the focused ListView items.
/// @group listview
$kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/listview/_layout.scss
@mixin kendo-listview--layout-base() {

    // Listview
    .k-listview {
        margin: 0;
        padding: 0;
        border-width: 0;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-listview-font-family;
        font-size: $kendo-listview-font-size;
        line-height: $kendo-listview-line-height;
        display: flex;
        flex-flow: column nowrap;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }
    .k-listview-bordered {
        border-width: $kendo-listview-border-width;
    }


    // Header
    .k-listview-header {
        border-width: 0;
        border-style: solid;
        border-color: inherit;
    }
    .k-listview-bordered > .k-listview-header {
        border-bottom-width: $kendo-listview-border-width;
    }


    // Listview content
    .k-listview-content {
        margin: 0;
        padding: 0;
        outline: 0;
        flex-grow: 1;
        position: relative;
        overflow: auto;

        &::after {
            height: 0;
            clear: both;
            display: block;
        }
    }
    .k-listview-content.k-d-flex,
    .k-listview-content.k-d-grid {
        &::after { display: none; }
    }
    .k-listview-content-padding-rectangle {
        padding-block: $kendo-listview-padding-y;
        padding-inline: $kendo-listview-padding-x;
    }
    .k-listview-content-padding-square {
        padding: $kendo-listview-padding-y;
    }


    // Listview item
    .k-listview-item {
        padding: 0;
        border-width: 0;
        outline: 0;
        border-style: solid;
        box-sizing: border-box;
        flex-shrink: 0;
    }
    .k-listview-item-padding-rectangle {
        padding-block: $kendo-listview-item-padding-y;
        padding-inline: $kendo-listview-item-padding-x;
    }
    .k-listview-item-padding-rectangle .k-listview-link {
        margin-block: (-$kendo-listview-item-padding-y);
        margin-inline: (-$kendo-listview-item-padding-x);
        padding-block: $kendo-listview-item-padding-y;
        padding-inline: $kendo-listview-item-padding-x;
    }
    .k-listview-item-padding-square {
        padding: $kendo-listview-item-padding-y;
    }
    .k-listview-item-padding-square .k-listview-link {
        margin: (-$kendo-listview-item-padding-y);
        padding: $kendo-listview-item-padding-y;
    }


    // Listview footer
    .k-listview-footer {
        border-width: 0;
        border-style: solid;
        border-color: inherit;
    }
    .k-listview-bordered > .k-listview-footer {
        border-top-width: $kendo-listview-border-width;
    }


    // Listview pager
    .k-listview-pager {
        border-width: 0;
        border-color: inherit;
    }
    .k-listview-bordered > .k-listview-pager-top {
        border-block-end-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
    }
    .k-listview-bordered > .k-listview-pager-bottom {
        border-block-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
    }


    // Borders
    .k-listview-borders-all {
        .k-listview-item {
            border-width: 1px;
        }
    }
    .k-listview-borders-horizontal {
        .k-listview-item {
            border-top-width: 1px;
        }
        .k-listview-item:first-child {
            border-top-width: 0;
        }
    }
    .k-listview-borders-vertical {
        .k-listview-item {
            border-left-width: 1px;
        }
        .k-listview-item:first-child {
            border-left-width: 0;
        }
    }

}


@mixin kendo-listview--layout() {
    @include kendo-listview--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/listview/_theme.scss
@mixin kendo-listview--theme-base() {

    // Listview
    .k-listview {
        @include fill(
            $kendo-listview-text,
            $kendo-listview-bg,
            $kendo-listview-border
        );
    }


    // Listview content
    .k-listview-content {

        > .k-focus {
            @include fill(
                $kendo-listview-item-focus-text,
                $kendo-listview-item-focus-bg,
                $kendo-listview-item-focus-border
            );
            @include focus-indicator( $kendo-listview-item-focus-shadow, true );
        }

        > .k-selected {
            @include fill(
                $kendo-listview-item-selected-text,
                $kendo-listview-item-selected-bg,
                $kendo-listview-item-selected-border
            );
        }

    }

    // List item
    .k-listview-item {
        border-color: $kendo-listview-border;
    }

}


@mixin kendo-listview--theme() {
    @include kendo-listview--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-listview--styles() {
    @include module-render( "listview" ) {
        @include kendo-listview--layout();
        @include kendo-listview--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-listview--styles();
}

// #endregion
// #region @import "../forms/_index.scss"; -> scss/forms/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../combobox/_index.scss"; -> scss/combobox/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/chart-wizard/_variables.scss
// Chart wizard

/// The color of the area around the chart type icon.
/// @group chart-wizard
$kendo-chart-wizard-icon-area-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
/// The background color of the area around the chart type icon.
/// @group chart-wizard
$kendo-chart-wizard-icon-area-bg: if($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle) !default;
/// The border radius of the area around the chart type icon.
/// @group chart-wizard
$kendo-chart-wizard-icon-area-border-radius: k-border-radius(md) !default;
/// The padding of the area around the chart type icon.
/// @group chart-wizard
$kendo-chart-wizard-icon-area-padding: k-spacing(4) !default;
/// The box shadow of the focused area around the chart type icon.
/// @group chart-wizard
$kendo-chart-wizard-icon-area-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis) !default;
/// The box shadow of the selected area around the chart type icon.
/// @group chart-wizard
$kendo-chart-wizard-icon-area-selected-shadow: inset 0 0 0 1px $kendo-chart-wizard-icon-area-color !default;

/// The color of the selected chart type items in the Property panel.
/// @group chart-wizard
$kendo-chart-wizard-chart-type-selected-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;

/// The padding of the preview pane.
/// @group chart-wizard
$kendo-chart-wizard-preview-pane-padding: k-spacing(4) !default;
/// The padding of the property pane.
/// @group chart-wizard
$kendo-chart-wizard-property-pane-padding: k-spacing(4) !default;

/// The gap between the chart type items in the Property panel.
/// @group chart-wizard
$kendo-chart-wizard-chart-type-spacing: k-spacing(4) !default;
/// The gap between the icon area and its text.
/// @group chart-wizard
$kendo-chart-wizard-icon-text-gap: k-spacing(3) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/chart-wizard/_layout.scss
@mixin kendo-chart-wizard--layout-base() {
    // Chart wizard
    .k-chart-wizard {
        .k-icon-text-wrapper {
            display: flex;
            align-items: center;
            gap: $kendo-chart-wizard-icon-text-gap;
        }

        .k-icon-background-area {
            display: flex;
            padding: $kendo-chart-wizard-icon-area-padding;
            border-radius: $kendo-chart-wizard-icon-area-border-radius;
        }
    }

    .k-chart-types-wrapper {
        display: flex;
        flex-direction: column;
        gap: $kendo-chart-wizard-chart-type-spacing;
    }

    .k-chart-wizard-splitter {
        height: 100%;

        .k-tabstrip {
            width: 100%;
            height: 100%;
        }
    }

    .k-chart-wizard-preview-pane {
        padding: $kendo-chart-wizard-preview-pane-padding;
    }

    .k-chart-wizard-property-pane {
        padding: $kendo-chart-wizard-property-pane-padding;
    }
}


@mixin kendo-chart-wizard--layout() {
    @include kendo-chart-wizard--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/chart-wizard/_theme.scss
@mixin kendo-chart-wizard--theme-base() {
    .k-chart-wizard {
        .k-icon-text-wrapper {
            &.k-selected {
                color: $kendo-chart-wizard-chart-type-selected-color;

                .k-icon-background-area {
                    box-shadow: $kendo-chart-wizard-icon-area-selected-shadow;
                }
            }

            &:hover,
            &.k-hover {
                cursor: pointer;
            }

            &:focus,
            &.k-focus {
                .k-icon-background-area {
                    box-shadow: $kendo-chart-wizard-icon-area-focus-shadow;
                }
            }
        }

        .k-icon-background-area {
            color: $kendo-chart-wizard-icon-area-color;
            background-color: $kendo-chart-wizard-icon-area-bg;
        }
    }
}


@mixin kendo-chart-wizard--theme() {
    @include kendo-chart-wizard--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-chart-wizard--styles() {
    @include module-render( "chart-wizard" ) {
        @include kendo-chart-wizard--layout();
        @include kendo-chart-wizard--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-chart-wizard--styles();
}

// #endregion


// Data management
// #region @import "./grid/_index.scss"; -> scss/grid/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./listview/_index.scss"; -> scss/listview/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./spreadsheet/_index.scss"; -> scss/spreadsheet/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "spreadsheet",
    dependencies: (
        "button",
        "checkbox",
        "color-picker",
        "combobox",
        "date-time-picker",
        "dropdown-list",
        "icon",
        "list",
        "menu",
        "radio",
        "tabstrip",
        "toolbar",
        "treeview",
        "upload",
        "window",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../checkbox/_index.scss"; -> scss/checkbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../radio/_index.scss"; -> scss/radio/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../colorpicker/_index.scss"; -> scss/colorpicker/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../combobox/_index.scss"; -> scss/combobox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../datetimepicker/_index.scss"; -> scss/datetimepicker/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../toolbar/_index.scss"; -> scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../upload/_index.scss"; -> scss/upload/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../menu/_index.scss"; -> scss/menu/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../window/_index.scss"; -> scss/window/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../tabstrip/_index.scss"; -> scss/tabstrip/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../treeview/_index.scss"; -> scss/treeview/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/spreadsheet/_variables.scss
// #region @import "./images/image-default.scss"; -> scss/spreadsheet/images/image-default.scss
@include exports("image-default.png") {
    @include register-data-uri("image-default.png", "data:image/png;base64, ");
}

// #endregion


// Spreadsheet

/// The width of the border around the Spreadsheet.
/// @group spreadsheet
$kendo-spreadsheet-border-width: 1px !default;
/// The font family of the Spreadsheet.
/// @group spreadsheet
$kendo-spreadsheet-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Spreadsheet.
/// @group spreadsheet
$kendo-spreadsheet-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Spreadsheet.
/// @group spreadsheet
$kendo-spreadsheet-line-height: var( --kendo-line-height, normal ) !default;

/// The background color of the Spreadsheet.
/// @group spreadsheet
$kendo-spreadsheet-bg: $kendo-component-bg !default;
/// The text color of the Spreadsheet.
/// @group spreadsheet
$kendo-spreadsheet-text: $kendo-component-text !default;
/// The border color of the Spreadsheet.
/// @group spreadsheet
$kendo-spreadsheet-border: $kendo-component-border !default;

/// The background color of the Spreadsheet header.
/// @group spreadsheet
$kendo-spreadsheet-header-bg: $kendo-component-header-bg !default;
/// The text color of the Spreadsheet header.
/// @group spreadsheet
$kendo-spreadsheet-header-text: $kendo-component-header-text !default;
/// The border color of the Spreadsheet header.
/// @group spreadsheet
$kendo-spreadsheet-header-border: $kendo-component-header-border !default;
/// The gradient of the Spreadsheet header.
/// @group spreadsheet
$kendo-spreadsheet-header-gradient: $kendo-component-header-gradient !default;

/// The background color of the Spreadsheet table headers.
/// @group spreadsheet
$kendo-spreadsheet-table-header-bg: $kendo-spreadsheet-header-bg !default;
/// The text color of the Spreadsheet table headers.
/// @group spreadsheet
$kendo-spreadsheet-table-header-text: $kendo-spreadsheet-header-text !default;
/// The border color of the Spreadsheet table headers.
/// @group spreadsheet
$kendo-spreadsheet-table-header-border: $kendo-spreadsheet-header-border !default;
/// The gradient of the Spreadsheet table headers.
/// @group spreadsheet
$kendo-spreadsheet-table-header-gradient: $kendo-spreadsheet-header-gradient !default;

/// The border width of the Spreadsheet action bar.
/// @group spreadsheet
$kendo-spreadsheet-action-bar-border-width: 1px !default;
/// The horizontal padding of the Spreadsheet action bar.
/// @group spreadsheet
$kendo-spreadsheet-action-bar-padding-y: k-spacing(1) !default;
/// The vertical padding of the Spreadsheet action bar.
/// @group spreadsheet
$kendo-spreadsheet-action-bar-padding-x: k-spacing(2) !default;
/// The font size of the Spreadsheet action bar.
/// @group spreadsheet
$kendo-spreadsheet-action-bar-font-size: $kendo-spreadsheet-font-size !default;
/// The font family of the Spreadsheet action bar.
/// @group spreadsheet
$kendo-spreadsheet-action-bar-font-family: Arial, Verdana, sans-serif !default;
/// The spacings of the Spreadsheet action bar.
/// @group spreadsheet
$kendo-spreadsheet-action-bar-spacing: k-spacing(2) !default;

/// The gap of the Spreadsheet formula bar.
/// @group spreadsheet
$kendo-spreadsheet-formula-bar-gap: k-spacing(2) !default;

/// The horizontal padding of the Spreadsheet formula input.
/// @group spreadsheet
$kendo-spreadsheet-formula-input-padding-x: $kendo-input-padding-x !default;
/// The vertical padding of the Spreadsheet formula input.
/// @group spreadsheet
$kendo-spreadsheet-formula-input-padding-y: $kendo-input-padding-y !default;
/// The line height of the Spreadsheet formula input.
/// @group spreadsheet
$kendo-spreadsheet-formula-input-line-height: $kendo-input-line-height !default;

/// The font family of the Spreadsheet view.
/// @group spreadsheet
$kendo-spreadsheet-view-font-family: Arial, Verdana, sans-serif !default;
/// The font size of the Spreadsheet view.
/// @group spreadsheet
$kendo-spreadsheet-view-font-size: $kendo-spreadsheet-font-size !default;

/// The background color of the Spreadsheet selection.
/// @group spreadsheet
$kendo-spreadsheet-selection-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default;
/// The text color of the Spreadsheet selection.
/// @group spreadsheet
$kendo-spreadsheet-selection-text: null !default;
/// The border color of the Spreadsheet selection.
/// @group spreadsheet
$kendo-spreadsheet-selection-border: $kendo-selected-bg !default;
/// The shadow of the Spreadsheet selection.
/// @group spreadsheet
$kendo-spreadsheet-selection-shadow: inset 0 0 0 1px $kendo-selected-bg !default;

/// The background color of the Spreadsheet single selection.
/// @group spreadsheet
$kendo-spreadsheet-single-selection-bg: $kendo-selected-bg !default;
/// The text color of the Spreadsheet single selection.
/// @group spreadsheet
$kendo-spreadsheet-single-selection-text: null !default;
/// The border color of the Spreadsheet single selection.
/// @group spreadsheet
$kendo-spreadsheet-single-selection-border: $kendo-spreadsheet-bg !default;

/// The background color of the Spreadsheet partial selection.
/// @group spreadsheet
$kendo-spreadsheet-partial-selection-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default;

/// The background color of the Spreadsheet active cell.
/// @group spreadsheet
$kendo-spreadsheet-active-cell-bg: $kendo-spreadsheet-bg !default;
/// The shadow of the Spreadsheet active cell.
/// @group spreadsheet
$kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px $kendo-selected-bg !default;

/// The background color of the Spreadsheet auto fill.
/// @group spreadsheet
$kendo-spreadsheet-auto-fill-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default;
/// The text color of the Spreadsheet auto fill.
/// @group spreadsheet
$kendo-spreadsheet-auto-fill-text: null !default;
/// The border color of the Spreadsheet auto fill.
/// @group spreadsheet
$kendo-spreadsheet-auto-fill-border: $kendo-selected-bg !default;
/// The shadow of the Spreadsheet auto fill.
/// @group spreadsheet
$kendo-spreadsheet-auto-fill-shadow: inset 0 0 0 1px $kendo-selected-bg !default;
/// The background color of the Spreadsheet auto fill punch.
/// @group spreadsheet
$kendo-spreadsheet-auto-fill-punch-bg: rgba( $kendo-spreadsheet-bg, .5 ) !default;

/// The vertical padding of the Spreadsheet cell.
/// @group spreadsheet
$kendo-spreadsheet-cell-padding-y: k-spacing(1) !default;
/// The horizontal padding of the Spreadsheet cell.
/// @group spreadsheet
$kendo-spreadsheet-cell-padding-x: $kendo-spreadsheet-cell-padding-y !default;

/// The line height of the Spreadsheet cell editor.
/// @group spreadsheet
$kendo-spreadsheet-cell-editor-line-height: 20px !default;
/// The horizontal padding of the Spreadsheet cell editor.
/// @group spreadsheet
$kendo-spreadsheet-cell-editor-padding-x: k-spacing(1) !default;
/// The vertical padding of the Spreadsheet cell editor.
/// @group spreadsheet
$kendo-spreadsheet-cell-editor-padding-y: k-spacing(0) !default;
/// The background color of the Spreadsheet cell editor.
/// @group spreadsheet
$kendo-spreadsheet-cell-editor-bg: $kendo-spreadsheet-bg !default;
/// The text color of the Spreadsheet cell editor.
/// @group spreadsheet
$kendo-spreadsheet-cell-editor-text: $kendo-spreadsheet-text !default;
/// The border color of the Spreadsheet cell editor.
/// @group spreadsheet
$kendo-spreadsheet-cell-editor-border: null !default;

/// The background color of the Spreadsheet resize handle.
/// @group spreadsheet
$kendo-spreadsheet-resize-handle-bg: $kendo-color-primary !default;

/// The border color of the Spreadsheet cell comment indicator.
/// @group spreadsheet
$kendo-spreadsheet-cell-comment-border: $kendo-color-primary !default;

/// The border color of the Spreadsheet cell dirty indicator.
/// @group spreadsheet
$kendo-spreadsheet-cell-dirty-border: $kendo-color-error !default;

/// The horizontal padding of the Spreadsheet sheets bar.
/// @group spreadsheet
$kendo-spreadsheet-sheets-bar-padding-x: k-spacing(2) !default;
/// The vertical padding of the Spreadsheet sheets bar.
/// @group spreadsheet
$kendo-spreadsheet-sheets-bar-padding-y: k-spacing(2) !default;
/// The border width of the Spreadsheet sheets bar.
/// @group spreadsheet
$kendo-spreadsheet-sheets-bar-border-width: 1px !default;

/// The border style of the Spreadsheet image Dialog.
/// @group spreadsheet
$kendo-spreadsheet-insert-image-dialog-border-style: dashed !default;
/// The border width of the Spreadsheet image Dialog.
/// @group spreadsheet
$kendo-spreadsheet-insert-image-dialog-border-width: 2px !default;
/// The bottom margin of the Spreadsheet image Dialog.
/// @group spreadsheet
$kendo-spreadsheet-insert-image-dialog-text-margin-bottom: k-spacing(7.5) !default;
/// The width of the Spreadsheet image Dialog preview.
/// @group spreadsheet
$kendo-spreadsheet-insert-image-dialog-preview-width: 355px !default;
/// The height of the Spreadsheet image Dialog preview.
/// @group spreadsheet
$kendo-spreadsheet-insert-image-dialog-preview-height: 230px !default;
/// The image of the Spreadsheet image Dialog preview.
/// @group spreadsheet
$kendo-spreadsheet-insert-image-dialog-preview-img: "image-default.png" !default;
/// The border of the Spreadsheet image Dialog preview.
/// @group spreadsheet
$kendo-spreadsheet-insert-image-dialog-preview-border: $kendo-component-border !default;
/// The border radius of the Spreadsheet image Dialog preview.
/// @group spreadsheet
$kendo-spreadsheet-insert-image-dialog-preview-border-radius: k-border-radius(md) !default;
/// The shadow of the Spreadsheet image Dialog preview.
/// @group spreadsheet
$kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px rgba(0, 0, 0, .5) !default;
/// The border radius of the Spreadsheet image Dialog preview overlay.
/// @group spreadsheet
$kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: k-border-radius(md) !default;
/// The text color of the hovered Spreadsheet image Dialog preview.
/// @group spreadsheet
$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: $kendo-component-bg !default;

/// The width of the Spreadsheet drawing handle.
/// @group spreadsheet
$kendo-spreadsheet-drawing-handle-width: 6px !default;
/// The height of the Spreadsheet drawing handle.
/// @group spreadsheet
$kendo-spreadsheet-drawing-handle-height: 6px !default;
/// The border style of the Spreadsheet drawing handle.
/// @group spreadsheet
$kendo-spreadsheet-drawing-handle-border-style: solid !default;
/// The border width of the Spreadsheet drawing handle.
/// @group spreadsheet
$kendo-spreadsheet-drawing-handle-border-width: 1px !default;
/// The border color of the Spreadsheet drawing handle.
/// @group spreadsheet
$kendo-spreadsheet-drawing-handle-outline-color: $kendo-color-primary !default;
/// The outline color of the Spreadsheet drawing handle.
/// @group spreadsheet
$kendo-spreadsheet-drawing-handle-border-color: $kendo-selected-bg !default;
/// The border color of the Spreadsheet drawing handle.
/// @group spreadsheet
$kendo-spreadsheet-drawing-handle-bg: $kendo-color-primary !default;
/// The border radius of the Spreadsheet drawing handle.
/// @group spreadsheet
$kendo-spreadsheet-drawing-handle-border-radius: k-border-radius(lg) !default;
/// The outline style of the Spreadsheet drawing.
/// @group spreadsheet
$kendo-spreadsheet-drawing-outline-style: solid !default;
/// The outline width of the Spreadsheet drawing.
/// @group spreadsheet
$kendo-spreadsheet-drawing-outline-width: 2px !default;
/// The background color of the Spreadsheet drawing anchor.
/// @group spreadsheet
$kendo-spreadsheet-drawing-anchor-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default;

/// The vertical spacing of the Spreadsheet DropZone.
/// @group spreadsheet
$kendo-spreadsheet-dropzone-spacing-y: k-spacing(4) !default;


// #endregion
// #region @import "./_layout.scss"; -> scss/spreadsheet/_layout.scss
@mixin kendo-spreadsheet--layout-base() {

    // Spreadsheet
    .k-spreadsheet {
        width: 100%;
        height: 600px;
        border-width: $kendo-spreadsheet-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-spreadsheet-font-family;
        font-size: $kendo-spreadsheet-font-size;
        line-height: $kendo-spreadsheet-line-height;
        display: flex;
        flex-direction: column;
        cursor: default;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        .k-vertical-align-center {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
        .k-vertical-align-bottom {
            position: relative;
            top: 100%;
            transform: translateY( -100% );
        }
    }

    // Toolbar
    .k-spreadsheet-toolbar {
        border-width: 0;
    }

    // Action bar
    .k-spreadsheet-action-bar {
        border-width: 0 0 $kendo-spreadsheet-action-bar-border-width;
        border-style: solid;
        border-color: inherit;
        padding-block: $kendo-spreadsheet-action-bar-padding-y;
        padding-inline: $kendo-spreadsheet-action-bar-padding-x;
        font-size: $kendo-spreadsheet-action-bar-font-size;
        font-family: $kendo-spreadsheet-action-bar-font-family;
        position: relative;
        display: flex;
        flex-direction: row;
        gap: $kendo-spreadsheet-action-bar-spacing;
    }
    // Todo check
    .k-spreadsheet-name-editor {
        width: 10em;
    }
    .k-spreadsheet-formula-bar {
        min-width: 0px;
        border-color: inherit;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 1;
        gap: $kendo-spreadsheet-formula-bar-gap;

        // move to legacy selector
        > .k-icon {
            padding-block: 0;
            padding-inline: $kendo-padding-md-y;
            box-sizing: content-box;
            border-width: 0 1px 0 0;
            border-style: solid;
            border-color: inherit;
            flex-shrink: 0;
        }

        // add k-hidden from component
        .k-tooltip,
        .k-group-header,
        .k-list-scroller {
            display: none;
        }

        .k-spreadsheet-formula-input {
            padding-block: $kendo-spreadsheet-formula-input-padding-y;
            padding-inline: $kendo-spreadsheet-formula-input-padding-x;
            line-height: $kendo-spreadsheet-formula-input-line-height;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            &.k-spreadsheet-array-formula {
                &::before {
                    content: "{";
                    font-weight: 700;
                }
                &::after {
                    content: "}";
                    font-weight: 700;
                }
            }
        }
    }
    .k-spreadsheet-formula-input {
        outline: 0;
        white-space: pre;
        flex: 1;
        box-sizing: border-box;

        > .k-syntax-func.k-syntax-at-point,
        > .k-syntax-bool.k-syntax-at-point,
        > .k-syntax-ref.k-syntax-at-point,
        > .k-syntax-str.k-syntax-at-point,
        > .k-syntax-num.k-syntax-at-point {
            text-decoration: underline;
        }

        > .k-series-a,
        > .k-series-b,
        > .k-series-c,
        > .k-series-d {
            background-color: transparent;
        }
    }
    .k-spreadsheet-formula-list {
        min-width: 100px;

        .k-item {
            padding-block: $kendo-list-md-item-padding-y;
            padding-inline: $kendo-list-md-item-padding-x;
        }
    }
    .k-syntax-func,
    .k-syntax-startexp {
        font-weight: bold;
    }


    // Cell editor
    .k-spreadsheet-cell-editor {
        padding-block: $kendo-spreadsheet-cell-editor-padding-y;
        padding-inline: $kendo-spreadsheet-cell-editor-padding-x;
        line-height: $kendo-spreadsheet-cell-editor-line-height;
        display: none;
        overflow: hidden;
        position: absolute;
        z-index: 100;
    }


    // Sheets bar
    .k-spreadsheet-sheets-bar {
        padding-block-end: $kendo-spreadsheet-sheets-bar-padding-y;
        padding-inline: $kendo-spreadsheet-sheets-bar-padding-x;
        border-width: $kendo-spreadsheet-sheets-bar-border-width 0 0;
        border-style: solid;
        border-color: inherit;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
    }

    .k-spreadsheet-sheets {
        flex: 1 1 auto;
        overflow: hidden;
    }
    .k-spreadsheet-sheets .k-tabstrip-items-wrapper {
        border-width: 0;
    }

    .k-spreadsheet-sheets-bar-add {
        align-self: center;

        &:not(:hover) {
            border-color: transparent;
            color: inherit;
            background: none;
        }
    }

    .k-spreadsheet-sheets-items {
        flex: 1;
        overflow: hidden;

        .k-tabstrip-items-wrapper {
            margin: 0;
            border-width: 0;
        }

        .k-item {
            .k-link {
                display: inline-block;
            }

            .k-spreadsheet-sheets-remove {
                margin-right: k-spacing(2);
                margin-left: calc( #{k-spacing(2)} * -1 );
                padding: 0;
                line-height: 1;
                display: inline-flex;
                flex-direction: row;
                vertical-align: middle;
                align-self: center;
            }
        }
    }


    // Spreadsheet view
    .k-spreadsheet-view {
        height: auto !important; // stylelint-disable-line declaration-no-important
        border-color: inherit;
        font-size: $kendo-spreadsheet-view-font-size;
        font-family: $kendo-spreadsheet-view-font-family;
        flex: 1;
        position: relative;
        overflow: hidden;

        // disabled cells in the Spreadsheet should allow navigation if link is used
        .k-disabled {
            pointer-events: auto;
        }
    }

    .k-spreadsheet-fixed-container {
        width: calc( 100% - var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}) );
        height: calc( 100% - var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}) );
        border-color: inherit;
        box-sizing: border-box;
        user-select: none;
        position: absolute;
        z-index: 2;
        overflow: hidden;
    }

    // todo check if used - probably not
    .k-spreadsheet-overflow {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        border-color: inherit;
    }

    .k-spreadsheet-pane {
        padding: 0 1px 0 0;
        border-width: 2px 0 0 2px;
        border-style: solid;
        border-color: inherit;
        box-sizing: border-box;
        position: absolute;
        overflow: hidden;

        @each $side in (top, left) {
            &.k-#{$side} { border-#{$side}-width: 0; }
        }

    }

    .k-spreadsheet-top-corner {
        border-width: 0 1px 1px 0;
        border-style: solid;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10000;

        &::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            overflow: hidden;
            position: absolute;
            bottom: 0;
            right: 0;
            border: 6px solid transparent;
            border-right-color: inherit;
            border-bottom-color: inherit;
        }
    }

    .k-spreadsheet-scroller {
        width: 100%;
        height: 100%;
        overflow: scroll;
        position: absolute;
        z-index: 1;

        @media (hover: none), (pointer: coarse) {
            // on touch devices we want this to stay on top.
            z-index: 3;
        }
    }


    // Grid lines
    .k-spreadsheet-haxis,
    .k-spreadsheet-vaxis {
        border: 0 solid;
        border-color: inherit;
        position: absolute;
    }
    .k-spreadsheet-haxis {
        border-width: 1px 0 0;
        left: 0;
    }
    .k-spreadsheet-vaxis {
        border-width: 0 0 0 1px;
        top: 0;
    }


    // Row / Column headers
    .k-spreadsheet-row-header,
    .k-spreadsheet-column-header {
        text-align: center;
        z-index: 100;

        > div {
            position: relative;
            box-sizing: border-box;
            border-width: 0;
            border-style: solid;
            border-color: inherit;

            &::after {
                content: "";
                border-width: 0;
                border-style: solid;
                border-color: inherit;
                display: none;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        }
    }
    .k-spreadsheet-row-header {
        position: relative;
    }
    .k-spreadsheet-column-header {
        position: absolute;
    }
    .k-spreadsheet-row-header > div {
        border-top-width: 1px;

        &:first-child { border-top-width: 0; }
    }
    .k-spreadsheet-row-header > .k-selection-partial,
    .k-spreadsheet-row-header > .k-selection-full {
        &::after {
            border-right-width: 2px;
            display: block;
        }
    }
    .k-spreadsheet-column-header > div {
        border-left-width: 1px;

        &:first-child { border-left-width: 0; }
    }
    .k-spreadsheet-column-header > .k-selection-partial,
    .k-spreadsheet-column-header > .k-selection-full {
        &::after {
            border-bottom-width: 2px;
            display: block;
        }
    }


    // Spreadsheet data
    .k-spreadsheet-data {
        border-color: inherit;
        cursor: cell;
        position: relative;
    }


    // Cells
    .k-spreadsheet-cell {
        padding-block: $kendo-spreadsheet-cell-padding-y;
        padding-inline: $kendo-spreadsheet-cell-padding-x;
        box-sizing: border-box;
        position: absolute;
        line-height: normal;
        white-space: pre;
        overflow: hidden;
    }
    .k-spreadsheet-merged-cells-wrapper {
        position: relative;
    }

    .k-spreadsheet-disabled-mask {
        position: absolute;
    }

    // Selection
    .k-spreadsheet .k-selection-wrapper {
        position: relative;
        cursor: cell;
    }
    .k-spreadsheet .k-spreadsheet-selection {
        border-width: 1px;
        border-style: solid;
        box-sizing: border-box;
        position: absolute;
    }
    .k-spreadsheet .k-spreadsheet-selection-highlight {
        border-width: 2px;
        border-style: dashed;
        box-sizing: border-box;
        position: absolute;
    }
    .k-spreadsheet .k-spreadsheet-editor-button {
        position: absolute;
        padding: 0;
        z-index: 60;
    }

    .k-spreadsheet-active-cell {
        // always show exact active cell border, regardless of inline cell styles
        outline-color: transparent !important; // stylelint-disable-line declaration-no-important
        z-index: 10;
    }

    .k-spreadsheet .k-auto-fill-wrapper {
        position: relative;
    }
    .k-spreadsheet .k-auto-fill,
    .k-spreadsheet .k-auto-fill-punch,
    .k-spreadsheet .k-auto-fill-br-hint {
        box-sizing: border-box;
        position: absolute;
    }
    .k-spreadsheet .k-auto-fill {
        border-width: 1px;
        border-style: solid;
        cursor: crosshair;
    }

    .k-spreadsheet .k-single-selection {}
    .k-spreadsheet .k-single-selection::after {
        content: "";
        margin-bottom: -4px;
        margin-right: -4px;
        width: 6px;
        height: 6px;
        border-width: 1px;
        border-style: solid;
        border-radius: 50%;
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 300;
        cursor: crosshair;
    }

    .k-spreadsheet .k-selection-full,
    .k-spreadsheet .k-selection-partial {
        &::after {
            display: none;
        }
    }


    // Autofill
    .k-spreadsheet .k-autofill-wrapper {
        position: relative;
        cursor: cell;
    }


    // Border rendering
    .k-spreadsheet-vborder {
        position: absolute;
        border-left-style: solid;
        border-left-width: 1px;
    }

    .k-spreadsheet-hborder {
        position: absolute;
        border-top-style: solid;
        border-top-width: 1px;
    }


    // Comments
    .k-spreadsheet-has-comment::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        inset-inline-end: 0;
        inset-inline-start: auto;
        border-width: 3px;
        border-style: solid;
    }


    // Validation
    .k-spreadsheet-cell .k-dirty {
        inset-inline-start: 0;
        inset-inline-end: auto;
    }


    // Filter button
    .k-spreadsheet .k-filter-wrapper {
        position: relative;
        z-index: 50;
    }
    .k-spreadsheet .k-filter-range {
        border-width: 2px;
        border-style: solid;
        position: absolute;
        box-sizing: border-box;
    }
    .k-spreadsheet-filter {
        @include border-radius( k-border-radius(md) );
        padding: $kendo-padding-y;
        line-height: 1;
        position: absolute;
        cursor: pointer;

        .k-icon { vertical-align: middle; }
    }


    // Filter menu
    .k-spreadsheet-filter-menu {
        width: 280px;

        .k-animation-container {
            position: relative;
        }

        > .k-menu,
        > .k-menu.k-menu-vertical {
            border-width: 0;

            .k-item {
                color: inherit;
            }
            .k-link {
                padding-left: calc( #{$kendo-icon-size} + calc( 2 * #{$kendo-padding-md-y} ) );
            }
            .k-icon {
                margin-left: calc(-1 * ( #{$kendo-icon-size} + #{$kendo-padding-md-y} ) );
                margin-right: $kendo-padding-md-y;
            }

        }

        .k-spreadsheet-value-treeview-wrapper {
            height: 200px;
            border-width: 1px;
            border-style: solid;
            overflow-y: scroll;
            overflow-x: auto;

            .k-treeview {
                padding: $kendo-padding-md-y;
                overflow: visible;
            }
        }

        // Details
        .k-details,
        .k-expander {
            padding: 0;
            border-width: 1px 0 0;
            border-style: solid;
            border-color: inherit;
        }
        .k-expander {
            border: 0;
            background: inherit;
        }
        .k-details-summary,
        .k-columnmenu-item {
            padding-block: $kendo-menu-popup-item-padding-y;
            padding-inline: $kendo-menu-popup-item-padding-x;
            display: flex;
            align-items: center;
            cursor: pointer;

            > .k-icon,
            > .k-expander-indicator {
                margin-right: $kendo-padding-md-y;
            }
        }
        .k-details-content,
        .k-columnmenu-item-content {
            padding: k-spacing(2);
            display: flex;
            flex-flow: column nowrap;
            gap: k-spacing(2);

            .k-filter-and {
                width: min-content;
                align-self: flex-start;
            }
        }

        .k-actions {
            margin: 0;
            padding: 0;
        }
    }

    // Spreadsheet toolbar
    .k-spreadsheet-popup {
        padding: 0;

        .k-separator {
            display: block;
        }

        .k-reset-color,
        .k-custom-color {
            @include border-radius( 0 );
            width: 100%;
            border-width: 0;
            box-sizing: border-box;
            display: flex;
        }
        .k-reset-color { border-bottom-width: 1px; }
        .k-custom-color { border-top-width: 1px; }
        .k-spreadsheet-border-type-palette {
            padding: k-spacing(2);
            display: grid;
            grid-template-columns: repeat(5, max-content);
            gap: k-spacing(2);
        }
    }


    .k-spreadsheet-clipboard,
    .k-spreadsheet-clipboard-paste {
        margin: 0;
        padding: 0;
        width: 1px;
        height: 1px;
        border: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }



    // Spreadsheet window
    .k-spreadsheet-window .k-external-dropzone {
        margin-block-end: $kendo-spreadsheet-dropzone-spacing-y;
    }

    .k-spreadsheet-window .k-edit-form-container {
        width: auto;
        min-width: 0;
    }


    // Format preview window
    .k-spreadsheet-format-cells {

        .k-spreadsheet-preview {
            margin-top: k-spacing(2);
            text-align: center;
        }

        .k-list-scroller {
            margin-top: k-spacing(2);
            height: 210px;
            border-width: 1px;
            border-style: solid;
            border-color: inherit;
        }
    }


    // Export dialog
    .k-export-config {
        clear: both;
        position: relative;

        &::after {
            content: "";
            clear: both;
            display: block;
        }


        .k-edit-field {
            margin-left: 5%;
            width: 45%;
            float: left;
        }

        .k-page-orientation {
            position: absolute;
            right: 0;
            top: k-spacing(2);

            .k-font-icon {
                font-size: 6em;
            }
            .k-svg-icon {
                width: 6em;
                height: 6em;
            }
        }
    }


    // Insert comment dialog
    .k-spreadsheet-insert-comment textarea {
        height: auto;
    }

    // Insert image dialog - Delete after new rendering adoption R3 23
    .k-spreadsheet-insert-image-dialog {
        @include border-radius( $kendo-spreadsheet-insert-image-dialog-preview-border-radius );
        border-style: $kendo-spreadsheet-insert-image-dialog-border-style;
        border-width: $kendo-spreadsheet-insert-image-dialog-border-width;

        label {
            display: flex;
            justify-content: center;
            min-width: 100%;
            width: $kendo-spreadsheet-insert-image-dialog-preview-width;
            height: $kendo-spreadsheet-insert-image-dialog-preview-height;
            // TODO: extract variable
            background-image: url(#{k-map-get($_kendo-data-uris, $kendo-spreadsheet-insert-image-dialog-preview-img)});
            background-size: auto 70%;
            background-position: 50% 30%;
            background-repeat: no-repeat;

            div {
                display: flex;
                align-self: flex-end;
                margin-bottom: $kendo-spreadsheet-insert-image-dialog-text-margin-bottom;
                pointer-events: none;
            }

            input {
                display: none;
            }
        }

        .k-spreadsheet-has-image {
            background-size: auto 90%;
            background-position: 50% 50%;

            &:hover div,
            &.k-hover div {
                margin: 0;
                align-self: center;
                opacity: 1;
            }

            div {
                opacity: 0;
            }
        }
    }



    // Spreadsheet drawing
    .k-spreadsheet-drawing {
        position: absolute;
        box-sizing: border-box;
        z-index: 101;

        &.k-spreadsheet-active-drawing {
            outline-style: $kendo-spreadsheet-drawing-outline-style;
            outline-width: $kendo-spreadsheet-drawing-outline-width;
        }

        .k-spreadsheet-drawing-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-position: 50% 50%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            cursor: move;
        }

        .k-spreadsheet-drawing-handle {
            width: $kendo-spreadsheet-drawing-handle-width;
            height: $kendo-spreadsheet-drawing-handle-height;
            border-style: $kendo-spreadsheet-drawing-handle-border-style;
            border-width: $kendo-spreadsheet-drawing-handle-border-width;
            border-radius: $kendo-spreadsheet-drawing-handle-border-radius;
            position: absolute;
            transform: translate(-50%, -50%);

            // stylelint-disable declaration-block-single-line-max-declarations, selector-class-pattern
            &.N { left: 50%; top: 0; cursor: ns-resize; }
            &.NE { left: 100%; top: 0; cursor: nesw-resize; }
            &.E { left: 100%; top: 50%; cursor: ew-resize; }
            &.SE { left: 100%; top: 100%; cursor: nwse-resize; }
            &.S { left: 50%; top: 100%; cursor: ns-resize; }
            &.SW { left: 0; top: 100%; cursor: nesw-resize; }
            &.W { left: 0; top: 50%; cursor: ew-resize; }
            &.NW { left: 0; top: 0; cursor: nwse-resize; }
            // stylelint-enable declaration-block-single-line-max-declarations, selector-class-pattern
        }

        .k-spreadsheet-insert-image-dialog {
            .k-spreadsheet-has-image {
                &:hover,
                &.k-hover {
                    border-radius: $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius;
                }
            }
        }
    }


    // Legacy styles
    .k-spreadsheet-legacy {
        .k-spreadsheet,
        .k-spreadsheet-action-bar,
        .k-spreadsheet-view {
            font-size: 12px;
        }

        .k-spreadsheet-cell {
            padding: 1px;
        }

        .k-spreadsheet-filter {
            padding: 0px;
        }

        .k-filter-range {
            border-width: 1px;
        }

        .k-spreadsheet .k-spreadsheet-selection-highlight {
            border-width: 1px;
            border-style: solid;
        }
    }

    // Tabstrip
    .k-spreadsheet .k-tabstrip-wrapper {
        border-width: 0 0 1px;
        border-style: solid;
        border-color: inherit;
        position: relative;
    }

    .k-spreadsheet-quick-access-toolbar {
        padding: $kendo-toolbar-md-padding-y;
        display: inline-flex;
        flex-direction: row;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
    }

    .k-spreadsheet-tabstrip {
        padding-top: $kendo-toolbar-md-padding-y;
        position: relative;
        z-index: 1;
    }
    .k-spreadsheet-tabstrip .k-tabstrip-items-wrapper {
        margin: 0;
    }
    .k-spreadsheet-tabstrip .k-loading {
        display: none;
    }
    .k-spreadsheet-tabstrip .k-content,
    .k-spreadsheet-tabstrip .k-tabstrip-content {
        @include border-radius( 0 );
        padding: 0;
        border-width: 0;
        overflow: hidden;
    }

}


@mixin kendo-spreadsheet--layout() {
    @include kendo-spreadsheet--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/spreadsheet/_theme.scss
@mixin kendo-spreadsheet--theme-base() {

    // Spreadsheet
    .k-spreadsheet {
        @include fill(
            $kendo-spreadsheet-text,
            $kendo-spreadsheet-bg,
            $kendo-spreadsheet-border
        );
    }

    // Header
    .k-spreadsheet-header {
        @include fill(
            $kendo-spreadsheet-header-text,
            $kendo-spreadsheet-header-bg,
            $kendo-spreadsheet-header-border,
            $kendo-spreadsheet-header-gradient
        );
    }

    // Row / Column Headers
    .k-spreadsheet-top-corner,
    .k-spreadsheet-row-header,
    .k-spreadsheet-column-header {
        @include fill(
            $kendo-spreadsheet-table-header-text,
            $kendo-spreadsheet-table-header-bg,
            $kendo-spreadsheet-table-header-border,
            $kendo-spreadsheet-table-header-gradient
        );
    }

    // Cell editor
    .k-spreadsheet-cell-editor {
        @include fill(
            $kendo-spreadsheet-cell-editor-text,
            $kendo-spreadsheet-cell-editor-bg,
            $kendo-spreadsheet-cell-editor-border
        )
    }

    // Cells
    .k-spreadsheet-merged-cell {
        @include fill( $bg: $kendo-spreadsheet-bg );
    }
    .k-spreadsheet-disabled-mask {
        @include fill( $bg: $kendo-spreadsheet-bg );
    }

    // Selection
    .k-spreadsheet .k-selection-full,
    .k-spreadsheet .k-selection-partial {
        @include fill( $bg: $kendo-spreadsheet-partial-selection-bg );
    }
    .k-spreadsheet-selection {
        @include fill(
            $kendo-spreadsheet-selection-text,
            $kendo-spreadsheet-selection-bg,
            $kendo-spreadsheet-selection-border
        );
        @include box-shadow( $kendo-spreadsheet-selection-shadow );
    }
    .k-spreadsheet-selection-highlight {
        @include fill( $border: $kendo-spreadsheet-selection-border );
    }
    .k-spreadsheet .k-single-selection::after {
        @include fill(
            $kendo-spreadsheet-single-selection-text,
            $kendo-spreadsheet-single-selection-bg,
            $kendo-spreadsheet-single-selection-border
        )
    }
    .k-spreadsheet-active-cell {
        @include fill ( $bg: $kendo-spreadsheet-active-cell-bg );
        @include box-shadow( $kendo-spreadsheet-active-cell-shadow );
    }

    .k-spreadsheet .k-auto-fill {
        @include fill(
            $kendo-spreadsheet-auto-fill-text,
            $kendo-spreadsheet-auto-fill-bg,
            $kendo-spreadsheet-auto-fill-border
        );
        @include box-shadow( $kendo-spreadsheet-auto-fill-shadow );
    }
    .k-spreadsheet .k-auto-fill-punch {
        @include fill( $bg: $kendo-spreadsheet-auto-fill-punch-bg );
    }

    // Resize handle
    .k-spreadsheet .k-resize-handle,
    .k-spreadsheet .k-resize-hint-handle,
    .k-spreadsheet .k-resize-hint-marker {
        @include fill( $bg: $kendo-spreadsheet-resize-handle-bg );
    }

    // Comments
    .k-spreadsheet-has-comment::after {
        border-block-color: $kendo-spreadsheet-cell-comment-border transparent;
        border-inline-color: transparent $kendo-spreadsheet-cell-comment-border;
    }

    // Validation
    .k-spreadsheet-cell .k-dirty {
        border-block-color: $kendo-spreadsheet-cell-dirty-border transparent;
        border-inline-color: $kendo-spreadsheet-cell-dirty-border transparent;
    }

    // Filter button
    .k-spreadsheet .k-filter-range {
        border-color: $kendo-color-primary;
    }
    .k-spreadsheet-filter {
        @include fill(
            $kendo-button-text,
            $kendo-button-bg,
            $kendo-button-border,
            $kendo-button-gradient
        );
        box-shadow: inset 0 0 0 1px $kendo-button-border;

        &:hover {
            @include fill(
                $kendo-button-hover-text,
                $kendo-button-hover-bg,
                $kendo-button-hover-border,
                $kendo-button-hover-gradient
            );
        }

        &.k-active {
            @include fill(
                $kendo-button-active-text,
                $kendo-button-active-bg,
                $kendo-button-active-border,
                $kendo-button-active-gradient
            );
        }
    }

    // Filter menu legacy - delete after new rendering adoption R3 23
    .k-spreadsheet-filter-menu {
        > .k-menu,
        > .k-menu:not(.k-context-menu) {

            .k-item:hover,
            .k-item.k-hover {
                @include fill(
                    $kendo-list-item-hover-text,
                    $kendo-list-item-hover-bg
                );
            }
        }

        .k-spreadsheet-value-treeview-wrapper {
            @include fill(
                $kendo-spreadsheet-text,
                $kendo-spreadsheet-bg,
                $kendo-spreadsheet-border
            );
        }
    }

    // Delete after new rendering adoption R3 23
    .k-spreadsheet-insert-image-dialog {
        border-color: $kendo-spreadsheet-insert-image-dialog-preview-border;

        .k-spreadsheet-has-image {
            &:hover,
            &.k-hover {
                box-shadow: $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow;
            }

            &:hover div,
            &.k-hover div {
                color: $kendo-spreadsheet-insert-image-dialog-overlay-hover-text;
            }
        }
    }

    // Drawing
    .k-spreadsheet-drawing {
        &.k-spreadsheet-active-drawing {
            outline-color: $kendo-spreadsheet-drawing-handle-outline-color;
        }

        .k-spreadsheet-drawing-handle {
            border-color: $kendo-spreadsheet-drawing-handle-border-color;
            background-color: $kendo-spreadsheet-drawing-handle-bg;
        }
    }

    .k-spreadsheet-drawing-anchor-cell {
        background: $kendo-spreadsheet-drawing-anchor-bg;
    }

    // Formula bar
    .k-spreadsheet-formula-list {}
    .k-syntax-ref { color: #ff8822; }
    .k-syntax-num { color: #0099ff; }
    .k-syntax-str { color: #38b714; }
    .k-syntax-error { color: red; }
    .k-syntax-bool { color: #a9169c; }
    .k-syntax-paren-match { background-color: #caf200; }

}

@mixin kendo-spreadsheet--theme() {
    @include kendo-spreadsheet--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-spreadsheet--styles() {
    @include module-render( "spreadsheet" ) {
        @include kendo-spreadsheet--layout();
        @include kendo-spreadsheet--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-spreadsheet--styles();
}

// #endregion
// #region @import "./pivotgrid/_index.scss"; -> scss/pivotgrid/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "pivotgrid",
    dependencies: (
        "dialog",
        "grid",
        "icon",
        "list",
        "treeview",
    )
);


// Dependencies
// #region @import "../dialog/_index.scss"; -> scss/dialog/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../treeview/_index.scss"; -> scss/treeview/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../grid/_index.scss"; -> scss/grid/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// @import "../utils/_spacer.scss";
// @import "../utils/_flex.scss";
// @import "../utils/_grid.scss";
// @import "../utils/_position.scss";
// #region @import "../list/_index.scss"; -> scss/list/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/pivotgrid/_variables.scss
// #region @import "../table/_variables.scss"; -> scss/table/_variables.scss
// File already imported_once. Skipping output.
// #endregion


// Pivot grid
/// The spacer of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-spacer: k-spacing(4) !default;
/// The horizontal padding of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-padding-x: null !default;
/// The vertical of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-padding-y: null !default;
/// The font family of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-line-height: var( --kendo-line-height, normal ) !default;
/// The border width of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-border-width: 1px !default;
/// The icon spacing of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-icon-spacing: k-spacing(1) !default;

/// The default width of the PivotGrid row header.
/// @group pivotgrid
$kendo-pivotgrid-row-header-width: 300px !default;
/// The default height of the PivotGrid column header.
/// @group pivotgrid
$kendo-pivotgrid-column-header-height: 75px !default;

/// The horizontal padding of the PivotGrid cell.
/// @group pivotgrid
$kendo-pivotgrid-cell-padding-x: $kendo-table-md-cell-padding-x !default;
/// The vertical padding of the PivotGrid cell.
/// @group pivotgrid
$kendo-pivotgrid-cell-padding-y: $kendo-table-md-cell-padding-y !default;
/// The border width of the PivotGrid cell.
/// @group pivotgrid
$kendo-pivotgrid-cell-border-width: 1px !default;

/// The background color of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-bg: $kendo-component-bg !default;
/// The text color of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-text: $kendo-component-text !default;
/// The border color of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-border: $kendo-component-border !default;

/// The alt border color of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade($kendo-pivotgrid-border, 2)) !default;

/// The background color of the PivotGrid header.
/// @group pivotgrid
$kendo-pivotgrid-headers-bg: $kendo-component-header-bg !default;
/// The text color of the PivotGrid header.
/// @group pivotgrid
$kendo-pivotgrid-headers-text: $kendo-component-header-text !default;
/// The border color of the PivotGrid header.
/// @group pivotgrid
$kendo-pivotgrid-headers-border: $kendo-component-header-border !default;

/// The background color of the PivotGrid total cells.
/// @group pivotgrid
$kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default;
/// The text color of the PivotGrid total cells.
/// @group pivotgrid
$kendo-pivotgrid-total-text: $kendo-component-header-text !default;
/// The border color of the PivotGrid total cells.
/// @group pivotgrid
$kendo-pivotgrid-total-border: $kendo-component-header-border !default;

/// The hover background color of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-pivotgrid-bg, 7%)) !default;
/// The hover text color of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-hover-text: null !default;
/// The hover border color of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-hover-border: null !default;

/// The selected background color of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default;
/// The selected text color of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-selected-text: null !default;
/// The selected border color of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-selected-border: null !default;

/// The focus shadow of the PivotGrid.
/// @group pivotgrid
$kendo-pivotgrid-focus-shadow: $kendo-list-item-focus-shadow !default;


// Pivotgrid Configurator
/// The horizontal padding of the PivotGrid configurator.
/// @group pivotgrid
$kendo-pivotgrid-configurator-padding-x: null !default;
/// The vertical padding of the PivotGrid configurator.
/// @group pivotgrid
$kendo-pivotgrid-configurator-padding-y: null !default;
/// The border width of the PivotGrid configurator.
/// @group pivotgrid
$kendo-pivotgrid-configurator-border-width: 1px !default;

/// The horizontal padding of the PivotGrid configurator header.
/// @group pivotgrid
$kendo-pivotgrid-configurator-header-padding-x: $kendo-pivotgrid-spacer !default;
/// The vertical padding of the PivotGrid configurator header.
/// @group pivotgrid
$kendo-pivotgrid-configurator-header-padding-y: calc( #{$kendo-pivotgrid-spacer} * .75 ) !default;
/// The font size of the PivotGrid configurator header.
/// @group pivotgrid
$kendo-pivotgrid-configurator-header-font-size: 18px !default;
/// The font weight of the PivotGrid configurator header.
/// @group pivotgrid
$kendo-pivotgrid-configurator-header-font-weight: 500 !default;

/// The horizontal padding of the PivotGrid configurator content.
/// @group pivotgrid
$kendo-pivotgrid-configurator-content-padding-x: $kendo-pivotgrid-spacer !default;
/// The vertical padding of the PivotGrid configurator content.
/// @group pivotgrid
$kendo-pivotgrid-configurator-content-padding-y: k-spacing(0.5) !default;

/// The horizontal margin of the PivotGrid configurator fields.
/// @group pivotgrid
$kendo-pivotgrid-configurator-fields-margin-x: k-spacing(0) !default;
/// The vertical margin of the PivotGrid configurator fields.
/// @group pivotgrid
$kendo-pivotgrid-configurator-fields-margin-y: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default;

/// The default width of the PivotGrid vertical configurator.
/// @group pivotgrid
$kendo-pivotgrid-configurator-vertical-width: 320px !default;
/// The default height of the PivotGrid horizontal configurator.
/// @group pivotgrid
$kendo-pivotgrid-configurator-horizontal-height: 420px !default;

/// The background color of the PivotGrid configurator.
/// @group pivotgrid
$kendo-pivotgrid-configurator-bg: $kendo-component-bg !default;
/// The text color of the PivotGrid configurator.
/// @group pivotgrid
$kendo-pivotgrid-configurator-text: $kendo-component-text !default;
/// The border color of the PivotGrid configurator.
/// @group pivotgrid
$kendo-pivotgrid-configurator-border: $kendo-component-border !default;

/// The background color of the PivotGrid configurator header.
/// @group pivotgrid
$kendo-pivotgrid-configurator-header-bg: null !default;
/// The text color of the PivotGrid configurator header.
/// @group pivotgrid
$kendo-pivotgrid-configurator-header-text: $kendo-component-header-text !default;
/// The border color of the PivotGrid configurator header.
/// @group pivotgrid
$kendo-pivotgrid-configurator-header-border: null !default;

/// The shadow of the PivotGrid configurator.
/// @group pivotgrid
$kendo-pivotgrid-configurator-shadow: k-elevation(3) !default;
/// The end shadow of the PivotGrid configurator.
/// @group pivotgrid
$kendo-pivotgrid-configurator-end-shadow: $kendo-pivotgrid-configurator-shadow !default; // -3px 0px 6px rgba(0, 0, 0, .16)
/// The start shadow of the PivotGrid configurator.
/// @group pivotgrid
$kendo-pivotgrid-configurator-start-shadow: $kendo-pivotgrid-configurator-shadow !default; // 3px 0px 6px rgba(0, 0, 0, .16)
/// The top shadow of the PivotGrid configurator.
/// @group pivotgrid
$kendo-pivotgrid-configurator-top-shadow: $kendo-pivotgrid-configurator-shadow  !default; // 0px -3px 6px rgba(0, 0, 0, .16)
/// The bottom shadow of the PivotGrid configurator.
/// @group pivotgrid
$kendo-pivotgrid-configurator-bottom-shadow: $kendo-pivotgrid-configurator-shadow !default; // 0px 3px 6px rgba(0, 0, 0, .16)

/// The horizontal padding of the PivotGrid configurator button.
/// @group pivotgrid
$kendo-pivotgrid-configurator-button-padding-x: k-spacing(1) !default;
/// The vertical padding of the PivotGrid configurator button.
/// @group pivotgrid
$kendo-pivotgrid-configurator-button-padding-y: k-spacing(1) !default;
/// The border width of the PivotGrid configurator button.
/// @group pivotgrid
$kendo-pivotgrid-configurator-button-border-width: 1px !default;
/// The size of the PivotGrid configurator button.
/// @group pivotgrid
$kendo-pivotgrid-configurator-button-size: calc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) ) !default;


// Calculated fields
/// The horizontal padding of the PivotGrid calculated field.
/// @group pivotgrid
$kendo-pivotgrid-calculated-field-padding-x: $kendo-pivotgrid-spacer !default;
/// The vertical padding of the PivotGrid calculated field.
/// @group pivotgrid
$kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-spacer !default;
/// The border width of the PivotGrid calculated field.
/// @group pivotgrid
$kendo-pivotgrid-calculated-field-border-width: 1px !default;
/// The border radius of the PivotGrid calculated field.
/// @group pivotgrid
$kendo-pivotgrid-calculated-field-border-radius: k-border-radius(md) !default;
/// The spacing of the PivotGrid calculated field.
/// @group pivotgrid
$kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default;

/// The background color of the PivotGrid calculated field.
/// @group pivotgrid
$kendo-pivotgrid-calculated-field-bg: $kendo-component-bg !default;
/// The text color of the PivotGrid calculated field.
/// @group pivotgrid
$kendo-pivotgrid-calculated-field-text: $kendo-component-text !default;
/// The border color of the PivotGrid calculated field.
/// @group pivotgrid
$kendo-pivotgrid-calculated-field-border: $kendo-component-border !default;

/// The background color of the PivotGrid calculated field header.
/// @group pivotgrid
$kendo-pivotgrid-calculated-field-header-bg: null !default;
/// The text color of the PivotGrid calculated field header.
/// @group pivotgrid
$kendo-pivotgrid-calculated-field-header-text: $kendo-component-header-text !default;
/// The border color of the PivotGrid calculated field header.
/// @group pivotgrid
$kendo-pivotgrid-calculated-field-header-border: null !default;


/// The horizontal padding of the PivotGrid treeview.
/// @group pivotgrid
$kendo-pivotgrid-treeview-padding-x: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default;
/// The vertical padding of the PivotGrid treeview.
/// @group pivotgrid
$kendo-pivotgrid-treeview-padding-y: k-spacing(0) !default;

// Legacy variables
$kendo-pivotgrid-alt-bg: $kendo-grid-header-bg !default;
$kendo-pivotgrid-alt-text: $kendo-grid-header-text !default;
$kendo-pivotgrid-chrome-border: $kendo-grid-border !default;

$kendo-pivotgrid-container-bg: $kendo-component-bg !default;
$kendo-pivotgrid-row-headers-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 )) !default;

$kendo-pivotgrid-button-bg: null !default;
$kendo-pivotgrid-button-text: null !default;
$kendo-pivotgrid-button-hover-bg: null !default;
$kendo-pivotgrid-button-hover-text: null !default;
$kendo-pivotgrid-button-active-bg: null !default;
$kendo-pivotgrid-button-active-text: null !default;

$kendo-pivotgrid-remove-bg: null !default;
$kendo-pivotgrid-remove-text: null !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/pivotgrid/_layout.scss
@mixin kendo-pivotgrid--layout-base() {

    // Pivotgrid
    .k-pivotgrid {
        padding-block: $kendo-pivotgrid-padding-y;
        padding-inline: $kendo-pivotgrid-padding-x;
        border-width: $kendo-pivotgrid-border-width;
        border-style: solid;
        box-sizing: content-box;
        font-size: $kendo-pivotgrid-font-size;
        font-family: $kendo-pivotgrid-font-family;
        line-height: $kendo-pivotgrid-line-height;
        text-align: start;
        vertical-align: top;
        display: grid;
        grid-template-columns: $kendo-pivotgrid-row-header-width auto;
        grid-template-rows: $kendo-pivotgrid-column-header-height auto;
        position: relative;

        table {
            margin: 0;
            width: 100%;
            max-width: none;
            border-width: 0;
            border-color: inherit;
            border-collapse: separate;
            border-spacing: 0;
            outline: 0;
            text-align: inherit;
            empty-cells: show;
        }

        thead,
        tbody,
        th,
        tr,
        td {
            border-color: inherit;
            text-align: inherit;
        }
    }


    // Table Layout
    .k-pivotgrid-table {
        table-layout: fixed;

        th {
            font-weight: 400;
            text-transform: initial;
        }

        .k-pivotgrid-header-root {
            font-weight: 600;
            text-transform: uppercase;
        }
    }


    // Header empty cell
    .k-pivotgrid-empty-cell {
        border-right-style: solid;
        border-right-width: $kendo-pivotgrid-cell-border-width;
        border-bottom-style: solid;
        border-bottom-width: $kendo-pivotgrid-cell-border-width;

        &:focus {
            outline: none;
        }
    }


    // Column Headers
    .k-pivotgrid-column-headers {
        overflow: hidden;
    }

    .k-pivotgrid-column-headers .k-pivotgrid-table {
        padding-inline-start: 0;
        padding-inline-end: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width});
    }

    .k-pivotgrid-column-headers .k-pivotgrid-cell {
        border-bottom-style: solid;
        border-bottom-width: $kendo-pivotgrid-cell-border-width;
        border-left-style: solid;
        border-left-width: $kendo-pivotgrid-cell-border-width;

        &:first-child {
            border-left-width: 0;
        }

        &.k-first {
            border-left-width: $kendo-pivotgrid-cell-border-width;
        }
    }


    // Row Headers
    .k-pivotgrid-row-headers {
        overflow: hidden;
    }

    .k-pivotgrid-row-headers .k-pivotgrid-table {
        padding-bottom: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width});
    }

    .k-pivotgrid-row-headers .k-pivotgrid-cell {
        border-right-style: solid;
        border-right-width: $kendo-pivotgrid-cell-border-width;
        border-bottom-style: solid;
        border-bottom-width: $kendo-pivotgrid-cell-border-width;
        white-space: nowrap;
    }


    // Values
    .k-pivotgrid-values {
        border-color: inherit;
        overflow: scroll;
    }

    .k-pivotgrid-values .k-pivotgrid-cell {
        border-bottom-style: solid;
        border-bottom-width: $kendo-pivotgrid-cell-border-width;
        border-left-style: solid;
        border-left-width: $kendo-pivotgrid-cell-border-width;

        &:first-child {
            border-left-width: 0;
        }
    }

    .k-pivotgrid-cell {
        padding-block: $kendo-pivotgrid-cell-padding-y;
        padding-inline: $kendo-pivotgrid-cell-padding-x;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: top;
        overflow: hidden;

        &:focus {
            outline: none;
        }
    }

    .k-pivotgrid-cell .k-icon {
        cursor: pointer;
        padding-inline-end: $kendo-pivotgrid-icon-spacing;
    }

    .k-pivotgrid-total {
        font-weight: 600;
    }

    // Column menus
    .k-column-menu .k-treeview {
        padding-block: $kendo-pivotgrid-treeview-padding-y;
        padding-inline: $kendo-pivotgrid-treeview-padding-x;
        overflow: auto;
    }


    // Pivotgrid configurator
    .k-pivotgrid-configurator {
        display: flex;
    }

    .k-pivotgrid-configurator-panel {
        padding-block: $kendo-pivotgrid-configurator-padding-y;
        padding-inline: $kendo-pivotgrid-configurator-padding-x;
        border-width: $kendo-pivotgrid-configurator-border-width;
        border-style: solid;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        z-index: 2;
    }

    // Configurator Button
    .k-pivotgrid-configurator-button {
        padding-block: $kendo-pivotgrid-configurator-button-padding-y;
        padding-inline: $kendo-pivotgrid-configurator-button-padding-x;
        border-width: $kendo-pivotgrid-configurator-button-border-width;
        border-style: solid;
        box-sizing: border-box;
        cursor: pointer;
        user-select: none;

        .k-flex-row &,
        .k-flex-row-reverse & {
            display: flex;
            align-items: center;
            justify-content: center;
            writing-mode: vertical-rl;

            .k-icon {
                vertical-align: baseline;
            }
        }
        .k-flex-row-reverse & > span {
            transform: rotate(-180deg);
        }

        .k-flex-col &,
        .k-flex-col-reverse & {
            text-align: center;
        }
    }


    // Modes
    .k-pivotgrid-configurator-overlay {
        position: absolute;
        overflow: hidden;
        z-index: 2;

        .k-flex-row & {
            right: $kendo-pivotgrid-configurator-button-size;
        }
        .k-flex-row-reverse & {
            left: $kendo-pivotgrid-configurator-button-size;
        }
        .k-flex-col & {
            bottom: $kendo-pivotgrid-configurator-button-size;
        }
        .k-flex-col-reverse & {
            top: $kendo-pivotgrid-configurator-button-size;
        }
    }


    // Panel Content
    .k-pivotgrid-configurator-header {
        padding-block: $kendo-pivotgrid-configurator-header-padding-y;
        padding-inline: $kendo-pivotgrid-configurator-header-padding-x;
        font-size: $kendo-pivotgrid-configurator-header-font-size;
        font-weight: $kendo-pivotgrid-configurator-header-font-weight;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .k-pivotgrid-configurator-header-text {
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .k-pivotgrid-configurator-content {
        padding-block: $kendo-pivotgrid-configurator-content-padding-y;
        padding-inline: $kendo-pivotgrid-configurator-content-padding-x;
        flex: 1 1 auto;
        overflow: auto;

        .k-form {
            .k-label {
                font-size: 16px;
                font-weight: 500;
                align-items: flex-start;
            }
            .k-dropdown-list {
                max-width: 90px;
            }
            .k-textbox {
                flex-basis: 50%;
            }
        }

        // Rows, Cols and Filters
        .k-row-fields,
        .k-column-fields,
        .k-filter-fields {
            margin-top: $kendo-pivotgrid-configurator-fields-margin-y;
            flex-wrap: wrap;
        }

        // Values
        .k-value-fields {
            margin-block: $kendo-pivotgrid-configurator-fields-margin-y;
            margin-inline: $kendo-pivotgrid-configurator-fields-margin-x;
            display: flex;
            flex-direction: column;
            gap: calc( #{$kendo-pivotgrid-spacer} / 2 );
        }

        .k-select-all .k-checkbox {
            margin-inline-end: k-spacing(1);
        }

        .k-fields-list-wrapper {
            max-height: 200px;
            border-width: 1px;
            border-style: solid;
            flex: 1 1 auto;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .k-settings-description {
            margin-top: k-spacing(4);
            text-align: center;
        }

        .k-treeview {
            padding-block: $kendo-pivotgrid-treeview-padding-y;
            padding-inline: $kendo-pivotgrid-treeview-padding-x;
            overflow: auto;
        }
    }


    // Calculated field
    .k-calculated-field {
        padding-block: $kendo-pivotgrid-calculated-field-padding-y;
        padding-inline: $kendo-pivotgrid-calculated-field-padding-x;
        border-width: $kendo-pivotgrid-calculated-field-border-width;
        border-radius: $kendo-pivotgrid-calculated-field-border-radius;
        border-style: solid;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: $kendo-pivotgrid-calculated-field-gap;
    }
    .k-calculated-field-header {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .k-calculated-field-header .k-textbox {
        min-width: 200px;
    }

    .k-calculated-field-header-text {
        margin-right: 5px;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .k-calculated-field-header-actions {
        flex-shrink: 0;
        align-self: flex-start;
    }

    .k-calculated-field-content .k-textbox {
        width: 100%;
    }

    .k-calculated-field-actions {
        display: flex;
        flex-direction: row;
        align-items: center;

        .k-icon {
            margin-right: k-spacing(2);
        }
        .k-dropdown-list {
            max-width: 100px;
        }
    }

    .k-filter-menu .k-calculated-item {
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }


    // Vertical Layout
    .k-pivotgrid-configurator-vertical {
        min-width: $kendo-pivotgrid-configurator-vertical-width;
    }

    .k-pivotgrid-configurator-vertical.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel {
        .k-flex-row &,
        .k-flex-row-reverse & {
            border-right-width: 0;
            border-left-width: 0;
        }
    }


    // Horizontal Layout
    .k-pivotgrid-configurator-horizontal {
        width: 100%;
        height: $kendo-pivotgrid-configurator-horizontal-height;

        .k-pivotgrid-configurator-content {
            .k-form {
                display: flex;
                flex-direction: row;
            }

            .k-form-field-wrapper {
                padding-left: $kendo-pivotgrid-spacer;

                & > *:first-child {
                    margin-top: 0;
                }
                &:first-child {
                    padding-left: 0;
                    flex: 1 1 30%;
                }
                &:nth-child(2) {
                    flex: 1 1 30%;
                }

                &:last-child {
                    border-left-width: 1px;
                    border-left-style: solid;
                    flex: 1 1 40%;
                }
            }

            .k-row-fields,
            .k-column-fields,
            .k-filter-fields {
                max-height: 100px;
                overflow-x: hidden;
                overflow-y: auto;
            }
            .k-value-fields {
                max-height: 250px;
                flex-flow: row wrap;
                overflow-x: hidden;
                overflow-y: auto;
            }
        }

        &.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel {
            .k-flex-col &,
            .k-flex-col-reverse & {
                border-top-width: 0;
                border-bottom-width: 0;
            }
        }
    }



    // Pivotgrid export
    .k-pdf-export-shadow {

        .k-pivotgrid {
            height: auto !important; // stylelint-disable-line declaration-no-important
        }

        .k-pivotgrid-values  {
            height: auto;
            overflow: visible;
        }

        .k-pivotgrid-column-headers .k-pivotgrid-table {
            padding-inline-end: 0;
        }

    }


    // Legacy pivotgrid
    // TODO: remove
    .k-pivot {
        border-width: $kendo-pivotgrid-border-width;
        border-style: solid;
        position: relative;

        .k-grid td {
            white-space: nowrap;
        }

        .k-grid-content {
            flex: 1 1 auto;
        }
    }

    .k-pivot-toolbar {
        border-width: 0 0 1px;
        border-style: solid;
        align-items: flex-start;
        flex-wrap: wrap;
        box-shadow: none;

        > * {
            max-width: 100%;
        }

        &::before {
            display: none;
        }
    }

    .k-pivot-layout {
        border-spacing: 0;
        table-layout: auto;

        .k-grid-footer,
        .k-grid .k-table-alt-row {
            font-weight: bold;
        }
    }

    .k-pivot-layout > tbody,
    .k-pivot .k-table-td,
    .k-pivot td {
        vertical-align: top;
    }

    .k-pivot-layout > tbody > tr > td {
        padding: 0;
    }

    .k-pivot-rowheaders > .k-grid,
    .k-pivot-table > .k-grid {
        border-width: 0;
        color: inherit;
        background: none;
    }

    .k-pivot-rowheaders > .k-grid td:first-child,
    .k-pivot-table .k-grid-header .k-header.k-first {
        border-left-width: 1px;
    }

    .k-pivot-rowheaders > .k-grid td.k-first {
        border-left-width: 0;
    }

    .k-pivot-rowheaders > .k-grid {
        overflow: hidden;
    }

    .k-pivot-table {
        border-left-width: 1px;
        border-left-style: solid;
    }

    .k-pivot-table .k-grid-header-wrap {
        margin-right: -1px;
    }

    .k-pivot-table .k-grid-header-wrap > table {
        height: 100%;
    }

    .k-pivot .k-grid-header .k-header {
        vertical-align: top;
    }

    .k-pivot .k-grid tr {
        .k-grid-footer {
            border-bottom-width: 0;
        }
        &:last-child:not(.k-grid-footer) {
            td:not(.k-grid-footer) {
                border-bottom-width: 1px;
            }
        }
    }

    .k-pivot-layout .k-grid td {
        border-bottom-width: 1px;
    }

    .k-pivot-layout .k-grid-footer > td {
        border-top-width: 0;
    }

    .k-pivot-filter-window .k-treeview {
        max-height: 600px;
    }


    // jquery specific -- old pivot
    // TODO: remove
    .k-pivotgrid-wrapper {
        box-sizing: border-box;
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        gap: k-spacing(2);

        > .k-pivotgrid-configurator-panel {
            max-width: 320px;
            flex: none;
        }
        > .k-pivot {
            flex: 1;
        }
    }
    .k-pivotgrid-configurator-panel.kendo-jquery {
        box-sizing: border-box;
        display: inline-flex;

        .k-pivotgrid-configurator {
            height: 100%;
        }

        .k-pivotgrid-configurator-content {
            padding: k-spacing(4);
            max-height: 100%;
            display: flex;
            flex-flow: column nowrap;
            gap: k-spacing(4);
            overflow-x: hidden;
            overflow-y: auto;
        }

        .k-pivotgrid-targets {
            display: flex;
            flex-flow: column nowrap;
            gap: k-spacing(4);
        }

        .k-pivotgrid-configurator-section {
            display: flex;
            flex-flow: column nowrap;
            gap: k-spacing(2);
        }

        .k-column-fields {
            margin: 0;
            padding: k-spacing(1);
            max-height: 200px;
            border-width: 1px;
            border-style: solid;
            display: flex;
            flex-flow: row wrap;
            gap: k-spacing(1);
            overflow-x: hidden;
            overflow-y: auto;

            > * {
                margin: 0;
            }
        }
    }

    // PivotGrid toggle icon
    .k-pivotgrid-toggle {
        margin-block: calc( #{$kendo-icon-padding} * -1 );
        padding: $kendo-icon-padding;
        box-sizing: content-box;
        cursor: pointer;
    }

}


@mixin kendo-pivotgrid--layout() {
    @include kendo-pivotgrid--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/pivotgrid/_theme.scss
@mixin kendo-pivotgrid--theme-base() {

    // PivotGrid
    .k-pivotgrid {
        @include fill (
            $kendo-pivotgrid-text,
            $kendo-pivotgrid-bg,
            $kendo-pivotgrid-border
        );
    }

    .k-pivotgrid-column-headers,
    .k-pivotgrid-row-headers,
    .k-pivotgrid-empty-cell {
        @include fill (
            $kendo-pivotgrid-headers-text,
            $kendo-pivotgrid-headers-bg,
            $kendo-pivotgrid-headers-border
        );
    }

    .k-pivotgrid-empty-cell {
        @include fill (
            $border: $kendo-pivotgrid-alt-border
        );
    }

    .k-pivotgrid-row-headers .k-pivotgrid-row .k-pivotgrid-cell:last-child {
        border-right-color: $kendo-pivotgrid-alt-border;
    }

    .k-pivotgrid-column-headers .k-pivotgrid-column-total:nth-last-of-type(2) .k-pivotgrid-cell:not(.k-pivotgrid-expanded),
    .k-pivotgrid-column-headers .k-pivotgrid-row:last-child {
        border-bottom-color: $kendo-pivotgrid-alt-border;
    }


    .k-pivotgrid-header-total,
    .k-pivotgrid-total {
        @include fill (
            $kendo-pivotgrid-total-text,
            $kendo-pivotgrid-total-bg,
            $kendo-pivotgrid-total-border
        );
    }


    // Hover state
    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row:hover,
    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row:hover,
    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
    .k-pivotgrid-values tbody > .k-pivotgrid-row:hover,
    .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover {
        @include fill (
            $kendo-pivotgrid-hover-text,
            $kendo-pivotgrid-hover-bg,
            $kendo-pivotgrid-hover-border
        );
    }

    // Focus state
    .k-pivotgrid-cell:focus,
    .k-pivotgrid-cell.k-focus,
    .k-pivotgrid-empty-cell:focus,
    .k-pivotgrid-empty-cell.k-focus,
    .k-master-row > .k-pivotgrid-cell:focus,
    .k-grouping-row > .k-pivotgrid-cell:focus,
    .k-detail-row > .k-pivotgrid-cell:focus,
    .k-group-footer > .k-pivotgrid-cell:focus {
        @include focus-indicator( $kendo-pivotgrid-focus-shadow, true );
    }

    // Selected state
    .k-pivotgrid-cell.k-selected,
    .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
        @include fill (
            $kendo-pivotgrid-selected-text,
            $kendo-pivotgrid-selected-bg,
            $kendo-pivotgrid-selected-border
        );
    }


    // Pivotgrid configurator
    .k-pivotgrid-configurator-button,
    .k-pivotgrid-configurator-panel {
        @include fill (
            $kendo-pivotgrid-configurator-text,
            $kendo-pivotgrid-configurator-bg,
            $kendo-pivotgrid-configurator-border
        );
    }

    .k-pivotgrid-configurator-header {
        @include fill(
            $kendo-pivotgrid-configurator-header-text,
            $kendo-pivotgrid-configurator-header-bg,
            $kendo-pivotgrid-configurator-header-border
        );
    }

    .k-pivotgrid-configurator-content .k-fields-list-wrapper {
        @include fill(
            $border: $kendo-pivotgrid-configurator-border
        );
    }


    // Calculated field
    .k-calculated-field {
        @include fill (
            $kendo-pivotgrid-calculated-field-text,
            $kendo-pivotgrid-calculated-field-bg,
            $kendo-pivotgrid-calculated-field-border
        );
    }

    .k-calculated-field-header {
        @include fill(
            $kendo-pivotgrid-calculated-field-header-text,
            $kendo-pivotgrid-calculated-field-header-bg,
            $kendo-pivotgrid-calculated-field-header-border
        );
    }

    .k-filter-menu .k-calculated-item {
        @include fill( $border: $kendo-popup-border );
    }

    .k-pivotgrid-configurator-content .k-form-field-wrapper {
        @include fill( $border: $kendo-component-border );
    }


    // Overlay mode
    .k-pivotgrid-configurator-overlay {
        .k-flex-row & {
            @include box-shadow( $kendo-pivotgrid-configurator-end-shadow );
        }

        .k-flex-row-reverse & {
            @include box-shadow( $kendo-pivotgrid-configurator-start-shadow );
        }

        .k-flex-col & {
            @include box-shadow( $kendo-pivotgrid-configurator-top-shadow );
        }

        .k-flex-col-reverse & {
            @include box-shadow( $kendo-pivotgrid-configurator-bottom-shadow );
        }
    }


    // Legacy pivotgrid
    // TODO: remove
    .k-pivot {
        @include fill (
            $kendo-pivotgrid-text,
            $kendo-pivotgrid-bg,
            $kendo-pivotgrid-border
        );
    }
    .k-pivot-table {
        border-color: $kendo-pivotgrid-border;
    }

    // Pivotgrid header
    .k-pivot-rowheaders {
        @include fill(
            $kendo-pivotgrid-headers-text,
            $kendo-pivotgrid-headers-bg,
            $kendo-pivotgrid-headers-border
        );
    }


    // Pivotgrid toolbar
    .k-pivot-toolbar {
        @include fill(
            $kendo-pivotgrid-headers-text,
            $kendo-pivotgrid-headers-bg,
            $kendo-pivotgrid-headers-border
        );

        .k-empty {
            color: $kendo-subtle-text;
        }
    }

    .k-pivot .k-alt {
        background-color: $kendo-pivotgrid-alt-bg;
    }

    .k-pivot-toolbar,
    .k-pivot-table,
    .k-pivot-rowheaders > .k-grid td:first-child,
    .k-pivot-table .k-grid-header .k-header.k-first {
        border-color: $kendo-pivotgrid-chrome-border;
    }

    .k-header.k-alt {
        background-color: $kendo-pivotgrid-row-headers-bg;
    }

    .k-pivot-layout .k-grid-footer {
        color: $kendo-pivotgrid-alt-text;
        background-color: $kendo-pivotgrid-alt-bg;
    }

    // KPI icons
    .k-i-kpi-trend-increase,
    .k-i-kpi-trend-decrease,
    .k-i-kpi-trend-equal {
        color: inherit;
    }

    .k-i-kpi-status-hold {
        color: $kendo-color-warning;
    }

    .k-i-kpi-status-deny {
        color: $kendo-color-error;
    }

    .k-i-kpi-status-open {
        color: $kendo-color-success;
    }


    // Configurator
    .k-pivotgrid-configurator-panel.kendo-jquery {

        .k-column-fields {
            border-color: $kendo-component-border;
        }
    }

}


@mixin kendo-pivotgrid--theme() {
    @include kendo-pivotgrid--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-pivotgrid--styles() {
    @include module-render( "pivotgrid" ) {
        @include kendo-pivotgrid--layout();
        @include kendo-pivotgrid--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-pivotgrid--styles();
}

// #endregion
// #region @import "./treelist/_index.scss"; -> scss/treelist/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "treelist",
    dependencies: (
        "grid",
        "icon",
    )
);


// Dependencies
// @import "../utils/_text.scss";
// #region @import "../grid/_index.scss"; -> scss/grid/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/treelist/_variables.scss
// Treelist

/// The background color of the TreeList footer row.
/// @group treelist
$kendo-treelist-footer-row-bg: $kendo-grid-hover-bg !default;
/// The border width of the TreeList footer row.
/// @group treelist
$kendo-treelist-footer-row-border-width: 1px !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/treelist/_layout.scss
@mixin kendo-treelist--layout-base() {

    // Base
    .k-treelist {
        &.k-grid-display-block.k-grid-lockedcolumns {
            display: block;
        }

        .k-status {
            padding-block: .4em;
            padding-inline: .6em;
            line-height: 1.6em;

            // TODO: see what this does and use a better name
            .k-loading {
                vertical-align: baseline;
                margin-right: 5px;

                // TODO
                display: none;
            }
        }

        tr.k-hidden {
            display: none;
        }

        .k-treelist-dragging,
        .k-treelist-dragging .k-hover {
            cursor: default;
        }

        .k-drop-hint {
            transform: translate(0, -50%);
        }

        .k-table-row.k-footer td,
        .k-table-row.k-footer-template td,
        .k-table-row.k-footer .k-table-td,
        .k-table-row.k-footer-template .k-table-td {
            border-width: $kendo-treelist-footer-row-border-width 0;
            border-style: solid;
            font-weight: bold;
        }

        .k-table-row.k-footer + .k-table-row.k-footer td,
        .k-table-row.k-footer + .k-table-row.k-footer .k-table-td {
            border-top-width: 0;
        }
    }


    // Sticky headers
    .k-treelist-scrollable {
        > .k-table,
        .k-grid-header .k-table-row,
        .k-grid-header .k-table-th {
            background-color: inherit;
        }

        .k-grid-toolbar {
            position: sticky;
            z-index: 3;
            top: 0;
            left: 0;
        }

        .k-grid-header .k-table-th {
            position: sticky;
            z-index: 1;
        }

        .k-grid-header .k-table-th.k-grid-header-sticky {
            z-index: 3;
        }

        thead.k-grid-header {
            padding-right: 0;
        }

        .k-table-row.k-group-footer + .k-table-row.k-group-footer td {
            border-top-width: 0;
        }

        &[dir = "rtl"],
        .k-rtl & {
            thead.k-grid-header {
                padding-left: 0;
            }
        }

    }

    .k-drag-separator {
        display: inline-block;
        border-right: 1px solid;
        height: 1em;
        vertical-align: top;
        margin-block: 0;
        margin-inline: .5em;
    }

    .k-treelist-toggle {
        margin-block: calc( #{$kendo-icon-padding} * -1 );
        padding: $kendo-icon-padding;
        box-sizing: content-box;
        cursor: pointer;
    }

}


@mixin kendo-treelist--layout() {
    @include kendo-treelist--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/treelist/_theme.scss
@mixin kendo-treelist--theme-base() {

    // Theme
    .k-treelist {
        tr.k-footer,
        tr.k-footer-template {
            background-color: $kendo-treelist-footer-row-bg;
        }
    }

}


@mixin kendo-treelist--theme() {
    @include kendo-treelist--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-treelist--styles() {
    @include module-render( "treelist" ) {
        @include kendo-treelist--layout();
        @include kendo-treelist--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-treelist--styles();
}

// #endregion
// #region @import "./filter/_index.scss"; -> scss/filter/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "filter",
    dependencies: (
        "button",
        "checkbox",
        "date-time-picker",
        "dropdown-list",
        "input",
        "numeric-textbox",
        "toolbar",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../checkbox/_index.scss"; -> scss/checkbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../datetimepicker/_index.scss"; -> scss/datetimepicker/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../numerictextbox/_index.scss"; -> scss/numerictextbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../toolbar/_index.scss"; -> scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/filter/_variables.scss
// Filter expression builder

/// The horizontal padding of the Filter.
/// @group filter
$kendo-filter-padding-x: $kendo-padding-md-x !default;
/// The vertical padding of the Filter.
/// @group filter
$kendo-filter-padding-y: $kendo-padding-md-y !default;

/// The bottom margin of the Filter.
/// @group filter
$kendo-filter-bottom-margin: k-spacing(7.5) !default;
/// The width of the line that connects the Filter items.
/// @group filter
$kendo-filter-line-size: 1px !default;

/// The width of the dropdown elements in the Filter items.
/// @group filter
$kendo-filter-operator-dropdown-width: 15em !default;

/// The text color of the Filter preview field.
/// @group filter
$kendo-filter-preview-field-text: $kendo-color-primary !default;
/// The text color of the Filter preview operator.
/// @group filter
$kendo-filter-preview-operator-text: $kendo-subtle-text !default;

/// The box shadow of the focused Filter toolbar.
/// @group filter
$kendo-filter-toolbar-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/filter/_layout.scss
@mixin kendo-filter--layout-base() {

    .k-filter {
        box-sizing: border-box;
        border-width: 0;
        display: inline-block;
        background-color: transparent;

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

        ul {
            padding: 0;

            li {
                list-style-type: none;
            }
        }

        .k-filter-container,
        .k-filter-preview {
            margin-block-end: $kendo-filter-bottom-margin;
        }

        .k-filter-lines,
        .k-filter-item {
            padding-inline-start: $kendo-filter-padding-x;
        }

        .k-filter-toolbar {
            display: inline-flex;
            position: relative;
            padding-block: $kendo-filter-padding-y;
            padding-inline: 0;

            &::before {
                content: "";
                position: absolute;
                width: $kendo-filter-padding-x;
                height: $kendo-filter-line-size;
                inset-block-start: 50%;
                inset-inline-start: calc( #{$kendo-filter-padding-x} * -1 );
            }

            .k-toolbar {
                border-style: solid;
            }
        }
        .k-filter-operator .k-dropdown-list {
            width: $kendo-filter-operator-dropdown-width;
        }

        .k-filter-item {
            position: relative;

            &::before {
                content: "";
                position: absolute;
                width: $kendo-filter-line-size;
                height: 100%;
                inset-block-start: calc( #{$kendo-filter-padding-y} * -1 );
                inset-inline-start: 0;
            }
        }

        // The second selector targets the Angular rendering
        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
        .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
            content: "";
            position: absolute;
            width: $kendo-filter-line-size;
            inset-block-start: calc( calc( #{$kendo-filter-padding-y} * -1 ) - #{$kendo-filter-line-size} );
            inset-block-end: 50%;
            inset-inline-start: calc( #{$kendo-filter-padding-x} * -1 );
        }

        // The forth and fifth selectors targets the Angular rendering
        .k-filter-group-main::before,
        .k-filter-group-main > .k-filter-toolbar::before,
        .k-filter-group-main > .k-filter-toolbar::after,
        .k-filter-group-main > * > .k-filter-toolbar::before,
        .k-filter-group-main > * > .k-filter-toolbar::after,
        .k-filter-lines .k-filter-item:last-child::before {
            display: none;
        }
    }

}


@mixin kendo-filter--layout() {
    @include kendo-filter--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/filter/_theme.scss
@mixin kendo-filter--theme-base() {

    .k-filter {
        color: $kendo-component-text;

        .k-filter-preview-field {
            color: $kendo-filter-preview-field-text;
        }

        .k-filter-preview-operator {
            color: $kendo-filter-preview-operator-text;
        }

        // The last selector targets the Angular rendering
        .k-filter-item::before,
        .k-filter-toolbar::before,
        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
        .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
            background-color: $kendo-component-border;
        }

        // Focus
        .k-toolbar:focus,
        .k-toolbar.k-focus {
            @include focus-indicator( $kendo-filter-toolbar-focus-shadow );
        }
    }

}


@mixin kendo-filter--theme() {
    @include kendo-filter--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-filter--styles() {
    @include module-render( "filter" ) {
        @include kendo-filter--layout();
        @include kendo-filter--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-filter--styles();
}

// #endregion
// #region @import "./filemanager/_index.scss"; -> scss/filemanager/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "file-manager",
    dependencies: (
        "breadcrumb",
        "dialog",
        "grid",
        "input",
        "listview",
        "menu",
        "splitter",
        "switch",
        "toolbar",
        "treeview",
        "upload",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../toolbar/_index.scss"; -> scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../upload/_index.scss"; -> scss/upload/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../switch/_index.scss"; -> scss/switch/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../menu/_index.scss"; -> scss/menu/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../dialog/_index.scss"; -> scss/dialog/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../breadcrumb/_index.scss"; -> scss/breadcrumb/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../treeview/_index.scss"; -> scss/treeview/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../splitter/_index.scss"; -> scss/splitter/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../grid/_index.scss"; -> scss/grid/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../listview/_index.scss"; -> scss/listview/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/filemanager/_variables.scss
// FileManager

/// The space between the FileManager items.
/// @group file-manager
$kendo-file-manager-spacer: k-spacing(4) !default;
/// The border width of the FileManager.
/// @group file-manager
$kendo-file-manager-border-width: 1px !default;
/// The font family of the FileManager.
/// @group file-manager
$kendo-file-manager-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the FileManager.
/// @group file-manager
$kendo-file-manager-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the FileManager.
/// @group file-manager
$kendo-file-manager-line-height: var( --kendo-line-height, normal ) !default;
/// The background color of the FileManager.
/// @group file-manager
$kendo-file-manager-bg: $kendo-component-bg !default;
/// The text color of the FileManager.
/// @group file-manager
$kendo-file-manager-text: $kendo-component-text !default;
/// The border color of the FileManager.
/// @group file-manager
$kendo-file-manager-border: $kendo-component-border !default;

/// The border width of the FileManager Toolbar.
/// @group file-manager
$kendo-file-manager-toolbar-border-width: $kendo-file-manager-border-width !default;
/// The background color of the FileManager Toolbar.
/// @group file-manager
$kendo-file-manager-toolbar-bg: null !default;
/// The text color of the FileManager Toolbar.
/// @group file-manager
$kendo-file-manager-toolbar-text: null !default;
/// The border color of the FileManager Toolbar.
/// @group file-manager
$kendo-file-manager-toolbar-border: null !default;
/// The gradient of the FileManager Toolbar.
/// @group file-manager
$kendo-file-manager-toolbar-gradient: null !default;

/// The horizontal padding of the FileManager Navigation.
/// @group file-manager
$kendo-file-manager-navigation-padding-x: $kendo-file-manager-spacer !default;
/// The vertical padding of the FileManager Navigation.
/// @group file-manager
$kendo-file-manager-navigation-padding-y: $kendo-file-manager-spacer !default;
/// The width of the FileManager Navigation.
/// @group file-manager
$kendo-file-manager-navigation-width: 20% !default;
/// The border width of the FileManager Navigation.
/// @group file-manager
$kendo-file-manager-navigation-border-width: $kendo-file-manager-border-width !default;
/// The background color of the FileManager Navigation.
/// @group file-manager
$kendo-file-manager-navigation-bg: null !default;
/// The text color of the FileManager Navigation.
/// @group file-manager
$kendo-file-manager-navigation-text: null !default;
/// The border color of the FileManager Navigation.
/// @group file-manager
$kendo-file-manager-navigation-border: null !default;

/// The horizontal padding of the FileManager Breadcrumb.
/// @group file-manager
$kendo-file-manager-breadcrumb-padding-x: k-spacing(2) !default;
/// The vertical padding of the FileManager Breadcrumb.
/// @group file-manager
$kendo-file-manager-breadcrumb-padding-y: k-spacing(2) !default;
/// The border width of the FileManager Breadcrumb.
/// @group file-manager
$kendo-file-manager-breadcrumb-border-width: $kendo-file-manager-border-width !default;
/// The background color of the FileManager Breadcrumb.
/// @group file-manager
$kendo-file-manager-breadcrumb-bg: $kendo-toolbar-bg !default;
/// The text color of the FileManager Breadcrumb.
/// @group file-manager
$kendo-file-manager-breadcrumb-text: null !default;
/// The border color of the FileManager Breadcrumb.
/// @group file-manager
$kendo-file-manager-breadcrumb-border: null !default;

/// The background color of the FileManager ListView.
/// @group file-manager
$kendo-file-manager-listview-bg: null !default;
/// The text color of the FileManager ListView.
/// @group file-manager
$kendo-file-manager-listview-text: null !default;
/// The border color of the FileManager ListView.
/// @group file-manager
$kendo-file-manager-listview-border: null !default;

/// The horizontal padding of the FileManager ListView item.
/// @group file-manager
$kendo-file-manager-listview-item-padding-x: k-spacing(4) !default;
/// The vertical padding of the FileManager ListView item.
/// @group file-manager
$kendo-file-manager-listview-item-padding-y: k-spacing(4) !default;
/// The width of the FileManager ListView item.
/// @group file-manager
$kendo-file-manager-listview-item-width: 120px !default;
/// The height of the FileManager ListView item.
/// @group file-manager
$kendo-file-manager-listview-item-height: 120px !default;
/// The background color of the FileManager ListView item.
/// @group file-manager
$kendo-file-manager-listview-item-bg: null !default;
/// The text color of the FileManager ListView item.
/// @group file-manager
$kendo-file-manager-listview-item-text: null !default;
/// The border color of the FileManager ListView item.
/// @group file-manager
$kendo-file-manager-listview-item-border: null !default;

/// The background color of the FileManager ListView item icon.
/// @group file-manager
$kendo-file-manager-listview-item-icon-bg: null !default;
/// The text color of the FileManager ListView item icon.
/// @group file-manager
$kendo-file-manager-listview-item-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default;
/// The border color of the FileManager ListView item icon.
/// @group file-manager
$kendo-file-manager-listview-item-icon-border: null !default;
/// Background color of the FileManager selected ListView item icon.
/// @group file-manager
$kendo-file-manager-listview-item-icon-selected-bg: null !default;
/// Text color of the FileManager selected ListView item icon.
/// @group file-manager
$kendo-file-manager-listview-item-icon-selected-text: inherit !default;
/// Border color of the FileManager selected ListView item icon.
/// @group file-manager
$kendo-file-manager-listview-item-icon-selected-border: null !default;

/// The background color of the FileManager Grid.
/// @group file-manager
$kendo-file-manager-grid-bg: null !default;
/// The text color of the FileManager Grid.
/// @group file-manager
$kendo-file-manager-grid-text: null !default;
/// The border color of the FileManager Grid.
/// @group file-manager
$kendo-file-manager-grid-border: null !default;

/// The horizontal padding of the FileManager preview.
/// @group file-manager
$kendo-file-manager-preview-padding-x: $kendo-file-manager-spacer !default;
/// The vertical padding of the FileManager preview.
/// @group file-manager
$kendo-file-manager-preview-padding-y: $kendo-file-manager-spacer !default;
/// The width of the FileManager preview.
/// @group file-manager
$kendo-file-manager-preview-width: 20% !default;
/// The border width of the FileManager preview.
/// @group file-manager
$kendo-file-manager-preview-border-width: $kendo-file-manager-border-width !default;
/// The spacing of the FileManager preview.
/// @group file-manager
$kendo-file-manager-preview-spacing: $kendo-file-manager-spacer !default;
/// The gap between the columns in the FileManager preview.
/// @group file-manager
$kendo-file-manager-preview-column-gap: k-spacing(1) !default;
/// The background color of the FileManager preview.
/// @group file-manager
$kendo-file-manager-preview-bg: null !default;
/// The text color of the FileManager preview.
/// @group file-manager
$kendo-file-manager-preview-text: null !default;
/// The border color of the FileManager preview.
/// @group file-manager
$kendo-file-manager-preview-border: null !default;

/// The background color of the FileManager preview icon.
/// @group file-manager
$kendo-file-manager-preview-icon-bg: null !default;
/// The text color of the FileManager preview icon.
/// @group file-manager
$kendo-file-manager-preview-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default;
/// The border color of the FileManager preview icon.
/// @group file-manager
$kendo-file-manager-preview-icon-border: null !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/filemanager/_layout.scss
@mixin kendo-file-manager--layout-base() {

    // File Manager
    .k-filemanager {
        border-width: $kendo-file-manager-border-width;
        border-style: solid;
        box-sizing: border-box;
        font-family: $kendo-file-manager-font-family;
        font-size: $kendo-file-manager-font-size;
        line-height: $kendo-file-manager-line-height;
        display: flex;
        flex-flow: column nowrap;
    }


    // Toolbar
    .k-filemanager-header {
        border-color: inherit;
    }
    .k-filemanager-toolbar {
        border-width: 0;
        border-bottom-width: $kendo-file-manager-toolbar-border-width;
        border-color: inherit;
        flex-shrink: 0;
        z-index: 1;
    }


    // Content Wrapper
    .k-filemanager-content-container {
        border-color: inherit;
        box-sizing: border-box;
        flex: 1 1 0%;
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        overflow: hidden;
    }

    .k-filemanager-splitter {
        border-width: 0;
    }


    // Navigation
    .k-filemanager-navigation {
        padding-block: $kendo-file-manager-navigation-padding-y;
        padding-inline: $kendo-file-manager-navigation-padding-x;
        width: $kendo-file-manager-navigation-width;
        border-width: 0;
        border-right-width: $kendo-file-manager-navigation-border-width;
        border-style: solid;
        border-color: inherit;
        box-sizing: border-box;
        flex-shrink: 0;
        overflow: auto;
    }
    .k-filemanager-treeview {
        overflow: visible;
    }


    // Content
    .k-filemanager-content {
        border-color: inherit;
        flex: 1 1 0%;
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;
        overflow: hidden;
    }

    // Filemanager view
    .k-filemanager-view {
        overflow: auto;
    }

    // Breadcrumb
    .k-filemanager-breadcrumb {
        border-width: 0;
        border-bottom-width: $kendo-file-manager-breadcrumb-border-width;
        padding-block: $kendo-file-manager-breadcrumb-padding-y;
        padding-inline: $kendo-file-manager-breadcrumb-padding-x;
        flex-shrink: 0;
    }


    // Filemanager listview
    .k-filemanager-listview {
        border-width: 0;
        flex: 1 1 0%;

        // Listview item
        .k-listview-item {
            padding-block: $kendo-file-manager-listview-item-padding-y;
            padding-inline: $kendo-file-manager-listview-item-padding-x;
            width: $kendo-file-manager-listview-item-width;
            height: $kendo-file-manager-listview-item-height;
            text-align: center;
        }

        // File preview
        .k-file-preview {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        // File name
        .k-file-name {
            margin-top: calc( #{$kendo-file-manager-spacer} / 2 );
            display: block;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        // Edit mode
        .k-file-edit-input input {
            width: 100%;
        }
    }


    // Filemanager grid
    .k-filemanager-grid {
        border-width: 0;
        flex: 1 1 0%;

        // File preview
        .k-file-preview {
            margin-right: $kendo-icon-spacing;
            display: inline-flex;
            flex-direction: row;
            vertical-align: middle;
        }

        // File icon
        .k-file-icon {}

        // File name
        .k-file-name {
            display: inline-flex;
            flex-direction: row;
            vertical-align: middle;
        }
    }


    // Filemanager preview
    .k-filemanager-preview {
        padding: calc( #{$kendo-file-manager-preview-padding-y} * 3) $kendo-file-manager-preview-padding-x $kendo-file-manager-preview-padding-y;
        width: $kendo-file-manager-preview-width;
        min-height: calc( calc( #{$kendo-file-manager-preview-padding-y} * 4 ) + calc( #{$kendo-icon-size-xxxl} * 2 ) + calc( #{$kendo-file-manager-preview-spacing} * 3 ) );
        border-width: 0;
        border-left-width: $kendo-file-manager-preview-border-width;
        border-style: solid;
        border-color: inherit;
        box-sizing: border-box;
        text-align: center;
        overflow-y: auto;
        flex-shrink: 0;

        // File preview
        .k-file-preview {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        // File name
        .k-file-name {
            margin-top: $kendo-file-manager-preview-spacing;
            display: block;
        }
        .k-no-file-selected {}
        .k-single-file-selected { font-weight: bold; }
        .k-multiple-files-selected { font-weight: bold; }

        // File Meta
        .k-file-meta {
            margin: $kendo-file-manager-preview-spacing 0 0;
            box-sizing: border-box;
            text-align: start;
            display: flex;
            flex-flow: row wrap;
            grid-column-gap: $kendo-file-manager-preview-column-gap;
        }
        .k-file-meta-label {
            display: inline-block;
        }
        .k-file-meta-value {
            margin: 0;
        }
        .k-file-type {
            text-transform: capitalize;
        }
        .k-line-break {
            margin: $kendo-file-manager-preview-spacing 0 0;
            width: 100%;
            flex: 1 1 100%;
            flex-flow: row nowrap;
        }
    }


    // Resizing Handle
    .k-filemanager .k-splitbar {
        flex-shrink: 0;
        display: inline-flex;
        position: relative;
        border-width: 0 1px;
        border-style: solid;
        border-color: inherit;
    }


    // Upload Dialog
    .k-filemanager-upload-dialog .k-upload-files {
        max-height: 200px;
        overflow-y: auto;
    }


    // Drag Hint
    // TODO: use drag-hint styles
    .k-filemanager-drag-hint {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: $kendo-icon-spacing;
    }

}


@mixin kendo-file-manager--layout() {
    @include kendo-file-manager--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/filemanager/_theme.scss
@mixin kendo-file-manager--theme-base() {

    // Filemanager
    .k-filemanager {
        @include fill(
            $kendo-file-manager-text,
            $kendo-file-manager-bg,
            $kendo-file-manager-border
        );
    }


    // Filemanager toolbar
    .k-filemanager-toolbar {
        @include fill(
            $kendo-file-manager-toolbar-text,
            $kendo-file-manager-toolbar-bg,
            $kendo-file-manager-toolbar-border,
            $kendo-file-manager-toolbar-gradient
        );
    }


    // Filemanager navigation
    .k-filemanager-navigation {
        @include fill(
            $kendo-file-manager-navigation-text,
            $kendo-file-manager-navigation-bg,
            $kendo-file-manager-navigation-border
        );
    }


    // Filemanager breadcrumb
    .k-filemanager-breadcrumb {
        @include fill(
            $kendo-file-manager-breadcrumb-text,
            $kendo-file-manager-breadcrumb-bg,
            $kendo-file-manager-breadcrumb-border
        );
    }


    // Filemanager listview
    .k-filemanager-listview {
        @include fill(
            $kendo-file-manager-listview-text,
            $kendo-file-manager-listview-bg,
            $kendo-file-manager-listview-border
        );

        .k-listview-item {
            @include fill(
                $kendo-file-manager-listview-item-text,
                $kendo-file-manager-listview-item-bg,
                $kendo-file-manager-listview-item-border
            );

            .k-file-icon {
                @include fill(
                    $kendo-file-manager-listview-item-icon-text,
                    $kendo-file-manager-listview-item-icon-bg,
                    $kendo-file-manager-listview-item-icon-border
                );
            }

            &.k-selected .k-file-icon {
                @include fill(
                    inherit,
                    transparent,
                    transparent
                );
            }
        }

    }


    // Filemanager grid
    .k-filemanager-grid {

        @include fill(
            $kendo-file-manager-grid-text,
            $kendo-file-manager-grid-bg,
            $kendo-file-manager-grid-border
        );

    }


    // Filemanager preview
    .k-filemanager-preview {
        @include fill(
            $kendo-file-manager-preview-text,
            $kendo-file-manager-preview-bg,
            $kendo-file-manager-preview-border
        );

        .k-file-icon {
            @include fill(
                $kendo-file-manager-preview-icon-text,
                $kendo-file-manager-preview-icon-bg,
                $kendo-file-manager-preview-icon-border
            );
        }

    }

}


@mixin kendo-file-manager--theme() {
    @include kendo-file-manager--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-file-manager--styles() {
    @include module-render( "file-manager" ) {
        @include kendo-file-manager--layout();
        @include kendo-file-manager--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-file-manager--styles();
}

// #endregion
// #region @import "./taskboard/_index.scss"; -> scss/taskboard/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "task-board",
    dependencies: (
        "card",
        "form",
        "icon",
        "input",
        "searchbox",
        "textbox",
        "toolbar",
    )
);


// Dependencies
// @import "../utils/_index.scss";
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../forms/_index.scss"; -> scss/forms/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../textbox/_index.scss"; -> scss/textbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../searchbox/_index.scss"; -> scss/searchbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../toolbar/_index.scss"; -> scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../card/_index.scss"; -> scss/card/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/taskboard/_variables.scss
// TaskBoard

/// The spacing index of the TaskBoard.
/// @group taskboard
$kendo-taskboard-spacer: k-spacing(4) !default;
/// The vertical padding of the TaskBoard.
/// @group taskboard
$kendo-taskboard-padding-y: null !default;
/// The horizontal of the TaskBoard.
/// @group taskboard
$kendo-taskboard-padding-x: null !default;
/// The font family of the TaskBoard.
/// @group taskboard
$kendo-taskboard-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the TaskBoard.
/// @group taskboard
$kendo-taskboard-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the TaskBoard.
/// @group taskboard
$kendo-taskboard-line-height: var( --kendo-line-height, normal ) !default;
/// The background color of the TaskBoard.
/// @group taskboard
$kendo-taskboard-bg: null !default;
/// The text color of the TaskBoard.
/// @group taskboard
$kendo-taskboard-text: null !default;
/// The border color of the TaskBoard.
/// @group taskboard
$kendo-taskboard-border: null !default;

/// The vertical padding of the TaskBoard Toolbar.
/// @group taskboard
$kendo-taskboard-toolbar-padding-y: $kendo-taskboard-spacer !default;
/// The horizontal padding of the TaskBoard Toolbar.
/// @group taskboard
$kendo-taskboard-toolbar-padding-x: $kendo-taskboard-toolbar-padding-y !default;
/// The background color of the TaskBoard Toolbar.
/// @group taskboard
$kendo-taskboard-toolbar-bg: null !default;
/// The text color of the TaskBoard Toolbar.
/// @group taskboard
$kendo-taskboard-toolbar-text: null !default;
/// The border color of the TaskBoard Toolbar.
/// @group taskboard
$kendo-taskboard-toolbar-border: null !default;
/// The gradient of the TaskBoard Toolbar.
/// @group taskboard
$kendo-taskboard-toolbar-gradient: null !default;

/// The vertical padding of the TaskBoard content.
/// @group taskboard
$kendo-taskboard-content-padding-y: $kendo-taskboard-spacer !default;
/// The horizontal padding of the TaskBoard content.
/// @group taskboard
$kendo-taskboard-content-padding-x: $kendo-taskboard-content-padding-y !default;

/// The vertical spacing of the TaskBoard column container.
/// @group taskboard
$kendo-taskboard-column-container-spacing-y: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
/// The vertical padding of the TaskBoard column container.
/// @group taskboard
$kendo-taskboard-column-container-padding-y: k-spacing(0) !default;
/// The horizontal padding of the TaskBoard column container.
/// @group taskboard
$kendo-taskboard-column-container-padding-x: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
/// The spacing of the TaskBoard columns container.
/// @group taskboard
$kendo-taskboard-columns-container-gap: $kendo-taskboard-spacer !default;

/// The default width of the TaskBoard column.
/// @group taskboard
$kendo-taskboard-column-width: 320px !default;
/// The border width of the TaskBoard column.
/// @group taskboard
$kendo-taskboard-column-border-width: 1px !default;
/// The border radius of the TaskBoard column.
/// @group taskboard
$kendo-taskboard-column-border-radius: k-border-radius(md) !default;
/// The background color of the TaskBoard column.
/// @group taskboard
$kendo-taskboard-column-bg: $kendo-base-bg !default;
/// The text color of the TaskBoard column.
/// @group taskboard
$kendo-taskboard-column-text: null !default;
/// The border color of the TaskBoard column.
/// @group taskboard
$kendo-taskboard-column-border: transparent !default;

/// The background color of the focused TaskBoard column.
/// @group taskboard
$kendo-taskboard-column-focus-bg: null !default;
/// The text color of the focused TaskBoard column.
/// @group taskboard
$kendo-taskboard-column-focus-text: null !default;
/// The border color of the focused TaskBoard column.
/// @group taskboard
$kendo-taskboard-column-focus-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 )) !default;

/// The vertical padding of the TaskBoard column header.
/// @group taskboard
$kendo-taskboard-column-header-padding-y: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
/// The horizontal padding of the TaskBoard column header.
/// @group taskboard
$kendo-taskboard-column-header-padding-x: $kendo-taskboard-column-header-padding-y !default;
/// The spacing of the TaskBoard column header.
/// @group taskboard
$kendo-taskboard-column-header-gap: calc( #{$kendo-taskboard-spacer} / 4 ) !default;
/// The spacing of the TaskBoard column header actions.
/// @group taskboard
$kendo-taskboard-column-header-actions-gap: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
/// The font weight of the TaskBoard column header.
/// @group taskboard
$kendo-taskboard-column-header-font-weight: 500 !default;
/// The text color of the TaskBoard column header.
/// @group taskboard
$kendo-taskboard-column-header-text: $kendo-component-header-text !default;

/// The vertical padding of the TaskBoard column Card wrapper.
/// @group taskboard
$kendo-taskboard-column-cards-padding-y: null !default;
/// The horizontal padding of the TaskBoard column Card wrapper.
/// @group taskboard
$kendo-taskboard-column-cards-padding-x: null !default;
/// The spacing of the TaskBoard column Card wrapper.
/// @group taskboard
$kendo-taskboard-column-cards-gap: calc( #{$kendo-taskboard-spacer} / 2 ) !default;

/// The default width of the TaskBoard pane.
/// @group taskboard
$kendo-taskboard-pane-width: $kendo-taskboard-column-width !default;
/// The vertical padding of the TaskBoard pane.
/// @group taskboard
$kendo-taskboard-pane-padding-y: null !default;
/// The horizontal padding of the TaskBoard pane.
/// @group taskboard
$kendo-taskboard-pane-padding-x: null !default;
/// The border width of the TaskBoard pane.
/// @group taskboard
$kendo-taskboard-pane-border-width: 1px !default;
/// The background color of the TaskBoard pane.
/// @group taskboard
$kendo-taskboard-pane-bg: $kendo-component-bg !default;
/// The text color of the TaskBoard pane.
/// @group taskboard
$kendo-taskboard-pane-text: $kendo-component-text !default;
/// The border color of the TaskBoard pane.
/// @group taskboard
$kendo-taskboard-pane-border: $kendo-component-border !default;

/// The vertical padding of the TaskBoard pane header.
/// @group taskboard
$kendo-taskboard-pane-header-padding-y: calc( #{$kendo-taskboard-spacer} * .75 ) !default;
/// The horizontal padding of the TaskBoard pane header.
/// @group taskboard
$kendo-taskboard-pane-header-padding-x: $kendo-taskboard-spacer !default;
/// The font weight of the TaskBoard pane header.
/// @group taskboard
$kendo-taskboard-pane-header-font-weight: 500 !default;
/// The text color of the TaskBoard pane header.
/// @group taskboard
$kendo-taskboard-pane-header-text: $kendo-component-header-text !default;

/// The vertical padding of the TaskBoard pane content.
/// @group taskboard
$kendo-taskboard-pane-content-padding-y: k-spacing(0) !default;
/// The horizontal padding of the TaskBoard pane content.
/// @group taskboard
$kendo-taskboard-pane-content-padding-x: $kendo-taskboard-spacer !default;

/// The vertical padding of the TaskBoard pane actions.
/// @group taskboard
$kendo-taskboard-pane-actions-padding-y: calc( #{$kendo-taskboard-spacer} * .75 ) !default;
/// The horizontal padding of the TaskBoard pane actions.
/// @group taskboard
$kendo-taskboard-pane-actions-padding-x: $kendo-taskboard-spacer !default;

/// The vertical padding of the TaskBoard Card.
/// @group taskboard
$kendo-taskboard-card-padding-y: $kendo-taskboard-spacer !default;
/// The horizontal padding of the TaskBoard Card.
/// @group taskboard
$kendo-taskboard-card-padding-x: $kendo-taskboard-card-padding-y !default;
/// The border width of the TaskBoard Card.
/// @group taskboard
$kendo-taskboard-card-border-width: $kendo-card-border-width !default;
/// The border radius of the TaskBoard Card.
/// @group taskboard
$kendo-taskboard-card-border-radius: k-border-radius(md) !default;
/// The shadow of the TaskBoard Card.
/// @group taskboard
$kendo-taskboard-card-shadow: $kendo-card-shadow !default;
/// The background color of the TaskBoard Card.
/// @group taskboard
$kendo-taskboard-card-bg: $kendo-card-bg !default;
/// The text color of the TaskBoard Card.
/// @group taskboard
$kendo-taskboard-card-text: $kendo-card-text !default;
/// The border color of the TaskBoard Card.
/// @group taskboard
$kendo-taskboard-card-border: $kendo-card-border !default;

/// The border width of the TaskBoard Card category.
/// @group taskboard
$kendo-taskboard-card-category-border-width: 4px !default;

/// The border color of the hovered TaskBoard Card.
/// @group taskboard
$kendo-taskboard-card-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% )) !default;

/// The border color of the focused TaskBoard Card.
/// @group taskboard
$kendo-taskboard-card-focus-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% )) !default;
/// The shadow of the focused TaskBoard Card.
/// @group taskboard
$kendo-taskboard-card-focus-shadow: none !default;

/// The border of the selected TaskBoard Card.
/// @group taskboard
$kendo-taskboard-card-selected-border: if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 )) !default;
/// The shadow of the selected TaskBoard Card.
/// @group taskboard
$kendo-taskboard-card-selected-shadow: none !default;

/// The text color of the TaskBoard Card header text.
/// @group taskboard
$kendo-taskboard-card-header-text: $kendo-color-primary !default;
/// The text color of the hovered TaskBoard Card header text.
/// @group taskboard
$kendo-taskboard-card-header-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
/// The text color of the focused TaskBoard Card header text.
/// @group taskboard
$kendo-taskboard-card-header-focus-text: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;

/// The border width of the TaskBoard Card placeholder.
/// @group taskboard
$kendo-taskboard-drag-placeholder-border-width: 1px !default;
/// The border radius of the TaskBoard Card placeholder.
/// @group taskboard
$kendo-taskboard-drag-placeholder-border-radius: $kendo-taskboard-card-border-radius !default;
/// The background color of the TaskBoard Card placeholder.
/// @group taskboard
$kendo-taskboard-drag-placeholder-bg: rgba(255, 255, 255, .2) !default;
/// The border color of the TaskBoard Card placeholder.
/// @group taskboard
$kendo-taskboard-drag-placeholder-border: $kendo-component-border !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/taskboard/_layout.scss
@mixin kendo-task-board--layout-base() {

    // TaskBoard
    .k-taskboard {
        padding-block: $kendo-taskboard-padding-y;
        padding-inline: $kendo-taskboard-padding-x;
        box-sizing: border-box;
        font-size: $kendo-taskboard-font-size;
        font-family: $kendo-taskboard-font-family;
        line-height: $kendo-taskboard-line-height;
        display: flex;
        flex-direction: column;
        position: relative;

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

    // Toolbar
    .k-taskboard-toolbar {
        padding-block: $kendo-taskboard-toolbar-padding-y;
        padding-inline: $kendo-taskboard-toolbar-padding-x;
        border-width: 0;
        box-shadow: none;
        background: none;
    }

    // Content
    .k-taskboard-content {
        padding: 0 $kendo-taskboard-toolbar-padding-x $kendo-taskboard-content-padding-y;
        display: flex;
        position: relative;
        flex: 1 1 auto;
        overflow-x: auto;
    }

    // Columns
    .k-taskboard-columns-container {
        outline: none;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        gap: $kendo-taskboard-columns-container-gap;
        overflow-x: visible;
    }

    .k-taskboard-column {
        width: $kendo-taskboard-column-width;
        border-width: $kendo-taskboard-column-border-width;
        border-radius: $kendo-taskboard-column-border-radius;
        border-style: solid;
        outline: none;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        overflow: hidden;
    }

    .k-taskboard-column-header {
        padding-block: $kendo-taskboard-column-header-padding-y;
        padding-inline: $kendo-taskboard-column-header-padding-x;
        font-weight: $kendo-taskboard-column-header-font-weight;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: $kendo-taskboard-column-header-gap;
    }

    .k-taskboard-column-header-actions {
        display: inline-flex;
        flex-shrink: 0;
        align-self: flex-start;
        gap: $kendo-taskboard-column-header-actions-gap;
    }

    .k-taskboard-column-cards-container {
        margin-bottom: $kendo-taskboard-column-container-spacing-y;
        padding-block: $kendo-taskboard-column-container-padding-y;
        padding-inline: $kendo-taskboard-column-container-padding-x;
        outline: none;
        overflow: auto;
        flex: 1 1 auto;
    }

    .k-taskboard-column-cards {
        padding-block: $kendo-taskboard-column-cards-padding-y;
        padding-inline: $kendo-taskboard-column-cards-padding-x;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        gap: $kendo-taskboard-column-cards-gap 0;
    }

    // Edit/New Columns
    .k-taskboard-column-new {
        // TODO: we need better way
        // max-height: $kendo-taskboard-column-new-calc-height;
    }

    .k-taskboard-column-new,
    .k-taskboard-column-edit {
        .k-taskboard-column-header {
            font-weight: inherit;
        }

        .k-taskboard-column-header-text {
            flex: 1 1 100%;
        }
    }

    // Preview/Edit Pane
    .k-taskboard-pane {
        padding-block: $kendo-taskboard-pane-padding-y;
        padding-inline: $kendo-taskboard-pane-padding-x;
        width: $kendo-taskboard-pane-width;
        border-width: $kendo-taskboard-pane-border-width;
        border-style: solid;
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        z-index: 2;
    }

    .k-taskboard-pane-header {
        padding-block: $kendo-taskboard-pane-header-padding-y;
        padding-inline: $kendo-taskboard-pane-header-padding-x;
        font-weight: $kendo-taskboard-pane-header-font-weight;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .k-taskboard-pane-header-text {
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .k-taskboard-pane-header-actions {
        flex-shrink: 0;
        align-self: flex-start;
    }

    .k-taskboard-pane-content {
        padding-block: $kendo-taskboard-pane-content-padding-y;
        padding-inline: $kendo-taskboard-pane-content-padding-x;
        overflow: auto;
        flex: 1 1 auto;
    }

    .k-taskboard-pane-actions {
        padding-block: $kendo-taskboard-pane-actions-padding-y;
        padding-inline: $kendo-taskboard-pane-actions-padding-x;
    }

    .k-taskboard-pane-start {
        right: auto;
        left: 0;
    }

    // Cards
    .k-taskboard-card {
        @include border-radius( $kendo-taskboard-card-border-radius );
        border-width: $kendo-taskboard-card-border-width;

        &.k-taskboard-card-category {
            border-inline-start-width: $kendo-taskboard-card-category-border-width;
        }

        .k-card-header
        .k-card-body,
        .k-card-footer {
            padding-block: $kendo-taskboard-card-padding-y;
            padding-inline: $kendo-taskboard-card-padding-x;
        }

        .k-card-header {
            align-items: center;
        }

        .k-card-title {
            font-size: inherit;
            font-weight: inherit;
            word-break: normal;
            overflow-wrap: anywhere;

            &:focus,
            &.k-focus,
            &:hover,
            &.k-hover {
                text-decoration: underline;
            }
        }

        .k-card-header-actions {
            align-self: flex-start;
        }
    }

    // Card Drag Placeholder
    .k-taskboard-drag-placeholder {
        @include border-radius( $kendo-taskboard-drag-placeholder-border-radius );
        border-width: $kendo-taskboard-drag-placeholder-border-width;
        border-style: solid;
        position: relative;
    }

}


@mixin kendo-task-board--layout() {
    @include kendo-task-board--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/taskboard/_theme.scss
@mixin kendo-task-board--theme-base() {

    // TaskBoard
    .k-taskboard {
        @include fill(
            $kendo-taskboard-text,
            $kendo-taskboard-bg,
            $kendo-taskboard-border
        );
    }

    // Toolbar
    .k-taskboard-toolbar {
        @include fill(
            $kendo-taskboard-toolbar-text,
            $kendo-taskboard-toolbar-bg,
            $kendo-taskboard-toolbar-border,
            $kendo-taskboard-toolbar-gradient
        );
    }

    // Columns
    .k-taskboard-column {
        @include fill(
            $kendo-taskboard-column-text,
            $kendo-taskboard-column-bg,
            $kendo-taskboard-column-border
        );
    }
    .k-taskboard-column:focus,
    .k-taskboard-column.k-focus {
        @include fill(
            $kendo-taskboard-column-focus-text,
            $kendo-taskboard-column-focus-bg,
            $kendo-taskboard-column-focus-border
        );
    }

    .k-taskboard-column-header {
        @include fill( $color: $kendo-taskboard-column-header-text );
    }

    // Preview/Edit Pane
    .k-taskboard-pane {
        @include fill (
            $kendo-taskboard-pane-text,
            $kendo-taskboard-pane-bg,
            $kendo-taskboard-pane-border
        );
    }

    .k-taskboard-pane-header {
        @include fill( $color: $kendo-taskboard-pane-header-text );
    }

    // Cards
    .k-taskboard-card {
        @include fill(
            $kendo-taskboard-card-text,
            $kendo-taskboard-card-bg,
            $kendo-taskboard-card-border
        );
        @include box-shadow( $kendo-taskboard-card-shadow );

        .k-card-title {
            @include fill( $color: $kendo-taskboard-card-header-text );

            &:focus,
            &.k-focus {
                @include fill( $color: $kendo-taskboard-card-header-focus-text );
            }

            &:hover,
            &.k-hover {
                @include fill( $color: $kendo-taskboard-card-header-hover-text );
            }
        }

        &:focus,
        &.k-focus {
            @include focus-indicator( $kendo-taskboard-card-focus-shadow );
            @include fill( $border: $kendo-taskboard-card-focus-border );
        }

        &:hover,
        &.k-hover {
            @include fill( $border: $kendo-taskboard-card-hover-border );
        }

        &.k-selected {
            @include fill( $border: $kendo-taskboard-card-selected-border );
            @include box-shadow( $kendo-taskboard-card-selected-shadow );
        }

        &.k-disabled {
            @include disabled( $kendo-disabled-styling... );
        }
    }

    // Card Drag Placeholder
    .k-taskboard-drag-placeholder {
        @include fill(
            $bg: $kendo-taskboard-drag-placeholder-bg,
            $border: $kendo-taskboard-drag-placeholder-border
        );
    }

}


@mixin kendo-task-board--theme() {
    @include kendo-task-board--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-task-board--styles() {
    @include module-render( "task-board" ) {
        @include kendo-task-board--layout();
        @include kendo-task-board--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-task-board--styles();
}

// #endregion


// Editors
// #region @import "./editor/_index.scss"; -> scss/editor/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "editor",
    dependencies: (
        "button",
        "checkbox",
        "color-picker",
        "combobox",
        "dropdown-list",
        "file-manager",
        "icon",
        "toolbar",
        "upload",
        "window",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../checkbox/_index.scss"; -> scss/checkbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../colorpicker/_index.scss"; -> scss/colorpicker/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../combobox/_index.scss"; -> scss/combobox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../toolbar/_index.scss"; -> scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../upload/_index.scss"; -> scss/upload/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../window/_index.scss"; -> scss/window/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/editor/_variables.scss
// Editor

/// The width of the border around the Еditor.
/// @group editor
$kendo-editor-border-width: 1px !default;
/// The font family of the Еditor.
/// @group editor
$kendo-editor-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Еditor.
/// @group editor
$kendo-editor-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Еditor.
/// @group editor
$kendo-editor-line-height: var( --kendo-line-height, normal ) !default;

/// The text color of the Еditor placeholder.
/// @group editor
$kendo-editor-placeholder-text: $kendo-input-placeholder-text !default;
/// The opacity of the Editor placeholder.
/// @group editor
$kendo-editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;

/// The selected text color of the Editor.
/// @group editor
$kendo-editor-selected-text: $kendo-color-primary-contrast !default;
/// The selected background color of the Editor.
/// @group editor
$kendo-editor-selected-bg: $kendo-color-primary !default;

/// The highlighted background color of the Editor.
/// @group editor
$kendo-editor-highlighted-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix($kendo-color-primary, #ffffff, 20%)) !default;

/// The horizontal margin of the Editor's export tool icon.
/// @group editor
$kendo-editor-export-tool-icon-margin-x: .25em !default;

/// The size of the Editor's resize handle.
/// @group editor
$kendo-editor-resize-handle-size: 8px !default;
/// The border width of the Editor's resize handle.
/// @group editor
$kendo-editor-resize-handle-border-width: 1px !default;
/// The border color of the Editor's resize handle.
/// @group editor
$kendo-editor-resize-handle-border: #000000 !default;
/// The background color of the Editor's resize handle.
/// @group editor
$kendo-editor-resize-handle-bg: #ffffff !default;

///  The outline width of the Editor's selected node.
/// @group editor
$kendo-editor-selectednode-outline-width: 2px !default;
/// The outline color of the Editor's selected node.
/// @group editor
$kendo-editor-selectednode-outline-color: #88ccff !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/editor/_layout.scss
@mixin kendo-editor--layout-base() {

    // Base
    .k-editor {
        border-width: $kendo-editor-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-editor-font-family;
        font-size: $kendo-editor-font-size;
        line-height: $kendo-editor-line-height;
        display: flex;
        flex-flow: column nowrap;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        &.k-readonly {
            .k-editor-content {
                pointer-events: auto;
            }

            .k-editor-content.k-focus {
                outline-width: 1px;
                outline-style: dashed;
            }
        }
    }

    // Inline editor
    .k-editor-inline {
        @include border-radius( k-border-radius(md) );
        padding-block: $kendo-padding-sm-y;
        padding-inline: $kendo-padding-sm-x;
        border: 1px solid transparent;
        word-wrap: break-word;
        overflow: auto;
        background: none;
    }

    // Resizable editor
    .k-editor-resizable {
        resize: both;
        overflow: auto;
    }

    // Resizable images
    .k-editor-resize-handles-wrapper {
        position: absolute;
        visibility: hidden;
    }

    .k-editor-resize-handle {
        width: $kendo-editor-resize-handle-size;
        height: $kendo-editor-resize-handle-size;
        border-width: $kendo-editor-resize-handle-border-width;
        border-style: solid;
        box-sizing: border-box;
        position: absolute;
        visibility: visible;
        z-index: 100;

        &.northwest {
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            cursor: nw-resize;
        }

        &.north {
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: n-resize;
        }

        &.northeast {
            top: 0;
            right: 0;
            transform: translate(50%, -50%);
            cursor: ne-resize;
        }

        &.southwest {
            left: 0;
            bottom: 0;
            transform: translate(-50%, 50%);
            cursor: sw-resize;
        }

        &.south {
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 50%);
            cursor: s-resize;
        }

        &.southeast {
            right: 0;
            bottom: 0;
            transform: translate(50%, 50%);
            cursor: se-resize;
        }

        &.west {
            top: 50%;
            left: 0;
            transform: translate(-50%, -50%);
            cursor: w-resize;
        }

        &.east {
            top: 50%;
            right: 0;
            transform: translate(50%, -50%);
            cursor: e-resize;
        }
    }

    // stylelint-disable selector-no-vendor-prefix, selector-class-pattern
    .ProseMirror-selectednode {
        outline-width: $kendo-editor-selectednode-outline-width;
        outline-style: solid;

    }
    .ProseMirror-hideselection {
        caret-color: transparent;

        *::selection,
        *::-moz-selection {
            background: transparent;
        }
    }
    // stylelint-enable selector-no-vendor-prefix, selector-class-pattern

    // Toolbar
    .k-editor-toolbar {
        border-width: 0 0 $kendo-toolbar-border-width 0;
        flex-shrink: 0;

        .k-editor-export {
            .k-icon {
                margin-right: $kendo-editor-export-tool-icon-margin-x;
            }

            .k-icon,
            .k-export-tool-text {
                vertical-align: middle;
            }
        }
    }

    // Editor content
    .k-editor-content {
        flex: 1 1 auto;
        overflow-y: auto;

        > .k-iframe {
            width: 100%;
            height: 100%;
            border-width: 0;
            display: block;
        }

        > .ProseMirror { // stylelint-disable-line
            padding: $kendo-padding-md-x;
            width: 100%;
            height: 100%;
            position: relative;
            box-sizing: border-box;
            outline: none;
            white-space: pre-wrap;
            overflow: auto;

            table {
                white-space: pre-wrap;
            }

            .k-placeholder::before {
                content: attr(data-placeholder);
                height: 0;
                color: $kendo-editor-placeholder-text;
                float: left;
                opacity: $kendo-editor-placeholder-opacity;
                cursor: text;
                user-select: none;
            }

            &[contenteditable="false"] {
                cursor: unset !important; // stylelint-disable-line declaration-no-important

                .k-editor-resize-handles-wrapper,
                .k-editor-resize-handle,
                .row-resize-handle,
                .column-resize-handle {
                    display: none;
                }

                img,
                table {
                    pointer-events: none;
                }

                & .ProseMirror-selectednode { // stylelint-disable-line
                    outline: none;
                }
            }
        }

        // Table styles
        p {
            margin: 0 0 1rem;
        }

        td p,
        th p,
        li p {
            margin: 0;
        }

        table {
            margin: 0;
            border-collapse: collapse;
            table-layout: fixed;
            width: 100%;
            overflow: hidden;
        }

        td,
        th {
            min-width: 1em;
            border: 1px solid;
            padding-block: 3px;
            padding-inline: 5px;
            vertical-align: top;
            box-sizing: border-box;
            position: relative;
        }

        th {
            font-weight: bold;
            text-align: start;
        }
        td {
            text-align: start;
        }

        // Give selected cells a blue overlay
        .selectedCell::after { // stylelint-disable-line
            z-index: 2;
            position: absolute;
            content: "";
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            pointer-events: none;
        }
    }


    .k-edit-form-content {
        flex: 1 1 auto;
        overflow: auto;
        margin-block: (-$kendo-window-inner-padding-y);
        margin-inline: (-$kendo-window-inner-padding-x);
        padding-block: $kendo-window-inner-padding-y;
        padding-inline: $kendo-window-inner-padding-x;
    }


    $ct-cell-size: 20px;

    // Insert table
    .k-ct-popup {
        box-sizing: border-box;
        width: $ct-cell-size * 10 - k-math-div( $ct-cell-size, 2 );
        padding: k-math-div( $ct-cell-size, 4 );

        .k-button {
            width: 100%;
        }

        .k-ct-cell {
            margin: 1px;
            width: $ct-cell-size;
            height: $ct-cell-size;
            box-sizing: border-box;
            border: 1px solid;
            border-color: inherit;
            display: inline-block;
            vertical-align: top;
            overflow: hidden;
            opacity: .7;
            pointer-events: all;
        }
    }

    .k-editor .k-resize-handle {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 13px 13px;
        border-color: transparent;
        border-bottom-color: inherit;
        cursor: se-resize;

        .k-i-arrow-45-down-right,
        .k-i-caret-br {
            display: none;
        }
    }


    // Find and replace dialog
    .k-editor-find-replace {
        .k-content {
            position: relative;
        }

        .k-actions {
            padding: 0;
        }

        .k-search-options {
            display: flex;
            flex-direction: column;
            padding: 10px 0 40px;
        }

        .k-matches-container {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
    }




    // Text area in editor dialog
    .k-textarea.k-editor-textarea {
        width: 100%;
        height: 100%;
        resize: none;
    }




    // File browser
    // TODO: replace with file manager component
    .k-filebrowser {
        max-width: 100%;

        // Breadcrumbs and search
        .k-floatwrap {
            display: flex;

            &::after { display: none; }
        }
        .k-breadcrumbs {
            flex: 1;
        }
        .k-search-wrap {
            margin: 0 0 0 k-spacing(4);
            width: 150px;
            display: flex;
            align-items: center;

            .k-input {
                flex: 1;
                width: 100px; // fix width for Edge
            }
            .k-icon {
                margin: 0;
                position: static;
            }
        }

        // Filebrowser toolbar
        .k-filebrowser-toolbar {
            margin: k-spacing(4) 0 0 0;
        }

        .k-upload {
            padding: 0;
            border-width: 0;
            background: none;

            .k-upload-button {
                margin: 0;
            }

            .k-upload-status {
                display: none;
            }
        }

        .k-upload-files {
            display: none;
        }

        // Tiles
        .k-tiles {
            display: flex;
            flex-flow: row wrap;
            height: 390px;
            max-height: 50vh;
            margin: 0 0 k-spacing(4) 0;
            padding-block: $kendo-padding-md-y;
            padding-inline: $kendo-padding-md-x;
            border-top-width: 0;
            overflow: auto;
        }

        .k-tile {
            width: 33%;
            height: 90px;
            padding-block: $kendo-padding-md-y;
            padding-inline: $kendo-padding-md-x;
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            cursor: pointer;
            @include border-radius( k-border-radius(md) );

            .k-i-file,
            .k-i-folder {
                font-size: 4em;
            }

            input {
                width: 100px;
            }

            strong {
                display: block;
                font-weight: 400;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .k-tile-empty {
            display: block;
            margin: auto;

            &.k-selected {
                color: inherit;
                border-width: 0;
                background-image: none;
                background-color: transparent;
            }

            strong {
                opacity: .5;
                font-size: 3em;
                font-weight: 400;
            }
        }

        .k-thumb {
            float: left;
            margin-right: $kendo-padding-sm-x;
        }

        .k-breadcrumbs-wrap {
            position: absolute;
            left: $kendo-input-padding-x;
            top: $kendo-input-padding-y;

            .k-icon {
                position: static;
                margin-top: 0;
            }
        }
    }




    // Table wizard dialog
    .k-editor-table-wizard-window {

        // Tabstrip wrapper
        .k-tabstrip-wrapper {
            display: flex;
            flex: 1 1 auto;
            overflow: auto;

            .k-tabstrip.k-root-tabs {
                flex: 1 1 auto;
                margin-bottom: 0;
            }
        }

        .k-edit-field > .k-checkbox {
            position: relative; // fix scrolling
        }
    }

    .k-editor-inline {

        .k-table {
            width: 100%;
            border-spacing: 0;
            margin: 0 0 1em;

            &,
            & td {
                outline: 0;
                border-width: 1px;
                border-style: dotted;
            }

            td {
                min-width: 1px;
                padding-block: $kendo-padding-sm-y;
                padding-inline: $kendo-padding-sm-x;
            }
        }

        .k-element-resize-handle-wrapper {
            position: absolute;
            width: 5px;
            height: 5px;
            border-width: 1px;
            border-style: solid;
            z-index: 100;

            .k-element-resize-handle {
                width: 100%;
                height: 100%;

                &.k-resize-east {
                    cursor: e-resize;
                }

                &.k-resize-north {
                    cursor: n-resize;
                }

                &.k-resize-northeast {
                    cursor: ne-resize;
                }

                &.k-resize-northwest {
                    cursor: nw-resize;
                }

                &.k-resize-south {
                    cursor: s-resize;
                }

                &.k-resize-southeast {
                    cursor: se-resize;
                }

                &.k-resize-southwest {
                    cursor: sw-resize;
                }

                &.k-resize-west {
                    cursor: w-resize;
                }
            }
        }

        .k-column-resize-handle-wrapper {
            position: absolute;
            height: 10px;
            width: 10px;
            cursor: col-resize;
            z-index: 2;

            .k-column-resize-handle {
                width: 100%;
                height: 100%;

                .k-column-resize-marker {
                    width: 2px;
                    height: 100%;
                    margin-block: 0;
                    margin-inline: auto;
                    display: none;
                    opacity: .8;
                }
            }
        }

        .k-row-resize-handle-wrapper {
            position: absolute;
            z-index: 2;
            cursor: row-resize;
            width: 10px;
            height: 10px;

            .k-row-resize-handle {
                display: table;
                width: 100%;
                height: 100%;
            }

            .k-row-resize-marker-wrapper {
                display: table-cell;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                vertical-align: middle;
            }

            .k-row-resize-marker {
                display: none;
                margin: 0;
                padding: 0;
                width: 100%;
                height: 2px;
                opacity: .8;
            }
        }
    }

}


@mixin kendo-editor--layout() {
    @include kendo-editor--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/editor/_theme.scss
@mixin kendo-editor--theme-base() {

    .k-editor {
        @include fill(
            $kendo-component-text,
            $kendo-component-bg,
            $kendo-component-border
        );

        &.k-readonly {
            .k-editor-content.k-focus {
                outline-color: $kendo-body-text;
            }
        }
    }

    // Inline Editor
    .k-editor-inline {

        .k-table {
            &,
            & td {
                border-color: #cccccc;
            }
        }

        .k-element-resize-handle-wrapper {
            background-color: #ffffff;
            border-color: #000000;
        }

        .k-column-resize-handle-wrapper {
            .k-column-resize-handle {
                .k-column-resize-marker {
                    background-color: #00b0ff;
                }
            }
        }

        .k-row-resize-handle-wrapper {
            .k-row-resize-marker {
                background-color: #00b0ff;
            }
        }

        // Hover & Active state
        &:hover,
        &.k-hover,
        &.k-active {
            border-color: $kendo-component-border;
        }
    }

    // Resizable images
    .k-editor-resize-handle {
        background-color: $kendo-editor-resize-handle-bg;
        border-color: $kendo-editor-resize-handle-border;
    }
    .ProseMirror-selectednode { // stylelint-disable-line
        outline-color: $kendo-editor-selectednode-outline-color;
    }


    // Insert table
    .k-ct-popup {
        .k-selected {
            @include fill( $kendo-selected-text, $kendo-selected-bg, $kendo-selected-border, none );
        }
    }

    // Content
    .k-editor-content {

        // Selection
        .k-text-selected,
        &::selection {
            @include fill (
                $color: $kendo-editor-selected-text,
                $bg: $kendo-editor-selected-bg
            );
        }

        .k-text-highlighted {
            @include fill (
                $bg: $kendo-editor-highlighted-bg
            );
        }

        // Table styles
        td,
        th {
            border-color: #dddddd;
        }

        .selectedCell::after { // stylelint-disable-line
            background-color: rgba(200, 200, 255, .4);
        }
    }

}


@mixin kendo-editor--theme() {
    @include kendo-editor--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-editor--styles() {
    @include module-render( "editor" ) {
        @include kendo-editor--layout();
        @include kendo-editor--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-editor--styles();
}

// #endregion
// #region @import "./imageeditor/_index.scss"; -> scss/imageeditor/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "image-editor",
    dependencies: (
        "checkbox",
        "dropdown-list",
        "form",
        "numeric-textbox",
        "toolbar",
    )
);


// Dependencies
// #region @import "../toolbar/_index.scss"; -> scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../forms/_index.scss"; -> scss/forms/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../numerictextbox/_index.scss"; -> scss/numerictextbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../checkbox/_index.scss"; -> scss/checkbox/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/imageeditor/_variables.scss
// ImageEditor
$kendo-image-editor-margin-y: null !default;
$kendo-image-editor-margin-x: null !default;
$kendo-image-editor-padding-y: null !default;
$kendo-image-editor-padding-x: null !default;

$kendo-image-editor-border-width: 1px !default;
$kendo-image-editor-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-image-editor-line-height: var( --kendo-line-height, normal ) !default;
$kendo-image-editor-font-family: var( --kendo-font-family, inherit ) !default;

$kendo-image-editor-content-border-width: 1px !default;

$kendo-image-editor-action-pane-padding-y: k-spacing(8) !default;
$kendo-image-editor-action-pane-padding-x: k-spacing(4) !default;
$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == null, 240px, calc(240px + #{$kendo-image-editor-content-border-width}) ) !default;

$kendo-image-editor-crop-border-width: 1px !default;
$kendo-image-editor-crop-border-style: dashed !default;

$kendo-image-editor-resize-handle-margin-x: k-spacing(1px) !default;
$kendo-image-editor-resize-handle-margin-y: k-spacing(1px) !default;
$kendo-image-editor-resize-handle-border-width: 0 2px 2px 0 !default;
$kendo-image-editor-resize-handle-size: 15px !default;

$kendo-image-editor-bg: $kendo-component-bg !default;
$kendo-image-editor-text: $kendo-component-text !default;
$kendo-image-editor-border: $kendo-component-border !default;

$kendo-image-editor-content-bg: #c6c6c6 !default;
$kendo-image-editor-content-text: null !default;
$kendo-image-editor-content-border: null !default;

$kendo-image-editor-action-pane-bg: $kendo-base-bg !default;
$kendo-image-editor-action-pane-text: null !default;
$kendo-image-editor-action-pane-border: null !default;

$kendo-image-editor-crop-bg: null !default;
$kendo-image-editor-crop-text: null !default;
$kendo-image-editor-crop-border: white !default;

$kendo-image-editor-crop-overlay-bg: rgba(black, .3) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/imageeditor/_layout.scss
@mixin kendo-image-editor--layout-base() {

    // Image Editor
    .k-imageeditor {
        margin-block: $kendo-image-editor-margin-y;
        margin-inline: $kendo-image-editor-margin-x;
        padding-block: $kendo-image-editor-padding-y;
        padding-inline: $kendo-image-editor-padding-x;
        border-width: $kendo-image-editor-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-image-editor-font-family;
        font-size: $kendo-image-editor-font-size;
        line-height: $kendo-image-editor-line-height;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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


    // Image editor toolbar
    .k-imageeditor-toolbar {
        border-width: 0;
        border-bottom-width: $kendo-toolbar-border-width;
    }


    // Content
    .k-imageeditor-content {
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        display: flex;
        flex-flow: row nowrap;
    }


    // Canvas
    .k-imageeditor-canvas-container {
        flex: 1 1 100%;
        display: flex;
        flex-flow: row nowrap;
        overflow: auto;
    }
    .k-imageeditor-canvas {
        margin: auto;
        display: flex;
        flex-direction: column;
        position: relative;
    }


    // Action Pane
    .k-imageeditor-action-pane {
        padding-block: $kendo-image-editor-action-pane-padding-y;
        padding-inline: $kendo-image-editor-action-pane-padding-x;
        width: $kendo-image-editor-action-pane-width;
        border-width: 0;
        border-left-width: $kendo-image-editor-content-border-width;
        border-style: solid;
        border-color: inherit;
        box-sizing: border-box;
        flex: none;
        overflow-y: auto;

        .k-input-inner,
        .k-input-value-text {
            text-overflow: clip;
        }
    }


    // Crop Tool
    .k-imageeditor-crop-overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .k-imageeditor-crop {
        width: 100%;
        height: 100%;
        border-width: $kendo-image-editor-crop-border-width;
        border-style: $kendo-image-editor-crop-border-style;
        box-sizing: border-box;
        position: absolute;

        .k-resize-handle {
            margin-block: $kendo-image-editor-resize-handle-margin-y;
            margin-inline: $kendo-image-editor-resize-handle-margin-x;
            border-style: solid;
            border-width: $kendo-image-editor-resize-handle-border-width;
        }

        .k-resize-sw,
        .k-resize-se,
        .k-resize-nw,
        .k-resize-ne {
            width: $kendo-image-editor-resize-handle-size;
            height: $kendo-image-editor-resize-handle-size;
        }

        .k-resize-n,
        .k-resize-s {
            left: calc( 50% - (#{k-math-div( $kendo-image-editor-resize-handle-size, 2 )}) );
            width: $kendo-image-editor-resize-handle-size;
            height: 0;
        }

        .k-resize-w,
        .k-resize-e {
            top: calc( 50% - (#{k-math-div( $kendo-image-editor-resize-handle-size, 2 )}) );
            width: 0;
            height: $kendo-image-editor-resize-handle-size;
        }

        .k-resize-ne {
            transform: rotate(-90deg);
        }

        .k-resize-nw {
            transform: rotate(-180deg);
        }


        .k-resize-sw {
            transform: rotate(90deg);
        }

        .k-resize-n {
            top: 0;
        }

        .k-resize-s {
            bottom: 0;
        }

        .k-resize-w {
            left: 0;
        }

        .k-resize-e {
            right: 0;
        }
    }

}


@mixin kendo-image-editor--layout() {
    @include kendo-image-editor--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/imageeditor/_theme.scss
@mixin kendo-image-editor--theme-base() {

    // Image Editor
    .k-imageeditor {
        @include fill(
            $kendo-image-editor-text,
            $kendo-image-editor-bg,
            $kendo-image-editor-border
        );
    }

    // Content
    .k-imageeditor-content {
        @include fill(
            $kendo-image-editor-content-text,
            $kendo-image-editor-content-bg,
            $kendo-image-editor-content-border
        );
    }

    // Canvas
    .k-imageeditor-canvas {
        @include checkerboard-gradient();
    }

    // Action Pane
    .k-imageeditor-action-pane {
        @include fill(
            $kendo-image-editor-action-pane-text,
            $kendo-image-editor-action-pane-bg,
            $kendo-image-editor-action-pane-border
        );
    }

    // Crop Tool
    .k-imageeditor-crop {
        @include fill(
            $kendo-image-editor-crop-text,
            $kendo-image-editor-crop-bg,
            $kendo-image-editor-crop-border
        );
    }

    // Crop Overlay
    .k-imageeditor-crop-overlay {
        @include fill (
            $bg: $kendo-image-editor-crop-overlay-bg
        );
    }

}


@mixin kendo-image-editor--theme() {
    @include kendo-image-editor--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-image-editor--styles() {
    @include module-render( "image-editor" ) {
        @include kendo-image-editor--layout();
        @include kendo-image-editor--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-image-editor--styles();
}

// #endregion


// Scheduling
// #region @import "./gantt/_index.scss"; -> scss/gantt/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "gantt",
    dependencies: (
        "button",
        "date-time-picker",
        "icon",
        "input",
        "numeric-textbox",
        "splitter",
        "treelist",
        "validator",
        "window",
        "time-marker"
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../validator/_index.scss"; -> scss/validator/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../datetimepicker/_index.scss"; -> scss/datetimepicker/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../numerictextbox/_index.scss"; -> scss/numerictextbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../window/_index.scss"; -> scss/window/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../splitter/_index.scss"; -> scss/splitter/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../treelist/_index.scss"; -> scss/treelist/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/gantt/_variables.scss
// #region @import "../table/_variables.scss"; -> scss/table/_variables.scss
// File already imported_once. Skipping output.
// #endregion


// Gantt

/// The border width of the Gantt.
/// @group gantt
$kendo-gantt-border-width: 1px !default;
/// The font family of the Gantt.
/// @group gantt
$kendo-gantt-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Gantt.
/// @group gantt
$kendo-gantt-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Gantt.
/// @group gantt
$kendo-gantt-line-height: var( --kendo-line-height, normal ) !default;

/// The background color of the Gantt.
/// @group gantt
$kendo-gantt-bg: $kendo-component-bg !default;
/// The text color of the Gantt.
/// @group gantt
$kendo-gantt-text: $kendo-component-text !default;
/// The border color of the Gantt.
/// @group gantt
$kendo-gantt-border: $kendo-component-border !default;

/// The background color of the Gantt TreeList.
/// @group gantt
$kendo-gantt-treelist-bg: null !default;
/// The text color of the Gantt TreeList.
/// @group gantt
$kendo-gantt-treelist-text: null !default;
/// The border color of the Gantt TreeList.
/// @group gantt
$kendo-gantt-treelist-border: null !default;

/// The background color of the Gantt non-working days.
/// @group gantt
$kendo-gantt-nonwork-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 )) !default;
/// The text color of the Gantt non-working days.
/// @group gantt
$kendo-gantt-nonwork-text: null !default;
/// The border color of the Gantt non-working days.
/// @group gantt
$kendo-gantt-nonwork-border: null !default;

/// The size of the Gantt connecting lines.
/// @group gantt
$kendo-gantt-line-size: 2px !default;
/// The background fill color of the Gantt connecting lines.
/// @group gantt
$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $kendo-gantt-bg )) !default;
/// The background fill of the selected Gantt connecting lines.
/// @group gantt
$kendo-gantt-line-selected-fill: $kendo-color-primary !default;

/// The size of the Gantt task dot.
/// @group gantt
$kendo-gantt-dot-size: 8px !default;
/// The spacing of the Gantt task dot.
/// @group gantt
$kendo-gantt-dot-spacing: k-spacing(1) !default;
/// The background color of the Gantt task dot.
/// @group gantt
$kendo-gantt-dot-bg: $kendo-gantt-text !default;
/// The border color of the Gantt task dot.
/// @group gantt
$kendo-gantt-dot-border: null !default;
/// The background color of the hovered Gantt task dot.
/// @group gantt
$kendo-gantt-dot-hover-bg: $kendo-gantt-bg !default;
/// The border color of the hovered Gantt task dot.
/// @group gantt
$kendo-gantt-dot-hover-border: $kendo-gantt-text !default;

/// The background color of the Gantt milestone.
/// @group gantt
$kendo-gantt-milestone-bg: $kendo-gantt-text !default;
/// The border color of the Gantt milestone.
/// @group gantt
$kendo-gantt-milestone-border: $kendo-gantt-border !default;
/// The background color of the selected Gantt milestone.
/// @group gantt
$kendo-gantt-milestone-selected-bg: $kendo-selected-bg !default;
/// The border color of the selected Gantt milestone.
/// @group gantt
$kendo-gantt-milestone-selected-border: $kendo-selected-border !default;

/// The background color of the Gantt summary.
/// @group gantt
$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 1 )) !default;
/// The background color of the Gantt summary progress.
/// @group gantt
$kendo-gantt-summary-progress-bg: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-gantt-text, 5 )) !default;
/// The background color of the selected Gantt summary.
/// @group gantt
$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
/// The background color of the selected Gantt summary progress.
/// @group gantt
$kendo-gantt-summary-progress-selected-bg: $kendo-selected-bg !default;

/// The border width of the Gantt task.
/// @group gantt
$kendo-gantt-task-border-width: 0px !default;
/// The horizontal padding of the Gantt task.
/// @group gantt
$kendo-gantt-task-padding-x: k-spacing(2) !default;
/// The vertical padding of the Gantt task.
/// @group gantt
$kendo-gantt-task-padding-y: k-spacing(1) !default;
/// The background color of the Gantt task.
/// @group gantt
$kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 2 )) !default;
/// The text color of the Gantt task.
/// @group gantt
$kendo-gantt-task-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-gantt-text )) !default;
/// The border color of the Gantt task.
/// @group gantt
$kendo-gantt-task-border: null !default;
/// The background color of the Gantt task progress.
/// @group gantt
$kendo-gantt-task-progress-bg: $kendo-gantt-text !default;
/// The background color of selected the Gantt task.
/// @group gantt
$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
/// The text color of the selected Gantt task.
/// @group gantt
$kendo-gantt-task-selected-text: $kendo-selected-text !default;
/// The border color of the selected Gantt task.
/// @group gantt
$kendo-gantt-task-selected-border: null !default;
/// The background color of the selected Gantt task progress.
/// @group gantt
$kendo-gantt-task-progress-selected-bg: $kendo-selected-bg !default;

/// The vertical margin of the Gantt task planned line.
/// @group gantt
$kendo-gantt-planned-margin-y: .35em !default;
/// The border width of the Gantt task planned line.
/// @group gantt
$kendo-gantt-planned-border-width: 2px !default;
/// The line height of the Gantt task planned line.
/// @group gantt
$kendo-gantt-planned-line-height: .75em !default;

/// The vertical margin of the Gantt planned dependencies.
/// @group gantt
$kendo-gantt-planned-dependency-margin-y: .55em !default;

/// The default width of the Gantt planned line dot.
/// @group gantt
$kendo-gantt-planned-moment-width: 6px !default;
/// The default height of the Gantt planned line dot.
/// @group gantt
$kendo-gantt-planned-moment-height: $kendo-gantt-planned-moment-width !default;
/// The border radius of the Gantt planned line dot.
/// @group gantt
$kendo-gantt-planned-moment-border-radius: calc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 ) !default;
/// The horizontal margin of the Gantt planned line dot.
/// @group gantt
$kendo-gantt-planned-moment-left-margin-x: calc( #{k-math-div( $kendo-gantt-planned-border-width, 2 )} - #{$kendo-gantt-planned-moment-border-radius} ) !default;
/// The horizontal margin of the Gantt milestone planned line dot.
/// @group gantt
$kendo-gantt-planned-milestone-moment-margin-x: k-math-div( $kendo-gantt-planned-moment-width, 2 ) !default;

/// The default height of the Gantt planned line.
/// @group gantt
$kendo-gantt-planned-duration-height: $kendo-gantt-planned-border-width !default;
/// The height of the hovered Gantt planned line.
/// @group gantt
$kendo-gantt-planned-duration-hover-height: calc( #{$kendo-gantt-planned-border-width} + 1px ) !default;

/// The top position of the Gantt drag hint.
/// @group gantt
$kendo-gantt-planned-single-drag-hint-top: 0 !default;
/// The top position of the Gantt summary drag hint.
/// @group gantt
$kendo-gantt-planned-summary-drag-hint-top: .5em !default;
/// The top position of the Gantt planned milestone drag hint.
/// @group gantt
$kendo-gantt-planned-milestone-drag-hint-top: .3em !default;

/// The horizontal margin of the Gantt milestone wrap.
/// @group gantt
$kendo-gantt-rtl-milestone-wrap-margin-x: -2.4em !default;
/// The horizontal margin of the Gantt milestone line dot.
/// @group gantt
$kendo-gantt-rtl-milestone-planned-moment-margin-x: .2em !default;
/// The horizontal margin of the Gantt milestone task dot.
/// @group gantt
$kendo-gantt-rtl-milestone-dot-start-margin-x: -.1em !default;

/// The horizontal offset of the Gantt delayed task resize handler.
/// @group gantt
$kendo-gantt-planned-offset-resize-handler-margin-x: 1.4em !default;

/// The background color of the Gantt planned Tooltip.
/// @group gantt
$kendo-gantt-planned-bg: $kendo-color-primary !default;
/// The border color of the Gantt planned Tooltip.
/// @group gantt
$kendo-gantt-planned-border: $kendo-gantt-planned-bg !default;

/// The background color of the Gantt delayed task.
/// @group gantt
$kendo-gantt-delayed-bg: $kendo-color-error !default;
/// The complement background color of the Gantt delayed task.
/// @group gantt
$kendo-gantt-delayed-bg-lighter: if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5)) !default;

/// The background color of the Gantt advanced task.
/// @group gantt
$kendo-gantt-advanced-bg: $kendo-color-success !default;
/// The complement background color of the Gantt advanced task.
/// @group gantt
$kendo-gantt-advanced-bg-lighter: if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5)) !default;

/// The text color of the Gantt delayed task action.
/// @group gantt
$kendo-gantt-action-on-offset-text: #000000 !default;
/// The top position of the Gantt delayed task resize handler.
/// @group gantt
$kendo-gantt-offset-resize-handler-top: 50% !default;

/// The default width of the Gantt validation Tooltip.
/// @group gantt
$kendo-gantt-validation-tooltip-width: 200px !default;
/// The default width of the Gantt validation Tooltip label.
/// @group gantt
$kendo-gantt-validation-tooltip-label-width: 50px !default;
/// The border color of the Gantt validation Tooltip.
/// @group gantt
$kendo-gantt-validation-tooltip-border: #656565 !default;
/// The border color of the valid Gantt validation Tooltip.
/// @group gantt
$kendo-gantt-validation-tooltip-valid-border: $kendo-color-success !default;
/// The border color of the invalid Gantt validation Tooltip.
/// @group gantt
$kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/gantt/_layout.scss
@mixin kendo-gantt--layout-base() {

    $row-height: #{$kendo-line-height-em} + calc( 2 * #{$kendo-table-md-cell-padding-y} ) + #{$kendo-grid-cell-horizontal-border-width};

    .k-gantt {
        border-width: $kendo-gantt-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-gantt-font-family;
        font-size: $kendo-gantt-font-size;
        line-height: $kendo-gantt-line-height;
        display: flex;
        flex-flow: column nowrap;
        position: relative;
        white-space: nowrap;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        .k-table-td {
            white-space: nowrap;
        }

        // other
        td {
            overflow: hidden;
            white-space: nowrap;
            vertical-align: top;
        }
        .k-grid-header tr {
            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-header-padding-y} * 2 ) + 1px );
        }
        .k-grid-header .k-header {
            position: static;
        }
        .k-treelist .k-grid-header .k-header {
            position: relative;
        }
        .k-grid-content tr {
            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-cell-padding-y} * 2 ) + #{$kendo-grid-cell-horizontal-border-width} );
        }

        &.k-gantt-planned .k-grid-content tr {
            height: calc( #{$kendo-line-height-em} * 1.7 + calc( #{$kendo-grid-cell-padding-y} * 2 ) + #{$kendo-grid-cell-horizontal-border-width} );
        }

        // Layout
        .k-gantt-layout {
            white-space: normal;
            vertical-align: top;
            display: inline-block;
        }


        // Splitbar
        .k-splitbar {
            position: relative;
            display: inline-flex;
        }

        // Splitter
        .k-gantt-splitter {
            border-width: 0;
        }

        // React gantt
        .k-treelist-scrollable {
            width: 100%;
            border-width: 0;
            overflow: auto;

            .k-grid-header .k-header {
                position: sticky;
            }
            .k-grid-header th,
            .k-grid-content-sticky {
                z-index: 4;
            }
            .k-grid-header th.k-grid-header-sticky {
                z-index: 5;
            }
            .k-grid-header tr:first-child th:last-child,
            tbody td:last-child {
                padding: 0;
                vertical-align: top;
            }
            .k-grid-header th:last-child {
                .k-header {
                    padding-block: $kendo-grid-header-padding-y;
                    padding-inline: $kendo-grid-header-padding-x;
                    border-width: 0 0 1px $kendo-grid-cell-vertical-border-width;
                    white-space: nowrap;
                }
            }

            tr.k-selected > td:last-child {
                background: transparent;
            }

            // Task
            .k-task {
                display: inline-flex;
                flex-flow: row nowrap;
                white-space: nowrap;
                z-index: 3;

                &:hover .k-task-start,
                &:hover .k-task-end {
                    display: block;
                }

                &:hover .k-task-draghandle {
                    visibility: visible;
                }
            }
            .k-task-content {
                padding-block: $kendo-gantt-task-padding-y;
                padding-inline: $kendo-gantt-task-padding-x;
                display: block;
                line-height: normal;
                flex: 1 1 auto;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .k-task-actions {
                flex-shrink: 0;
            }

            // Milestone
            .k-task-milestone {
                border: 0;
                transform: none;
                background: none;

                .k-task-milestone-content {
                    width: 100%;
                    height: 100%;
                    border-width: 1px;
                    border-style: solid;
                    box-sizing: border-box;
                    transform: rotate(45deg);
                }
            }

            // Summary
            .k-task-summary {
                height: 15px;
                clip-path: polygon(-20px 0, calc(100% + 20px) 0, calc(100% + 20px) 100%, 100% 100%, calc(100% - 8px) calc(100% - 5px), 8px calc(100% - 5px), 0 100%, -20px 100%);
            }
            .k-task-summary-complete {
                width: 100%;
                height: 15px;
            }

            // Dots
            .k-task-start {
                transform: translateX(-140%) translateY(-50%);
            }
            .k-task-end {
                transform: translateX(140%) translateY(-50%);
            }
            .k-master-row:hover .k-task-dot {
                display: block;
            }

            // Table with columns borders
            .k-gantt-columns {
                background: transparent;
                pointer-events: none;
                table-layout: fixed;
            }
        }

        // Dependency lines SVG
        .k-gantt-dependencies-svg {
            position: absolute;
            top: 0;
            left: 0;
            overflow: visible;
            pointer-events: none;
            z-index: 2;

            polyline {
                stroke-width: $kendo-gantt-line-size;
            }
        }
    }

    // Header and footer
    .k-gantt-header {
        border-width: 0 0 $kendo-toolbar-border-width;
        flex-shrink: 0;
        z-index: 6;
    }
    .k-gantt-footer {
        border-width: $kendo-toolbar-border-width 0 0;
        flex-shrink: 0;
    }


    // Toolbar
    .k-gantt-toolbar {}

    .k-gantt-toggle {
        display: none;
    }
    .k-gantt-add {}
    .k-gantt-create {}
    .k-gantt-views {}


    // Gantt views
    .k-gantt-views-wrapper {
        margin-left: auto;

        .k-views-dropdown {
            width: auto;
            font-size: inherit;
            display: none;
            cursor: pointer;
        }
    }


    // Responsive gantt toolbar
    @media (max-width: 480px) { // stylelint-disable-line

        .k-gantt-toolbar {
            .k-gantt-toggle {
                display: inline-flex;
            }
            .k-gantt-pdf,
            .k-gantt-create {
                padding: $kendo-button-padding-y;
                width: $kendo-button-calc-size;
                height: $kendo-button-calc-size;

                .k-button-icon {}
                .k-button-text {
                    display: none;
                }
            }
        }

    }

    @media (max-width: 1024px) { // stylelint-disable-line
        .k-gantt-views-wrapper .k-gantt-views { display: none; }
        .k-gantt-views-wrapper .k-views-dropdown { display: flex; }
    }


    // Gantt content
    .k-gantt-content {
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        flex: 1 1 auto;
        overflow: hidden;
    }


    // Treelist
    .k-gantt-treelist {

        .k-treelist {
            height: 100%;
            border-width: 0;
        }
        .k-grid-header,
        .k-grid-footer {
            padding: 0 !important; // stylelint-disable-line declaration-no-important
        }
        .k-grid-header tr {
            height: calc( #{$kendo-line-height-em} * 2 + calc( #{$kendo-grid-header-padding-y} * 4 ) + 2px );
            vertical-align: bottom;
        }
        .k-grid-content {
            overflow: hidden;
            overflow-x: scroll;
        }
        .k-grid-content td {
            vertical-align: middle;
        }
        .k-gantt-treelist-nested-columns .k-grid-header tr {
            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-header-padding-y} * 2 ) + 1px );
        }

        &.k-gantt-treelist-scrollable {
            .k-grid-content {
                overflow: scroll;
            }
        }
    }


    // Timeline
    .k-gantt-timeline-pane {

        .k-gantt-timeline {
            height: 100%;
            border-width: 0;
            display: flex;

            *,
            *::before,
            *::after,
            &::before,
            &::after {
                box-sizing: border-box;
            }
        }
        .k-grid-header {}
        .k-grid-content {
            overflow-x: scroll;
        }
        .k-header {
            padding-block: $kendo-grid-header-padding-y;
            padding-inline: $kendo-grid-header-padding-x;
            border-width: 0 0 1px $kendo-grid-cell-vertical-border-width;
            white-space: nowrap;
        }

    }


    // Tables
    .k-gantt-tables {
        position: relative;
        border-color: inherit;
    }
    .k-gantt-rows,
    .k-gantt-columns {
        border-color: inherit;
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
    }
    .k-gantt-rows {}


    // Deps
    .k-gantt-dependencies {
        opacity: .7;
        position: absolute;
        top: 0;
        left: 0;

        // Arrows
        .k-arrow-e,
        .k-arrow-w {
            width: 0;
            height: 0;
            border: 5px solid transparent;
            position: absolute;
            top: -4px;
        }
        .k-arrow-e {
            border-left-color: currentColor;
            right: -6px;
        }
        .k-arrow-w {
            border-right-color: currentColor;
            left: -6px;
        }
    }

    // Dependency Lines
    .k-gantt-line {
        background-color: currentColor;
        border-color: currentColor;
        position: absolute;
    }
    .k-gantt-line.k-selected {
        z-index: 3;
    }

    .k-gantt-line-h {
        height: $kendo-gantt-line-size;
    }

    .k-gantt-line-v {
        width: $kendo-gantt-line-size;
    }

    .k-gantt-dependency-hint {
        z-index: 4;
    }


    // Tasks
    .k-gantt-tasks {
        position: relative;

        td,
        .k-table-td {
            padding: 0;
            border-width: 0;
            position: relative;
            vertical-align: middle;
        }
        td::after { content: "\200b"; }
    }

    .k-task-wrap {
        margin-block: 0;
        margin-inline: -21px;
        padding-block: 5px;
        padding-inline: 21px;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        z-index: 2;
    }
    .k-task-wrap.k-drag-hint {
        position: absolute;
    }
    .k-task {
        position: relative;
        flex: 1 1 auto;
    }
    .k-task-dot {
        width: calc( #{$kendo-gantt-dot-size} + calc( #{$kendo-gantt-dot-spacing} * 2 ) );
        height: calc( #{$kendo-gantt-dot-size} + calc( #{$kendo-gantt-dot-spacing} * 2 ) );
        line-height: 1;
        cursor: pointer;
        display: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .k-task-wrap:hover .k-task-dot,
    .k-task-wrap.k-origin .k-task-dot {
        display: block;
    }
    .k-task-dot::before {
        content: "";
        width: $kendo-gantt-dot-size;
        height: $kendo-gantt-dot-size;
        border-width: 0;
        border-style: solid;
        border-radius: 100%;
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .k-task-dot:hover::before,
    .k-task-dot.k-hover::before {
        border-width: 1px;
    }
    .k-task-start { left: 0; }
    .k-task-end { right: 0; }
    .k-task-draghandle {
        margin-left: 16px;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-top-width: 0;
        border-bottom-color: inherit;
        position: absolute;
        bottom: 0;
        // display: none;
        cursor: e-resize;
        visibility: hidden;
    }
    .k-task-wrap:hover .k-task-draghandle {
        visibility: visible;
    }


    // Milestone
    .k-milestone-wrap {
        margin-block: 0;
        margin-inline: -2em;
    }
    .k-task-milestone {
        width: 1em;
        height: 1em;
        border-width: 1px;
        border-style: solid;
        box-sizing: border-box;
        transform: rotate(45deg);
    }


    // Summary
    .k-summary-wrap {}
    .k-task-summary {
        height: 10px;
        display: inline-block;
        vertical-align: top;
    }
    .k-task-summary,
    .k-task-summary-complete {
        background-color: currentColor;

        &::before,
        &::after {
            content: "";
            width: 0;
            height: 0;
            border: 8px solid transparent;
            position: absolute;
            top: 0;
            display: none;
        }

        &::before {
            border-left-color: currentColor;
            left: 0;
        }
        &::after {
            border-right-color: currentColor;
            right: 0;
        }
    }
    .k-task-summary-complete {
        height: 10px;
        position: relative;
        z-index: 2;
    }
    .k-task-summary-progress {
        height: 15px;
        overflow: hidden;
    }


    // Single task
    .k-single-wrap {}
    .k-task-single {
        @include border-radius( k-border-radius(md) );
        border-width: $kendo-gantt-task-border-width;
        border-style: solid;
        box-sizing: border-box;
        cursor: default;

        .k-resize-handle {
            opacity: .5;
            z-index: 2;
            visibility: hidden;
        }
        .k-resize-handle::before {
            position: absolute;
            top: 2px;
            bottom: 2px;
        }
        .k-resize-w { left: 0; }
        .k-resize-w::before {
            left: 2px;
            border-left-width: 1px;
        }
        .k-resize-e { right: 0; }
        .k-resize-e::before {
            right: 2px;
            border-left-width: 1px;
        }

        &:hover .k-resize-handle,
        &:hover .k-task-actions {
            visibility: visible;
        }
    }
    .k-task-complete {
        @include border-radius( k-border-radius(md) );
        width: 20%;
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        left: 0;
    }
    .k-task-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: row;
        align-items: center;
        white-space: nowrap;
    }
    .k-task-template {
        padding-block: $kendo-gantt-task-padding-y;
        padding-inline: $kendo-gantt-task-padding-x;
        line-height: normal;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .k-task-actions {
        padding: $kendo-padding-sm-y;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        visibility: hidden;
        z-index: 1;
    }
    .k-task-actions > .k-link {
        display: inline-flex;
    }

    .k-resources-wrap {
        position: absolute;
        display: inline-block;
        z-index: 2;
        margin-left: 20px;
        margin-top: -2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .k-resource {
            margin-block: 0;
            margin-inline: 5px;
        }
    }


    // Task tooltip
    .k-task-details {
        padding-block: $kendo-padding-md-y;
        padding-inline: $kendo-padding-md-x;
        white-space: nowrap;

        strong {
            font-size: var( --kendo-font-size-lg, inherit );
            font-weight: normal;
            display: block;
        }
        .k-task-pct {
            font-size: $kendo-icon-size-xxl;
        }
        ul {
            line-height: normal;
        }
    }

    // Planned position
    .k-gantt-planned {
        .k-gantt-dependencies,
        .k-task-dot,
        .k-resources-wrap {
            margin-top: $kendo-gantt-planned-dependency-margin-y;
        }

        .k-task-wrap {
            flex-direction: column;
            align-items: flex-start;
        }

        .k-task-inner-wrap {
            display: inline-flex;
        }

        .k-task-wrap.k-drag-hint {
            top: $kendo-gantt-planned-single-drag-hint-top;
        }

        .k-summary-wrap.k-drag-hint {
            top: $kendo-gantt-planned-summary-drag-hint-top;
        }

        .k-milestone-wrap.k-drag-hint {
            top: $kendo-gantt-planned-milestone-drag-hint-top;
        }
    }

    // Planned element
    .k-task-planned {
        margin: 0 0 $kendo-gantt-planned-margin-y;
        line-height: $kendo-gantt-planned-line-height;
        display: flex;
        align-items: center;

        .k-task-moment {
            border-width: $kendo-gantt-planned-border-width;
            border-radius: $kendo-gantt-planned-moment-border-radius;
            border-style: solid;
            height: $kendo-gantt-planned-moment-height;
            width: $kendo-gantt-planned-moment-width;
        }

        .k-task-duration {
            height: $kendo-gantt-planned-duration-height;
        }

        .k-task-moment.k-moment-left {
            margin-left: $kendo-gantt-planned-moment-left-margin-x;
        }

        &:hover .k-task-duration {
            height: $kendo-gantt-planned-duration-hover-height;
        }
    }

    .k-milestone-wrap .k-task-moment {
        margin-left: $kendo-gantt-planned-milestone-moment-margin-x;
    }

    // Planned Tooltip
    .k-planned-tooltip {
        .k-task-content {
            display: block;
        }
    }

    // Delay offset
    .k-task-offset-wrap .k-task-content .k-resize-e {
        display: none;
    }

    .k-task-offset {
        flex-direction: row-reverse;
        display: flex;

        .k-resize-handle {
            right: 0;
            z-index: 2;
            visibility: hidden;
            margin-right: $kendo-gantt-planned-offset-resize-handler-margin-x;
        }

        .k-resize-handle::before {
            border-left-width: 1px;
            position: absolute;
            top: $kendo-gantt-offset-resize-handler-top;
            bottom: .5em;
            margin-right: 2px;
        }
    }

    .k-task-single:hover + .k-task-offset .k-task-actions,
    .k-task-offset:hover .k-task-actions,
    .k-task-single:hover + .k-task-offset .k-resize-handle,
    .k-task-offset:hover .k-resize-handle {
        visibility: visible;
    }


    // Dependency Validation Tooltip
    .k-gantt-tooltip-validation {
        max-width: $kendo-gantt-validation-tooltip-width;
        display: block;

        &::before {
            content: "";
            width: 4px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
    .k-gantt-tooltip-validation-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .k-gantt-tooltip-validation-label {
        display: inline-flex;
        min-width: $kendo-gantt-validation-tooltip-label-width;
    }
    .k-gantt-tooltip-validation-value {
        // TODO: extract to variable
        font-weight: var( --kendo-font-weight-bold, normal );
    }
    .k-gantt-tooltip-validation-label,
    .k-gantt-tooltip-validation-value {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }




    // Gantt export
    .k-pdf-export-shadow {
        .k-gantt {
            float: left;
        }

        .k-gantt,
        .k-gantt-timeline-pane,
        .k-gantt-dependencies {
            width: auto !important; // stylelint-disable-line declaration-no-important
            height: auto !important; // stylelint-disable-line declaration-no-important
            overflow: visible !important; // stylelint-disable-line declaration-no-important
        }

        .k-gantt-treelist .k-treelist {
            display: block;
        }

        .k-gantt-layout.k-splitbar {
            display: none;
        }
    }



    // Gantt edit form
    .k-gantt-edit-form {}

    .k-gantt-edit-form .k-gantt-update {}
    .k-gantt-edit-form .k-gantt-cancel {}
    .k-gantt-edit-form .k-gantt-delete {
        float: left;
    }




    // Gantt RTL
    .k-rtl,
    [dir="rtl"] {

        .k-gantt-rows,
        .k-gantt-columns {
            left: auto;
            right: 0;
        }

        .k-task-wrap:not(.k-milestone-wrap) {
            margin-block: 0;
            margin-inline: -26px;
        }

        .k-gantt-timeline-pane {
            .k-header {
                border-width: 0 $kendo-grid-cell-vertical-border-width 1px 0;
            }
            .k-header:first-child {
                border-right-width: 0;
            }

            .k-task-start {
                left: auto;
                right: 0;
            }

            .k-task-end {
                right: auto;
                left: 0;
            }
        }

        .k-task-content {
            text-align: end;
        }

        .k-task-complete {
            left: auto;
            right: 0;
        }

        .k-task-draghandle {
            margin-left: 0;
            margin-right: 16px;
        }

        .k-gantt-dependencies {
            left: auto;
            right: 0;
        }

        .k-gantt-delete {
            float: right;
        }

        .k-task-offset-wrap .k-task-content {
            .k-resize-e {
                display: block;
            }

            .k-resize-w {
                display: none;
            }
        }

        .k-milestone-wrap {
            margin-left: $kendo-gantt-rtl-milestone-wrap-margin-x;
        }

        .k-milestone-wrap .k-task-moment {
            margin-right: $kendo-gantt-rtl-milestone-planned-moment-margin-x;
        }

        .k-gantt-timeline-pane .k-milestone-wrap .k-task-start {
            right: $kendo-gantt-rtl-milestone-dot-start-margin-x;
        }

        .k-gantt-tooltip-validation::before {
            left: auto;
            right: 0;
        }
    }

}


@mixin kendo-gantt--layout() {
    @include kendo-gantt--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/gantt/_theme.scss
@mixin kendo-gantt--theme-base() {

    // Gantt
    .k-gantt {
        @include fill(
            $kendo-gantt-text,
            $kendo-gantt-bg,
            $kendo-gantt-border
        );

        // React gantt
        .k-treelist-scrollable {
            .k-task-milestone .k-task-milestone-content {
                @include fill(
                    $bg: $kendo-gantt-milestone-bg,
                    $border: $kendo-gantt-milestone-border
                );
            }
            .k-task-milestone.k-selected .k-task-milestone-content {
                @include fill(
                    $bg: $kendo-gantt-milestone-selected-bg,
                    $border: $kendo-gantt-milestone-selected-border
                );
            }
        }

        .k-gantt-dependencies-svg {
            polyline {
                fill: none;
                stroke: $kendo-gantt-line-fill;
            }

            polyline.k-selected {
                stroke: $kendo-gantt-line-selected-fill;
            }
        }
    }

    // Header and footer
    .k-gantt-header {}
    .k-gantt-footer {
        @include box-shadow( none );
    }
    .k-gantt-toolbar {}


    // Treelist
    .k-gantt-treelist {
        @include fill(
            $kendo-gantt-treelist-text,
            $kendo-gantt-treelist-bg,
            $kendo-gantt-treelist-border
        );

        .k-treelist,
        .k-grid-content {
            background-color: transparent;
        }
    }


    // Rows and colls
    .k-gantt-rows {}
    .k-gantt-columns {}


    // Non work hours
    .k-gantt .k-nonwork-hour {
        @include fill(
            $kendo-gantt-nonwork-text,
            $kendo-gantt-nonwork-bg,
            $kendo-gantt-nonwork-border
        );
    }


    // Task dot
    .k-task-dot {}
    .k-task-dot::before {
        @include fill(
            $bg: $kendo-gantt-dot-bg,
            $border: $kendo-gantt-dot-border
        );
    }
    .k-task-dot:hover::before,
    .k-task-dot.k-hover::before {
        @include fill(
            $bg: $kendo-gantt-dot-hover-bg,
            $border: $kendo-gantt-dot-hover-border
        );
    }


    // Milestone
    .k-task-milestone {
        @include fill(
            $bg: $kendo-gantt-milestone-bg,
            $border: $kendo-gantt-milestone-border
        );

        &.k-task-delayed {
            @include repeating-striped-gradient($kendo-gantt-delayed-bg, $kendo-body-bg, 90deg, 4px, 2px);
        }

        &.k-task-advanced {
            @include fill(
                $bg: $kendo-gantt-advanced-bg
            );
        }
    }
    .k-task-milestone.k-selected {
        background-image: none;
        @include fill(
            $bg: $kendo-gantt-milestone-selected-bg,
            $border: $kendo-gantt-milestone-selected-border
        );
    }


    // Summary
    .k-task-summary {
        color: $kendo-gantt-summary-bg;

        &.k-task-delayed {
            color: $kendo-gantt-delayed-bg-lighter;
        }

        &.k-task-advanced {
            color: $kendo-gantt-advanced-bg-lighter;
        }
    }
    .k-task-summary-complete {
        color: $kendo-gantt-summary-progress-bg;
    }
    .k-task-delayed .k-task-summary-complete {
        color: $kendo-gantt-delayed-bg;
    }
    .k-task-advanced .k-task-summary-complete {
        color: $kendo-gantt-advanced-bg;
    }
    .k-task-summary.k-selected {
        color: $kendo-gantt-summary-selected-bg;

        .k-task-summary-complete {
            color: $kendo-gantt-summary-progress-selected-bg;
        }
    }


    // Tasks
    .k-task-single {
        @include fill(
            $kendo-gantt-task-text,
            $kendo-gantt-task-bg,
            $kendo-gantt-task-border
        );

        &.k-task-delayed {
            @include fill(
                $bg: $kendo-gantt-delayed-bg-lighter
            );
        }

        &.k-task-advanced {
            @include fill(
                $bg: $kendo-gantt-advanced-bg-lighter
            );
        }

        .k-task-complete {
            background-color: $kendo-gantt-task-progress-bg;
        }
    }
    .k-task-delayed .k-task-complete {
        @include fill(
            $bg: $kendo-gantt-delayed-bg
        );
    }
    .k-task-advanced .k-task-complete {
        @include fill(
            $bg: $kendo-gantt-advanced-bg
        );
    }
    .k-task-single.k-selected {
        @include fill(
            $kendo-gantt-task-selected-text,
            $kendo-gantt-task-selected-bg,
            $kendo-gantt-task-selected-border
        );

        .k-task-complete {
            background-color: $kendo-gantt-task-progress-selected-bg;
        }
    }

    // Dependency Lines
    .k-gantt-line {
        color: $kendo-gantt-line-fill;
    }
    .k-gantt-line.k-selected {
        color: $kendo-gantt-line-selected-fill;
    }

    // Planned element
    .k-task-planned {
        .k-task-moment {
            @include fill(
                $bg: transparent,
                $border: $kendo-gantt-planned-border
            );
        }
        .k-task-duration {
            @include fill(
                $bg: $kendo-gantt-planned-bg
            );
        }
        &:hover .k-task-moment {
            @include fill(
                $bg: $kendo-gantt-planned-bg
            );
        }
    }

    // Delay offset
    .k-task-offset {
        @include repeating-striped-gradient($kendo-gantt-delayed-bg, $kendo-body-bg, 135deg, 4px, 2px);

        .k-resize-e::before {
            @include fill(
                $border: $kendo-gantt-action-on-offset-text
            );
        }

        .k-task-actions {
            color: $kendo-gantt-action-on-offset-text;
        }
    }

    .k-task-offset:hover {
        @include repeating-striped-gradient($kendo-gantt-delayed-bg-lighter, $kendo-body-bg, 135deg, 4px, 2px);
    }

    .k-pdf-export .k-task-offset {
        background-color: $kendo-gantt-delayed-bg;
    }

    // Tooltips
    .k-offset-tooltip-delayed {
        @include fill(
            $bg: $kendo-gantt-delayed-bg
        );
    }

    .k-planned-tooltip {
        @include fill(
            $bg: $kendo-gantt-planned-bg
        );
    }

    .k-gantt-tooltip-validation {
        &::before {
            background-color: $kendo-gantt-validation-tooltip-border;
        }
    }
    .k-gantt-tooltip-valid {
        &::before {
            background-color: $kendo-gantt-validation-tooltip-valid-border;
        }
    }
    .k-gantt-tooltip-invalid {
        &::before {
            background-color: $kendo-gantt-validation-tooltip-invalid-border;
        }
    }

}


@mixin kendo-gantt--theme() {
    @include kendo-gantt--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-gantt--styles() {
    @include module-render( "gantt" ) {
        @include kendo-gantt--layout();
        @include kendo-gantt--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-gantt--styles();
}

// #endregion
// #region @import "./scheduler/_index.scss"; -> scss/scheduler/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "scheduler",
    dependencies: (
        "adaptive",
        "button",
        "date-time-picker",
        "dialog",
        "dropdown-list",
        "icon",
        "tooltip",
        "time-marker"
    )
);


// Dependencies
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../adaptive/_index.scss"; -> scss/adaptive/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../datetimepicker/_index.scss"; -> scss/datetimepicker/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../dialog/_index.scss"; -> scss/dialog/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../tooltip/_index.scss"; -> scss/tooltip/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/scheduler/_variables.scss
// Scheduler

/// The width of the border around the Scheduler.
/// @group scheduler
$kendo-scheduler-border-width: 1px !default;
/// The font family of the Scheduler.
/// @group scheduler
$kendo-scheduler-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Scheduler.
/// @group scheduler
$kendo-scheduler-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Scheduler.
/// @group scheduler
$kendo-scheduler-line-height: var( --kendo-line-height, normal ) !default;

/// The background color of the Scheduler.
/// @group scheduler
$kendo-scheduler-bg: $kendo-component-bg !default;
/// The text color of the Scheduler.
/// @group scheduler
$kendo-scheduler-text: $kendo-component-text !default;
/// The border color of the Scheduler.
/// @group scheduler
$kendo-scheduler-border: $kendo-component-border !default;

/// The background color of the Scheduler ToolBar.
/// @group scheduler
$kendo-scheduler-toolbar-bg: $kendo-toolbar-bg !default;
/// The text color of the Scheduler ToolBar.
/// @group scheduler
$kendo-scheduler-toolbar-text: $kendo-toolbar-text !default;
/// The border color of the Scheduler ToolBar.
/// @group scheduler
$kendo-scheduler-toolbar-border: $kendo-toolbar-border !default;
/// The gradient of the Scheduler ToolBar.
/// @group scheduler
$kendo-scheduler-toolbar-gradient: $kendo-toolbar-gradient !default;

/// The background color of the Scheduler footer.
/// @group scheduler
$kendo-scheduler-footer-bg: $kendo-toolbar-bg !default;
/// The text color of the Scheduler footer.
/// @group scheduler
$kendo-scheduler-footer-text: $kendo-toolbar-text !default;
/// The border color of the Scheduler footer.
/// @group scheduler
$kendo-scheduler-footer-border: $kendo-toolbar-border !default;
/// The gradient of the Scheduler footer.
/// @group scheduler
$kendo-scheduler-footer-gradient: $kendo-toolbar-gradient !default;

/// The minimum height of the Scheduler event.
/// @group scheduler
$kendo-scheduler-event-min-height: 25px !default;
/// The border radius of the Scheduler event.
/// @group scheduler
$kendo-scheduler-event-border-radius: k-border-radius(md) !default;
/// The line height of the Scheduler event.
/// @group scheduler
$kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-md-y}) ) !default;

/// The background color of the Scheduler event.
/// @group scheduler
$kendo-scheduler-event-bg: if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) !default;
/// The text color of the Scheduler event.
/// @group scheduler
$kendo-scheduler-event-text: $kendo-selected-text !default;
/// The border color of the Scheduler event.
/// @group scheduler
$kendo-scheduler-event-border: null !default;
/// The gradient of the Scheduler event.
/// @group scheduler
$kendo-scheduler-event-gradient: null !default;
/// The shadow of the Scheduler event.
/// @group scheduler
$kendo-scheduler-event-shadow: null !default;

/// The background color of the hovered Scheduler event.
/// @group scheduler
$kendo-scheduler-event-hover-bg: null !default;
/// The text color of the hovered Scheduler event.
/// @group scheduler
$kendo-scheduler-event-hover-text: null !default;
/// The border color of the hovered Scheduler event.
/// @group scheduler
$kendo-scheduler-event-hover-border: null !default;
/// The gradient of the hovered Scheduler event.
/// @group scheduler
$kendo-scheduler-event-hover-gradient: null !default;
/// The shadow of the hovered Scheduler event.
/// @group scheduler
$kendo-scheduler-event-hover-shadow: null !default;

/// The background color of the selected Scheduler event.
/// @group scheduler
$kendo-scheduler-event-selected-bg: if($kendo-enable-color-system, k-color( primary-active ), $kendo-selected-bg) !default;
/// The text color of the selected Scheduler event.
/// @group scheduler
$kendo-scheduler-event-selected-text: $kendo-selected-text !default;
/// The border color of the selected Scheduler event.
/// @group scheduler
$kendo-scheduler-event-selected-border: null !default;
/// The gradient of the selected Scheduler event.
/// @group scheduler
$kendo-scheduler-event-selected-gradient: null !default;
/// The shadow of the selected Scheduler event.
/// @group scheduler
$kendo-scheduler-event-selected-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

/// The shadow of the ongoing Scheduler event.
/// @group scheduler
$kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;

/// The horizontal padding of the Scheduler cell.
/// @group scheduler
$kendo-scheduler-cell-padding-x: k-spacing(2) !default;
/// The vertical padding of the Scheduler cell.
/// @group scheduler
$kendo-scheduler-cell-padding-y: k-spacing(2) !default;
/// The height of the Scheduler cell.
/// @group scheduler
$kendo-scheduler-cell-height: $kendo-line-height-em !default;
/// The width of the Scheduler date column.
/// @group scheduler
$kendo-scheduler-datecolumn-width: 12em !default;
/// The width of the Scheduler time column.
/// @group scheduler
$kendo-scheduler-timecolumn-width: 11em !default;

/// The background color of the non-working hours in the Scheduler.
/// @group scheduler
$kendo-scheduler-nonwork-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
/// The text color of the non-working hours in the Scheduler.
/// @group scheduler
$kendo-scheduler-nonwork-text: null !default;

/// The background color of the weekends in the Scheduler.
/// @group scheduler
$kendo-scheduler-weekend-bg: null !default;
/// The text color of the weekends in the Scheduler.
/// @group scheduler
$kendo-scheduler-weekend-text: null !default;

/// The background color of the preceding/subsequent month cells in the Calendar.
/// @group scheduler
$kendo-scheduler-othermonth-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
/// The text color of the preceding/subsequent month cells in the Calendar.
/// @group scheduler
$kendo-scheduler-othermonth-text: null !default;

/// The horizontal padding of the year view in the Scheduler.
/// @group scheduler
$kendo-scheduler-yearview-padding-x: k-spacing(3) !default;
/// The vertical padding of the year view in the Scheduler.
/// @group scheduler
$kendo-scheduler-yearview-padding-y: $kendo-scheduler-yearview-padding-x !default;

/// The spacing between the calendars of the year view in the Scheduler.
/// @group scheduler
$kendo-scheduler-yearview-calendar-gap: k-spacing(3) !default;

/// The days with events indicator size of the year view in the Scheduler.
/// @group scheduler
$kendo-scheduler-yearview-indicator-size: 3px !default;
/// The top position of the days with events indicator of the year view in the Scheduler.
/// @group scheduler
$kendo-scheduler-yearview-indicator-calc-offset-top: calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2)) !default;
/// The left position of the days with events indicator of the year view in the Scheduler.
/// @group scheduler
$kendo-scheduler-yearview-indicator-calc-offset-left: calc( 50% - #{k-math-div( $kendo-scheduler-yearview-indicator-size, 2 )} ) !default;
/// The border radius of the days with events indicator of the year view in the Scheduler.
/// @group scheduler
$kendo-scheduler-yearview-indicator-border-radius: 50% !default;
/// The background color of the days with events indicator of the year view in the Scheduler.
/// @group scheduler
$kendo-scheduler-yearview-indicator-bg: $kendo-color-primary !default;
/// The background color of the selected days with events indicator of the year view in the Scheduler.
/// @group scheduler
$kendo-scheduler-yearview-indicator-selected-bg: $kendo-color-primary-contrast !default;

/// The horizontal padding of the Scheduler Tooltip.
/// @group scheduler
$kendo-scheduler-tooltip-padding-x: k-spacing(2) !default;
/// The vertical padding of the Scheduler Tooltip.
/// @group scheduler
$kendo-scheduler-tooltip-padding-y: k-spacing(2) !default;
/// The width of the border of the Scheduler Tooltip.
/// @group scheduler
$kendo-scheduler-tooltip-border-width: 0 !default;
/// The background color of the Scheduler Tooltip.
/// @group scheduler
$kendo-scheduler-tooltip-bg: $kendo-color-primary-contrast !default;
/// The text color of the Scheduler Tooltip.
/// @group scheduler
$kendo-scheduler-tooltip-text: $kendo-base-text !default;
/// The border color of the Scheduler Tooltip.
/// @group scheduler
$kendo-scheduler-tooltip-border: null !default;
/// The shadow of the Scheduler Tooltip.
/// @group scheduler
$kendo-scheduler-tooltip-shadow: k-elevation(2) !default;

/// The vertical margin of the Scheduler Tooltip title.
/// @group scheduler
$kendo-scheduler-tooltip-title-margin-y: k-spacing(3) !default;
/// The font size of the month inside the Scheduler Tooltip.
/// @group scheduler
$kendo-scheduler-tooltip-month-font-size: var( --kendo-font-size-sm, inherit ) !default;
/// The font size of the day inside the Scheduler Tooltip.
/// @group scheduler
$kendo-scheduler-tooltip-day-font-size: calc( var( --kendo-font-size-sm, .75rem ) * 2 ) !default;

/// The max height of the events inside the Scheduler Tooltip.
/// @group scheduler
$kendo-scheduler-tooltip-events-max-height: 250px !default;
/// The spacing between the events inside the Scheduler Tooltip.
/// @group scheduler
$kendo-scheduler-tooltip-events-gap: k-spacing(1) !default;

/// The horizontal padding of the events inside the Scheduler Tooltip.
/// @group scheduler
$kendo-scheduler-tooltip-event-padding-x: k-spacing(2) !default;
/// The vertical padding of the events inside the Scheduler Tooltip.
/// @group scheduler
$kendo-scheduler-tooltip-event-padding-y: k-spacing(1) !default;
/// The border radius of the events inside the Scheduler Tooltip.
/// @group scheduler
$kendo-scheduler-tooltip-event-border-radius: k-border-radius(md) !default;
/// The spacing between the events items inside the Scheduler Tooltip.
/// @group scheduler
$kendo-scheduler-tooltip-event-gap: k-spacing(1) !default;

/// The color of the Scheduler Tooltip callout.
/// @group scheduler
$kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/scheduler/_layout.scss
@mixin kendo-scheduler--layout-base() {

    // Layout
    .k-scheduler {
        border-width: $kendo-scheduler-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-scheduler-font-family;
        font-size: $kendo-scheduler-font-size;
        line-height: $kendo-scheduler-line-height;
        display: flex;
        flex-direction: column;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        table,
        thead,
        tfoot,
        tbody,
        tr,
        th,
        td,
        div,
        .k-scheduler-edit-dialog,
        > * {
            border-color: inherit;
        }
    }

    kendo-scheduler.k-scheduler {
        overflow: hidden;

        &.k-readonly-scheduler .k-event-delete {
            display: none;
        }
    }

    // Common
    .k-scheduler-table {
        width: 100%;
        max-width: none;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: fixed;

        td,
        th {
            padding-block: $kendo-scheduler-cell-padding-y;
            padding-inline: $kendo-scheduler-cell-padding-x;
            height: $kendo-scheduler-cell-height;
            overflow: hidden;
            white-space: nowrap;
            border-style: solid;
            border-width: 0 0 1px 1px;
            vertical-align: top;
            box-sizing: content-box;
        }
        td:first-child,
        th:first-child {
            border-left-width: 0;
        }
        .k-middle-row td {
            border-bottom-style: dotted;
        }

        .k-link {
            cursor: pointer;
        }
    }

    .k-scheduler-layout-flex {
        overflow: auto;

        .k-scheduler-head {
            position: sticky;
            top: 0;
            z-index: 3;
        }
        .k-scheduler-body {
            position: relative;
        }

        .k-scheduler-head,
        .k-scheduler-body {
            display: flex;
            flex: 100%;
            flex-wrap: wrap;
        }

        .k-scheduler-row {
            display: flex;
            flex: 1 1 100%;
            width: 100%;
            min-width: 0;
        }

        .k-scheduler-group {
            display: flex;
            flex: 1 1 100%;
            width: 100%;
            min-width: 0;
            flex-wrap: wrap;

            .k-group-cell {
                display: flex;
                flex: 1 1 auto;
                flex-wrap: wrap;
                overflow: auto;
            }

            .k-group-content {
                padding: 0;
                display: flex;
                flex: 1 1 100%;
                width: 100%;
                border-width: 0;
                flex-wrap: wrap;
            }

            &.k-group-horizontal {
                .k-group-cell {
                    flex-basis: 100%;
                    border-width: 0;
                    padding: 0;
                }
            }
        }

        &.k-scheduler-timeline-view .k-scheduler-body .k-scheduler-cell {
            flex-basis: auto;
        }


        .k-more-events {
            bottom: 2px;
            left: 0;
            width: 100%;
        }

        .k-scheduler-cell {
            display: flex;
            flex: 1 1 100%;
            padding-block: $kendo-scheduler-cell-padding-y;
            padding-inline: $kendo-scheduler-cell-padding-y;
            min-height: 1.5em;
            overflow: hidden;
            white-space: nowrap;
            border-style: solid;
            border-width: 0 1px 1px 0;
            vertical-align: top;
            box-sizing: content-box;

            &.k-slot-cell {
                position: relative;
            }

            &.k-heading-cell {
                justify-content: center;
                font-weight: bold;
            }

            &.k-side-cell {
                justify-content: flex-end;
                flex-grow: 0;
                flex-basis: auto;
                overflow: visible;
            }

            &.k-major-cell {
                border-bottom-width: 0;
            }
        }

        .k-middle-row .k-scheduler-cell {
            border-bottom-style: dotted;
        }

        .k-resource-cell {
            flex: none;
            display: flex;
            flex-wrap: wrap;
            overflow: visible;
        }

        .k-resource-content {
            display: flex;
            flex-wrap: wrap;
            padding: 0;
            border-width: 0;
        }

        .k-sticky-cell {
            display: flex;
            flex-wrap: wrap;
            flex-basis: 0;
            position: sticky;
            left: 0;
            z-index: 3;
        }
    }


    // Header and footer
    .k-scheduler-toolbar {
        border-width: 0;
        border-bottom-width: $kendo-toolbar-border-width;
        white-space: nowrap;
        flex-shrink: 0;
        position: relative;
        z-index: 2;

        .k-widget {
            font-size: inherit;
        }

        // Current date
        .k-nav-current {
            color: inherit;
            outline: 0;
            text-decoration: none;
            display: inline-flex;
            flex-flow: row nowrap;
            align-items: center;
            gap: $kendo-icon-spacing;
            cursor: pointer;
        }


        // Scheduler search
        .k-scheduler-search {
            display: inline-flex;
            flex-flow: row nowrap;
        }
    }


    // Scheduler navigation
    .k-scheduler-navigation {}

    .k-scheduler-toolbar .k-views-dropdown {
        width: auto;
        font: inherit;
    }

    // Scheduler footer
    .k-scheduler-footer {
        @include box-shadow( none );
        border-width: 0;
        border-top-width: $kendo-toolbar-border-width;
        white-space: nowrap;
        flex-shrink: 0;
        position: relative;
    }


    // Layout
    .k-scheduler-layout {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        flex: 1 1 auto;
        position: relative;
        z-index: 1;

        > tbody > tr > td {
            padding: 0;
            vertical-align: top;
        }

        td.k-selected,
        .k-scheduler-cell.k-selected {
            outline: none;
        }

        // Remove bottom border from first cell of hours cells spaning on two rows
        tr + tr,
        .k-scheduler-pane + .k-scheduler-pane {
            .k-scheduler-times tr {
                th {
                    border-bottom-color: transparent;
                }

                .k-slot-cell,
                .k-scheduler-times-all-day,
                &:last-child th {
                    border-bottom-color: inherit;
                }
            }
        }
    }
    .k-scheduler-layout.k-scheduler-flex-layout {
        display: flex;
        flex-direction: column;

        &.k-scheduler-weekview,
        &.k-scheduler-dayview {
            .k-scheduler-pane:first-child .k-scheduler-table {
                table-layout: fixed;
            }
        }
    }


    // Scheduler view header
    .k-scheduler-header,
    .k-scheduler-view-header {
        padding-inline-end: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width});
    }
    .k-scheduler-header th {
        text-align: center;
    }

    .k-scheduler-header,
    .k-scheduler-header-wrap,
    .k-scheduler-header-wrap > div {
        border-color: inherit;
        overflow: hidden;
    }
    .k-scheduler-header-wrap {
        border-width: 0;
        border-style: solid;
        position: relative;
    }
    .k-scheduler-times {
        border-color: inherit;
        position: relative;
        overflow: hidden;

        .k-scheduler-table { table-layout: auto; }

        th {
            border-width: 0 1px 1px 0;
            text-align: end;
        }

        .k-slot-cell,
        .k-scheduler-times-all-day {
            border-bottom-color: inherit;
        }

        .k-slot-cell.k-last-resource {
            border-right: 0;
        }
        .k-slot-cell.k-empty-slot {
            padding-left: 0;
            padding-right: 0;
        }
    }

    .k-scheduler-datecolumn {
        width: $kendo-scheduler-datecolumn-width;
    }
    .k-scheduler-timecolumn {
        width: $kendo-scheduler-timecolumn-width;
        white-space: nowrap;
    }


    // Scheduler content
    .k-scheduler-content {
        border-color: inherit;
        position: relative;
        overflow: auto;

        &:focus {
            outline: none;
        }
    }


    // Appointments
    kendo-scheduler .k-event,
    .k-event {
        @include border-radius( k-border-radius(md) );
        min-height: $kendo-scheduler-event-min-height;
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        border-radius: $kendo-scheduler-event-border-radius;
        text-align: start;
        outline: 0;
        cursor: default;
        position: absolute;
        overflow: hidden;
        padding-right: $kendo-padding-md-x;

        > div {
            position: relative;
            z-index: 2;
        }

        // Template
        .k-event-template {
            line-height: $kendo-scheduler-event-line-height;
            padding-block: $kendo-padding-md-y;
            padding-inline: $kendo-padding-md-x;
            // TODO: incompatible units
            // padding-right: $kendo-padding-sm-x + k-spacing(4);
        }
        .k-event-time {
            padding-bottom: 0;
            font-size: .875em;
            white-space: nowrap;
            display: none;
        }


        // Actions
        .k-event-actions {
            white-space: nowrap;
            position: absolute;
            top: 0;
            bottom: 0;
            right: $kendo-padding-md-x;
            z-index: 2;

            .k-event-delete {
                opacity: .5;
                visibility: hidden;
            }

            &:hover,
            &.k-hover {
                .k-event-delete {
                    opacity: 1;
                }
            }

            a { color: inherit; }
        }


        // Indicators
        .k-event-actions:first-child {
            margin: $kendo-padding-sm-y .4ex 0 $kendo-padding-sm-x;
            top: 0;
            right: 0;
            float: left;
            position: relative;
            opacity: 1;
            visibility: visible;
            line-height: normal;
        }


        // Resize handles
        .k-resize-handle {
            z-index: 4;
            opacity: .5;
            visibility: hidden;
        }
        .k-resize-handle::before { border-color: currentColor; }
        .k-resize-n {
            height: .5em;
            top: 0;
        }
        .k-resize-s {
            height: .5em;
            bottom: 0;
        }
        .k-resize-n::before,
        .k-resize-s::before {
            width: k-spacing(8);
            border-bottom-width: 1px;
        }
        .k-resize-w {
            width: .5em;
            left: 0;
        }
        .k-resize-e {
            width: .5em;
            right: 0;
        }
        .k-resize-w::before,
        .k-resize-e::before {
            height: k-spacing(8);
            border-left-width: 1px;
        }


        // Hover
        &:hover,
        &.k-hover {
            .k-event-actions .k-event-delete,
            .k-resize-handle {
                visibility: visible;
            }
        }

        &.k-event-drag-hint .k-event-time {
            display: block;
        }

        .k-event-top-actions,
        .k-event-bottom-actions {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            text-align: center;
        }

        .k-event-bottom-actions {
            top: auto;
            bottom: 0;
        }
    }


    // Tasks
    .k-scheduler-mark {
        width: 1em;
        height: 1em;
        display: inline-block;
        vertical-align: middle;
    }


    // More events indicator
    .k-more-events {
        padding: 0;
        height: 13px;
        border-style: solid;
        border-width: 1px;
        overflow: hidden;
        position: absolute;
        justify-content: center;

        > .k-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    // Draging hint
    .k-event-drag-hint {
        opacity: .5;
        z-index: 3;

        .k-event-actions,
        .k-event-top-actions,
        .k-event-bottom-actions,
        .k-resize-handle {
            display: none;
        }

        .k-event-time {
            display: block;
        }
    }


    // Resizing
    .k-scheduler-marquee {
        border-width: 0;
        border-style: solid;

        // label
        .k-label-top,
        .k-label-bottom {
            font-size: .75em;
            position: absolute;
        }
        .k-label-top {
            left: $kendo-padding-sm-x;
            top: $kendo-padding-sm-y;
        }
        .k-label-bottom {
            right: $kendo-padding-sm-x;
            bottom: $kendo-padding-sm-y;
        }

        // Angle tingie
        &.k-first::before,
        &.k-last::after {
            content: "";
            border-width: 3px;
            border-style: solid;
            position: absolute;
            width: 0;
            height: 0;
        }
        &.k-first::before {
            top: 0;
            left: 0;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        &.k-last::after {
            bottom: 0;
            right: 0;
            border-left-color: transparent;
            border-top-color: transparent;
        }
    }

    // remove scrollbars during PDF export
    // stylelint-disable declaration-no-important
    .k-pdf-export-shadow .k-scheduler,
    .k-scheduler-pdf-export .k-scheduler-content,
    .k-scheduler-pdf-export .k-scheduler-times {
        height: auto !important;
        overflow: visible !important;
    }

    .k-scheduler-pdf-export {
        overflow: hidden;

        .k-scheduler-header {
            padding: 0 !important;
        }

        .k-scheduler-header-wrap {
            border-width: 0 !important;
        }

        .k-scheduler-header .k-scheduler-table,
        .k-scheduler-content .k-scheduler-table {
            width: 100% !important;
        }
    }
    // stylelint-enable declaration-no-important


    // TODO: add this class to jQuery rendering
    // after refactoring jQuery scheduler layout to be flex
    .k-recurrence-editor {
        display: flex;
        flex-direction: column;
    }
    kendo-scheduler .k-recurrence-editor {
        display: block;
    }


    // Day view
    .k-scheduler-dayview {}


    // Workweek view
    .k-scheduler-workWeekview {} // stylelint-disable-line


    // Week view
    .k-scheduler-weekview {}


    // Month view
    .k-scheduler-monthview {

        .k-scheduler-table {
            height: 100%;
        }
        .k-scheduler-table td {
            height: 80px;
            text-align: end;
        }
        .k-scheduler-body .k-scheduler-cell {
            min-height: 80px;
        }

        // hidden cells must have no layout
        .k-hidden {
            padding-left: 0 !important; // stylelint-disable-line declaration-no-important
            padding-right: 0 !important; // stylelint-disable-line declaration-no-important
            border-right-width: 0 !important; // stylelint-disable-line declaration-no-important
        }

        .k-scheduler-table-auto,
        .k-scheduler-table-auto td,
        .k-scheduler-content .k-scheduler-table-auto {
            height: auto;
        }

        // Force vertical scroll in monthview for jquery
        .k-scheduler-content {
            overflow-y: scroll;
        }
        &.k-scheduler-flex-layout .k-scheduler-content {
            overflow-y: auto;
        }
    }


    // Agenda view
    .k-scheduler-agendaview {

        .k-scheduler-mark {
            margin-right: .5em;
            width: 1em;
            height: 1em;
            display: inline-block;
            vertical-align: middle;
        }

        .k-scheduler-table {
            th:first-child,
            td:first-child {
                border-left-width: 1px;
            }

            td.k-first {
                border-left-width: 0;
            }
        }

        .k-task > .k-event-delete {
            color: inherit;
            position: absolute;
            top: $kendo-padding-sm-y;
            right: $kendo-padding-sm-y;
            opacity: .5;
            visibility: hidden;
        }
        .k-hover .k-task > .k-event-delete,
        .k-scheduler-content tr:hover .k-event-delete,
        .k-scheduler-content .k-scheduler-row:hover .k-event-delete,
        .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete {
            visibility: visible;
        }
    }
    .k-scheduler-agendaday {
        margin: 0 .2em 0 0;
        font-size: 3em;
        line-height: 1;
        font-weight: 400;
        float: left;
    }
    .k-scheduler-agendaweek {
        display: block;
        margin: .4em 0 0;
        line-height: 1;
        font-style: normal;
    }
    .k-scheduler-agendadate {
        font-size: .75em;
    }


    // Timeline view
    .k-scheduler-timelineview {
        .k-slot-cell {
            overflow: hidden;
        }
        .k-scheduler-content {
            overflow: auto;
        }
    }

    .k-scheduler-pane {
        display: flex;
        flex-direction: row;
    }
    .k-scheduler-pane .k-scheduler-times {
        flex: 0 0 auto;
    }
    .k-scheduler-pane .k-scheduler-times .k-scheduler-table {
        height: 100%;
    }
    .k-scheduler-pane .k-scheduler-header,
    .k-scheduler-pane .k-scheduler-content {
        flex: 1 1 auto;
    }


    // Year view
    .k-scheduler-yearview {
        .k-scheduler-body {
            padding-block: $kendo-scheduler-yearview-padding-y;
            padding-inline: $kendo-scheduler-yearview-padding-x;
            justify-content: center;
        }

        .k-calendar {
            width: 100%;
            border-width: 0;

            .k-calendar-view {
                flex-wrap: wrap;
                justify-content: center;
                gap: $kendo-scheduler-yearview-calendar-gap;
            }

            .k-content {
                flex: 0;
            }

            .k-link {
                position: relative;
            }

            td.k-selected {
                background-color: inherit;
            }
        }

        .k-day-indicator {
            margin-top: $kendo-scheduler-yearview-indicator-calc-offset-top;
            width: $kendo-scheduler-yearview-indicator-size;
            height: $kendo-scheduler-yearview-indicator-size;
            border-radius: $kendo-scheduler-yearview-indicator-border-radius;
            position: absolute;
            left: $kendo-scheduler-yearview-indicator-calc-offset-left;
        }
    }



    // Scheduler tooltip
    .k-scheduler-tooltip {
        padding-block: $kendo-scheduler-tooltip-padding-y;
        padding-inline: $kendo-scheduler-tooltip-padding-x;
        border-width: $kendo-scheduler-tooltip-border-width;
        color: inherit;

        .k-tooltip-title {
            margin-bottom: $kendo-scheduler-tooltip-title-margin-y;

            .k-month {
                font-size: $kendo-scheduler-tooltip-month-font-size;
                text-transform: uppercase;
            }

            .k-day {
                font-size: $kendo-scheduler-tooltip-day-font-size;
            }
        }

        .k-tooltip-events-container {
            overflow: auto;
        }

        .k-tooltip-events {
            max-height: $kendo-scheduler-tooltip-events-max-height;
            display: flex;
            flex-direction: column;
            gap: $kendo-scheduler-tooltip-events-gap;
        }

        .k-tooltip-event {
            padding-block: $kendo-scheduler-tooltip-event-padding-y;
            padding-inline: $kendo-scheduler-tooltip-event-padding-x;
            border-radius: $kendo-scheduler-tooltip-event-border-radius;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
            flex-shrink: 0;
            position: relative;
            gap: $kendo-scheduler-tooltip-event-gap;
        }
        .k-tooltip-event .k-event-time {
            display: flex;
            flex-shrink: 0;
            font-size: inherit;
        }

        .k-no-data {
            height: auto;
            min-height: auto;
            color: inherit;
        }
    }



    // Scheduler edit dialog
    .k-scheduler-edit-dialog {
        .k-dialog {
            max-height: 100vh;
        }
    }

    .k-scheduler-edit-form {

        .k-edit-form-container { width: 100%; }
        .k-edit-label { width: 17%; }
        .k-edit-field { width: 77%; }

        .k-edit-field > ul > li {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
        }
        .k-recurrence-editor {
            .k-radio-list .k-radio-wrap,
            .k-checkbox-list .k-checkbox-wrap {
                align-self: center;
            }
        }

        .k-recur-interval,
        .k-recur-count,
        .k-recur-monthday {
            width: 5em;
        }
        .k-recur-until,
        .k-recur-month,
        .k-recur-weekday,
        .k-recur-weekday-offset {
            width: 10em;
        }

        .k-scheduler-datetime-picker {
            display: flex;
            flex-flow: row nowrap;
            gap: k-spacing(2);
        }

    }



    // Scheduler rtl
    .k-rtl {
        .k-scheduler-header th,
        .k-scheduler-table td {
            border-width: 0 1px 1px 0;
        }

        .k-scheduler-table {
            td,
            th {
                &:first-child {
                    border-right-width: 0;
                }
            }
        }

        .k-scheduler-times th {
            border-width: 0 0 1px 1px;
        }

        .k-scheduler .k-scrollbar-v .k-scheduler-header-wrap {
            border-right-width: 0;
            border-left-width: 1px;
        }

        .k-event {
            padding-right: 0;
            padding-left: $kendo-padding-md-x;

            .k-resize-w {
                left: auto;
                right: 0;
            }

            .k-resize-e {
                right: auto;
                left: 0;
            }

            .k-event-actions {
                right: auto;
                left: 2px;
            }

            .k-event-actions:first-child {
                margin: $kendo-padding-sm-y $kendo-padding-sm-x 0 .4ex;
                float: right;
            }
        }
        .k-scheduler-agendaview .k-task {

            > .k-event-delete {
                left: 2px;
                right: auto;
            }

            .k-scheduler-mark {
                margin-left: .5em;
                margin-right: 0;
            }

        }

        .k-scheduler-marquee .k-label-top {
            left: auto;
            right: 4px;
        }

        .k-scheduler-marquee .k-label-bottom {
            left: 4px;
            right: auto;
        }

        .k-scheduler-edit-form .k-scheduler-delete {
            float: right;
        }

        .k-scheduler,
        &.k-scheduler {

            .k-scheduler-header-wrap {
                border-right-width: 0;
            }

            .k-scheduler-agendaday {
                float: right;
                margin: 0 0 0 .2em;
            }

            .k-scheduler-agendaview .k-scheduler-table {
                td:first-child,
                th:first-child {
                    border-left-width: 0;
                }

                tr + tr {
                    td:first-child,
                    th:first-child {
                        border-right-width: 1px;
                    }
                }
            }
        }
    }

    .k-safari {
        .k-scheduler-tooltip .k-tooltip-event:not(:last-child) {
            margin-bottom: $kendo-scheduler-tooltip-event-gap;
        }

        .k-scheduler-yearview .k-calendar-view .k-month {
            margin-block: 0;
            margin-inline: k-math-div( $kendo-scheduler-yearview-calendar-gap, 2 );
        }
    }

}


@mixin kendo-scheduler--layout() {
    @include kendo-scheduler--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/scheduler/_theme.scss
@mixin kendo-scheduler--theme-base() {

    // Appearance
    .k-scheduler {
        @include fill(
            $kendo-scheduler-text,
            $kendo-scheduler-bg,
            $kendo-scheduler-border
        );
    }

    // Header and footer
    .k-scheduler-toolbar {
        @include fill(
            $kendo-scheduler-toolbar-text,
            $kendo-scheduler-toolbar-bg,
            $kendo-scheduler-toolbar-border,
            $kendo-scheduler-toolbar-gradient
        );
    }
    .k-scheduler-footer {
        @include fill(
            $kendo-scheduler-footer-text,
            $kendo-scheduler-footer-bg,
            $kendo-scheduler-footer-border,
            $kendo-scheduler-footer-gradient
        );
    }

    .k-scheduler-header {
        background-color: $kendo-base-bg;
    }

    .k-scheduler-header-wrap {
        background-color: $kendo-scheduler-bg;
    }


    // Scheduler navigation
    .k-scheduler-navigation {}


    // View switcher
    .k-scheduler-views {}


    // Scheduler footer
    .k-scheduler-footer {}


    // Scheduler content
    .k-scheduler-content {}
    .k-scheduler-nonwork,
    .k-scheduler .k-nonwork-hour {
        @include fill(
            $kendo-scheduler-nonwork-text,
            $kendo-scheduler-nonwork-bg
        );
    }
    .k-scheduler-other-month,
    .k-scheduler .k-other-month {
        @include fill(
            $kendo-scheduler-othermonth-text,
            $kendo-scheduler-othermonth-bg
        );
    }

    .k-scheduler-layout td.k-selected,
    .k-scheduler-layout .k-scheduler-cell.k-selected {
        background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25));
    }

    .k-scheduler-layout-flex {
        .k-scheduler-head,
        .k-sticky-cell {
            background-color: $kendo-scheduler-bg;
        }
    }


    // Events
    .k-event {
        @include fill(
            $kendo-scheduler-event-text,
            $kendo-scheduler-event-bg,
            $kendo-scheduler-event-border,
            $kendo-scheduler-event-gradient
        );
        @include box-shadow( $kendo-scheduler-event-shadow );

        &:hover,
        &.k-hover {
            @include fill(
                $kendo-scheduler-event-hover-text,
                $kendo-scheduler-event-hover-bg,
                $kendo-scheduler-event-hover-border,
                $kendo-scheduler-event-hover-gradient
            );
            @include box-shadow( $kendo-scheduler-event-hover-shadow );
        }

        &.k-selected {
            @include fill(
                $kendo-scheduler-event-selected-text,
                $kendo-scheduler-event-selected-bg,
                $kendo-scheduler-event-selected-border,
                $kendo-scheduler-event-selected-gradient
            );
            @include box-shadow( $kendo-scheduler-event-selected-shadow );
        }

        &.k-event-inverse {
            color: if($kendo-enable-color-system, if($kendo-enable-focus-contrast, black, k-color( on-app-surface )), k-contrast-legacy( $kendo-scheduler-event-text ));
        }

        &.k-event-ongoing {
            @include box-shadow( $kendo-scheduler-event-ongoing-shadow );
        }
    }


    // Drag hint
    .k-event-drag-hint {}


    // Resizing
    .k-scheduler-marquee {}
    .k-scheduler-marquee::before,
    .k-scheduler-marquee::after {
        border-color: $kendo-color-primary;
    }

    // Edit dialog
    .k-scheduler-edit-dialog {
        .k-dialog-actions {
            border-color: $kendo-scheduler-border;
        }
    }



    // Day view
    .k-scheduler-dayview {}


    // Workweek view
    .k-scheduler-workWeekview {} // stylelint-disable-line


    // Week view
    .k-scheduler-weekview {}


    // Month view
    .k-scheduler-monthview {}


    // Agenda view
    .k-scheduler-agendaview {

        // Hover
        .k-scheduler-content tr:hover,
        .k-scheduler-content tr.k-hover,
        .k-scheduler-content .k-scheduler-row:hover,
        .k-scheduler-content .k-scheduler-row.k-hover {
            @include fill(
                $kendo-hover-text,
                $kendo-hover-bg,
                $kendo-hover-border,
                $kendo-hover-gradient
            );
        }

        .k-scheduler-content tr:hover .k-scheduler-datecolumn,
        .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
        .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
        .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
            @include fill(
                $kendo-scheduler-text,
                $kendo-scheduler-bg,
                $kendo-scheduler-border
            );
        }

        // Selected
        .k-scheduler-content tr.k-selected {
            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25));
        }
        .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
        .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
            background-color: $kendo-scheduler-bg;
        }
    }


    // Timeline view
    .k-scheduler-timelineview {}


    // Year view
    .k-scheduler-yearview {

        .k-day-indicator {
            @include fill( $bg: $kendo-scheduler-yearview-indicator-bg );
        }

        .k-selected .k-day-indicator {
            @include fill( $bg: $kendo-scheduler-yearview-indicator-selected-bg );
        }
    }



    // Scheduler tooltip
    .k-tooltip.k-scheduler-tooltip {
        @include fill(
            $kendo-scheduler-tooltip-text,
            $kendo-scheduler-tooltip-bg,
            $kendo-scheduler-tooltip-border
        );
        @include box-shadow( $kendo-scheduler-tooltip-shadow );

        .k-callout {
            @include fill( $color: $kendo-scheduler-tooltip-callout-text );
        }
    }


    // Scheduler edit form
    .k-scheduler-edit-form {}

}


@mixin kendo-scheduler--theme() {
    @include kendo-scheduler--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-scheduler--styles() {
    @include module-render( "scheduler" ) {
        @include kendo-scheduler--layout();
        @include kendo-scheduler--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-scheduler--styles();
}

// #endregion


// Misc
// #region @import "./adaptive/_index.scss"; -> scss/adaptive/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./chat/_index.scss"; -> scss/chat/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "chat",
    dependencies: (
        "button",
        "card",
        "icon",
        "input",
        "toolbar",
    )
);


// Dependencies
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../card/_index.scss"; -> scss/card/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../toolbar/_index.scss"; -> scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/chat/_variables.scss
// Chat

/// The horizontal padding of the Chat.
/// @group chat
$kendo-chat-padding-x: k-spacing(4) !default;
/// The vertical padding of the Chat.
/// @group chat
$kendo-chat-padding-y: k-spacing(4) !default;
/// The width of the Chat.
/// @group chat
$kendo-chat-width: 500px !default;
/// The height of the Chat.
/// @group chat
$kendo-chat-height: 600px !default;
/// The border width of the Chat.
/// @group chat
$kendo-chat-border-width: 1px !default;
/// The font family of the Chat.
/// @group chat
$kendo-chat-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Chat.
/// @group chat
$kendo-chat-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Chat.
/// @group chat
$kendo-chat-line-height: var( --kendo-line-height, normal ) !default;

/// The horizontal spacing between the items of the Chat.
/// @group chat
$kendo-chat-item-spacing-x: k-spacing(2) !default;
/// The vertical spacing between the items of the Chat.
/// @group chat
$kendo-chat-item-spacing-y: k-spacing(4) !default;

/// The horizontal padding of the Chat message list.
/// @group chat
$kendo-chat-message-list-padding-x: $kendo-chat-padding-x !default;
/// The vertical padding of the Chat message list.
/// @group chat
$kendo-chat-message-list-padding-y: $kendo-chat-padding-y !default;
/// The spacing of the Chat message list.
/// @group chat
$kendo-chat-message-list-spacing: $kendo-chat-item-spacing-y !default;

/// The font size of the Chat timestamp.
/// @group chat
$kendo-chat-timestamp-font-size: var( --kendo-font-size-sm, inherit ) !default;
/// The line height of the Chat timestamp.
/// @group chat
$kendo-chat-timestamp-line-height: var( --kendo-line-height-lg, normal ) !default;
/// The text transform of the Chat timestamp.
/// @group chat
$kendo-chat-timestamp-transform: uppercase !default;
/// The text color of the Chat timestamp.
/// @group chat
$kendo-chat-timestamp-text: $kendo-subtle-text !default;
/// The background color of the Chat timestamp.
/// @group chat
$kendo-chat-timestamp-bg: null !default;

/// The font size of the Chat message meta text.
/// @group chat
$kendo-chat-message-meta-font-size: var( --kendo-font-size-sm, inherit ) !default;
/// The line height of the Chat message meta text.
/// @group chat
$kendo-chat-message-meta-line-height: var( --kendo-line-height-lg, normal ) !default;

/// The font size of the Chat author text.
/// @group chat
$kendo-chat-author-font-size: var( --kendo-font-size-sm, inherit ) !default;
/// The line height of the Chat author text.
/// @group chat
$kendo-chat-author-line-height: var( --kendo-line-height-lg, normal ) !default;

/// The horizontal padding of the Chat bubble message.
/// @group chat
$kendo-chat-bubble-padding-x: k-spacing(3) !default;
/// The vertical padding of the Chat bubble message.
/// @group chat
$kendo-chat-bubble-padding-y: k-spacing(2) !default;
/// The spacing of the Chat bubble message.
/// @group chat
$kendo-chat-bubble-spacing: k-spacing(0.5) !default;
/// The line height of the Chat bubble message.
/// @group chat
$kendo-chat-bubble-line-height: var( --kendo-line-height, normal ) !default;

/// The border radius of the Chat bubble message.
/// @group chat
$kendo-chat-bubble-border-radius: 12px !default;
/// The border radius of the Chat small bubble message
/// @group chat
$kendo-chat-bubble-border-radius-sm: 2px !default;

/// The size of the Chat Avatar.
/// @group chat
$kendo-chat-avatar-size: 32px !default;
/// The spacing of the Chat Avatar.
/// @group chat
$kendo-chat-avatar-spacing: $kendo-chat-item-spacing-x !default;

/// The horizontal padding of the Chat Toolbar.
/// @group chat
$kendo-chat-toolbar-padding-x: $kendo-toolbar-md-padding-x !default;
/// The vertical padding of the Chat Toolbar.
/// @group chat
$kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
/// The spacing of the Chat Toolbar.
/// @group chat
$kendo-chat-toolbar-spacing: $kendo-toolbar-md-spacing !default;
/// The background color of the Chat Toolbar.
/// @group chat
$kendo-chat-toolbar-bg: $kendo-toolbar-bg !default;
/// The text color of the Chat Toolbar.
/// @group chat
$kendo-chat-toolbar-text: $kendo-toolbar-text !default;
/// The border color of the Chat Toolbar.
/// @group chat
$kendo-chat-toolbar-border: inherit !default;

/// The horizontal padding of the Chat quick reply.
/// @group chat
$kendo-chat-quick-reply-padding-x: k-spacing(3) !default;
/// The vertical padding of the Chat quick reply.
/// @group chat
$kendo-chat-quick-reply-padding-y: k-spacing(2) !default;
/// The spacing of the Chat quick reply.
/// @group chat
$kendo-chat-quick-reply-spacing: k-spacing(2) !default;
/// The line height of the Chat quick reply.
/// @group chat
$kendo-chat-quick-reply-line-height: $kendo-chat-bubble-line-height !default;


/// The background color of the Chat.
/// @group chat
$kendo-chat-bg: $kendo-app-bg !default;
/// The text color of the Chat.
/// @group chat
$kendo-chat-text: $kendo-app-text !default;
/// The border color of the Chat.
/// @group chat
$kendo-chat-border: $kendo-app-border !default;

/// The background color of the Chat bubble.
/// @group chat
$kendo-chat-bubble-bg: $kendo-component-bg !default;
/// The text color of the Chat bubble.
/// @group chat
$kendo-chat-bubble-text: $kendo-component-text !default;
/// The border color of the Chat bubble.
/// @group chat
$kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
/// The box shadow of the Chat bubble.
/// @group chat
$kendo-chat-bubble-shadow: k-elevation(1) !default;
/// The shadow of the hovered Chat bubble.
/// @group chat
$kendo-chat-bubble-hover-shadow: k-elevation(2) !default;
/// The shadow of the selected Chat bubble.
/// @group chat
$kendo-chat-bubble-selected-shadow: k-elevation(3) !default;

/// The background color of the Chat alt bubble.
/// @group chat
$kendo-chat-alt-bubble-bg: $kendo-color-primary !default;
/// The text color of the Chat alt bubble.
/// @group chat
$kendo-chat-alt-bubble-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg )) !default;
/// The border color of the Chat alt bubble.
/// @group chat
$kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
/// The shadow of the Chat alt bubble.
/// @group chat
$kendo-chat-alt-bubble-shadow: k-elevation(1) !default;
/// The shadow of the hovered Chat alt bubble.
/// @group chat
$kendo-chat-alt-bubble-hover-shadow: k-elevation(2) !default;
/// The shadow of the selected Chat alt bubble.
/// @group chat
$kendo-chat-alt-bubble-selected-shadow: k-elevation(3) !default;

/// The background color of the Chat quick reply.
/// @group chat
$kendo-chat-quick-reply-bg: transparent !default;
/// The text color of the Chat quick reply.
/// @group chat
$kendo-chat-quick-reply-text: $kendo-color-primary !default;
/// The border color of the Chat quick reply.
/// @group chat
$kendo-chat-quick-reply-border: $kendo-color-primary !default;

/// The background color of the hovered Chat quick reply.
/// @group chat
$kendo-chat-quick-reply-hover-bg: $kendo-color-primary !default;
/// The text color of the hovered Chat quick reply.
/// @group chat
$kendo-chat-quick-reply-hover-text: $kendo-color-primary-contrast !default;
/// The border color of the hovered Chat quick reply.
/// @group chat
$kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;

/// The shadow blur of the focused Chat quick reply.
/// @group chat
$kendo-chat-quick-reply-shadow-blur: 0px !default;
/// The shadow spread of the focused Chat quick reply.
/// @group chat
$kendo-chat-quick-reply-shadow-spread: 2px !default;
/// The shadow opacity of the focused Chat quick reply.
/// @group chat
$kendo-chat-quick-reply-shadow-opacity: .3 !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/chat/_layout.scss
@mixin kendo-chat--layout-base() {

    // Chat
    .k-chat {
        margin: auto;
        max-width: $kendo-chat-width;
        height: $kendo-chat-height;
        max-height: 100%;
        border-width: $kendo-chat-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-chat-font-family;
        font-size: $kendo-chat-font-size;
        line-height: $kendo-chat-line-height;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;


        // Message list
        .k-message-list {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            align-items: flex-start;
            overflow-x: hidden;
            overflow-y: auto;
            scroll-behavior: smooth;
        }
        .k-message-list-content {
            padding-block: $kendo-chat-message-list-padding-y;
            padding-inline: $kendo-chat-message-list-padding-x;
            width: 100%;
            box-sizing: border-box;
            position: relative;
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            overflow: hidden;

            > * + * {
                margin-top: $kendo-chat-message-list-spacing;
            }
        }

        // Message group
        .k-message-group {
            max-width: 80%;
            background: none;
            box-sizing: border-box;
            display: flex;
            flex-shrink: 0;
            flex-direction: column;
            position: relative;
        }
        .k-message-group:not(.k-alt) {
            align-items: flex-start;
            text-align: start;

            .k-message-time {
                margin-inline-start: $kendo-chat-item-spacing-x;
                inset-inline-start: 100%;
            }
            .k-message-status {
                inset-inline-start: 0;
            }

            .k-first .k-chat-bubble,
            .k-only .k-chat-bubble {
                border-bottom-left-radius: $kendo-chat-bubble-border-radius-sm;
            }
            .k-middle .k-chat-bubble,
            .k-last .k-chat-bubble {
                @include border-left-radius( $kendo-chat-bubble-border-radius-sm );
            }
        }
        .k-message-group.k-alt {
            align-self: flex-end;
            align-items: flex-end;
            text-align: end;

            .k-message-time {
                margin-inline-end: $kendo-chat-item-spacing-x;
                inset-inline-end: 100%;
            }
            .k-message-status {
                inset-inline-end: 0;
            }

            .k-first .k-chat-bubble,
            .k-only .k-chat-bubble {
                border-bottom-right-radius: $kendo-chat-bubble-border-radius-sm;
            }
            .k-middle .k-chat-bubble,
            .k-last .k-chat-bubble {
                @include border-right-radius( $kendo-chat-bubble-border-radius-sm );
            }
        }


        // Message
        .k-message {
            max-width: 100%;
            margin: $kendo-chat-bubble-spacing 0 0;
            position: relative;
            transition: margin .2s ease-in-out;
            outline: none;
        }


        // Message meta
        .k-message-time,
        .k-message-status {
            font-size: $kendo-chat-message-meta-font-size;
            line-height: $kendo-chat-message-meta-line-height;
            white-space: nowrap;
            pointer-events: none;
            position: absolute;
        }
        .k-message-time {
            opacity: 0;
            top: 50%;
            transform: translateY(-50%);
            transition: opacity .2s ease-in-out;
        }
        .k-message-status {
            margin-top: $kendo-chat-bubble-spacing;
            height: 0;
            overflow: hidden;
            top: 100%;
            transition: height .2s ease-in-out;
        }


        // Bubble
        .k-chat-bubble {
            @include border-radius( $kendo-chat-bubble-border-radius );
            padding-block: $kendo-chat-bubble-padding-y;
            padding-inline: $kendo-chat-bubble-padding-x;
            border-width: 1px;
            border-style: solid;
            line-height: $kendo-chat-bubble-line-height;
            word-wrap: break-word;
            white-space: pre-wrap;

            a {
                color: inherit;
                text-decoration: underline;
            }
        }


        // Message states
        .k-message.k-selected {
            margin-bottom: $kendo-chat-item-spacing-y;
            border: 0;
            color: inherit;
            background: none;

            .k-message-time { opacity: 1; }
            .k-message-status { height: 1.2em; }
        }
        .k-message-error,
        .k-message-sending {
            margin-bottom: $kendo-chat-item-spacing-y;

            .k-message-status { height: 1.2em; }
        }

        // Avatar
        .k-avatar {
            margin: 0;
            position: absolute;

            @at-root .k-message-group:not(.k-alt) > .k-avatar {
                inset-inline-start: 0;
                bottom: 0;
            }
            @at-root .k-message-group.k-alt > .k-avatar {
                inset-inline-end: 0;
                bottom: 0;
            }
        }
        .k-avatars {
            .k-message-group:not(.k-no-avatar) {
                padding-inline-start: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} );
            }
            .k-message-group.k-alt:not(.k-no-avatar) {
                padding-inline-end: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} );
            }
        }
    }

    // Author
    .k-author {
        margin: 0;
        font-size: $kendo-chat-author-font-size;
        line-height: $kendo-chat-author-line-height;
    }
    .k-chat .k-author {
        margin: 0; // Duplicate styles because of typography module
    }


    // Timestamp
    .k-chat .k-timestamp {
        font-size: $kendo-chat-timestamp-font-size;
        line-height: $kendo-chat-timestamp-line-height;
        text-transform: $kendo-chat-timestamp-transform;
        text-align: center;
        align-self: stretch;
    }


    // Quick reply
    .k-quick-replies {
        display: block;
        max-width: 100%; // IE fix
    }
    .k-quick-reply {
        @include border-radius( 100px );
        margin-inline-end: $kendo-chat-quick-reply-spacing;
        margin-block-end: calc( #{$kendo-chat-quick-reply-spacing} / 2 );
        padding-block: $kendo-chat-quick-reply-padding-y;
        padding-inline: $kendo-chat-quick-reply-padding-x;
        border-width: 1px;
        border-style: solid;
        line-height: $kendo-chat-quick-reply-line-height;
        cursor: pointer;
        user-select: none;
        display: inline-block;
        flex: 0 0 auto;
        transition-property: color, background-color, border-color;
        transition-duration: .2s;
        transition-timing-function: ease-in-out;
        outline: none;
    }


    // Scrollable quick replies
    .k-scrollable-quick-replies {
        margin-inline-start: -$kendo-chat-message-list-padding-y;
        margin-inline-end: -$kendo-chat-message-list-padding-y;
        padding-inline-start: $kendo-chat-message-list-padding-y;
        padding-inline-end: $kendo-chat-message-list-padding-y;
        display: flex;
        flex-flow: row nowrap;
        flex: 0 0 auto;
        overflow-x: auto;
        overflow-y: hidden;

        &::-webkit-scrollbar {
            display: none;
        }

        .k-quick-reply {
            margin: 0;
        }
        .k-quick-reply + .k-quick-reply {
            margin-inline-start: $kendo-chat-quick-reply-spacing;
        }
    }


    // Message box
    .k-message-box {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        border-width: 1px 0 0;
        border-style: solid;
        border-color: inherit !important; // stylelint-disable-line declaration-no-important
        border-radius: 0 !important; // stylelint-disable-line declaration-no-important
        flex: none;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        &:focus,
        &.k-focus,
        &:focus-within {
            outline: 0;
            box-shadow: none;
        }

        // Input
        .k-input {}

        .k-button {
            border-width: 0;
            flex-shrink: 0;

            svg {
                width: 20px;
                height: 20px;
                fill: currentColor;
                display: inline-block;
            }

            .k-rtl &,
            [dir="rtl"] & {
                transform: scaleX(-1);
            }
        }
    }




    // Card list
    .k-chat .k-card-list {
        margin: $kendo-chat-bubble-spacing 0 0;
    }

    .k-message-group.k-alt + .k-card-list,
    .k-message-group.k-alt + kendo-chat-message-attachments.k-card-list {
        align-self: flex-end;
    }

    .k-chat .k-card-deck {
        max-width: calc(100% + calc( #{$kendo-chat-message-list-padding-y} * 2 )); // prevent overflowing in the parent element
        box-sizing: border-box;
        margin-inline-start: calc( #{$kendo-chat-message-list-padding-y} * -1 );
        margin-inline-end: calc( #{$kendo-chat-message-list-padding-y} * -1 );
        padding: $kendo-chat-message-list-padding-y $kendo-chat-message-list-padding-y $kendo-chat-message-list-padding-x;
        overflow: hidden;
        overflow-x: auto;
        scroll-behavior: smooth;
    }
    .k-chat .k-card-deck .k-card {
        width: 200px;
    }

    .k-chat .k-card-deck-scrollwrap {
        margin-right: calc( #{$kendo-chat-message-list-padding-y} * -1 );
        margin-left: calc( #{$kendo-chat-message-list-padding-y} * -1 );
        padding-left: $kendo-chat-message-list-padding-y;
        padding-right: $kendo-chat-message-list-padding-y;
    }

    .k-chat .k-card-deck-scrollwrap > .k-card-deck {
        // hide scrollbar in chat
        $scrollbar-size: 20px;

        margin-bottom: -$scrollbar-size;
        padding-bottom: $scrollbar-size;
    }

    // Deck
    .k-chat .k-card-deck .k-card-wrap {
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        flex: 0 0 auto;
        padding-bottom: 5px; // accommodate for focused box shadow on OSX

        .k-card {
            flex: 0 0 auto;
        }

        &.k-selected {
            background: none;
        }
    }


    // Local variables
    $kendo-chat-typing-indicator-dot-size: 8px !default;
    $kendo-chat-typing-indicator-dot-spacing: 5px !default;

    // Typing indicator
    .k-typing-indicator {
        padding: 0;
        border-radius: 50px;
        display: inline-flex;
        flex-flow: row nowrap;

        span {
            width: $kendo-chat-typing-indicator-dot-size;
            height: $kendo-chat-typing-indicator-dot-size;
            border-radius: 50%;
            flex: 0 0 $kendo-chat-typing-indicator-dot-size;
            background-color: currentColor;
            opacity: .4;
            @for $i from 1 through 3 {
                &:nth-of-type(#{$i}) {
                    animation: 1s k-animation-blink infinite ($i * .3333s);
                }
            }
        }
        span + span {
            margin-left: $kendo-chat-typing-indicator-dot-spacing;
        }

        @keyframes k-animation-blink {
            50% {
                opacity: 1;
            }
        }

    }


    // Chat toolbar
    .k-chat-toolbar,
    .k-chat .k-toolbar-box {
        padding-block: $kendo-chat-toolbar-padding-y;
        padding-inline: $kendo-chat-toolbar-padding-x;
        width: 100%;
        border-width: 1px 0 0;
        box-sizing: border-box;
        flex: none;
        overflow: hidden;
        position: relative;
        gap: $kendo-toolbar-md-spacing;

        &::before {
            display: none;
        }

        .k-button-list {
            // Needed for native scrolling. Will uncoment when it's implemented.
            // margin-bottom: -20px;
            // padding-bottom: 20px;
            display: flex;
            flex-flow: row nowrap;
            overflow: hidden;
            // overflow-x: auto;
            scroll-behavior: smooth;
        }

        .k-button {
            flex: none;
        }


        .k-scroll-button {
            // IMPORTANT: if we don't set padding, the browser will set for us
            padding: 0 k-spacing(1);
            height: 100%;
            aspect-ratio: auto;
            position: absolute;
            z-index: 2;
            top: 0;

            .k-button-icon {
                min-width: auto;
                min-height: auto;
            }
        }
        .k-scroll-button-left {
            left: 0;
        }
        .k-scroll-button-right {
            right: 0;
        }


    }
}


@mixin kendo-chat--layout() {
    @include kendo-chat--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/chat/_theme.scss
@mixin kendo-chat--theme-base() {

    // Chat
    .k-chat {
        @include fill(
            $kendo-chat-text,
            $kendo-chat-bg,
            $kendo-chat-border
        );


        // Message meta
        .k-timestamp {
            @include fill(
                $kendo-chat-timestamp-text,
                $kendo-chat-timestamp-bg
            );
        }
        .k-author {
            font-weight: bold;
        }


        // Bubbles
        .k-chat-bubble {
            @include fill(
                $kendo-chat-bubble-text,
                $kendo-chat-bubble-bg,
                $kendo-chat-bubble-border
            );
            @include box-shadow( $kendo-chat-bubble-shadow );
            transition: $kendo-transition;
            order: -1;

            a { color: $kendo-link-text; }
            a:hover { color: $kendo-link-hover-text; }
        }
        .k-chat-bubble:hover {
            @include box-shadow( $kendo-chat-bubble-hover-shadow );
        }
        .k-selected .k-chat-bubble {
            @include box-shadow( $kendo-chat-bubble-selected-shadow );
        }

        .k-alt .k-chat-bubble {
            @include fill(
                $kendo-chat-alt-bubble-text,
                $kendo-chat-alt-bubble-bg,
                $kendo-chat-alt-bubble-border
            );
            @include box-shadow( $kendo-chat-alt-bubble-shadow );
        }
        .k-alt .k-chat-bubble:hover {
            @include box-shadow( $kendo-chat-alt-bubble-hover-shadow );
        }
        .k-alt .k-selected .k-chat-bubble {
            @include box-shadow( $kendo-chat-alt-bubble-selected-shadow );
        }


        // Quick replies
        .k-quick-reply {
            @include fill(
                $kendo-chat-quick-reply-text,
                $kendo-chat-quick-reply-bg,
                $kendo-chat-quick-reply-border
            );

            &:hover,
            &.k-hover {
                @include fill(
                    $kendo-chat-quick-reply-hover-text,
                    $kendo-chat-quick-reply-hover-bg,
                    $kendo-chat-quick-reply-hover-border
                );
            }

            &:focus,
            &.k-focus {
                @include focus-indicator( 0 0 $kendo-chat-quick-reply-shadow-blur $kendo-chat-quick-reply-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( 'primary' ) ( $kendo-chat-quick-reply-shadow-opacity * 100% ), transparent), rgba( $kendo-color-primary, $kendo-chat-quick-reply-shadow-opacity )), true, true );
            }
        }
    }


    // Toolbar
    .k-chat-toolbar,
    .k-chat .k-toolbar-box {
        @include fill(
            $kendo-chat-toolbar-text,
            $kendo-chat-toolbar-bg,
            $kendo-chat-toolbar-border
        );
    }

}


@mixin kendo-chat--theme() {
    @include kendo-chat--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-chat--styles() {
    @include module-render( "chat" ) {
        @include kendo-chat--layout();
        @include kendo-chat--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-chat--styles();
}

// #endregion
// #region @import "./mediaplayer/_index.scss"; -> scss/mediaplayer/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "media-player",
    dependencies: (
        "icon",
        "slider",
        "toolbar",
    )
);


// Dependencies
// #region @import "../slider/_index.scss"; -> scss/slider/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../toolbar/_index.scss"; -> scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/mediaplayer/_variables.scss
// Media player

/// The border width of the MediaPlayer.
/// @group mediaplayer
$kendo-media-player-border-width: 1px !default;
/// The font family of the MediaPlayer.
/// @group mediaplayer
$kendo-media-player-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the MediaPlayer.
/// @group mediaplayer
$kendo-media-player-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the MediaPlayer.
/// @group mediaplayer
$kendo-media-player-line-height: var( --kendo-line-height, normal ) !default;

/// The background color of the MediaPlayer.
/// @group mediaplayer
$kendo-media-player-bg: $kendo-component-bg !default;
/// The text color of the MediaPlayer.
/// @group mediaplayer
$kendo-media-player-text: $kendo-component-text !default;
/// The border color of the MediaPlayer.
/// @group mediaplayer
$kendo-media-player-border: $kendo-component-border !default;

/// The horizontal padding of the MediaPlayer title.
/// @group mediaplayer
$kendo-media-player-titlebar-padding-x: k-spacing(2) !default;
/// The vertical padding of the MediaPlayer title.
/// @group mediaplayer
$kendo-media-player-titlebar-padding-y: k-spacing(2) !default;
/// The background color of the MediaPlayer title.
/// @group mediaplayer
$kendo-media-player-titlebar-bg: null !default;
/// The text color of the MediaPlayer title.
/// @group mediaplayer
$kendo-media-player-titlebar-text: $kendo-media-player-bg !default;
/// The border color of the MediaPlayer title.
/// @group mediaplayer
$kendo-media-player-titlebar-border: null !default;
/// The gradient of the MediaPlayer title.
/// @group mediaplayer
$kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/mediaplayer/_layout.scss
@mixin kendo-media-player--layout-base() {

    // Base
    .k-mediaplayer {
        border-width: $kendo-media-player-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-media-player-font-family;
        font-size: $kendo-media-player-font-size;
        line-height: $kendo-media-player-line-height;
        display: block;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

        > iframe {
            width: 100%;
            height: 100%;
            border: 0;
            vertical-align: top;
        }
    }


    // Title bar
    .k-mediaplayer-titlebar {
        padding-block: $kendo-media-player-titlebar-padding-y;
        padding-inline: $kendo-media-player-titlebar-padding-x;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        right: 0;
    }


    // Toolbar
    .k-mediaplayer-toolbar-wrap {
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .k-mediaplayer-toolbar {
        border-width: 0;
        width: 100% !important; // stylelint-disable-line declaration-no-important
        box-shadow: none;


        .k-dropdown-list {
            width: auto;
        }
    }
    .k-mediaplayer-time-wrap {
        flex: 1;
    }
    .k-mediaplayer-volume-wrap {
        // TODO: When slider draghandle size is exposed, use it instead
        padding: 0 k-math-div( 14px, 2 );
        align-items: center;
    }
    .k-mediaplayer-volume {
        width: 100px;
    }


    // Seekbar
    .k-slider.k-mediaplayer-seekbar {
        width: 100%;
        position: absolute;
        z-index: 3;
        top: 0;
        left: 0;
        transform: translateY( -50% );
    }
    .k-mediaplayer-seekbar .k-slider-track {
        width: 100% !important; // stylelint-disable-line declaration-no-important
        border-radius: 0;
    }
    .k-mediaplayer-seekbar .k-slider-selection {
        border-radius: 0;
    }

    .k-mediaplayer-fullscreen {
        z-index: 10000;
        position: fixed;
        top: 0;
        left: 0;
        width: 100% !important; // stylelint-disable-line declaration-no-important
        height: 100% !important; // stylelint-disable-line declaration-no-important
    }

}


@mixin kendo-media-player--layout() {
    @include kendo-media-player--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/mediaplayer/_theme.scss
@mixin kendo-media-player--theme-base() {

    // Theme
    .k-mediaplayer {
        @include fill(
            $kendo-media-player-text,
            $kendo-media-player-bg,
            $kendo-media-player-border
        );
    }


    // Title bar
    .k-mediaplayer-titlebar {
        color: $kendo-media-player-titlebar-text;
        background-image: linear-gradient( $kendo-media-player-titlebar-gradient );
        text-shadow: 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-media-player-text, .5 ));
    }

}


@mixin kendo-media-player--theme() {
    @include kendo-media-player--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-media-player--styles() {
    @include module-render( "media-player" ) {
        @include kendo-media-player--layout();
        @include kendo-media-player--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-media-player--styles();
}

// #endregion
// #region @import "./timeline/_index.scss"; -> scss/timeline/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "timeline",
    dependencies: (
        "button",
        "card",
        "icon",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../card/_index.scss"; -> scss/card/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/timeline/_variables.scss
// Timeline

/// The horizontal spacing of the Timeline.
/// @group timeline
$kendo-timeline-spacing-x: k-spacing(10) !default;
/// The vertical spacing of the Timeline.
/// @group timeline
$kendo-timeline-spacing-y: k-spacing(10) !default;
/// The padding between the Timeline's track items.
/// @group timeline
$kendo-timeline-items-padding: k-spacing(4) !default;

/// The font family of the Timeline.
/// @group timeline
$kendo-timeline-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the Timeline.
/// @group timeline
$kendo-timeline-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Timeline.
/// @group timeline
$kendo-timeline-line-height: var( --kendo-line-height, normal ) !default;

/// The horizontal spacing of the mobile Timeline.
/// @group timeline
$kendo-timeline-mobile-spacing-x: k-spacing(4) !default;
/// The vertical spacing of the mobile Timeline.
/// @group timeline
$kendo-timeline-mobile-spacing-y: k-spacing(4) !default;

/// The width of the Timeline track arrow.
/// @group timeline
$kendo-timeline-track-arrow-width: 30px !default;
/// The height of the Timeline track arrow.
/// @group timeline
$kendo-timeline-track-arrow-height: 30px !default;

/// The background color of the disabled Timeline track arrow.
/// @group timeline
$kendo-timeline-track-arrow-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( base-subtle ) 60%, transparent), k-true-mix($kendo-button-bg, $kendo-body-bg, 65%)) !default;
/// The text color of the disabled Timeline track arrow.
/// @group timeline
$kendo-timeline-track-arrow-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-true-mix($kendo-button-text, $kendo-body-bg, 65%)) !default;
/// The border color of the disabled Timeline track arrow.
/// @group timeline
$kendo-timeline-track-arrow-disabled-border: if($kendo-enable-color-system, k-color( border ), k-true-mix(#000000, $kendo-body-bg, 4.8%)) !default;

/// The size of the Timeline track.
/// @group timeline
$kendo-timeline-track-size: 6px !default;
/// The bottom padding of the Timeline's track wrapper.
/// @group timeline
$kendo-timeline-track-wrap-padding-bottom: k-math-div( $kendo-timeline-track-size, 2 ) !default;
/// The border width of the Timeline track.
/// @group timeline
$kendo-timeline-track-border-width: 1px !default;
/// The bottom margin of the Timeline track.
/// @group timeline
$kendo-timeline-track-margin-bottom: k-spacing(4) !default;
/// The bottom offset of the Timeline track.
/// @group timeline
$kendo-timeline-track-bottom-calc: calc(#{k-math-div( $kendo-timeline-track-arrow-height, 2 )} + #{$kendo-timeline-track-wrap-padding-bottom}) !default;
/// The left offset of the Timeline track.
/// @group timeline
$kendo-timeline-track-start-calc: calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width}) !default;
/// The right offset of the Timeline track.
/// @group timeline
$kendo-timeline-track-end-calc: calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width}) !default;
/// The background color of the Timeline track.
/// @group timeline
$kendo-timeline-track-bg: $kendo-button-bg !default;
/// The border color of the Timeline track.
/// @group timeline
$kendo-timeline-track-border-color: $kendo-button-border !default;

/// The shadow of the Timeline's focused track items.
/// @group timeline
$kendo-timeline-track-item-focus-shadow: k-elevation(2) !default;

/// The offset of the Timeline track event.
/// @group timeline
$kendo-timeline-track-event-offset: 36px !default;

/// The horizontal padding of the Timeline flag.
/// @group timeline
$kendo-timeline-flag-padding-x: $kendo-button-padding-x !default;
/// The vertical padding of the Timeline flag.
/// @group timeline
$kendo-timeline-flag-padding-y: $kendo-button-padding-y !default;
/// The line height of the Timeline flag.
/// @group timeline
$kendo-timeline-flag-line-height: $kendo-button-line-height !default;
/// The minimum width of the Timeline flag.
/// @group timeline
$kendo-timeline-flag-min-width: 80px !default;
/// The maximum width of the Timeline flag.
/// @group timeline
$kendo-timeline-flag-max-width: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-spacing-x}) !default;
/// The maximum width of the mobile Timeline flag.
/// @group timeline
$kendo-timeline-mobile-flag-max-width: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x}) !default;
/// The minimum width of the horizontal Timeline flag.
/// @group timeline
$kendo-timeline-horizontal-flag-min-width: 60px !default;
/// The background color of the Timeline flag.
/// @group timeline
$kendo-timeline-flag-bg: $kendo-color-primary !default;
/// The text color of the Timeline flag.
/// @group timeline
$kendo-timeline-flag-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-timeline-flag-bg )) !default;

/// The width of the Timeline's flag callout.
/// @group timeline
$kendo-timeline-flag-callout-width: 10px !default;
/// The height of the Timeline's flag callout.
/// @group timeline
$kendo-timeline-flag-callout-height: 10px !default;

/// The bottom offset of the Timeline flag.
/// @group timeline
$kendo-timeline-flag-offset-bottom: 4px !default;
/// The bottom margin of the Timeline flag.
/// @group timeline
$kendo-timeline-flag-margin-bottom-calc: calc(#{$kendo-timeline-track-size} + 2 * #{$kendo-timeline-track-border-width} + #{$kendo-timeline-flag-offset-bottom} + #{$kendo-timeline-flag-callout-height}) !default;

/// The width of the Timeline date.
/// @group timeline
$kendo-timeline-date-width: 50px !default;
/// The bottom margin of the Timeline date.
/// @group timeline
$kendo-timeline-date-margin-bottom: k-spacing(2) !default;

/// The padding of the vertical Timeline.
/// @group timeline
$kendo-timeline-vertical-padding-calc: calc(#{$kendo-timeline-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2) !default;
/// The padding of the vertical Timeline date.
/// @group timeline
$kendo-timeline-vertical-padding-with-dates-calc: calc(#{$kendo-timeline-vertical-padding-calc} + #{$kendo-timeline-date-width}) !default;
/// The padding of the vertical mobile Timeline.
/// @group timeline
$kendo-timeline-mobile-vertical-padding-calc: calc(#{$kendo-timeline-mobile-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2) !default;
/// The padding of the vertical mobile Timeline date.
/// @group timeline
$kendo-timeline-mobile-vertical-padding-with-dates-calc: calc(#{$kendo-timeline-mobile-vertical-padding-calc} + #{$kendo-timeline-date-width}) !default;

/// The width of the Timeline circle.
/// @group timeline
$kendo-timeline-circle-width: 16px !default;
/// The height of the Timeline circle.
/// @group timeline
$kendo-timeline-circle-height: 16px !default;
/// The background color of the Timeline circle.
/// @group timeline
$kendo-timeline-circle-bg: $kendo-color-primary !default;

/// The horizontal padding of the Timeline collapse arrow.
/// @group timeline
$kendo-timeline-collapse-arrow-padding-x: $kendo-padding-md-x !default;

/// The width of the Timeline event.
/// @group timeline
$kendo-timeline-event-width: 400px !default;
/// The height of the Timeline event.
/// @group timeline
$kendo-timeline-event-height: 600px !default;
/// The minimum height of the Timeline event.
/// @group timeline
$kendo-timeline-event-min-height-calc: calc(2 * (#{$kendo-timeline-track-event-offset} - #{$kendo-card-border-width})) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/timeline/_layout.scss
@mixin kendo-timeline--layout-base() {

    .k-timeline {
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-timeline-font-family;
        font-size: $kendo-timeline-font-size;
        line-height: $kendo-timeline-line-height;
        display: block;
        background-color: transparent;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

        ul {
            margin: 0;
            padding: 0;

            li {
                list-style-type: none;
            }
        }

        .k-timeline-flag {
            display: inline-block;
            text-align: center;
            padding-block: $kendo-timeline-flag-padding-y;
            padding-inline: $kendo-timeline-flag-padding-x;
            border-radius: k-border-radius(md);
            line-height: $kendo-timeline-flag-line-height;
            min-width: $kendo-timeline-flag-min-width;
            max-width: $kendo-timeline-flag-max-width;
            position: relative;
            z-index: 1;
        }

        .k-timeline-circle {
            width: $kendo-timeline-circle-width;
            height: $kendo-timeline-circle-height;
            border-radius: 50%;
            flex-shrink: 0;
            position: relative;
            z-index: 1;
        }

        &.k-timeline-dates-hidden {
            .k-timeline-date {
                display: none;
            }
        }

        &.k-timeline-collapsible {
            .k-card-header {
                cursor: pointer;
            }

            .k-event-collapse {
                display: flex;
            }
        }
    }

    .k-timeline-card {
        .k-card {
            position: relative;
            overflow: visible;

            .k-card-header {
                overflow: visible;
                border-bottom: 0;
            }

            .k-card-header + .k-card-body {
                padding-top: 0;
            }

            .k-card-body {
                overflow-y: auto;

                // Scrollbar styles for Mozilla
                scrollbar-width: thin;

                // Scrollbar styles for Chrome, Safari and Opera
                &::-webkit-scrollbar {
                    width: 5px;
                }

                &::-webkit-scrollbar-thumb {
                    border-radius: k-border-radius(md);
                }
            }
        }

        .k-timeline-card-callout {
            &.k-callout-w,
            &.k-callout-e {
                top: $kendo-timeline-track-event-offset;
            }
        }
    }

    .k-timeline-vertical,
    .k-timeline-horizontal {
        padding-block: 0;
        padding-inline: $kendo-timeline-spacing-x;
        margin-block: $kendo-timeline-spacing-y;
        margin-inline: 0;
        width: 100%;
        position: relative;
        border: 0;
    }

    .k-timeline-vertical,
    .k-timeline-horizontal .k-timeline-track-wrap {
        &::after {
            content: "";
            position: absolute;
            top: 0;
            border-width: $kendo-timeline-track-border-width;
            border-style: solid;
        }
    }

    .k-timeline-vertical {
        padding-left: $kendo-timeline-vertical-padding-with-dates-calc;

        &.k-timeline-dates-hidden {
            padding-left: $kendo-timeline-vertical-padding-calc;
        }

        &::after {
            height: 100%;
            width: $kendo-timeline-track-size;
            transform: translateX(-50%);
            border-radius: k-border-radius(lg);
        }

        .k-timeline-flag-wrap {
            display: flex;
            align-items: center;

            &:first-child {
                padding-top: $kendo-timeline-spacing-y;
            }
        }

        .k-timeline-flag {
            transform: translateX(-50%);
        }

        .k-timeline-date-wrap {
            position: absolute;
            padding-right: $kendo-timeline-items-padding;
            margin-top: $kendo-timeline-track-event-offset;
            transform: translate(-100%, -50%);
            text-align: end;
        }

        .k-timeline-event {
            display: flex;
            align-items: flex-start;
            padding-block: $kendo-timeline-spacing-y;
            padding-inline: 0;
        }

        .k-timeline-card {
            padding-left: $kendo-timeline-items-padding;

            .k-card {
                margin-left: $kendo-timeline-items-padding;
                min-height: $kendo-timeline-event-min-height-calc;
                width: $kendo-timeline-event-width;
                max-width: 100%;

                .k-card-header {
                    border-radius: $kendo-card-border-radius; // In vertical collapsed mode there shold be a bottom border radius
                }

                .k-card-title {
                    display: flex;
                    justify-content: space-between;

                    .k-event-title {
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }

                }
            }

            .k-event-collapse {
                margin-block: calc( #{$kendo-icon-spacing} * -1 );
                margin-inline: 0;
                transform: rotate(90deg);
                transition: transform .2s ease-in-out;
            }

            &.k-collapsed {
                .k-card-body,
                .k-card-actions {
                    display: none;
                }

                .k-event-collapse {
                    transform: rotate(0deg);
                }
            }

        }

        .k-timeline-circle {
            margin-top: $kendo-timeline-track-event-offset;
            transform: translate(-50%, -50%);
            margin-right: - k-math-div( $kendo-timeline-circle-width, 2 );
        }

        &.k-timeline-alternating {
            padding-left: $kendo-timeline-spacing-x;

            &::after {
                left: 50%;
            }

            .k-timeline-flag-wrap {
                justify-content: center;
            }

            .k-timeline-flag {
                transform: translateX(0);
            }

            .k-timeline-event {
                justify-content: space-between;

                &.k-reverse {
                    flex-direction: row-reverse;

                    .k-timeline-date-wrap {
                        text-align: start;
                        padding-right: 0;
                        padding-left: $kendo-timeline-items-padding;
                    }

                    .k-timeline-card {
                        padding-left: 0;
                        padding-right: $kendo-timeline-items-padding;

                        .k-card {
                            margin-right: $kendo-timeline-items-padding;
                            margin-left: auto;
                        }
                    }
                }
            }

            .k-timeline-card,
            .k-timeline-date-wrap {
                flex-basis: 50%;
                min-width: 0;
            }

            .k-timeline-date-wrap {
                position: static;
                transform: translateY(-50%);
            }

            .k-timeline-circle {
                transform: translateY(-50%);
                margin-right: 0;
            }
        }
    }

    .k-timeline-horizontal {

        .k-timeline-track-item {
            flex: 1 0 20%; // 20% are default, this will be calculated when rendered
            display: flex;
            align-items: center;
            justify-content: flex-start;
            position: relative;
            flex-direction: column;

            &:hover {
                cursor: pointer;
            }

            &.k-timeline-flag-wrap:hover {
                cursor: default;
            }
        }

        .k-timeline-date-wrap {
            margin-top: auto;
            margin-bottom: $kendo-timeline-date-margin-bottom;
        }

        .k-timeline-card {
            height: 100%;
        }

        .k-card {
            max-height: 100%;
        }

        .k-timeline-events-list {
            overflow-x: hidden;
            padding-top: $kendo-timeline-track-margin-bottom;

            .k-timeline-scrollable-wrap {
                position: relative;
                height: $kendo-timeline-event-height;

                .k-timeline-event {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .k-timeline-track-wrap {
            position: relative;
            padding: k-math-div( $kendo-timeline-track-arrow-height, 2 ) 0;

            &::after {
                top: auto;
                bottom: $kendo-timeline-track-bottom-calc;
                left: $kendo-timeline-track-start-calc;
                right: $kendo-timeline-track-end-calc;
                transform: translateY(-50%);
                height: $kendo-timeline-track-size;
            }

            .k-timeline-track {
                overflow: hidden;
                margin-block: 0;
                margin-inline: $kendo-timeline-track-arrow-width;
                position: relative;
                z-index: 2;

                .k-timeline-scrollable-wrap {
                    transition: transform 1s ease-in-out;
                }
            }

            .k-timeline-flag {
                margin-bottom: $kendo-timeline-flag-margin-bottom-calc;
                position: relative;
                min-width: $kendo-timeline-horizontal-flag-min-width;

                &::after {
                    content: "";
                    width: $kendo-timeline-flag-callout-width;
                    height: $kendo-timeline-flag-callout-height;
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translate(-50%, 50%) rotate(45deg);
                }
            }
        }

        .k-timeline-scrollable-wrap {
            padding-bottom: $kendo-timeline-track-wrap-padding-bottom;
            display: flex;
            outline: 0;
        }
    }

    .k-timeline-arrow {
        width: $kendo-timeline-track-arrow-width;
        height: $kendo-timeline-track-arrow-height;
        border-radius: 50%;
        position: absolute;
        bottom: calc(#{$kendo-timeline-track-size} + #{$kendo-timeline-track-wrap-padding-bottom} + 2 * #{$kendo-timeline-track-border-width});
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .k-timeline-arrow-left {
        left: 0;
    }

    .k-timeline-arrow-right {
        right: 0;
    }

    .k-timeline-mobile {
        padding-block: 0;
        padding-inline: $kendo-timeline-mobile-spacing-x;
        margin-block: $kendo-timeline-mobile-spacing-y;
        margin-inline: 0;

        .k-timeline-flag {
            max-width: $kendo-timeline-mobile-flag-max-width;
        }

        &.k-timeline-horizontal {
            .k-timeline-flag-wrap {
                display: none;
            }
        }

        &.k-timeline-vertical {
            padding-left: $kendo-timeline-mobile-vertical-padding-with-dates-calc;

            &.k-timeline-dates-hidden {
                padding-left: $kendo-timeline-mobile-vertical-padding-calc;
            }

            &.k-timeline-alternating {
                padding-left: $kendo-timeline-mobile-spacing-x;
            }

            .k-timeline-card {
                width: 100%;


                .k-card {
                    width: auto;
                }
            }
        }
    }

}


@mixin kendo-timeline--layout() {
    @include kendo-timeline--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/timeline/_theme.scss
@mixin kendo-timeline--theme-base() {

    .k-timeline {
        .k-timeline-flag {
            color: $kendo-timeline-flag-text;
            background-color: $kendo-timeline-flag-bg;
        }

        .k-timeline-circle {
            background-color: $kendo-timeline-circle-bg;
        }

        .k-timeline-card {
            .k-card-header {
                background-color: $kendo-card-bg;
                color: $kendo-card-text;
            }

            .k-card-body {

                // Scrollbar styles for Mozilla
                scrollbar-color: $kendo-card-border $kendo-card-bg;

                // Scrollbar styles for Chrome, Safari and Opera
                &::-webkit-scrollbar-track {
                    background: $kendo-card-bg;
                }

                &::-webkit-scrollbar-thumb {
                    background: $kendo-card-border;
                }

                &::-webkit-scrollbar-thumb:hover {
                    background: $kendo-hover-border;
                }
            }
        }

        // TODO: remove
        .k-timeline-date {
            color: $kendo-body-text;
        }

        .k-timeline-arrow.k-disabled {
            opacity: 1; // The arrow button in disabled mode should have a solid background
            color: $kendo-timeline-track-arrow-disabled-text;
            background-color: $kendo-timeline-track-arrow-disabled-bg;
            border-color: $kendo-timeline-track-arrow-disabled-border;
        }
    }

    .k-timeline-vertical,
    .k-timeline-horizontal .k-timeline-track-wrap {
        &::after {
            background-color: $kendo-timeline-track-bg;
            border-color: $kendo-timeline-track-border-color;
        }
    }

    .k-timeline-horizontal .k-timeline-flag::after {
        background-color: $kendo-timeline-flag-bg;
    }

    .k-timeline-track-item.k-focus .k-timeline-circle {
        @include focus-indicator( $kendo-timeline-track-item-focus-shadow );
    }

}


@mixin kendo-timeline--theme() {
    @include kendo-timeline--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-timeline--styles() {
    @include module-render( "timeline" ) {
        @include kendo-timeline--layout();
        @include kendo-timeline--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-timeline--styles();
}

// #endregion
// #region @import "./pdf-viewer/_index.scss"; -> scss/pdf-viewer/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "pdf-viewer",
    dependencies: (
        "combobox",
        "dialog",
        "dropzone",
        "icon",
        "pager",
        "toolbar",
        "window",
    )
);


// Dependencies
// @import "../utils/_index.scss";
// #region @import "../combobox/_index.scss"; -> scss/combobox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../toolbar/_index.scss"; -> scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../dialog/_index.scss"; -> scss/dialog/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../pager/_index.scss"; -> scss/pager/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../dropzone/_index.scss"; -> scss/dropzone/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../window/_index.scss"; -> scss/window/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/pdf-viewer/_variables.scss
// PDFViewer

/// The border width of the PDFViewer.
/// @group pdf-viewer
$kendo-pdf-viewer-border-width: 1px !default;
/// The font family of the PDFViewer.
/// @group pdf-viewer
$kendo-pdf-viewer-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the PDFViewer.
/// @group pdf-viewer
$kendo-pdf-viewer-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the PDFViewer.
/// @group pdf-viewer
$kendo-pdf-viewer-line-height: var( --kendo-line-height, normal ) !default;

/// The background color of the PDFViewer.
/// @group pdf-viewer
$kendo-pdf-viewer-bg: $kendo-component-bg !default;
/// The text color of the PDFViewer.
/// @group pdf-viewer
$kendo-pdf-viewer-text: $kendo-component-text !default;
/// The border color of the PDFViewer.
/// @group pdf-viewer
$kendo-pdf-viewer-border: $kendo-component-border !default;

/// The background color of the PDFViewer Toolbar.
/// @group pdf-viewer
$kendo-pdf-viewer-toolbar-bg: null !default;
/// The text color of the PDFViewer Toolbar.
/// @group pdf-viewer
$kendo-pdf-viewer-toolbar-text: null !default;
/// The border color of the PDFViewer Toolbar.
/// @group pdf-viewer
$kendo-pdf-viewer-toolbar-border: null !default;
/// The gradient of the PDFViewer Toolbar.
/// @group pdf-viewer
$kendo-pdf-viewer-toolbar-gradient: null !default;

/// The background color of the PDFViewer canvas.
/// @group pdf-viewer
$kendo-pdf-viewer-canvas-bg: $kendo-app-bg !default;
/// The text color of the PDFViewer canvas.
/// @group pdf-viewer
$kendo-pdf-viewer-canvas-text: null !default;
/// The border color of the PDFViewer canvas.
/// @group pdf-viewer
$kendo-pdf-viewer-canvas-border: null !default;

/// The spacing of the PDFViewer page.
/// @group pdf-viewer
$kendo-pdf-viewer-page-spacing: k-spacing(7.5) !default;

/// The background color of the PDFViewer page.
/// @group pdf-viewer
$kendo-pdf-viewer-page-bg: white !default;
/// The text color of the PDFViewer page.
/// @group pdf-viewer
$kendo-pdf-viewer-page-text: $kendo-component-text !default;
/// The border color of the PDFViewer page.
/// @group pdf-viewer
$kendo-pdf-viewer-page-border: $kendo-component-border !default;
/// The shadow of the PDFViewer page.
/// @group pdf-viewer
$kendo-pdf-viewer-page-shadow: k-elevation(3) !default;

/// The horizontal padding of the PDFViewer search panel.
/// @group pdf-viewer
$kendo-pdf-viewer-search-panel-padding-x: $kendo-toolbar-md-padding-x !default;
/// The vertical padding of the PDFViewer search panel.
/// @group pdf-viewer
$kendo-pdf-viewer-search-panel-padding-y: calc( #{$kendo-toolbar-md-padding-x} * 2 ) !default;
/// The spacing of the PDFViewer search panel.
/// @group pdf-viewer
$kendo-pdf-viewer-search-panel-spacing: $kendo-toolbar-md-spacing !default;
/// The border width of the PDFViewer search panel.
/// @group pdf-viewer
$kendo-pdf-viewer-search-panel-border-width: 1px !default;
/// The border radius of the PDFViewer search panel.
/// @group pdf-viewer
$kendo-pdf-viewer-search-panel-border-radius: 0 !default;
/// The background color of the PDFViewer search panel.
/// @group pdf-viewer
$kendo-pdf-viewer-search-panel-bg: $kendo-component-bg !default;
/// The text color of the PDFViewer search panel.
/// @group pdf-viewer
$kendo-pdf-viewer-search-panel-text: $kendo-component-text !default;
/// The border color of the PDFViewer search panel.
/// @group pdf-viewer
$kendo-pdf-viewer-search-panel-border: $kendo-component-border !default;
/// The shadow of the PDFViewer search panel.
/// @group pdf-viewer
$kendo-pdf-viewer-search-panel-shadow: $kendo-window-shadow !default;
/// The spacing of the matches container in the PDFViewer search panel.
/// @group pdf-viewer
$kendo-pdf-viewer-search-panel-matches-spacing: $kendo-padding-sm-x !default;

/// The line height of the PDFViewer selection.
/// @group pdf-viewer
$kendo-pdf-viewer-selection-line-height: var( --kendo-line-height-sm, normal ) !default;

/// The background color of the PDFViewer highlight.
/// @group pdf-viewer
$kendo-pdf-viewer-search-highlight-bg: $kendo-body-text !default;
/// The background color of the PDFViewer highlight mark.
/// @group pdf-viewer
$kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;

/// The text color of the PDFViewer icon.
/// @group pdf-viewer
$kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/pdf-viewer/_layout.scss
@mixin kendo-pdf-viewer--layout-base() {

    // PDF Viewer
    .k-pdf-viewer {
        border-width: $kendo-pdf-viewer-border-width;
        border-style: solid;
        box-sizing: border-box;
        position: relative;
        outline: 0;
        font-family: $kendo-pdf-viewer-font-family;
        font-size: $kendo-pdf-viewer-font-size;
        line-height: $kendo-pdf-viewer-line-height;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        // Toolbar
        .k-toolbar {
            border-top-width: 0;
            border-right-width: 0;
            border-left-width: 0;
            border-color: inherit;
            flex: 0 0 auto;
            z-index: 2;
        }
        .k-toolbar .k-pager-wrap,
        .k-toolbar .k-pager {
            padding: 0;
            border-width: 0;
            color: inherit;
            background: none;
            overflow: visible;
        }


        // Canvas
        .k-canvas {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            outline: none;

            &.k-enable-text-select {
                user-select: text;
                cursor: text;
            }

            &.k-enable-panning {
                cursor: grab;

                span::selection {
                    background-color: transparent;
                }
            }
        }


        // Pages
        .k-pdf-viewer-pages {
            flex: 1 1 auto;
        }

        .k-page {
            position: relative;
            margin-block: $kendo-pdf-viewer-page-spacing;
            margin-inline: auto;

            canvas {
                direction: ltr;
            }

            .k-text-layer {
                position: absolute;
                top: 0;
                left: 0;
                opacity: .2;
                overflow: hidden;

                > span {
                    position: absolute;
                    line-height: $kendo-pdf-viewer-selection-line-height;
                    transform-origin: 0% 0%;
                    color: transparent;
                }

                .k-search-highlight-mark {
                    color: transparent;
                }
            }
        }

        .k-blank-page {
            margin: 0;
            display: flex;
            flex-flow: column nowrap;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
            background-color: inherit !important; // stylelint-disable-line declaration-no-important

            .k-upload,
            .k-dropzone,
            .k-dropzone-inner {
                border: 0;
                background: none;
            }
        }

    }

    // Search
    .k-pdf-viewer-canvas > .k-search-panel {
        width: max-content;
        margin-top: calc( (#{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} )) * -1 );
        padding-block: $kendo-pdf-viewer-search-panel-padding-y;
        padding-inline: $kendo-pdf-viewer-search-panel-padding-x;
        border-width: $kendo-pdf-viewer-search-panel-border-width;
        border-style: solid;
        border-radius: $kendo-pdf-viewer-search-panel-border-radius;
        display: flex;
        gap: $kendo-pdf-viewer-search-panel-spacing;
        flex-flow: row nowrap;
        flex: 0 0 auto;
        justify-content: flex-start;
        align-items: center;
        z-index: 10;
        cursor: default;

        .k-search-dialog-draghandle {
            cursor: move;
            margin-left: 0;
        }

        .k-textbox {
            width: 10em;
            flex: none;

            .k-button {
                border-width: 0;
            }
        }

        .k-search-matches {
            display: inline-flex;
            gap: $kendo-pdf-viewer-search-panel-matches-spacing;
        }
    }

}


@mixin kendo-pdf-viewer--layout() {
    @include kendo-pdf-viewer--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/pdf-viewer/_theme.scss
@mixin kendo-pdf-viewer--theme-base() {

    // PDF Viewer
    .k-pdf-viewer {
        @include fill(
            $kendo-pdf-viewer-text,
            $kendo-pdf-viewer-bg,
            $kendo-pdf-viewer-border
        );


        // Toolbar
        .k-toolbar {
            @include fill(
                $kendo-pdf-viewer-toolbar-text,
                $kendo-pdf-viewer-toolbar-bg,
                $kendo-pdf-viewer-toolbar-border,
                $kendo-pdf-viewer-toolbar-gradient
            );
        }


        // Canvas
        .k-canvas {
            @include fill(
                $kendo-pdf-viewer-canvas-text,
                $kendo-pdf-viewer-canvas-bg,
                $kendo-pdf-viewer-canvas-border
            );
        }


        // Page
        .k-page {
            @include fill(
                $kendo-pdf-viewer-page-text,
                $kendo-pdf-viewer-page-bg,
                $kendo-pdf-viewer-page-border
            );
            @include box-shadow( $kendo-pdf-viewer-page-shadow );
        }

        .k-blank-page > .k-icon {
            @include fill( $color: $kendo-pdf-viewer-icon-text );
        }


        // Search
        .k-search-highlight {
            background-color: $kendo-pdf-viewer-search-highlight-bg;
        }

        .k-search-highlight-mark {
            @include fill( $bg: $kendo-pdf-viewer-search-highlight-mark-bg );
        }

    }

    .k-pdf-viewer-canvas > .k-search-panel {
        @include fill(
            $kendo-pdf-viewer-search-panel-text,
            $kendo-pdf-viewer-search-panel-bg,
            $kendo-pdf-viewer-search-panel-border,
        );
        @include box-shadow( $kendo-pdf-viewer-search-panel-shadow );
    }

}


@mixin kendo-pdf-viewer--theme() {
    @include kendo-pdf-viewer--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-pdf-viewer--styles() {
    @include module-render( "pdf-viewer" ) {
        @include kendo-pdf-viewer--layout();
        @include kendo-pdf-viewer--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-pdf-viewer--styles();
}

// #endregion
// #region @import "./scroller/_index.scss"; -> scss/scroller/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "scroller",
    dependencies: (
        "icon",
    )
);


// Dependencies
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/scroller/_variables.scss
// Scroller

// #endregion
// #region @import "./_layout.scss"; -> scss/scroller/_layout.scss
@mixin kendo-scroller--layout-base() {

    // Layout
    .km-scrollview,
    .km-scroll-container {
        user-select: none;
        border-collapse: separate;
    }
    .km-scroll-wrapper {
        position: relative;
    }
    .km-scroll-header {
        position: absolute;
        z-index: 1001;
        width: 100%;
        top: 0;
        left: 0;
    }


    // Pull to refresh
    .km-scroller-pull {
        width: 100%;
        display: block;
        position: absolute;
        line-height: 3em;
        font-size: 1.4em;
        text-align: center;
        transform: translate3d(0, -3em, 0);
    }
    .km-scroller-pull .km-template {
        display: inline-block;
        min-width: 200px;
        text-align: start;
    }
    .km-load-more .km-icon,
    .km-widget .km-scroller-pull .km-icon {
        display: inline-block;
        height: 2rem;
        margin-right: 1rem;
        vertical-align: middle;
        width: 2rem;
        font-size: 2rem;
        transform: rotate(0deg);
        transition: transform 300ms linear;
    }
    .km-widget .km-scroller-release .km-icon {
        transform: rotate(180deg);
    }
    .km-widget .km-scroller-refresh .km-icon {
        transition: none;
    }


    // Scrollbar
    .km-touch-scrollbar {
        position: absolute;
        visibility: hidden;
        z-index: 200000;
        height: .4em;
        width: .4em;
        opacity: 0;
        transform-origin: 0 0;
        transition: opacity .3s linear;

        .k-map &,
        .k-diagram & {
            display: none;
        }
    }
    .km-vertical-scrollbar {
        height: 100%;
        right: 2px;
        top: 0;
    }
    .km-horizontal-scrollbar {
        width: 100%;
        left: 0;
        bottom: 2px;
    }

}


@mixin kendo-scroller--layout() {
    @include kendo-scroller--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/scroller/_theme.scss
@mixin kendo-scroller--theme-base() {

    .km-touch-scrollbar {
        background-color: #333333;
    }

}


@mixin kendo-scroller--theme() {
    @include kendo-scroller--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-scroller--styles() {
    @include module-render( "scroller" ) {
        @include kendo-scroller--layout();
        @include kendo-scroller--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-scroller--styles();
}

// #endregion
// #region @import "./scrollview/_index.scss"; -> scss/scrollview/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "scrollview",
    dependencies: (
        "button",
        "icon",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/scrollview/_variables.scss
// ScrollView

/// The width of the border around the ScrollView.
/// @group scrollview
$kendo-scrollview-border-width: 1px !default;
/// The font family of the ScrollView.
/// @group scrollview
$kendo-scrollview-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the ScrollView.
/// @group scrollview
$kendo-scrollview-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the ScrollView.
/// @group scrollview
$kendo-scrollview-line-height: var( --kendo-line-height, normal ) !default;

/// The text color of the ScrollView.
/// @group scrollview
$kendo-scrollview-text: $kendo-component-text !default;
/// The background color of the ScrollView.
/// @group scrollview
$kendo-scrollview-bg: $kendo-component-bg !default;
/// The border color of the ScrollView.
/// @group scrollview
$kendo-scrollview-border: $kendo-component-border !default;

/// The size of the ScrollView page button.
/// @group scrollview
$kendo-scrollview-pagebutton-size: 10px !default;
/// The background color of the ScrollView page button.
/// @group scrollview
$kendo-scrollview-pagebutton-bg: $kendo-button-bg !default;
/// The border color of the ScrollView page button.
/// @group scrollview
$kendo-scrollview-pagebutton-border: $kendo-button-border !default;
/// The primary background color of the ScrollView page button.
/// @group scrollview
$kendo-scrollview-pagebutton-primary-bg: $kendo-color-primary !default;
/// The primary border color of the ScrollView page button.
/// @group scrollview
$kendo-scrollview-pagebutton-primary-border: $kendo-color-primary !default;
/// The box shadow of the ScrollView page button.
/// @group scrollview
$kendo-scrollview-pagebutton-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;

/// The offset of the ScrollView pager.
/// @group scrollview
$kendo-scrollview-pager-offset: 0 !default;
/// The spacing between the ScrollView pager items.
/// @group scrollview
$kendo-scrollview-pager-item-spacing: k-spacing(5) !default;
/// The border width of the ScrollView pager items.
/// @group scrollview
$kendo-scrollview-pager-item-border-width: 0px !default;
/// The height of the ScrollView pager.
/// @group scrollview
$kendo-scrollview-pager-height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + calc( #{$kendo-scrollview-pager-item-spacing} * 2 ) ) !default;

/// The text color of the highlight over the tapped ScrollView navigation arrows.
/// @group scrollview
$kendo-scrollview-arrow-tap-highlight-color: $kendo-color-rgba-transparent !default;
/// The color of the ScrollView navigation arrows.
/// @group scrollview
$kendo-scrollview-navigation-color: white !default;
/// The box shadow of the ScrollView navigation arrows.
/// @group scrollview
$kendo-scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default;
/// The background color of the ScrollView navigation.
/// @group scrollview
$kendo-scrollview-navigation-bg: rgba(0, 0, 0, 0) !default;
/// The opacity of the ScrollView navigation.
/// @group scrollview
$kendo-scrollview-navigation-default-opacity: .7 !default;
/// The hover opacity of the ScrollView navigation.
/// @group scrollview
$kendo-scrollview-navigation-hover-opacity: 1 !default;
/// The hover background color of the ScrollView navigation arrows.
/// @group scrollview
$kendo-scrollview-navigation-hover-span-bg: null !default;

/// The background color of the ScrollView pager in light mode.
/// @group scrollview
$kendo-scrollview-light-bg: rgba(255, 255, 255, .4) !default;
/// The background color of the ScrollView pager in dark mode.
/// @group scrollview
$kendo-scrollview-dark-bg: rgba(0, 0, 0, .4) !default;

/// The duration of the ScrollView transition.
/// @group scrollview
$kendo-scrollview-transition-duration: .3s !default;
/// The timing function of the ScrollView transition.
/// @group scrollview
$kendo-scrollview-transition-timing-function: ease-in-out !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/scrollview/_layout.scss
@mixin kendo-scrollview--layout-base() {

    .k-scrollview {
        border-width: $kendo-scrollview-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-scrollview-font-family;
        font-size: $kendo-scrollview-font-size;
        line-height: $kendo-scrollview-line-height;
        position: relative;
        overflow: hidden;
        display: block;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
    }

    .k-scrollview-wrap {
        position: absolute;
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        cursor: default;
        white-space: nowrap;

        > .k-scrollview-view {
            display: inline-block;
            overflow: hidden;
            flex-shrink: 0;
        }

        img {
            user-select: none;
        }

    }

    .k-scrollview-wrap.k-scrollview-animate {
        width: calc( var(--kendo-scrollview-views, 1) * 100% );
        transition-duration: $kendo-scrollview-transition-duration;
        transition-timing-function: $kendo-scrollview-transition-timing-function;
        transform: translateX( calc( -100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );

        [dir="rtl"] &,
        .k-rtl & {
            transform: translateX( calc( 100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
        }

        .k-scrollview-view {
            width: calc( 100% / var(--kendo-scrollview-views, 1) );
            flex: 0 0 calc( 100% / var(--kendo-scrollview-views, 1) );
        }

    }

    .k-scrollview-nav-wrap {
        padding: 0;
        margin: 0;
        position: absolute;
        left: 0;
        right: 0;
        bottom: $kendo-scrollview-pager-offset;
        height: $kendo-scrollview-pager-height;
        text-align: center;
    }

    kendo-scrollview.k-scrollview kendo-scrollview-pager {
        pointer-events: none;
    }

    kendo-scrollview.k-scrollview .k-scrollview-nav {
        pointer-events: initial;
    }

    .k-scrollview-nav {
        margin: 0;
        padding: $kendo-scrollview-pager-item-spacing;
        max-width: 100%;
        box-sizing: border-box;
        line-height: 0;
        text-align: center;
        white-space: nowrap;
        list-style: none;
        display: inline-flex;
        align-items: center;
        overflow-x: scroll;
        overflow-y: hidden;
        pointer-events: initial;

        &:focus {
            outline: none;
        }
    }

    .k-scrollview-nav > .k-link {
        margin-block: 0;
        margin-inline: calc( #{$kendo-scrollview-pager-item-spacing} / 2 );
        padding: 0;
        width: $kendo-scrollview-pagebutton-size;
        height: $kendo-scrollview-pagebutton-size;
        border-width: $kendo-scrollview-pager-item-border-width;
        border-style: solid;
        border-radius: 50%;
        box-sizing: content-box;
        display: inline-block;
        position: relative;
        flex: 0 0 auto;
        cursor: pointer;
        pointer-events: all;
        vertical-align: top;

        &::before {
            content: "";
            width: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-spacing} );
            height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-spacing} );
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: initial;
            border-radius: 0;
        }
    }

    .k-scrollview-next,
    .k-scrollview-prev {
        display: table;
        position: absolute;
        padding: 0;
        height: 60%;
        top: 20%;
        text-decoration: none;
        user-select: none;
        cursor: pointer;

        .k-icon {
            display: table-cell;
            overflow: visible;
            margin: 0;
            padding: 0;
            vertical-align: middle;
            font-weight: normal;
        }
    }

    .k-scrollview-prev {
        inset-inline-start: 0;
    }

    .k-scrollview-next {
        inset-inline-end: 0;
    }


    .k-scrollview-animation {
        transition-duration: .3s;
        transition-timing-function: ease-in-out;
    }
}


@mixin kendo-scrollview--layout() {
    @include kendo-scrollview--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/scrollview/_theme.scss
@mixin kendo-scrollview--theme-base() {

   .k-scrollview {
        @include fill(
            $kendo-scrollview-text,
            $kendo-scrollview-bg,
            $kendo-scrollview-border
        );

        &.k-scrollview-dark {
            kendo-scrollview-pager,
            .k-scrollview-nav-wrap {
                background-color: $kendo-scrollview-dark-bg;
            }
            .k-scrollview-next,
            .k-scrollview-prev {
                color: $kendo-scrollview-dark-bg;

            }
        }

        &.k-scrollview-light {
            kendo-scrollview-pager,
            .k-scrollview-nav-wrap {
                background-color: $kendo-scrollview-light-bg;
            }

        }
    }

    .k-scrollview:focus,
    .k-scrollview-wrap:focus {
        outline: none;

    }
    .k-scrollview-elements {
        color: $kendo-scrollview-navigation-color;
    }

    .k-scrollview-next,
    .k-scrollview-prev {
        color: $kendo-scrollview-navigation-color;
        background-color: $kendo-scrollview-navigation-bg;
        text-shadow: $kendo-scrollview-navigation-icon-shadow;
        opacity: $kendo-scrollview-navigation-default-opacity;
        outline-width: 0;
        -webkit-tap-highlight-color: $kendo-scrollview-arrow-tap-highlight-color;

        &:focus,
        &.k-focus {
            color: $kendo-scrollview-navigation-color;
            opacity: $kendo-scrollview-navigation-hover-opacity;

            .k-icon::before {
                @include focus-indicator( $kendo-scrollview-pagebutton-shadow );
            }
        }

        &:hover,
        &.k-hover {
            color: $kendo-scrollview-navigation-color;
            opacity: $kendo-scrollview-navigation-hover-opacity;

        }
    }

    // refactor when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done
    .k-scrollview-nav > .k-link {
        background: $kendo-scrollview-pagebutton-bg;
        border: $kendo-scrollview-pagebutton-border;

        &.k-primary {
            background: $kendo-scrollview-pagebutton-primary-bg;
            border: $kendo-scrollview-pagebutton-primary-border;
        }

        &:focus,
        &.k-focus {
            @include focus-indicator( $kendo-scrollview-pagebutton-shadow );
        }

        &:hover,
        &.k-hover {
            box-shadow: $kendo-scrollview-pagebutton-shadow;
        }
    }

}


@mixin kendo-scrollview--theme() {
    @include kendo-scrollview--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-scrollview--styles() {
    @include module-render( "scrollview" ) {
        @include kendo-scrollview--layout();
        @include kendo-scrollview--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-scrollview--styles();
}

// #endregion
// #region @import "./prompt/_index.scss"; -> scss/prompt/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "prompt",
    dependencies: ()
);

// Component
// #region @import "./_variables.scss"; -> scss/prompt/_variables.scss
// AIPrompt

/// The text color of the AIPrompt.
/// @group prompt
$kendo-prompt-text: $kendo-component-text !default;
/// The background color of the AIPrompt.
/// @group prompt
$kendo-prompt-bg: $kendo-component-bg !default;
/// The border color of the AIPrompt.
/// @group prompt
$kendo-prompt-border: $kendo-component-border !default;

/// The text color of the AIPrompt header.
/// @group prompt
$kendo-prompt-header-text: $kendo-component-header-text !default;
/// The background color of the AIPrompt header.
/// @group prompt
$kendo-prompt-header-bg: $kendo-component-bg !default;
/// The border color of the AIPrompt header.
/// @group prompt
$kendo-prompt-header-border: $kendo-component-header-border !default;

/// The vertical padding of the AIPrompt content.
/// @group prompt
$kendo-prompt-content-padding-y: k-spacing(4) !default;
/// The horizontal padding of the AIPrompt content.
/// @group prompt
$kendo-prompt-content-padding-x: k-spacing(4) !default;
/// The spacing between the items of the AIPrompt content.
/// @group prompt
$kendo-prompt-content-spacing: k-spacing(4) !default;
/// The text color of the AIPrompt content.
/// @group prompt
$kendo-prompt-content-text: $kendo-component-header-text !default;
/// The background color of the AIPrompt content.
/// @group prompt
$kendo-prompt-content-bg: $kendo-component-header-bg !default;
/// The text border of the AIPrompt content.
/// @group prompt
$kendo-prompt-content-border: $kendo-component-header-border !default;

/// The spacing between the items of the AIPrompt content expander.
/// @group prompt
$kendo-prompt-expander-spacing: k-spacing(2) !default;

/// The vertical padding of the AIPrompt suggestion container.
/// @group prompt
$kendo-prompt-suggestion-padding-y: k-spacing(2) !default;
/// The horizontal padding of the AIPrompt suggestion container.
/// @group prompt
$kendo-prompt-suggestion-padding-x: k-spacing(2) !default;
/// The border radius of the AIPrompt suggestion container.
/// @group prompt
$kendo-prompt-suggestion-border-radius: k-border-radius(md) !default;
/// The text color of the AIPrompt suggestion container.
/// @group prompt
$kendo-prompt-suggestion-text: $kendo-component-text !default;
/// The background color of the AIPrompt suggestion container.
/// @group prompt
$kendo-prompt-suggestion-bg: $kendo-body-bg !default;
/// The border color of the AIPrompt suggestion container.
/// @group prompt
$kendo-prompt-suggestion-border: $kendo-component-border !default;
/// The elevation of the AIPrompt suggestion container.
/// @group prompt
$kendo-prompt-suggestion-shadow: k-elevation(1) !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/prompt/_layout.scss
@mixin kendo-prompt--layout-base() {

    // Prompt
    .k-prompt {
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }

    // Content
    .k-prompt-content {
        padding-block: $kendo-prompt-content-padding-y;
        padding-inline: $kendo-prompt-content-padding-x;
        display: flex;
        flex-flow: column nowrap;
        flex: 1 1 auto;
        gap: $kendo-prompt-content-spacing;
        overflow: auto;
    }

    .k-prompt-view {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: $kendo-prompt-content-spacing;
    }

    // Prompt Expander
    .k-prompt-expander {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: flex-start;
        gap: $kendo-prompt-expander-spacing;
    }

    .k-prompt-expander-content {
        display: flex;
        flex-flow: column;
        flex: 0 0 auto;
        gap: $kendo-prompt-expander-spacing;
        align-self: stretch;
    }

    .k-prompt-suggestion {
        border-width: 1px;
        border-style: solid;
        border-radius: $kendo-prompt-suggestion-border-radius;
        padding-block: $kendo-prompt-suggestion-padding-y;
        padding-inline: $kendo-prompt-suggestion-padding-x;
        cursor: pointer;
    }

    .k-prompt-setting {
        display: flex;
        flex-direction: column;
    }

    // Actions
    .k-prompt-actions.k-actions {
        margin: 0;
    }

}


@mixin kendo-prompt--layout() {
    @include kendo-prompt--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/prompt/_theme.scss
@mixin kendo-prompt--theme-base() {

    .k-prompt {
        @include fill(
            $kendo-prompt-text,
            $kendo-prompt-bg,
            $kendo-prompt-border
        );
    }

    .k-prompt-header {
        @include fill(
            $kendo-prompt-header-text,
            $kendo-prompt-header-bg,
            $kendo-prompt-header-border
        );
    }

    .k-prompt-content {
        @include fill(
            $kendo-prompt-content-text,
            $kendo-prompt-content-bg,
            $kendo-prompt-content-border
        );
    }

    .k-prompt-suggestion {
        @include fill(
            $kendo-prompt-suggestion-text,
            $kendo-prompt-suggestion-bg,
            $kendo-prompt-suggestion-border
        );
        @include box-shadow( $kendo-prompt-suggestion-shadow );
    }

}


@mixin kendo-prompt--theme() {
    @include kendo-prompt--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-prompt--styles() {
    @include module-render( "prompt" ) {
        @include kendo-prompt--layout();
        @include kendo-prompt--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-prompt--styles();
}

// #endregion


// Dataviz
// #region @import "./dataviz/_index.scss"; -> scss/dataviz/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "./map/_index.scss"; -> scss/map/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "map",
    dependencies: (
        "button",
        "scroller",
        "icon",
        // "utils/layout/position",
    )
);


// Dependencies
// @import "../utils/_position.scss";
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../scroller/_index.scss"; -> scss/scroller/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/map/_variables.scss
// #region @import "./images/markers.scss"; -> scss/map/images/markers.scss
@include exports("markers.png") {
    @include register-data-uri("markers.png", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAABQCAYAAAAKlxWDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA35JREFUeNrsWF1IVEEUPu7amhKUmqUUkhEYYn9PamgbROKTEERB1HNP0pMvJUVhZQhCEEQPQiAIkiQIQShEZmg99SdLgiRJpbGmGIu/aZ2zzJXrvWf2zty7PgTzwQd3Z86Z796z58wMJ+PruXxQwCHkGeRpZDbyqBh/j1xA9iN7kJ+8FsrwECSRu8hSUMMosgnZLTMIScaLkUPIpxpiIGyfCN9iVcEo8h2yCvyjSqwR9RIkgz5kHgRHnlhrg2im7blEhCPCeW89fBJyKuohsv8IRPaV46uGYfnLhyTn3/bC4seXnFtErFmBHHcmzSCy2umRWVgC+ZfvQ1bZ8ZSfsxQbgl+PrsCfqXFu+jWyxh7Ss5xY1sFKKLzd5ymWtEWbpC36MKgWGuuCzdyXFTR2QGhbrvKfRrbkQ74Mmi3BKJf6FEYdMbso+UpKJkpJU+dKkPIaNoyrM5Mw23Edlj6/WQ957qVbEM4rcoWX1lgcGXQuURfi6o2y0YmVH2Mw2XgC5od6ksJEeqaxlW+joLIGaZFgGVcCTsx13YG1xKxrnMZoTmUN0iLB7c7R8M49LktJnSWxwMxxa5AWu5f+XV6EzQIJznHJwSWSDNlM+Fanv3OmcyQY43YNVyzOX2XLhMZoTvEviJHgsHOU9kYntuwthaLWV5BTWQ/hHbuSpGcaozmVNUiL9lIqfNfr7L7Rq7SlyfbVnzfZsjhFXzggTuoNoI14bf63thj5kK/kNvDCytIm5yzt+vF7F9jak4qhbbz1ouzEaLJv3t3iCNkYGtzCpq7Vrm9lKcNo2TIJJ/Kk23keHhB3kQLPAxhJUDiACXEkJcMYd2uzrhiRNNX5MrJW5Al7pxkQBjNpEJtxislubWRwjKtPDQyLNQZU76UTIu4NPsQahO+EzkXYwgNu60uBmPAB3Zu3HS0agp62KoJdsvAwf0NXOgQptdsU7NqEbWBBQrso4FQl0K56AKsggXzokVyJdAqmWjThlZl+BeOSsD32CLdvQSsxVu1XF2Sr7iVKB5T6nbbfnYol41vQWdwtus6ZPgRp+3pme950QV9fpito+jSmT2P6NKZP479PE9Lp06jC6tMwUO/T6CJwn0YXgfs0uvj/+jS6CNyn0UXgPo0uZH0aEnzueruRwUBfSb5Mr5TQb/o0pk9j+jSmT2P6NKZPY/o0pk9j+jQ+8E+AAQDpbNHEyW7DTAAAAABJRU5ErkJggg==");
}

// #endregion


// Map
/// The border width of the Map.
/// @group map
$kendo-map-border-width: 0px !default;

/// The font size of the Map.
/// @group map
$kendo-map-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the Map.
/// @group map
$kendo-map-line-height: var( --kendo-line-height, normal ) !default;
/// The font family of the Map.
/// @group map
$kendo-map-font-family: var( --kendo-font-family, inherit ) !default;

/// The background color of the Map.
/// @group map
$kendo-map-bg: $kendo-component-bg !default;
/// The text color of the Map.
/// @group map
$kendo-map-text: $kendo-component-text !default;
/// The border color of the Map.
/// @group map
$kendo-map-border: $kendo-component-border !default;

/// The margin of the Map navigator.
/// @group map
$kendo-map-navigator-margin: k-spacing(4) !default;
/// The padding of the Map navigator.
/// @group map
$kendo-map-navigator-padding: k-spacing(0.5) !default;
/// The width of the Map navigator.
/// @group map
$kendo-map-navigator-width: calc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) ) !default;
/// The height of the Map navigator.
/// @group map
$kendo-map-navigator-height: $kendo-map-navigator-width !default;
/// The border width of the Map navigator.
/// @group map
$kendo-map-navigator-border-width: 1px !default;

/// The margin of the Map zoom control.
/// @group map
$kendo-map-zoom-control-margin: k-spacing(4) !default;
/// The horizontal padding of the Map zoom control.
/// @group map
$kendo-map-zoom-control-button-padding-x: $kendo-button-padding-y !default;
/// The vertical padding of the Map zoom control.
/// @group map
$kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding-x !default;

/// The horizontal padding of the Map attribution.
/// @group map
$kendo-map-attribution-padding-x: $kendo-padding-sm-x !default;
/// The vertical padding of the Map attribution.
/// @group map
$kendo-map-attribution-padding-y: $kendo-padding-sm-y !default;
/// The font size of the Map attribution.
/// @group map
$kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75) !default;
/// The background color of the Map attribution.
/// @group map
$kendo-map-attribution-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 )) !default;

/// The fill color of the Map marker.
/// @group map
$kendo-map-marker-fill: $kendo-color-primary !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/map/_layout.scss
@mixin kendo-map--layout-base() {

    // Map
    .k-map {
        height: 600px;
        box-sizing: border-box;
        border-width: $kendo-map-border-width;
        border-style: solid;
        font-size: $kendo-map-font-size;
        line-height: $kendo-map-line-height;
        font-family: $kendo-map-font-family;

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


        // Scroll
        .km-scroll-wrapper {
            width: 100%;
            height: 100%;
            user-select: none;
            position: absolute;
        }
        .km-scroll-container { height: 100%; }
        .k-touch-scrollbar { display: none; }

        // Layers
        .k-layer {
            position: absolute;
            left: 0;
            top: 0;
        }

        // Marker
        .k-marker {
            transform: translate(-50%, -100%);
            cursor: pointer;
            position: absolute;
            overflow: visible;
        }


        // Attribution
        .k-attribution {
            padding-block: $kendo-map-attribution-padding-y;
            padding-inline: $kendo-map-attribution-padding-x;
            border-width: 0;
            font-size: $kendo-map-attribution-font-size;
            z-index: 1000;
        }


    }


    // Controls
    .k-map-controls {
        position: absolute;
        display: flex;
        align-items: center;
    }


    // Navigator
    .k-navigator {
        margin: $kendo-map-navigator-margin;
        width: $kendo-map-navigator-width;
        height: $kendo-map-navigator-width;
        border-width: $kendo-map-navigator-border-width;
        border-style: solid;
        box-sizing: border-box;
        border-radius: 50%;
        position: relative;

        .k-pdf-export & { display: none; }


        // Buttons
        .k-button {
            padding: 0;
            width: auto;
            height: auto;
            line-height: 1;
            box-shadow: none;
            position: absolute;

            .k-icon {
                min-width: 0;
                min-height: 0;
            }
        }
        .k-navigator-n,
        .k-navigator-up {
            transform: translateX(-50%);
            top: $kendo-map-navigator-padding;
            left: 50%;
        }
        .k-navigator-e,
        .k-navigator-right {
            transform: translateY(-50%);
            right: $kendo-map-navigator-padding;
            top: 50%;
        }
        .k-navigator-s,
        .k-navigator-down {
            transform: translateX(-50%);
            bottom: $kendo-map-navigator-padding;
            left: 50%;
        }
        .k-navigator-w,
        .k-navigator-left {
            transform: translateY(-50%);
            left: $kendo-map-navigator-padding;
            top: 50%;
        }
    }


    // Zoom control
    .k-zoom-control {
        margin: k-spacing(4);
        border: 0;
        background: none;
        display: flex;

        .k-pdf-export & { display: none; }
    }

}


@mixin kendo-map--layout() {
    @include kendo-map--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/map/_theme.scss
@mixin kendo-map--theme-base() {

    // Map theme
    .k-map {
        @include fill(
            $kendo-map-text,
            $kendo-map-bg,
            $kendo-map-border
        );

        .k-navigator {
            @include fill(
                $kendo-button-text,
                $kendo-button-bg,
                $kendo-button-border,
                $kendo-button-gradient
            );
            @include box-shadow( $kendo-button-shadow );
        }

        .k-marker {
            color: $kendo-map-marker-fill;
        }

        .k-attribution {
            background-color: $kendo-map-attribution-bg;
        }
    }

}


@mixin kendo-map--theme() {
    @include kendo-map--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-map--styles() {
    @include module-render( "map" ) {
        @include kendo-map--layout();
        @include kendo-map--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-map--styles();
}

// #endregion
// #region @import "./orgchart/_index.scss"; -> scss/orgchart/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "orgchart",
    dependencies: (
        "card",
        "dropdown-list",
        "form",
        "icon",
        "menu",
        "textbox",
        "upload",
        "window",
    )
);


// Dependencies
// @import "../utils/_index.scss";
// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../forms/_index.scss"; -> scss/forms/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../textbox/_index.scss"; -> scss/textbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../upload/_index.scss"; -> scss/upload/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../menu/_index.scss"; -> scss/menu/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../card/_index.scss"; -> scss/card/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../window/_index.scss"; -> scss/window/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/orgchart/_variables.scss
// Orgchart

/// The spacing index of the OrgChart.
/// @group orgchart
$kendo-orgchart-spacer: k-spacing(6) !default;
/// The vertical padding of the OrgChart.
/// @group orgchart
$kendo-orgchart-padding-y: $kendo-orgchart-spacer !default;
/// The horizontal padding of the OrgChart.
/// @group orgchart
$kendo-orgchart-padding-x: $kendo-orgchart-padding-y !default;
/// The font family of the OrgChart.
/// @group orgchart
$kendo-orgchart-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the OrgChart.
/// @group orgchart
$kendo-orgchart-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the OrgChart.
/// @group orgchart
$kendo-orgchart-line-height: var( --kendo-line-height, normal ) !default;
/// The background color of the OrgChart.
/// @group orgchart
$kendo-orgchart-bg: $kendo-component-bg !default;
/// The text color of the OrgChart.
/// @group orgchart
$kendo-orgchart-text: $kendo-component-text !default;
/// The border color of the OrgChart.
/// @group orgchart
$kendo-orgchart-border: $kendo-component-border !default;

/// The spacing of the OrgChart node.
/// @group orgchart
$kendo-orgchart-node-gap: $kendo-orgchart-spacer !default;
/// The spacing of the OrgChart group.
/// @group orgchart
$kendo-orgchart-group-gap: $kendo-orgchart-spacer !default;
/// The spacing of the OrgChart node container.
/// @group orgchart
$kendo-orgchart-node-container-gap: $kendo-orgchart-spacer !default;

/// The vertical padding of the OrgChart node group.
/// @group orgchart
$kendo-orgchart-node-group-padding-y: $kendo-orgchart-spacer !default;
/// The horizontal padding of the OrgChart node group.
/// @group orgchart
$kendo-orgchart-node-group-padding-x: $kendo-orgchart-node-group-padding-y !default;
/// The border width of the OrgChart node group.
/// @group orgchart
$kendo-orgchart-node-group-border-width: 1px !default;
/// The border radius of the OrgChart node group.
/// @group orgchart
$kendo-orgchart-node-group-border-radius: k-border-radius(md) !default;
/// The background color of the OrgChart node group.
/// @group orgchart
$kendo-orgchart-node-group-bg: $kendo-base-bg !default;
/// The text color of the OrgChart node group.
/// @group orgchart
$kendo-orgchart-node-group-text: $kendo-base-text !default;
/// The border color of the OrgChart node group.
/// @group orgchart
$kendo-orgchart-node-group-border: $kendo-base-border !default;

/// The border color of the focused OrgChart node group.
/// @group orgchart
$kendo-orgchart-node-group-focus-border: $kendo-card-focus-border !default;
/// The shadow of the focused OrgChart node group.
/// @group orgchart
$kendo-orgchart-node-group-focus-shadow: k-elevation(1) !default;

/// The font size of the OrgChart node group title.
/// @group orgchart
$kendo-orgchart-node-group-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
/// The bottom margin of the OrgChart node group title.
/// @group orgchart
$kendo-orgchart-node-group-title-margin-bottom: calc( #{$kendo-orgchart-spacer} / 3 ) !default;
/// The line height of the OrgChart node group title.
/// @group orgchart
$kendo-orgchart-node-group-title-line-height: var( --kendo-line-height-sm, normal ) !default;

/// The font size of the OrgChart node group subtitle.
/// @group orgchart
$kendo-orgchart-node-group-subtitle-font-size: var( --kendo-font-size, inherit ) !default;
/// The bottom margin of the OrgChart node group subtitle.
/// @group orgchart
$kendo-orgchart-node-group-subtitle-margin-bottom: $kendo-orgchart-spacer !default;
/// The line height of the OrgChart node group subtitle.
/// @group orgchart
$kendo-orgchart-node-group-subtitle-text: $kendo-subtle-text !default;

/// The width of the OrgChart Card.
/// @group orgchart
$kendo-orgchart-card-width: 300px !default;
/// The vertical padding of the OrgChart Card.
/// @group orgchart
$kendo-orgchart-card-padding-y: $kendo-card-padding-y !default;
/// The horizontal padding of the OrgChart Card.
/// @group orgchart
$kendo-orgchart-card-padding-x: $kendo-orgchart-card-padding-y !default;
/// The border width of the OrgChart Card.
/// @group orgchart
$kendo-orgchart-card-border-width: $kendo-card-border-width !default;
/// The shadow of the OrgChart Card.
/// @group orgchart
$kendo-orgchart-card-shadow: $kendo-card-shadow !default;
/// The shadow of the focused OrgChart Card.
/// @group orgchart
$kendo-orgchart-card-focus-shadow: k-elevation(1) !default;

/// The bottom margin of the OrgChart Card title.
/// @group orgchart
$kendo-orgchart-card-title-margin-bottom: k-spacing(0) !default;
/// The font size of the OrgChart Card title.
/// @group orgchart
$kendo-orgchart-card-title-font-size: null !default;

/// The bottom margin of the OrgChart Card subtitle.
/// @group orgchart
$kendo-orgchart-card-subtitle-margin-bottom: k-spacing(0) !default;
/// The font size of the OrgChart Card subtitle.
/// @group orgchart
$kendo-orgchart-card-subtitle-font-size: null !default;

/// The border width of the OrgChart Card body.
/// @group orgchart
$kendo-orgchart-card-body-border-width: 2px 0 0 !default;
/// The border color of the OrgChart Card body.
/// @group orgchart
$kendo-orgchart-card-body-border-color: transparent !default;

/// The right margin of the OrgChart Card body title wrap.
/// @group orgchart
$kendo-orgchart-card-body-vbox-margin-right: k-math-div( $kendo-orgchart-spacer, 2 ) !default;
/// The min height of the OrgChart Card body title wrap.
/// @group orgchart
$kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;

/// The size of the OrgChart connecting line.
/// @group orgchart
$kendo-orgchart-line-size: 1px !default;
/// The fill color of the OrgChart connecting line.
/// @group orgchart
$kendo-orgchart-line-fill: $kendo-base-border !default;

/// The height of the OrgChart connecting line.
/// @group orgchart
$kendo-orgchart-line-v-height: 25px !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/orgchart/_layout.scss
@mixin kendo-orgchart--layout-base() {

    // OrgChart
    .k-orgchart {
        width: 100%;
        padding-block: $kendo-orgchart-padding-x;
        padding-inline: $kendo-orgchart-padding-y;
        box-sizing: border-box;
        font-size: $kendo-orgchart-font-size;
        font-family: $kendo-orgchart-font-family;
        line-height: $kendo-orgchart-line-height;
        overflow: auto;

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

    .k-orgchart-container {
        margin-block: 0;
        margin-inline: auto;
        width: 100%;
        height: 100%;
        position: relative;
    }

    // Nodes
    .k-orgchart-group {
        gap: $kendo-orgchart-group-gap;
    }

    .k-orgchart-group.k-vstack > .k-orgchart-node-container {
        gap: 0;
    }

    .k-orgchart-node-container {
        gap: $kendo-orgchart-node-gap;
    }

    .k-orgchart-node-group-container {
        @include border-radius( $kendo-orgchart-node-group-border-radius );
        padding-block: $kendo-orgchart-node-group-padding-y;
        padding-inline: $kendo-orgchart-node-group-padding-x;
        border-width: $kendo-orgchart-node-group-border-width;
        border-style: solid;
        outline: 0;
    }

    .k-orgchart-node-group-title {
        margin: 0 0 $kendo-orgchart-node-group-title-margin-bottom;
        font-size: $kendo-orgchart-node-group-title-font-size;
        line-height: $kendo-orgchart-node-group-title-line-height;
    }

    .k-orgchart-node-group-subtitle {
        margin: 0 0 $kendo-orgchart-node-group-subtitle-margin-bottom;
        font-size: $kendo-orgchart-node-group-subtitle-font-size;
    }

    // Card
    .k-orgchart-card {
        width: $kendo-orgchart-card-width;
        border-width: $kendo-orgchart-card-border-width;

        .k-card-title {
            margin: 0 0 $kendo-orgchart-card-title-margin-bottom;
            font-size: $kendo-orgchart-card-title-font-size;
        }

        .k-card-subtitle {
            margin: 0 0 $kendo-orgchart-card-subtitle-margin-bottom;
            font-size: $kendo-orgchart-card-subtitle-font-size;
        }

        .k-card-body {
            border-width: $kendo-orgchart-card-body-border-width;
            border-style: solid;
            flex-grow: 0;
        }
        .k-card-body .k-card-title-wrap {
            margin: 0 $kendo-orgchart-card-body-vbox-margin-right 0 0;
            min-width: 0;
            min-height: $kendo-orgchart-card-body-vbox-min-height;
        }
    }

    // Lines
    .k-orgchart-line {
        background-color: currentColor;
    }

    .k-orgchart-line-h {
        height: $kendo-orgchart-line-size;
    }

    .k-orgchart-line-v {
        margin-block: 0;
        margin-inline: auto;
        width: $kendo-orgchart-line-size;
        height: $kendo-orgchart-line-v-height;
    }

    // Buttons
    .k-orgchart-button {
        z-index: 1;
    }
}


@mixin kendo-orgchart--layout() {
    @include kendo-orgchart--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/orgchart/_theme.scss
@mixin kendo-orgchart--theme-base() {

    // OrgChart
    .k-orgchart {
        @include fill (
            $kendo-orgchart-text,
            $kendo-orgchart-bg,
            $kendo-orgchart-border
        );
    }

    // Card
    .k-orgchart-card {
        @include box-shadow( $kendo-orgchart-card-shadow );

        .k-card-body {
            @include fill( $border: $kendo-orgchart-card-body-border-color );
        }

        &:focus,
        &.k-focus {
            @include focus-indicator( $kendo-orgchart-card-focus-shadow );
        }
    }

    // Group
    .k-orgchart-node-group-container {
        @include fill (
            $kendo-orgchart-node-group-text,
            $kendo-orgchart-node-group-bg,
            $kendo-orgchart-node-group-border
        );
    }
    .k-orgchart-node-group-container:focus,
    .k-orgchart-node-group-container.k-focus {
        @include focus-indicator( $kendo-orgchart-node-group-focus-shadow );
        @include fill ( $border: $kendo-orgchart-node-group-focus-border );
    }

    .k-orgchart-node-group-subtitle {
        @include fill( $color: $kendo-orgchart-node-group-subtitle-text );
    }

    // Lines
    .k-orgchart-line-h,
    .k-orgchart-line-v {
        @include fill( $color: $kendo-orgchart-line-fill );
    }

}


@mixin kendo-orgchart--theme() {
    @include kendo-orgchart--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-orgchart--styles() {
    @include module-render( "orgchart" ) {
        @include kendo-orgchart--layout();
        @include kendo-orgchart--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-orgchart--styles();
}

// #endregion
// #region @import "./signature/_index.scss"; -> scss/signature/_index.scss
// #region @import "../core/_index.scss"; -> scss/core/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Module meta
$_kendo-module-meta: (
    name: "signature",
    dependencies: (
        "button",
        "input",
    )
);


// Dependencies
// #region @import "../button/_index.scss"; -> scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #region @import "../input/_index.scss"; -> scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion


// Component
// #region @import "./_variables.scss"; -> scss/signature/_variables.scss
$kendo-signature-width: 250px !default;
$kendo-signature-height: 84px !default;

$kendo-signature-lg-min-height: 110px !default;

$kendo-signature-maximized-width: 750px !default;
$kendo-signature-maximized-height: 252px !default;

$kendo-signature-padding-x: k-spacing(1) !default;
$kendo-signature-sm-padding-x: k-spacing(0.5) !default;
$kendo-signature-md-padding-x: k-spacing(1) !default;
$kendo-signature-lg-padding-x: k-spacing(2) !default;

$kendo-signature-padding-y: $kendo-signature-padding-x !default;
$kendo-signature-sm-padding-y: $kendo-signature-sm-padding-x !default;
$kendo-signature-md-padding-y: $kendo-signature-md-padding-x !default;
$kendo-signature-lg-padding-y: $kendo-signature-lg-padding-x !default;

$kendo-signature-line-width: 1px !default;
$kendo-signature-line-style: dashed !default;
$kendo-signature-line-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( info ) 24%, transparent), rgba( $kendo-color-info, .24 )) !default;

$kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
$kendo-signature-sm-line-size: calc( 100% - 2 * #{$kendo-signature-sm-padding-x} ) !default;
$kendo-signature-md-line-size: calc( 100% - 2 * #{$kendo-signature-md-padding-x} ) !default;
$kendo-signature-lg-line-size: calc( 100% - 2 * #{$kendo-signature-lg-padding-x} ) !default;

$kendo-signature-line-bottom-offset: 33% !default;

$kendo-signature-sizes: (
    sm: (
        padding-x: $kendo-signature-sm-padding-x,
        padding-y: $kendo-signature-sm-padding-y,
        line-size: $kendo-signature-sm-line-size
    ),
    md: (
        padding-x: $kendo-signature-md-padding-x,
        padding-y: $kendo-signature-md-padding-y,
        line-size: $kendo-signature-md-line-size
    ),
    lg: (
        padding-x: $kendo-signature-lg-padding-x,
        padding-y: $kendo-signature-lg-padding-y,
        line-size: $kendo-signature-lg-line-size
    )
) !default;

$kendo-signature-actions-gap: k-spacing(1) !default;
$kendo-signature-maximized-line-width: 3px !default;

// #endregion
// #region @import "./_layout.scss"; -> scss/signature/_layout.scss
@mixin kendo-signature--layout-base() {

    .k-signature {
        width: $kendo-signature-width;
        min-height: $kendo-signature-height;
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &.k-signature-maximized {
            width: $kendo-signature-maximized-width;
            height: $kendo-signature-maximized-height;

            > .k-signature-line {
                border-bottom-width: $kendo-signature-maximized-line-width;
            }
        }
    }

    .k-signature-actions {
        display: flex;
        width: min-content;
        margin-inline-start: auto;
        gap: $kendo-signature-actions-gap;
        z-index: 2;
    }

    .k-signature-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        z-index: 1;
        outline: none;
    }

    .k-signature-line {
        position: absolute;
        bottom: $kendo-signature-line-bottom-offset;
        z-index: 2;
        pointer-events: none;
        border-bottom-width: $kendo-signature-line-width;
        border-bottom-style: $kendo-signature-line-style;
    }

    // Sizes
    @each $size, $size-props in $kendo-signature-sizes {
        $_padding-x: k-map-get($size-props, padding-x);
        $_padding-y: k-map-get($size-props, padding-y);
        $_line-size: k-map-get($size-props, line-size);
        $_line-offset: k-map-get($size-props, line-offset);

        .k-signature-#{$size} {
            padding-inline: $_padding-x;
            padding-block: $_padding-y;

            .k-signature-line {
                width: $_line-size;
            }
        }
    }

    .k-signature-lg {
        min-height: $kendo-signature-lg-min-height;
    }

}


@mixin kendo-signature--layout() {
    @include kendo-signature--layout-base();
}

// #endregion
// #region @import "./_theme.scss"; -> scss/signature/_theme.scss
@mixin kendo-signature--theme-base() {

    // Solid signature
    .k-signature {

        .k-signature-line {
            border-bottom-color: $kendo-signature-line-color;
        }
    }

}


@mixin kendo-signature--theme() {
    @include kendo-signature--theme-base();
}

// #endregion


// Register
// #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
// File already imported_once. Skipping output.
// #endregion
@include module-register( $_kendo-module-meta... );


// Expose
@mixin kendo-signature--styles() {
    @include module-render( "signature" ) {
        @include kendo-signature--layout();
        @include kendo-signature--theme();
    }
}

@if $kendo-auto-bootstrap {
    @include kendo-signature--styles();
}

// #endregion


// Configuration
@mixin kendo-theme--config( $config: null ) {
}


// Styles
@mixin kendo-theme--styles() {
    // Core
    @include kendo-core--styles();

    // Color system
    @include color-system-styles();


    // Typography and utils
    @include kendo-typography--styles();
    @include kendo-utils--styles();


    // Generic content
    @include kendo-icon--styles();
    @include kendo-messagebox--styles();


    // Primitive components
    @include kendo-actions--styles();
    @include kendo-list--styles();
    @include kendo-listgroup--styles();
    @include kendo-overlay--styles();
    @include kendo-popup--styles();
    @include kendo-ripple--styles();
    @include kendo-table--styles();
    @include kendo-virtual-scroller--styles();


    // Indicators
    @include kendo-avatar--styles();
    @include kendo-badge--styles();
    @include kendo-chip--styles();
    @include kendo-color-preview--styles();
    @include kendo-loader--styles();
    @include kendo-skeleton--styles();
    @include kendo-tooltip--styles();
    @include kendo-time-marker--styles();


    // Form helpers
    @include kendo-form--styles();
    @include kendo-validator--styles();
    @include kendo-floating-label--styles();


    // Native forms
    @include kendo-button--styles();
    @include kendo-split-button--styles();
    @include kendo-menu-button--styles();
    @include kendo-input--styles();
    @include kendo-textbox--styles();
    @include kendo-textarea--styles();
    @include kendo-checkbox--styles();
    @include kendo-listbox--styles();
    @include kendo-progressbar--styles();
    @include kendo-radio--styles();
    @include kendo-slider--styles();


    // Form requirements
    @include kendo-calendar--styles();
    @include kendo-time-selector--styles();


    // Augmented forms
    @include kendo-autocomplete--styles();
    @include kendo-captcha--styles();
    @include kendo-color-palette--styles();
    @include kendo-color-gradient--styles();
    @include kendo-color-editor--styles();
    @include kendo-color-picker--styles();
    @include kendo-combobox--styles();
    @include kendo-date-input--styles();
    @include kendo-date-picker--styles();
    @include kendo-time-picker--styles();
    @include kendo-time-duration-picker--styles();
    @include kendo-date-time-picker--styles();
    @include kendo-date-range-picker--styles();
    @include kendo-dropdown-grid--styles();
    @include kendo-dropdown-list--styles();
    @include kendo-dropdown-tree--styles();
    @include kendo-masked-textbox--styles();
    @include kendo-multiselect--styles();
    @include kendo-numeric-textbox--styles();
    @include kendo-rating--styles();
    @include kendo-searchbox--styles();
    @include kendo-switch--styles();
    @include kendo-upload--styles();
    @include kendo-dropzone--styles();


    // Command interfaces
    @include kendo-appbar--styles();
    @include kendo-fab--styles();
    @include kendo-menu--styles();
    @include kendo-toolbar--styles();


    // Popups and modals
    @include kendo-window--styles();
    @include kendo-action-sheet--styles();
    @include kendo-dialog--styles();
    @include kendo-drawer--styles();
    @include kendo-notification--styles();
    @include kendo-popover--styles();
    @include kendo-responsive-panel--styles();


    // Navigation
    @include kendo-bottom-navigation--styles();
    @include kendo-breadcrumb--styles();
    @include kendo-pager--styles();
    @include kendo-stepper--styles();
    @include kendo-tabstrip--styles();
    @include kendo-treeview--styles();
    @include kendo-wizard--styles();


    // Layout & containers
    @include kendo-card--styles();
    @include kendo-expander--styles();
    @include kendo-panelbar--styles();
    @include kendo-splitter--styles();
    @include kendo-tile-layout--styles();
    @include kendo-dock-manager--styles();
    @include kendo-chart-wizard--styles();


    // Data management
    @include kendo-grid--styles();
    @include kendo-listview--styles();
    @include kendo-spreadsheet--styles();
    @include kendo-pivotgrid--styles();
    @include kendo-treelist--styles();
    @include kendo-filter--styles();
    @include kendo-file-manager--styles();
    @include kendo-task-board--styles();


    // Editors
    @include kendo-editor--styles();
    @include kendo-image-editor--styles();


    // Scheduling
    @include kendo-gantt--styles();
    @include kendo-scheduler--styles();


    // Misc
    @include kendo-adaptive--styles();
    @include kendo-chat--styles();
    @include kendo-media-player--styles();
    @include kendo-timeline--styles();
    @include kendo-pdf-viewer--styles();
    @include kendo-scroller--styles();
    @include kendo-scrollview--styles();
    @include kendo-prompt--styles();


    // Dataviz
    @include kendo-dataviz--styles();
    @include kendo-map--styles();
    @include kendo-orgchart--styles();
    @include kendo-signature--styles();
}

// #endregion


@if not $kendo-auto-bootstrap {
    @include kendo-theme--config();
    @include kendo-theme--styles();
}
