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

// #region @import "functions/_index.scss"; -> /packages/bootstrap/scss/functions/_index.scss
// #region @import "~@progress/kendo-theme-default/scss/functions/_index.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/functions/_index.scss
// #region @import "_math.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/functions/_math.scss
@function decimal-round($float, $digits: 2) {
    $pow: pow(10, $digits);

    @return round($float * $pow) / $pow;
}

@function pow($x, $n) {
    $ret: 1;

    @if $n >= 0 {
        @for $i from 1 through $n {
        $ret: $ret * $x;
        }
    } @else {
        @for $i from $n to 0 {
        $ret: $ret / $x;
        }
    }

    @return $ret;
}

// #endregion
// #region @import "_config-maps.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/functions/_config-maps.scss
@function get-config-prop( $config, $name, $prop ) {
    $key: config-#{$prop}-#{$name};

    @if map-has-key( $config, $name ) {
        @if map-has-key( map-get( $config, $name ), $prop ) {
            @return map-get( map-get( $config, $name ), $prop );
        }
    }

    @warn NO_SUCH_KEY $key;
    @return null;
}


// #region typography
@function font-map( $font-family: null, $font-size: null, $line-height: null, $font-weight: null, $letter-spacing: null ) {
    @return (
        font-family: $font-family,
        font-size: $font-size,
        line-height: $line-height,
        font-weight: $font-weight,
        letter-spacing: $letter-spacing
    );
}
@function get-font-family( $config, $name ) {
    @return get-config-prop( $config, $name, font-family );
}
@function get-font-size( $config, $name ) {
    @return get-config-prop( $config, $name, font-size );
}
@function get-line-height( $config, $name ) {
    @return get-config-prop( $config, $name, line-height );
}
@function get-font-weight( $config, $name ) {
    @return get-config-prop( $config, $name, font-weight );
}
@function get-letter-spacing( $config, $name ) {
    @return get-config-prop( $config, $name, letter-spacing );
}
// #endregion

// #endregion
// #region @import "_colors.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/functions/_colors.scss
// contrast wcag adapted from https://gist.github.com/sgomes/ccc72f71137fe29039c92c0a9fe9b657

//  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.
$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
);

/// Set a specific jump point for requesting color jumps
/// @group color-system
/// @access private
$color-level-step: if(
    /* check for existance of bootstrap variable */
    variable-exists("theme-color-interval"),
    $theme-color-interval,
    /* fallback */
    8%
) !default;

/// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
/// @group color-system
/// @access private
$yiq-threshold: if(
    /* check for existance of bootstrap variable */
    variable-exists("yiq-contrasted-threshold"),
    $yiq-contrasted-threshold,
    /* fallback */
    150
) !default;

/// Dark color for use in YIQ color contrast function.
/// @group color-system
/// @access private
$yiq-dark: if(
    /* check for existance of bootstrap variable */
    variable-exists("yiq-text-dark"),
    $yiq-text-dark,
    /* fallback */
    black
) !default;

/// Light color for use in YIQ color contrast function.
/// @group color-system
/// @access private
$yiq-light: if(
    /* check for existance of bootstrap variable */
    variable-exists("yiq-text-light"),
    $yiq-text-light,
    /* fallback */
    white
) !default;

// Calculate the luminance for a color.
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function luminance($color) {
    $red: nth($linear-channel-values, red($color) + 1);
    $green: nth($linear-channel-values, green($color) + 1);
    $blue: nth($linear-channel-values, blue($color) + 1);

    @return .2126 * $red + .7152 * $green + .0722 * $blue;
}
@function is-dark( $color ) {
    @return if( luminance($color) < .5, true, false );
}
@function is-light( $color ) {
    @return if( luminance($color) < .5, false, true );
}


@function color-level($color, $level: 0) {

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

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

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

    @return mix($base, $color, $level * $color-level-step);
}

@function tint( $color, $level: 1 ) {
    @return color-level( $color, -1 * $level );
}

@function shade( $color, $level: 1 ) {
    @return color-level( $color, 1 * $level );
}

@function try-shade($color, $level: 1) {
    $dark-theme: if(variable-exists(is-dark-theme), $is-dark-theme, false);

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

    @return shade($color, $level);
}
@function try-tint($color, $level: 1) {
    $dark-theme: if(variable-exists(is-dark-theme), $is-dark-theme, false);

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

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


@function try-darken( $color, $amount, $threshold: black ) {
    $amount: if(unitless($amount), $amount, ($amount / 1%));

    $result: darken( $color, $amount );
    $alt-result: darken( $color, ($amount - 1) );

    @if ($result == $threshold) and ($alt-result == $threshold) {
        @return lighten( $color, $amount );
    }
    @return $result;
}

@function try-lighten( $color, $amount, $threshold: white ) {
    $amount: if(unitless($amount), $amount, ($amount / 1%));

    $result: lighten( $color, $amount );
    $alt-result: lighten( $color, ($amount - 1) );

    @if ($result == $threshold) and ($alt-result == $threshold) {
        @return darken( $color, $amount );
    }
    @return $result;
}


@function yiq($color) {
    $r: red($color);
    $g: green($color);
    $b: blue($color);

    $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

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

@function true-mix($color1, $color2, $weight: 50%) {
    @return mix(rgba($color1, 1), rgba($color2, 1), $weight);
}

// #endregion

// #endregion

// #endregion
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import "functions/_index.scss"; -> /packages/bootstrap/scss/functions/_index.scss
// #region @import /packages/bootstrap/scss/functions/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "_bootstrap-overrides.scss"; -> /packages/bootstrap/scss/_bootstrap-overrides.scss
$enable-bootstrap-overrides: true !default;
$theme-colors: () !default;

// sass-lint:disable indentation
// @if $enable-bootstrap-overrides {

    $enable-shadows: true !default;

    $white:    #ffffff !default;
    $gray-100: #f8f9fa !default;
    $gray-200: #e9ecef !default;
    $gray-300: #dee2e6 !default;
    $gray-400: #ced4da !default;
    $gray-500: #adb5bd !default;
    $gray-600: #6c757d !default;
    $gray-700: #495057 !default;
    $gray-800: #343a40 !default;
    $gray-900: #212529 !default;
    $black:    #000000 !default;

    $blue:     #007bff !default;
    $cyan:     #17a2b8 !default;
    $green:    #28a745 !default;
    $yellow:   #ffc107 !default;
    $red:      #dc3545 !default;

    $accent: $blue !default;
    $primary: $accent !default;
    $secondary: #e4e7eb !default;
    $info: $cyan !default;
    $success: $green !default;
    $warning: $yellow !default;
    $error: $red !default;
    $danger: $error !default;

    $theme-colors: map-merge((
        "primary": $primary,
        "secondary": $secondary,
        "info": $info,
        "success": $success,
        "warning": $warning,
        "danger": $danger
    ), $theme-colors);

    $yiq-threshold: 150 !default;
    $yiq-dark: $gray-900 !default;
    $yiq-light: $white !default;

    $body-bg: $white !default;
    $body-color: contrast-yiq( $body-bg, $gray-900, $gray-100 ) !default;

    $border-color: contrast-yiq( $body-bg, $gray-300, $gray-700 ) !default;

    $component-bg: $body-bg !default;
    $component-color: contrast-yiq( $component-bg, $gray-900, $gray-100 ) !default;
    $component-border-color: contrast-yiq( $component-bg, $gray-300, $gray-700 ) !default;
    $component-active-bg: $primary !default;
    $component-active-color: contrast-yiq( $component-active-bg, $black, $white ) !default;

    $breadcrumb-padding-x: 0px !default;
    $breadcrumb-padding-y: 0px !default;
    $breadcrumb-bg: $component-bg !default;

    $card-bg: $component-bg !default;
    $card-color: $component-color !default;
    $card-border-color: rgba( contrast-yiq( $card-bg, $black, $white ), .125 ) !default;
    $card-cap-bg: rgba( contrast-yiq( $card-bg, $black, $white ), .03 ) !default;
    $card-cap-color: $card-color !default;
    $card-cap-border-color: rgba( contrast-yiq( $card-bg, $black, $white ), .125 ) !default;

    $input-bg: $component-bg !default;
    $input-color: contrast-yiq( $input-bg, $gray-700, $gray-300 ) !default;
    $input-border-color:  contrast-yiq( $input-bg, $gray-400, $gray-600 ) !default;

    $list-group-bg: $component-bg !default;
    $list-group-color: $component-color !default;
    $list-group-border-color: rgba( contrast-yiq( $list-group-bg, $black, $white ), .125 ) !default;
    $list-group-hover-bg: contrast-yiq( $list-group-bg, $gray-100, $gray-900 ) !default;
    $list-group-hover-color: $list-group-color !default;

    $list-group-action-bg: $list-group-bg !default;
    $list-group-action-color: contrast-yiq( $list-group-action-bg, $gray-700, $list-group-color ) !default;
    $list-group-action-hover-bg: $list-group-hover-bg !default;
    $list-group-action-hover-color: contrast-yiq( $list-group-action-hover-bg, $gray-700, $list-group-color ) !default;
    $list-group-action-active-bg: contrast-yiq( $list-group-bg, $gray-200, $gray-800 ) !default;
    $list-group-action-active-color: $list-group-color !default;

    $dropdown-bg: $component-bg !default;
    $dropdown-color: $component-color !default;
    $dropdown-border-color: rgba( contrast-yiq( $dropdown-bg, $black, $white ), .15 ) !default;

    $dropdown-link-color: contrast-yiq( $dropdown-bg, $gray-900, $gray-100 ) !default;
    $dropdown-link-hover-color: contrast-yiq( $dropdown-bg, darken( $dropdown-link-color, 5% ), lighten( $dropdown-link-color, 5% ) ) !default;
    $dropdown-link-hover-bg: contrast-yiq( $dropdown-bg, $gray-100, $gray-900 ) !default;

    $nav-tabs-border-color: $component-border-color !default;
    $nav-tabs-link-active-bg: $component-bg !default;
    $nav-tabs-link-active-color: $component-color !default;
    $nav-tabs-link-active-border-color: $component-border-color !default;

    $pagination-bg: $component-bg !default;
    $pagination-color: $accent !default;
    $pagination-border-color: $component-border-color !default;
    $pagination-hover-bg: darken( $pagination-bg, 8% ) !default;
    $pagination-hover-border-color: $pagination-border-color !default;
    $pagination-active-color: $component-active-color !default;
    $pagination-active-bg: $component-active-bg !default;
    $pagination-active-border-color: $pagination-active-bg !default;

    $pagination-disabled-bg: $pagination-bg !default;
    $pagination-disabled-color: grayscale( $pagination-color ) !default;

    $table-bg: $component-bg !default;
    $table-color: $component-color !default;
    $table-border-color: rgba( contrast-yiq( $table-bg, $gray-900 ), .125 ) !default;

    $modal-content-bg: $component-bg !default;
    $modal-content-color: $component-color !default;
    $modal-content-border-color: $component-border-color !default;
    $modal-header-border-color: $component-border-color !default;

    $progress-bg: $gray-200 !default;
    $progress-color: contrast-yiq( $progress-bg, $gray-900 ) !default;
    $progress-bar-bg: $primary !default;
    $progress-bar-color: contrast-yiq( $progress-bar-bg, $gray-900 ) !default;
// }
// sass-lint:enable indentation

// #endregion
// #region @import "~bootstrap/scss/_functions.scss"; -> /packages/bootstrap/node_modules/bootstrap/scss/_functions.scss
// Bootstrap functions
//
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.

// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@mixin _assert-ascending($map, $map-name) {
  $prev-key: null;
  $prev-num: null;
  @each $key, $num in $map {
    @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
      // Do nothing
    } @else if not comparable($prev-num, $num) {
      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    } @else if $prev-num >= $num {
      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    }
    $prev-key: $key;
    $prev-num: $num;
  }
}

// Starts at zero
// Used to ensure the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
  @if length($map) > 0 {
    $values: map-values($map);
    $first-value: nth($values, 1);
    @if $first-value != 0 {
      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
    }
  }
}

// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
// @author Hugo Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);

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

  @return $string;
}

// See https://codepen.io/kevinweber/pen/dXWoRw
//
// Requires the use of quotes around data URIs.

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

  @return $string;
}

// Color contrast
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);

  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

  @if ($yiq >= $yiq-contrasted-threshold) {
    @return $dark;
  } @else {
    @return $light;
  }
}

// Retrieve color Sass maps
@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

// Request a theme color level
@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

// Return valid calc
@function add($value1, $value2, $return-calc: true) {
  @if $value1 == null {
    @return $value2;
  }

  @if $value2 == null {
    @return $value1;
  }

  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
    @return $value1 + $value2;
  }

  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
}

@function subtract($value1, $value2, $return-calc: true) {
  @if $value1 == null and $value2 == null {
    @return null;
  }

  @if $value1 == null {
    @return -$value2;
  }

  @if $value2 == null {
    @return $value1;
  }

  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
    @return $value1 - $value2;
  }

  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}

// #endregion
// #region @import "~bootstrap/scss/_variables.scss"; -> /packages/bootstrap/node_modules/bootstrap/scss/_variables.scss
// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

// Color system

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;

$grays: () !default;
$grays: map-merge(
  (
    "100": $gray-100,
    "200": $gray-200,
    "300": $gray-300,
    "400": $gray-400,
    "500": $gray-500,
    "600": $gray-600,
    "700": $gray-700,
    "800": $gray-800,
    "900": $gray-900
  ),
  $grays
);

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

$colors: () !default;
$colors: map-merge(
  (
    "blue":       $blue,
    "indigo":     $indigo,
    "purple":     $purple,
    "pink":       $pink,
    "red":        $red,
    "orange":     $orange,
    "yellow":     $yellow,
    "green":      $green,
    "teal":       $teal,
    "cyan":       $cyan,
    "white":      $white,
    "gray":       $gray-600,
    "gray-dark":  $gray-800
  ),
  $colors
);

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

$theme-colors: () !default;
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

// Set a specific jump point for requesting color jumps
$theme-color-interval:      8% !default;

// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold:  150 !default;

// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark:             $gray-900 !default;
$yiq-text-light:            $white !default;

// Characters which are escaped by the escape-svg function
$escaped-characters: (
  ("<", "%3c"),
  (">", "%3e"),
  ("#", "%23"),
  ("(", "%28"),
  (")", "%29"),
) !default;


// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-caret:                                true !default;
$enable-rounded:                              true !default;
$enable-shadows:                              false !default;
$enable-gradients:                            false !default;
$enable-transitions:                          true !default;
$enable-prefers-reduced-motion-media-query:   true !default;
$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
$enable-grid-classes:                         true !default;
$enable-pointer-cursor-for-buttons:           true !default;
$enable-print-styles:                         true !default;
$enable-responsive-font-sizes:                false !default;
$enable-validation-icons:                     true !default;
$enable-deprecation-messages:                 true !default;


// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge(
  (
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: $spacer,
    4: ($spacer * 1.5),
    5: ($spacer * 3)
  ),
  $spacers
);

// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
$sizes: map-merge(
  (
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto
  ),
  $sizes
);


// Body
//
// Settings for the `<body>` element.

$body-bg:                   $white !default;
$body-color:                $gray-900 !default;


// Links
//
// Style anchor elements.

$link-color:                              theme-color("primary") !default;
$link-decoration:                         none !default;
$link-hover-color:                        darken($link-color, 15%) !default;
$link-hover-decoration:                   underline !default;
// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
$emphasized-link-hover-darken-percentage: 15% !default;

// Paragraphs
//
// Style p element.

$paragraph-margin-bottom:   1rem !default;


// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");


// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

@include _assert-ascending($container-max-widths, "$container-max-widths");


// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns:                12 !default;
$grid-gutter-width:           30px !default;
$grid-row-columns:            6 !default;


// Components
//
// Define common padding and border radius sizes and more.

$line-height-lg:              1.5 !default;
$line-height-sm:              1.5 !default;

$border-width:                1px !default;
$border-color:                $gray-300 !default;

$border-radius:               .25rem !default;
$border-radius-lg:            .3rem !default;
$border-radius-sm:            .2rem !default;

$rounded-pill:                50rem !default;

$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;

$component-active-color:      $white !default;
$component-active-bg:         theme-color("primary") !default;

$caret-width:                 .3em !default;
$caret-vertical-align:        $caret-width * .85 !default;
$caret-spacing:               $caret-width * .85 !default;

$transition-base:             all .2s ease-in-out !default;
$transition-fade:             opacity .15s linear !default;
$transition-collapse:         height .35s ease !default;

$embed-responsive-aspect-ratios: () !default;
$embed-responsive-aspect-ratios: join(
  (
    (21 9),
    (16 9),
    (4 3),
    (1 1),
  ),
  $embed-responsive-aspect-ratios
);

// Typography
//
// Font, line-height, and color for body text, headings, and more.

// stylelint-disable value-keyword-case
$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:            $font-family-sans-serif !default;
// stylelint-enable value-keyword-case

$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg:                $font-size-base * 1.25 !default;
$font-size-sm:                $font-size-base * .875 !default;

$font-weight-lighter:         lighter !default;
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-bold:            700 !default;
$font-weight-bolder:          bolder !default;

$font-weight-base:            $font-weight-normal !default;
$line-height-base:            1.5 !default;

$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size:                $font-size-base * 2 !default;
$h3-font-size:                $font-size-base * 1.75 !default;
$h4-font-size:                $font-size-base * 1.5 !default;
$h5-font-size:                $font-size-base * 1.25 !default;
$h6-font-size:                $font-size-base !default;

$headings-margin-bottom:      $spacer / 2 !default;
$headings-font-family:        null !default;
$headings-font-weight:        500 !default;
$headings-line-height:        1.2 !default;
$headings-color:              null !default;

$display1-size:               6rem !default;
$display2-size:               5.5rem !default;
$display3-size:               4.5rem !default;
$display4-size:               3.5rem !default;

$display1-weight:             300 !default;
$display2-weight:             300 !default;
$display3-weight:             300 !default;
$display4-weight:             300 !default;
$display-line-height:         $headings-line-height !default;

$lead-font-size:              $font-size-base * 1.25 !default;
$lead-font-weight:            300 !default;

$small-font-size:             80% !default;

$text-muted:                  $gray-600 !default;

$blockquote-small-color:      $gray-600 !default;
$blockquote-small-font-size:  $small-font-size !default;
$blockquote-font-size:        $font-size-base * 1.25 !default;

$hr-border-color:             rgba($black, .1) !default;
$hr-border-width:             $border-width !default;

$mark-padding:                .2em !default;

$dt-font-weight:              $font-weight-bold !default;

$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
$nested-kbd-font-weight:      $font-weight-bold !default;

$list-inline-padding:         .5rem !default;

$mark-bg:                     #fcf8e3 !default;

$hr-margin-y:                 $spacer !default;


// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.

$table-cell-padding:          .75rem !default;
$table-cell-padding-sm:       .3rem !default;

$table-color:                 $body-color !default;
$table-bg:                    null !default;
$table-accent-bg:             rgba($black, .05) !default;
$table-hover-color:           $table-color !default;
$table-hover-bg:              rgba($black, .075) !default;
$table-active-bg:             $table-hover-bg !default;

$table-border-width:          $border-width !default;
$table-border-color:          $border-color !default;

$table-head-bg:               $gray-200 !default;
$table-head-color:            $gray-700 !default;
$table-th-font-weight:        null !default;

$table-dark-color:            $white !default;
$table-dark-bg:               $gray-800 !default;
$table-dark-accent-bg:        rgba($white, .05) !default;
$table-dark-hover-color:      $table-dark-color !default;
$table-dark-hover-bg:         rgba($white, .075) !default;
$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;

$table-striped-order:         odd !default;

$table-caption-color:         $text-muted !default;

$table-bg-level:              -9 !default;
$table-border-level:          -6 !default;


// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.

$input-btn-padding-y:         .375rem !default;
$input-btn-padding-x:         .75rem !default;
$input-btn-font-family:       null !default;
$input-btn-font-size:         $font-size-base !default;
$input-btn-line-height:       $line-height-base !default;

$input-btn-focus-width:       .2rem !default;
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

$input-btn-padding-y-sm:      .25rem !default;
$input-btn-padding-x-sm:      .5rem !default;
$input-btn-font-size-sm:      $font-size-sm !default;
$input-btn-line-height-sm:    $line-height-sm !default;

$input-btn-padding-y-lg:      .5rem !default;
$input-btn-padding-x-lg:      1rem !default;
$input-btn-font-size-lg:      $font-size-lg !default;
$input-btn-line-height-lg:    $line-height-lg !default;

$input-btn-border-width:      $border-width !default;


// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.

$btn-padding-y:               $input-btn-padding-y !default;
$btn-padding-x:               $input-btn-padding-x !default;
$btn-font-family:             $input-btn-font-family !default;
$btn-font-size:               $input-btn-font-size !default;
$btn-line-height:             $input-btn-line-height !default;
$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
$btn-font-size-sm:            $input-btn-font-size-sm !default;
$btn-line-height-sm:          $input-btn-line-height-sm !default;

$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
$btn-font-size-lg:            $input-btn-font-size-lg !default;
$btn-line-height-lg:          $input-btn-line-height-lg !default;

$btn-border-width:            $input-btn-border-width !default;

$btn-font-weight:             $font-weight-normal !default;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width:             $input-btn-focus-width !default;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
$btn-disabled-opacity:        .65 !default;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;

$btn-link-disabled-color:     $gray-600 !default;

$btn-block-spacing-y:         .5rem !default;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius !default;
$btn-border-radius-lg:        $border-radius-lg !default;
$btn-border-radius-sm:        $border-radius-sm !default;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;


// Forms

$label-margin-bottom:                   .5rem !default;

$input-padding-y:                       $input-btn-padding-y !default;
$input-padding-x:                       $input-btn-padding-x !default;
$input-font-family:                     $input-btn-font-family !default;
$input-font-size:                       $input-btn-font-size !default;
$input-font-weight:                     $font-weight-base !default;
$input-line-height:                     $input-btn-line-height !default;

$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
$input-font-size-sm:                    $input-btn-font-size-sm !default;
$input-line-height-sm:                  $input-btn-line-height-sm !default;

$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
$input-font-size-lg:                    $input-btn-font-size-lg !default;
$input-line-height-lg:                  $input-btn-line-height-lg !default;

$input-bg:                              $white !default;
$input-disabled-bg:                     $gray-200 !default;

$input-color:                           $gray-700 !default;
$input-border-color:                    $gray-400 !default;
$input-border-width:                    $input-btn-border-width !default;
$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;

$input-border-radius:                   $border-radius !default;
$input-border-radius-lg:                $border-radius-lg !default;
$input-border-radius-sm:                $border-radius-sm !default;

$input-focus-bg:                        $input-bg !default;
$input-focus-border-color:              lighten($component-active-bg, 25%) !default;
$input-focus-color:                     $input-color !default;
$input-focus-width:                     $input-btn-focus-width !default;
$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;

$input-placeholder-color:               $gray-600 !default;
$input-plaintext-color:                 $body-color !default;

$input-height-border:                   $input-border-width * 2 !default;

$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y / 2) !default;

$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm:                       add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
$input-height-lg:                       add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;

$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$form-text-margin-top:                  .25rem !default;

$form-check-input-gutter:               1.25rem !default;
$form-check-input-margin-y:             .3rem !default;
$form-check-input-margin-x:             .25rem !default;

$form-check-inline-margin-x:            .75rem !default;
$form-check-inline-input-margin-x:      .3125rem !default;

$form-grid-gutter-width:                10px !default;
$form-group-margin-bottom:              1rem !default;

$input-group-addon-color:               $input-color !default;
$input-group-addon-bg:                  $gray-200 !default;
$input-group-addon-border-color:        $input-border-color !default;

$custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$custom-control-gutter:                 .5rem !default;
$custom-control-spacer-x:               1rem !default;
$custom-control-cursor:                 null !default;

$custom-control-indicator-size:         1rem !default;
$custom-control-indicator-bg:           $input-bg !default;

$custom-control-indicator-bg-size:      50% 50% !default;
$custom-control-indicator-box-shadow:   $input-box-shadow !default;
$custom-control-indicator-border-color: $gray-500 !default;
$custom-control-indicator-border-width: $input-border-width !default;

$custom-control-label-color:            null !default;

$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;
$custom-control-label-disabled-color:           $gray-600 !default;

$custom-control-indicator-checked-color:        $component-active-color !default;
$custom-control-indicator-checked-bg:           $component-active-bg !default;
$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5) !default;
$custom-control-indicator-checked-box-shadow:   null !default;
$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;

$custom-control-indicator-focus-box-shadow:     $input-focus-box-shadow !default;
$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;

$custom-control-indicator-active-color:         $component-active-color !default;
$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
$custom-control-indicator-active-box-shadow:    null !default;
$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;

$custom-checkbox-indicator-border-radius:       $border-radius !default;
$custom-checkbox-indicator-icon-checked:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;

$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;
$custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;
$custom-checkbox-indicator-icon-indeterminate:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>") !default;
$custom-checkbox-indicator-indeterminate-box-shadow:   null !default;
$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;

$custom-radio-indicator-border-radius:          50% !default;
$custom-radio-indicator-icon-checked:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;

$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
$custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
$custom-switch-indicator-size:                  subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;

$custom-select-padding-y:           $input-padding-y !default;
$custom-select-padding-x:           $input-padding-x !default;
$custom-select-font-family:         $input-font-family !default;
$custom-select-font-size:           $input-font-size !default;
$custom-select-height:              $input-height !default;
$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
$custom-select-font-weight:         $input-font-weight !default;
$custom-select-line-height:         $input-line-height !default;
$custom-select-color:               $input-color !default;
$custom-select-disabled-color:      $gray-600 !default;
$custom-select-bg:                  $input-bg !default;
$custom-select-disabled-bg:         $gray-200 !default;
$custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
$custom-select-indicator-color:     $gray-800 !default;
$custom-select-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
$custom-select-background:          escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)

$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
$custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;

$custom-select-border-width:        $input-border-width !default;
$custom-select-border-color:        $input-border-color !default;
$custom-select-border-radius:       $border-radius !default;
$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;

$custom-select-focus-border-color:  $input-focus-border-color !default;
$custom-select-focus-width:         $input-focus-width !default;
$custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width $input-btn-focus-color !default;

$custom-select-padding-y-sm:        $input-padding-y-sm !default;
$custom-select-padding-x-sm:        $input-padding-x-sm !default;
$custom-select-font-size-sm:        $input-font-size-sm !default;
$custom-select-height-sm:           $input-height-sm !default;

$custom-select-padding-y-lg:        $input-padding-y-lg !default;
$custom-select-padding-x-lg:        $input-padding-x-lg !default;
$custom-select-font-size-lg:        $input-font-size-lg !default;
$custom-select-height-lg:           $input-height-lg !default;

$custom-range-track-width:          100% !default;
$custom-range-track-height:         .5rem !default;
$custom-range-track-cursor:         pointer !default;
$custom-range-track-bg:             $gray-300 !default;
$custom-range-track-border-radius:  1rem !default;
$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;

$custom-range-thumb-width:                   1rem !default;
$custom-range-thumb-height:                  $custom-range-thumb-width !default;
$custom-range-thumb-bg:                      $component-active-bg !default;
$custom-range-thumb-border:                  0 !default;
$custom-range-thumb-border-radius:           1rem !default;
$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
$custom-range-thumb-disabled-bg:             $gray-500 !default;

$custom-file-height:                $input-height !default;
$custom-file-height-inner:          $input-height-inner !default;
$custom-file-focus-border-color:    $input-focus-border-color !default;
$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;
$custom-file-disabled-bg:           $input-disabled-bg !default;

$custom-file-padding-y:             $input-padding-y !default;
$custom-file-padding-x:             $input-padding-x !default;
$custom-file-line-height:           $input-line-height !default;
$custom-file-font-family:           $input-font-family !default;
$custom-file-font-weight:           $input-font-weight !default;
$custom-file-color:                 $input-color !default;
$custom-file-bg:                    $input-bg !default;
$custom-file-border-width:          $input-border-width !default;
$custom-file-border-color:          $input-border-color !default;
$custom-file-border-radius:         $input-border-radius !default;
$custom-file-box-shadow:            $input-box-shadow !default;
$custom-file-button-color:          $custom-file-color !default;
$custom-file-button-bg:             $input-group-addon-bg !default;
$custom-file-text: (
  en: "Browse"
) !default;


// Form validation

$form-feedback-margin-top:          $form-text-margin-top !default;
$form-feedback-font-size:           $small-font-size !default;
$form-feedback-valid-color:         theme-color("success") !default;
$form-feedback-invalid-color:       theme-color("danger") !default;

$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;

$form-validation-states: () !default;
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    ),
  ),
  $form-validation-states
);

// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.

$zindex-dropdown:                   1000 !default;
$zindex-sticky:                     1020 !default;
$zindex-fixed:                      1030 !default;
$zindex-modal-backdrop:             1040 !default;
$zindex-modal:                      1050 !default;
$zindex-popover:                    1060 !default;
$zindex-tooltip:                    1070 !default;


// Navs

$nav-link-padding-y:                .5rem !default;
$nav-link-padding-x:                1rem !default;
$nav-link-disabled-color:           $gray-600 !default;

$nav-tabs-border-color:             $gray-300 !default;
$nav-tabs-border-width:             $border-width !default;
$nav-tabs-border-radius:            $border-radius !default;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
$nav-tabs-link-active-color:        $gray-700 !default;
$nav-tabs-link-active-bg:           $body-bg !default;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;

$nav-pills-border-radius:           $border-radius !default;
$nav-pills-link-active-color:       $component-active-color !default;
$nav-pills-link-active-bg:          $component-active-bg !default;

$nav-divider-color:                 $gray-200 !default;
$nav-divider-margin-y:              $spacer / 2 !default;


// Navbar

$navbar-padding-y:                  $spacer / 2 !default;
$navbar-padding-x:                  $spacer !default;

$navbar-nav-link-padding-x:         .5rem !default;

$navbar-brand-font-size:            $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;

$navbar-toggler-padding-y:          .25rem !default;
$navbar-toggler-padding-x:          .75rem !default;
$navbar-toggler-font-size:          $font-size-lg !default;
$navbar-toggler-border-radius:      $btn-border-radius !default;

$navbar-dark-color:                 rgba($white, .5) !default;
$navbar-dark-hover-color:           rgba($white, .75) !default;
$navbar-dark-active-color:          $white !default;
$navbar-dark-disabled-color:        rgba($white, .25) !default;
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-dark-toggler-border-color:  rgba($white, .1) !default;

$navbar-light-color:                rgba($black, .5) !default;
$navbar-light-hover-color:          rgba($black, .7) !default;
$navbar-light-active-color:         rgba($black, .9) !default;
$navbar-light-disabled-color:       rgba($black, .3) !default;
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: rgba($black, .1) !default;

$navbar-light-brand-color:                $navbar-light-active-color !default;
$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
$navbar-dark-brand-color:                 $navbar-dark-active-color !default;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;


// Dropdowns
//
// Dropdown menu container and contents.

$dropdown-min-width:                10rem !default;
$dropdown-padding-x:                0 !default;
$dropdown-padding-y:                .5rem !default;
$dropdown-spacer:                   .125rem !default;
$dropdown-font-size:                $font-size-base !default;
$dropdown-color:                    $body-color !default;
$dropdown-bg:                       $white !default;
$dropdown-border-color:             rgba($black, .15) !default;
$dropdown-border-radius:            $border-radius !default;
$dropdown-border-width:             $border-width !default;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
$dropdown-divider-bg:               $gray-200 !default;
$dropdown-divider-margin-y:         $nav-divider-margin-y !default;
$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;

$dropdown-link-color:               $gray-900 !default;
$dropdown-link-hover-color:         darken($gray-900, 5%) !default;
$dropdown-link-hover-bg:            $gray-100 !default;

$dropdown-link-active-color:        $component-active-color !default;
$dropdown-link-active-bg:           $component-active-bg !default;

$dropdown-link-disabled-color:      $gray-600 !default;

$dropdown-item-padding-y:           .25rem !default;
$dropdown-item-padding-x:           1.5rem !default;

$dropdown-header-color:             $gray-600 !default;
$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;


// Pagination

$pagination-padding-y:              .5rem !default;
$pagination-padding-x:              .75rem !default;
$pagination-padding-y-sm:           .25rem !default;
$pagination-padding-x-sm:           .5rem !default;
$pagination-padding-y-lg:           .75rem !default;
$pagination-padding-x-lg:           1.5rem !default;
$pagination-line-height:            1.25 !default;

$pagination-color:                  $link-color !default;
$pagination-bg:                     $white !default;
$pagination-border-width:           $border-width !default;
$pagination-border-color:           $gray-300 !default;

$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
$pagination-focus-outline:          0 !default;

$pagination-hover-color:            $link-hover-color !default;
$pagination-hover-bg:               $gray-200 !default;
$pagination-hover-border-color:     $gray-300 !default;

$pagination-active-color:           $component-active-color !default;
$pagination-active-bg:              $component-active-bg !default;
$pagination-active-border-color:    $pagination-active-bg !default;

$pagination-disabled-color:         $gray-600 !default;
$pagination-disabled-bg:            $white !default;
$pagination-disabled-border-color:  $gray-300 !default;


// Jumbotron

$jumbotron-padding:                 2rem !default;
$jumbotron-color:                   null !default;
$jumbotron-bg:                      $gray-200 !default;


// Cards

$card-spacer-y:                     .75rem !default;
$card-spacer-x:                     1.25rem !default;
$card-border-width:                 $border-width !default;
$card-border-radius:                $border-radius !default;
$card-border-color:                 rgba($black, .125) !default;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
$card-cap-bg:                       rgba($black, .03) !default;
$card-cap-color:                    null !default;
$card-height:                       null !default;
$card-color:                        null !default;
$card-bg:                           $white !default;

$card-img-overlay-padding:          1.25rem !default;

$card-group-margin:                 $grid-gutter-width / 2 !default;
$card-deck-margin:                  $card-group-margin !default;

$card-columns-count:                3 !default;
$card-columns-gap:                  1.25rem !default;
$card-columns-margin:               $card-spacer-y !default;


// Tooltips

$tooltip-font-size:                 $font-size-sm !default;
$tooltip-max-width:                 200px !default;
$tooltip-color:                     $white !default;
$tooltip-bg:                        $black !default;
$tooltip-border-radius:             $border-radius !default;
$tooltip-opacity:                   .9 !default;
$tooltip-padding-y:                 .25rem !default;
$tooltip-padding-x:                 .5rem !default;
$tooltip-margin:                    0 !default;

$tooltip-arrow-width:               .8rem !default;
$tooltip-arrow-height:              .4rem !default;
$tooltip-arrow-color:               $tooltip-bg !default;

// Form tooltips must come after regular tooltips
$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
$form-feedback-tooltip-line-height:   $line-height-base !default;
$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;


// Popovers

$popover-font-size:                 $font-size-sm !default;
$popover-bg:                        $white !default;
$popover-max-width:                 276px !default;
$popover-border-width:              $border-width !default;
$popover-border-color:              rgba($black, .2) !default;
$popover-border-radius:             $border-radius-lg !default;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;

$popover-header-bg:                 darken($popover-bg, 3%) !default;
$popover-header-color:              $headings-color !default;
$popover-header-padding-y:          .5rem !default;
$popover-header-padding-x:          .75rem !default;

$popover-body-color:                $body-color !default;
$popover-body-padding-y:            $popover-header-padding-y !default;
$popover-body-padding-x:            $popover-header-padding-x !default;

$popover-arrow-width:               1rem !default;
$popover-arrow-height:              .5rem !default;
$popover-arrow-color:               $popover-bg !default;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;


// Toasts

$toast-max-width:                   350px !default;
$toast-padding-x:                   .75rem !default;
$toast-padding-y:                   .25rem !default;
$toast-font-size:                   .875rem !default;
$toast-color:                       null !default;
$toast-background-color:            rgba($white, .85) !default;
$toast-border-width:                1px !default;
$toast-border-color:                rgba(0, 0, 0, .1) !default;
$toast-border-radius:               .25rem !default;
$toast-box-shadow:                  0 .25rem .75rem rgba($black, .1) !default;

$toast-header-color:                $gray-600 !default;
$toast-header-background-color:     rgba($white, .85) !default;
$toast-header-border-color:         rgba(0, 0, 0, .05) !default;


// Badges

$badge-font-size:                   75% !default;
$badge-font-weight:                 $font-weight-bold !default;
$badge-padding-y:                   .25em !default;
$badge-padding-x:                   .4em !default;
$badge-border-radius:               $border-radius !default;

$badge-transition:                  $btn-transition !default;
$badge-focus-width:                 $input-btn-focus-width !default;

$badge-pill-padding-x:              .6em !default;
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
$badge-pill-border-radius:          10rem !default;


// Modals

// Padding applied to the modal body
$modal-inner-padding:               1rem !default;

// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
$modal-footer-margin-between:       .5rem !default;

$modal-dialog-margin:               .5rem !default;
$modal-dialog-margin-y-sm-up:       1.75rem !default;

$modal-title-line-height:           $line-height-base !default;

$modal-content-color:               null !default;
$modal-content-bg:                  $white !default;
$modal-content-border-color:        rgba($black, .2) !default;
$modal-content-border-width:        $border-width !default;
$modal-content-border-radius:       $border-radius-lg !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;
$modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5) !default;

$modal-backdrop-bg:                 $black !default;
$modal-backdrop-opacity:            .5 !default;
$modal-header-border-color:         $border-color !default;
$modal-footer-border-color:         $modal-header-border-color !default;
$modal-header-border-width:         $modal-content-border-width !default;
$modal-footer-border-width:         $modal-header-border-width !default;
$modal-header-padding-y:            1rem !default;
$modal-header-padding-x:            1rem !default;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility

$modal-xl:                          1140px !default;
$modal-lg:                          800px !default;
$modal-md:                          500px !default;
$modal-sm:                          300px !default;

$modal-fade-transform:              translate(0, -50px) !default;
$modal-show-transform:              none !default;
$modal-transition:                  transform .3s ease-out !default;
$modal-scale-transform:             scale(1.02) !default;


// Alerts
//
// Define alert colors, border radius, and padding.

$alert-padding-y:                   .75rem !default;
$alert-padding-x:                   1.25rem !default;
$alert-margin-bottom:               1rem !default;
$alert-border-radius:               $border-radius !default;
$alert-link-font-weight:            $font-weight-bold !default;
$alert-border-width:                $border-width !default;

$alert-bg-level:                    -10 !default;
$alert-border-level:                -9 !default;
$alert-color-level:                 6 !default;


// Progress bars

$progress-height:                   1rem !default;
$progress-font-size:                $font-size-base * .75 !default;
$progress-bg:                       $gray-200 !default;
$progress-border-radius:            $border-radius !default;
$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;
$progress-bar-color:                $white !default;
$progress-bar-bg:                   theme-color("primary") !default;
$progress-bar-animation-timing:     1s linear infinite !default;
$progress-bar-transition:           width .6s ease !default;


// List group

$list-group-color:                  null !default;
$list-group-bg:                     $white !default;
$list-group-border-color:           rgba($black, .125) !default;
$list-group-border-width:           $border-width !default;
$list-group-border-radius:          $border-radius !default;

$list-group-item-padding-y:         .75rem !default;
$list-group-item-padding-x:         1.25rem !default;

$list-group-hover-bg:               $gray-100 !default;
$list-group-active-color:           $component-active-color !default;
$list-group-active-bg:              $component-active-bg !default;
$list-group-active-border-color:    $list-group-active-bg !default;

$list-group-disabled-color:         $gray-600 !default;
$list-group-disabled-bg:            $list-group-bg !default;

$list-group-action-color:           $gray-700 !default;
$list-group-action-hover-color:     $list-group-action-color !default;

$list-group-action-active-color:    $body-color !default;
$list-group-action-active-bg:       $gray-200 !default;


// Image thumbnails

$thumbnail-padding:                 .25rem !default;
$thumbnail-bg:                      $body-bg !default;
$thumbnail-border-width:            $border-width !default;
$thumbnail-border-color:            $gray-300 !default;
$thumbnail-border-radius:           $border-radius !default;
$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;


// Figures

$figure-caption-font-size:          90% !default;
$figure-caption-color:              $gray-600 !default;


// Breadcrumbs

$breadcrumb-font-size:              null !default;

$breadcrumb-padding-y:              .75rem !default;
$breadcrumb-padding-x:              1rem !default;
$breadcrumb-item-padding:           .5rem !default;

$breadcrumb-margin-bottom:          1rem !default;

$breadcrumb-bg:                     $gray-200 !default;
$breadcrumb-divider-color:          $gray-600 !default;
$breadcrumb-active-color:           $gray-600 !default;
$breadcrumb-divider:                quote("/") !default;

$breadcrumb-border-radius:          $border-radius !default;


// Carousel

$carousel-control-color:             $white !default;
$carousel-control-width:             15% !default;
$carousel-control-opacity:           .5 !default;
$carousel-control-hover-opacity:     .9 !default;
$carousel-control-transition:        opacity .15s ease !default;

$carousel-indicator-width:           30px !default;
$carousel-indicator-height:          3px !default;
$carousel-indicator-hit-area-height: 10px !default;
$carousel-indicator-spacer:          3px !default;
$carousel-indicator-active-bg:       $white !default;
$carousel-indicator-transition:      opacity .6s ease !default;

$carousel-caption-width:             70% !default;
$carousel-caption-color:             $white !default;

$carousel-control-icon-width:        20px !default;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;

$carousel-transition-duration:       .6s !default;
$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)


// Spinners

$spinner-width:         2rem !default;
$spinner-height:        $spinner-width !default;
$spinner-border-width:  .25em !default;

$spinner-width-sm:        1rem !default;
$spinner-height-sm:       $spinner-width-sm !default;
$spinner-border-width-sm: .2em !default;


// Close

$close-font-size:                   $font-size-base * 1.5 !default;
$close-font-weight:                 $font-weight-bold !default;
$close-color:                       $black !default;
$close-text-shadow:                 0 1px 0 $white !default;


// Code

$code-font-size:                    87.5% !default;
$code-color:                        $pink !default;

$kbd-padding-y:                     .2rem !default;
$kbd-padding-x:                     .4rem !default;
$kbd-font-size:                     $code-font-size !default;
$kbd-color:                         $white !default;
$kbd-bg:                            $gray-900 !default;

$pre-color:                         $gray-900 !default;
$pre-scrollable-max-height:         340px !default;


// Utilities

$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
$overflows: auto, hidden !default;
$positions: static, relative, absolute, fixed, sticky !default;
$user-selects: all, auto, none !default;


// Printing

$print-page-size:                   a3 !default;
$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

// #endregion


// Options
$enable-rounded: $enable-rounded !default;
$enable-shadows: $enable-shadows !default;
$enable-gradients: $enable-gradients !default;
$enable-transitions: $enable-transitions !default;
$enable-flex-classes: true !default;
$enable-grid-classes: true !default;

$use-background-clip: false !default;
$use-calc-badge-size: true !default;
$use-picker-select-width: false !default;


// Spacing
$spacer: $spacer !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;

$spacing: (
    0: 0,
    1: .25rem,
    2: .5rem,
    3: .75rem,
    4: 1rem,
    5: 1.25rem,
    6: 1.5rem,
    7: 1.75rem,
    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,
    xs: .25rem,
    sm: 5rem,
    md: .75rem,
    lg: 1rem,
    xl: 1.5rem,
    thin: .125rem,
    hair: .0625rem
) !default;


// Icons
$icon-size: 16px !default;
$icon-size-lg: 32px !default;
$icon-spacing: ($spacer / 2) !default;

/// The URL to the icon font that will be used by the theme
/// The default value of `null` embeds the package font with a `data:` URL
/// @group icons
$icon-font-url: null !default;


// Metrics
$padding-x: $spacer !default;
$padding-y: $spacer / 2 !default;
$padding-x-sm: $padding-x / 2 !default;
$padding-y-sm: $padding-y / 2 !default;
$padding-x-lg: $padding-x * 1.5 !default;
$padding-y-lg: $padding-y * 1.5 !default;

/// Border radius for all components.
$border-radius: $border-radius !default;
$border-radius-sm: $border-radius-sm !default;
$border-radius-lg: $border-radius-lg !default;

$panel-padding-x: $card-spacer-x !default;
$panel-padding-y: $card-spacer-y !default;

$header-padding-x: $card-spacer-x !default;
$header-padding-y: $card-spacer-y !default;

$nav-item-margin: 0px !default;
$nav-item-padding-x: $nav-link-padding-x !default;
$nav-item-padding-y: $nav-link-padding-y !default;

$header-cell-padding-x: $table-cell-padding !default;
$header-cell-padding-y: $table-cell-padding !default;
$cell-padding-x: $table-cell-padding !default;
$cell-padding-y: $table-cell-padding !default;
$cell-padding: $table-cell-padding !default;
$cell-padding-sm: $table-cell-padding-sm !default;

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


// Color settings
$is-dark-theme: false;

// Deprecated
/// The color that focuses the user attention.
/// @deprecated Will be removed in v5. Use `$primary` variable instead.
/// @group color-system
/// @type Color
$accent: $primary !default;
/// The color used along with the primary color denoted by $primary.
/// @deprecated Will be removed in v5. Use `$primary-contrast` variable instead.
/// @group color-system
/// @type Color
$accent-contrast: contrast-wcag( $accent ) !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
$primary: $accent !default;
$primary-lighter: tint( $primary, 2 ) !default;
$primary-darker: shade( $primary, 2 ) !default;

/// The color used along with the primary color denoted by $primary.
/// Used to provide contrast between the background and foreground colors.
/// @group color-system
/// @type Color
$primary-contrast: $accent-contrast !default;

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

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

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

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

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

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

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

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

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

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

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


$theme-colors: () !default;
// sass-lint:disable indentation
$theme-colors: map-merge((
    "primary": $primary,
    "secondary": $secondary,
    "tertiary": $tertiary,
    "info": $info,
    "success": $success,
    "warning": $warning,
    "error": $error,
    "dark": $dark,
    "light": $light,
    "inverse": $inverse
), $theme-colors);
// sass-lint:enable indentation


// Utility classes force
// sass-lint:disable indentation
$utils-classes-force: (
    "": "",
    "-f": " !important"
) !default;
// sass-lint:enable indentation


// Overflow utility classes
$utils-overflows: () !default;
$utils-overflows: join(( visible, hidden, clip, scroll, auto ), $utils-overflows);

$utils-overflow-axis: ( "-", "-x-", "-y-" ) !default;


// Cursor utility classes
$cursors: ( auto, default, none, 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 ) !default;


// Color constants
$rgba-transparent: rgba( 0, 0, 0, 0 );

$gradient-transparent-to-black: rgba( black, 0), black;
$gradient-transparent-to-white: rgba( white, 0), white;
$gradient-black-to-transparent: black, rgba( black, 0);
$gradient-white-to-transparent: white, rgba( white, 0);

$gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000;

$bg-color: $body-bg !default;
$text-color: $body-color !default;
$border-color: $component-border-color !default;

/// The background of the components' chrome area.
$base-bg: try-darken( $component-bg, 3% ) !default;
/// The text color of the components' chrome area.
$base-text: $component-color !default;
/// The border color of the components' chrome area.
$base-border: try-darken( $base-bg, 3% ) !default;
/// The gradient background of the components' chrome area.
$base-gradient: null !default;

/// The background of hovered items.
$hovered-bg: try-darken( $base-bg, 3% ) !default;
/// The text color of hovered items.
$hovered-text: $base-text !default;
/// The border color of hovered items.
$hovered-border: try-darken( $base-border, 12% ) !default;
/// The gradient background of hovered items.
$hovered-gradient: null !default;

/// The background of selected items.
$selected-bg: $primary !default;
/// The text color of selected items.
$selected-text: contrast-wcag( $selected-bg ) !default;
/// The border color of selected items.
$selected-border: try-darken( $selected-bg, 12% ) !default;
/// The gradient background of selected items.
$selected-gradient: null !default;


// TODO: refactor
$focused-shadow: null !default;
$primary-focused-shadow: null !default;

$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;


// Disabled mixin variables
$disabled-filter: grayscale(.1) !default;
$disabled-opacity: .65 !default;


// Generic styles

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

$app-bg: $body-bg !default;
$app-text: $body-text !default;
$app-border: contrast-yiq( $app-bg, $gray-300, $gray-700 ) !default;


// Components

// Component
/// Background color of a component.
/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
/// @group component
$component-bg: $component-bg !default;
/// Text color of a component.
/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$grid-text: component-text !default;`.
/// @group component
$component-text: $component-color !default;
/// Border color of a component.
/// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`.
/// @group component
$component-border: $component-border-color !default;


// Widget
/// Background color of a component.
/// @deprecated Will be removed in v5. Use `$component-bg` variable instead.
/// @group component
$widget-bg: $component-bg !default;
/// Text color of a component.
/// @deprecated Will be removed in v5. Use `$component-text` variable instead.
/// @group component
$widget-text: $component-text !default;
/// Border color of a component.
/// @deprecated Will be removed in v5. Use `$component-border` variable instead.
/// @group component
$widget-border: $component-border !default;


// Drop Hint
$equilateral-index: 1.7320508076 !default;

$drop-hint-arrow-size: 8px !default;
$drop-hint-arrow-spacing: ($drop-hint-arrow-size / 2) !default;
$drop-hint-line-h-width: 20px !default;
$drop-hint-line-h-height: 1px !default;
$drop-hint-line-v-width: $drop-hint-line-h-height !default;
$drop-hint-line-v-height: $drop-hint-line-h-width !default;

$drop-hint-bg: $primary !default;


// Panel
$panel-bg: $component-bg !default;
$panel-text: $component-text !default;
$panel-border: $component-border !default;


// Grouping
$grouping-header-bg: $component-text !default;
$grouping-header-text: $component-bg !default;
$grouping-border: $component-border !default;
$frozen-grouping-header-text: #6c757d !default;
$frozen-grouping-header-border-width: 2px !default;


// Header
$header-bg: contrast-wcag( $component-bg, $gray-100, $gray-900 ) !default;
$header-text: $component-text !default;
$header-border: $component-border !default;
$header-gradient: null !default;


// Node
$node-text: $base-text !default;
$node-bg: $base-bg !default;
$node-border: $base-border !default;
$node-gradient: null !default;

$node-hovered-text: $list-group-hover-color !default;
$node-hovered-bg: $list-group-hover-bg !default;
$node-hovered-border: $node-hovered-bg !default;
$node-hovered-gradient: null !default;

$node-selected-text: $selected-text !default;
$node-selected-bg: $selected-bg !default;
$node-selected-border: $selected-border !default;
$node-selected-gradient: null !default;


// List item
$list-item-padding-x: $dropdown-item-padding-x !default;
$list-item-padding-y: 3px !default;

$list-item-bg: null !default;
$list-item-text: $component-text !default;

$list-item-hovered-bg: $dropdown-link-hover-bg !default;
$list-item-hovered-text: $dropdown-link-hover-color !default;

$list-item-selected-bg: $dropdown-link-active-bg !default;
$list-item-selected-text: $dropdown-link-active-color !default;

$list-item-focused-shadow: inset 0 0 0 3px rgba( $list-item-text, .15 ) !default;

$list-container-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
$list-container-no-data-text: rgba( $component-text, .5 ) !default;


// Loading


// Placeholder
$placeholder-line-width: 100% !default;
$placeholder-line-height: 10px !default;
$placeholder-bg: rgba(0, 0, 0, .1) !default;


// Table


// Validator
$invalid-bg: null !default;
$invalid-text: $error !default;
$invalid-border: $error !default;
$invalid-shadow: 0 0 0 .2rem rgba($invalid-border, .25) !default;


$drag-clue-opacity: null !default;
$drag-clue-line-height: null !default;
$drag-clue-border-radius: null !default;


// Layout
$grid-cols: 12 !default;
$grid-rows: 10 !default;
$grid-gap: 10px !default;


// Backdrop (Overlay)
$backdrop-bg: $modal-backdrop-bg !default;
$backdrop-opacity: $modal-backdrop-opacity !default;


// Disabled Styling maps
$disabled-styling: () !default;
// sass-lint:disable indentation
$disabled-styling: map-merge((
    opacity: $disabled-opacity,
    filter: $disabled-filter
), $disabled-styling);
// sass-lint:enable indentation

// #endregion
// #region @import "mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import "~@progress/kendo-theme-default/scss/mixins/_index.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_index.scss
// Core
// #region @import "core/_import-once.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/core/_import-once.scss
/// A list of exported modules.
/// @access private
$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 $imported-modules
@mixin exports($name) {
    @if (index($imported-modules, $name) == null) {
        $imported-modules: append($imported-modules, $name) !global;
        @content;
    }
}

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

/// Saves a data URI that can be used from the $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 $data-uris
@mixin register-data-uri($name, $content) {
    @if (map-has-key($data-uris, $name)) {
        @warn "Attempt to redefine data URI of file `#{$name}`.";
    }

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

// #endregion
// #region @import "core/_props.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/core/_props.scss
@mixin _prop($name, $value: null) {
    @if $value {
        #{$name}: $value;
    }
}
@mixin _props($props...) {
    @each $prop in $props {
        @include _prop( nth($prop, 1), nth($prop, 2) );
    }
}

// #endregion


// Utils
// #region @import "_background-clip.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_background-clip.scss
@mixin use-background-clip() {
    @if $use-background-clip {
        background-clip: padding-box;

        .k-ie11 {
            background-clip: border-box;
        }
    }
}

// #endregion
// #region @import "_border-radius.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_border-radius.scss
// Border radius
@mixin border-radius( $radius: null ) {
    @if $enable-rounded {
        border-radius: $radius;
    }
}

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

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

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

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

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

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

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

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

// #endregion
// #region @import "_box-shadow.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_box-shadow.scss
@mixin box-shadow( $shadow... ) {
    @if $enable-shadows and nth($shadow, 1) {
        box-shadow: $shadow;
    }
}

// #endregion
// #region @import "_decoration.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_decoration.scss
// Fill and outline
@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 outline( $color: null ) {
    border-color: $color;
    color: $color;
    background-color: transparent;
    background-image: none;
}

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

// #endregion
// #region @import "_disabled.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_disabled.scss
// Disabled
@mixin disabled( $disabled-styling ) {
    outline: none;
    cursor: default;
    opacity: map-get($disabled-styling, opacity);
    filter: map-get($disabled-styling, filter);
    pointer-events: none;
    box-shadow: none;
}

@mixin disabled-legacy-ie( $disabled-styling ) {
    outline: none;
    cursor: default;
    opacity: map-get($disabled-styling, opacity);
    box-shadow: none;
}

// #endregion
// #region @import "_gradients.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_gradients.scss
@mixin linear-gradient( $gradient: null ) {
    @if $gradient and $enable-gradients {
        @if $gradient == none {
            background-image: none
        }
        @else {
            background-image: linear-gradient( $gradient );
        }
    }
}

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

@mixin checkerboard-gradient ( $primary-color: white, $secondary-color: rgba(0, 0, 0, 0.09), $size: 10px ) {
    $position: calc(#{$size} / 2);
    background: linear-gradient(45deg, $secondary-color 25%, transparent 25%, transparent 75%, $secondary-color 75%, $secondary-color 0),
                linear-gradient(45deg, $secondary-color 25%, transparent 25%, transparent 75%, $secondary-color 75%, $secondary-color 0),
                $primary-color;
    background-repeat: repeat, repeat;
    background-position: 0px 0px, $position $position;
    transform-origin: 0 0 0;
    background-origin: padding-box, padding-box;
    background-clip: border-box, border-box;
    background-size: $size $size, $size $size;
    box-shadow: none;
    text-shadow: none;
    transition: none;
    transform: scaleX(1) scaleY(1) scaleZ(1);
}

@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 "_hide-scrollbar.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_hide-scrollbar.scss
// Infinite calendar and timepicker
@mixin hide-scrollbar($dir: 'right', $max-scrollbar: 100px) {
    // anything larger than the scrollbar width will do
    $scrollbar-size: 17px;
    $margin: -$max-scrollbar - $scrollbar-size;

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

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

// #endregion
// #region @import "_typography.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_typography.scss
@mixin typography( $font-family: null, $font-size: null, $line-height: null, $font-weight: null, $letter-spacing: null ) {

    @if type-of($font-family) == map {
        $props: $font-family;
        @each $prop, $value in $props {
            @include _prop( $prop, $value );
        }
    } @else {
        @include _props(
            (font-family, $font-family),
            (font-size, $font-size),
            (line-height, $line-height),
            (font-weight, $font-weight),
            (letter-spacing, $letter-spacing)
        );
    }
}

// #endregion

// #endregion

// #endregion


// Dependencies
// #region @import "common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import "../typography/_variables.scss"; -> /packages/bootstrap/scss/typography/_variables.scss
// Typography

/// Base font size across all components.
/// @group typography
$font-size: $font-size-base !default;
$font-size-xs: .75 * $font-size-base !default;
$font-size-sm: $font-size-sm !default;
$font-size-lg: $font-size-lg !default;

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

/// Font family for monospaced text. Used for styling the code.
/// @group typography
$font-family-monospace: $font-family-monospace !default;

/// Line height used along with $font-size.
/// @group typography
$line-height: $line-height-base !default;
$line-height-sm: $line-height-sm !default;
$line-height-lg: $line-height-lg !default;
$line-height-em: ($line-height * 1em);


// Font weight
$font-weight-light: $font-weight-light !default;
$font-weight-normal: $font-weight-normal !default;
$font-weight-bold: $font-weight-bold !default;

// Headings
$h1-font-size: $h1-font-size !default;
$h2-font-size: $h2-font-size !default;
$h3-font-size: $h3-font-size !default;
$h4-font-size: $h4-font-size !default;
$h5-font-size: $h5-font-size !default;
$h6-font-size: $h6-font-size !default;

$h1-margin-bottom: $headings-margin-bottom !default;
$h2-margin-bottom: $headings-margin-bottom !default;
$h3-margin-bottom: $headings-margin-bottom !default;
$h4-margin-bottom: $headings-margin-bottom !default;
$h5-margin-bottom: $headings-margin-bottom !default;
$h6-margin-bottom: $headings-margin-bottom !default;


// Display
$display1-font-size: $display1-size !default;
$display2-font-size: $display2-size !default;
$display3-font-size: $display3-size !default;
$display4-font-size: $display4-size !default;

// Paragraph
$paragraph-margin-bottom: $paragraph-margin-bottom !default;


// Link
$link-text: $link-color !default;
$link-hover-text: $link-hover-color !default;


// Config maps
$typography-config: () !default;
// sass-lint:disable indentation
$typography-config: map-merge((
    display-1: font-map($headings-font-family, $display1-font-size, $display-line-height, $display1-weight ),
    display-2: font-map($headings-font-family, $display2-font-size, $display-line-height, $display2-weight ),
    display-3: font-map($headings-font-family, $display3-font-size, $display-line-height, $display3-weight ),
    display-4: font-map($headings-font-family, $display4-font-size, $display-line-height, $display4-weight ),
    h1: font-map($headings-font-family, $h1-font-size, $headings-line-height, $headings-font-weight ),
    h2: font-map($headings-font-family, $h2-font-size, $headings-line-height, $headings-font-weight ),
    h3: font-map($headings-font-family, $h3-font-size, $headings-line-height, $headings-font-weight ),
    h4: font-map($headings-font-family, $h4-font-size, $headings-line-height, $headings-font-weight ),
    h5: font-map($headings-font-family, $h5-font-size, $headings-line-height, $headings-font-weight ),
    h6: font-map($headings-font-family, $h6-font-size, $headings-line-height, $headings-font-weight ),
    body: font-map($font-family-base, $font-size-base, $line-height-base, $font-weight-base )
), $typography-config);
$typography-config: map-merge((
    card-title: map-get($typography-config, h5),
    card-subtitle: map-get($typography-config, h6)
), $typography-config);
// sass-lint:enable indentation

// #endregion

// #region @import "_base.scss"; -> /packages/bootstrap/scss/common/_base.scss
// #region @import "~@progress/kendo-theme-default/scss/common/_base.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/common/_base.scss
$widget-border-width: 1px !default;

@include exports( "common/asp-fallback-class" ) {

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

}

@include exports( "common/layout" ) {

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

    kendo-sortable {
        display: block;
    }


    // Overlay
    .k-overlay {
        width: 100%;
        height: 100%;
        background-color: $backdrop-bg;
        opacity: $backdrop-opacity;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10001;
    }


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


    // 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 {
        // sass-lint:disable-block no-important
        display: none !important;
    }
}


@include exports( "common/theme" ) {

    // Text selection
    .k-text-selection {
        ::selection {
            background-color: $primary;
            color: $primary-contrast;
        }
    }

    // Panels
    .k-block,
    .k-panel {
        @extend .k-text-selection !optional;
        @include border-radius( $border-radius );
        @include fill(
            $panel-text,
            $panel-bg,
            $panel-border
        );
        padding: $panel-padding-y $panel-padding-x;
        border-width: 1px;
        border-style: solid;
        box-sizing: border-box;

        > .k-header {
            @include border-top-radius( $border-radius );
            @include fill(
                $header-text,
                $header-bg,
                $header-border,
                $header-gradient
            );
            margin: #{-$panel-padding-y} #{-$panel-padding-x} $panel-padding-y;
            padding: $header-padding-y $header-padding-x;
        }
    }
    .k-content {
        @include fill(
            $panel-text,
            $panel-bg,
            $panel-border
        );
    }

}


@include exports( "common/disabled" ) {

    // Disabled state
    .k-state-disabled,
    .k-widget[disabled] {
        @include disabled( $disabled-styling );


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


        // Nested disabled
        [disabled],
        .k-state-disabled {
            opacity: 1;
            filter: grayscale(0);
        }
    }

}


@include exports( "common/misc/hr" ) {

    .k-hr {
        margin: $spacer-y auto;
        padding: 0;
        height: 0;
        border-width: 1px 0 0;
        border-style: solid;
        border-color: $panel-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;
    }

}


@include exports( "common/misc/dirty" ) {

    // Dirty indicator
    .k-dirty {
        margin: 0;
        padding: 0;
        width: 0;
        height: 0;
        border-width: 3px;
        border-style: solid;
        border-color: $error $error transparent transparent;
        position: absolute;
        top: 0;
        right: 0;
    }

    [dir = "rtl"],
    .k-rtl {
        .k-dirty {
            border-color: transparent transparent $error $error;
            right: auto;
            left: 0;
        }
    }

}

@include exports( "common/placeholder" ) {

    .k-placeholder-line {
        width: $placeholder-line-width;
        height: $placeholder-line-height;
        background-color: $placeholder-bg;
        display: inline-block;
    }
}

@include exports( "common/drop-hint" ) {

    .k-drop-hint {
        display: flex;
        gap: $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: ($drop-hint-arrow-size / 2);
        border-style: solid;
        border-color: transparent;
    }

    .k-drop-hint-line {
        flex-grow: 1;
        background-color: $drop-hint-bg;
    }

    .k-drop-hint-h {
        .k-drop-hint-start {
            border-left-width: (($drop-hint-arrow-size / 2) * $equilateral-index);
            border-left-color: $drop-hint-bg;
            border-right-width: 0;
        }

        .k-drop-hint-line {
            width: $drop-hint-line-h-width;
            height: $drop-hint-line-h-height;
        }

        .k-drop-hint-end {
            border-right-width: (($drop-hint-arrow-size / 2) * $equilateral-index);
            border-right-color: $drop-hint-bg;
            border-left-width: 0;
        }
    }

    .k-drop-hint-v {
        flex-direction: column;

        .k-drop-hint-start {
            border-top-width: (($drop-hint-arrow-size / 2) * $equilateral-index);
            border-top-color: $drop-hint-bg;
            border-bottom-width: 0;
        }

        .k-drop-hint-line {
            width: $drop-hint-line-v-width;
            height: $drop-hint-line-v-height;
        }

        .k-drop-hint-end {
            border-bottom-width: (($drop-hint-arrow-size / 2) * $equilateral-index);
            border-bottom-color: $drop-hint-bg;
            border-top-width: 0;
        }
    }

}

// #endregion

// #endregion
// #region @import "_animations.scss"; -> /packages/bootstrap/scss/common/_animations.scss
// #region @import "~@progress/kendo-theme-default/scss/common/_animations.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/common/_animations.scss
@include exports("animation/container") {

    .k-animation-container {
        position: absolute;
        overflow: hidden;
        z-index: 100;

        &-fixed {
            position: fixed;
        }

        &-relative {
            position: relative;
            display: inline-block;
        }
    }

}


@include exports("animation/effect") {

    .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 {
            // sass-lint:disable-block no-important
            // override any max-height set to element to allow animation
            max-height: 0 !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 {
            // sass-lint:disable-block no-important
            // override any max-height set to element to allow animation
            max-width: 0 !important;
            transition: max-width 300ms ease-in-out;
        }
    }
}


@include exports("animation/fx") {
    $fx-duration: 350ms;

    .k-fx-end .k-fx-next,
    .k-fx-end .k-fx-current {
        transition: all $fx-duration ease-out; // sass-lint:disable-line no-transition-all
    }

    .k-fx {
        position: relative;

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

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

    .k-fx-hidden,
    .k-fx-hidden * {
        // sass-lint:disable-block no-important
        visibility: hidden !important;
    }

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

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

    // Zoom
    .k-fx-zoom {
        // sass-lint:disable-block no-important
        &.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;
            }
        }
    }

    // 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; // sass-lint:disable-line no-transition-all
        }

        // 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%);
                }
            }
        }
    }

    // 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

// #endregion
// #region @import "_dragdrop.scss"; -> /packages/bootstrap/scss/common/_dragdrop.scss
// #region @import "~@progress/kendo-theme-default/scss/common/_dragdrop.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/common/_dragdrop.scss
@include exports( "common/dragdrop/dragclue" ) {

    // Layout
    .k-drag-clue {
        padding: $padding-y-sm $padding-x-sm;
        border-width: 1px;
        border-style: solid;
        font-size: $font-size-sm;
        white-space: nowrap;
        overflow: hidden;
        position: absolute;
        z-index: 20000;
        cursor: move;
    }
    .k-drag-status {
        margin-right: .4ex;
    }


    // Theme
    .k-drag-clue {
        @include fill(
            $node-selected-text,
            $node-selected-bg,
            $node-selected-border,
            $node-selected-gradient
        );
    }

}


@include exports( "common/dragdrop/reordercue" ) {

    // Layout
    .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;
        }
    }

}

// #endregion

// #endregion
// #region @import "_loading.scss"; -> /packages/bootstrap/scss/common/_loading.scss
// #region @import "~@progress/kendo-theme-default/scss/common/_loading.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/common/_loading.scss
@include exports( "common/loading" ) {

    // Loading indicator
    .k-loading {
        width: 64px;
        height: 64px;
        display: block;

        .animate {
            animation: loading 2s infinite linear;
        }
    }


    // Loading mask
    .k-loading-mask,
    .k-loading-image,
    .k-loading-color {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .k-loading-mask {
        z-index: 100;

        &.k-opaque {
            .k-loading-color {
                opacity: 1;
            }
        }
    }
    .k-loading-text {
        text-indent: -4000px;
        text-align: center;
        position: absolute;
    }
    .k-loading-image {
        z-index: 2;
    }
    .k-loading-color {
        background-color: $component-bg;
        opacity: .3;
    }

    // Loading indicator
    .k-i-loading {
        position: relative;
        background-color: transparent;
        box-sizing: border-box;
        color: currentColor;
    }

    .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: #{"max( 1px, .015em )"}; // sass-lint:disable-line no-duplicate-properties
        font-size: 4em;
    }
}


@include exports("common/loading/animations") {

    @keyframes loading {
        0% {
            stroke-dasharray: 0 251;
            stroke-dashoffset: 502;
        }

        50% {
            stroke-dasharray: 250 1;
        }

        100% {
            stroke-dasharray: 0 251;
            stroke-dashoffset: 0;
        }
    }

    @keyframes k-loading-animation  {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

}

// #endregion

// #endregion
// #region @import "_resizing.scss"; -> /packages/bootstrap/scss/common/_resizing.scss
// #region @import "~@progress/kendo-theme-default/scss/common/_resizing.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/common/_resizing.scss
@include exports( "common/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: w-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;
    }


    .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

// #endregion
// #region @import "_scrollbar.scss"; -> /packages/bootstrap/scss/common/_scrollbar.scss
// #region @import "~@progress/kendo-theme-default/scss/common/_scrollbar.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/common/_scrollbar.scss
@include exports( "common/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

// #endregion
// #region @import "_selection.scss"; -> /packages/bootstrap/scss/common/_selection.scss
// #region @import "~@progress/kendo-theme-default/scss/common/_selection.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/common/_selection.scss
@include exports( "common/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: $selected-text;
        background-color: $selected-bg;
        border-color: $selected-border;
        opacity: .6;
    }
    .k-marquee-text {
        color: $selected-text;
    }

}

// #endregion

// #endregion

// #endregion


// Generic content
// #region @import "styling/_index.scss"; -> /packages/bootstrap/scss/styling/_index.scss
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "~@progress/kendo-theme-default/scss/styling/_index.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/styling/_index.scss
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_index.scss
// #region @import /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_decoration.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/common/_decoration.scss
@include exports( "common/decoration/color" ) {

    // sass-lint:disable-block no-important

    .k-text-primary     { color: $primary !important; }
    .k-text-info        { color: $info !important; }
    .k-text-success     { color: $success !important; }
    .k-text-warning     { color: $warning !important; }
    .k-text-error       { color: $error !important; }

    .k-color-inherit     { color: inherit; }

    @each $name, $color in $theme-colors {
        .k-color-#{$name} {
            color: $color;
        }
    }

}


@include exports( "common/decoration/background" ) {

    // sass-lint:disable-block no-important

    .k-bg-primary       { background-color: $primary !important; }
    .k-bg-info          { background-color: $info !important; }
    .k-bg-success       { background-color: $success !important; }
    .k-bg-warning       { background-color: $warning !important; }
    .k-bg-error         { background-color: $error !important; }

}


@mixin variant( $base ) {
    background-color: tint($base, 10);
    color: shade($base, 6);
    border-color: tint($base, 9);
}

@include exports( "common/decoration/variant" ) {

    .k-state-primary    { @include variant( $primary ); }
    .k-state-info       { @include variant( $info ); }
    .k-state-success    { @include variant( $success ); }
    .k-state-warning    { @include variant( $warning ); }
    .k-state-error      { @include variant( $error ); }

}


@include exports( "common/decoration/legacy" ) {

    .k-info-colored {
        color: #50607f;
        border-color: #d0d9df;
        background-color: #f0f9ff;
    }

    .k-success-colored {
        color: #507f50;
        border-color: #d0dfd0;
        background-color: #f0fff0;
    }

    .k-error-colored {
        color: #7f5050;
        border-color: #dfd0d0;
        background-color: #fff0f0;
    }

    .k-shadow {
        // Shadow moved to popup/_layout.scss due to variable flow
        // box-shadow: $popup-shadow;
    }

    .k-inset {
        box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .03), inset 0 4px 5px 0 rgba(0, 0, 0, .04);
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "utils/_index.scss"; -> /packages/bootstrap/scss/utils/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies


// Component
// #region @import "_display.scss"; -> /packages/bootstrap/scss/utils/_display.scss
// #region @import "~@progress/kendo-theme-default/scss/utils/_display.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/utils/_display.scss
@include exports( "utils/display" ) {

    // sass-lint:disable-block no-important

    // Display modes
    .k-display-inline           { display: inline !important; }
    .k-display-block            { display: block !important; }
    .k-display-inline-block     { display: inline-block !important; }
    .k-display-flex             { display: flex !important; }
    .k-display-inline-flex      { display: inline-flex !important; }
    .k-display-table            { display: table !important; }
    .k-display-inline-table     { display: inline-table !important; }
    .k-display-none             { display: none !important; }


    // Aliases
    .k-hidden { @extend .k-display-none; }

}

// #endregion

// #endregion
// #region @import "_flex.scss"; -> /packages/bootstrap/scss/utils/_flex.scss
// #region @import "~@progress/kendo-theme-default/scss/utils/_flex.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/utils/_flex.scss
@include exports( "utils/flex" ) {

    // Flex documentation sourced from https://css-tricks.com/almanac/properties/f/flex/.

    /// This is equivalent to `display: flex`. It defines a flex container and enables a flex context for all its direct children.
    /// Think of flex items as primarily laying out either in horizontal rows or vertical columns.
    /// @group flex-layout
    .k-d-flex                   { display: flex; }
    /// This is equivalent to `display: inline-flex`. It defines a flex container and enables a flex context for all its direct children.
    /// Think of flex items as primarily laying out either in horizontal rows or vertical columns.
    /// @group flex-layout
    .k-d-inline-flex            { display: inline-flex; }
    /// This is equivalent to `display: inline-flex` and `flex-direction: row`.
    /// @group flex-layout
    .k-d-flex-row               { display: flex; flex-direction: row; } // sass-lint:disable-line one-declaration-per-line
    /// This is equivalent to `display: inline-flex` and `flex-direction: column`.
    /// @group flex-layout
    .k-d-flex-col               { display: flex; flex-direction: column; } // sass-lint:disable-line one-declaration-per-line
    /// This is equivalent to `flex-direction: row`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: left to right in `ltr`; right to left in `rtl`.
    /// @group flex-layout
    .k-flex-row                 { flex-direction: row; }
    /// This is equivalent to `flex-direction: row-reverse`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: right to left in `ltr`; left to right in `rtl`.
    /// @group flex-layout
    .k-flex-row-reverse         { flex-direction: row-reverse; }
    /// This is equivalent to `flex-direction: column`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: top to bottom.
    /// @group flex-layout
    .k-flex-col                 { flex-direction: column; }
    /// This is equivalent to `flex-direction: column-reverse`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: bottom to top.
    /// @group flex-layout
    .k-flex-col-reverse         { flex-direction: column-reverse; }


    // Aliases
    .k-flex-column              { @extend .k-flex-col; }
    .k-flex-column-reverse      { @extend .k-flex-col-reverse; }


    // Flex wrap
    /// This is equivalent to `flex-wrap: wrap`. It allows flex items to wrap as needed onto multiple lines, from top to bottom.
    /// @group flex-layout
    .k-flex-wrap                { flex-wrap: wrap; }
    /// This is equivalent to `flex-wrap: nowrap`. All flex items will be on one line.
    /// @group flex-layout
    .k-flex-nowrap              { flex-wrap: nowrap; }
    /// This is equivalent to `flex-wrap: wrap-reverse`. It allows flex items to wrap as needed onto multiple lines, from bottom to top.
    /// @group flex-layout
    .k-flex-wrap-reverse        { flex-wrap: wrap-reverse; }


    // Flex, shrink, grow, basis
    /// 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.
    /// @group flex-layout
    .k-flex-initial             { flex: 0 1 auto; }
    /// This is equivalent to `flex: 1 1 0%`. It sizes the item not based on its `width`/`height` properties, but based on the available space.
    /// This is similar to `flex: 1 1 auto` execpt it is allowed to shrink beyond its initial size.
    /// @group flex-layout
    .k-flex-1                   { flex: 1 1 0%; }
    /// This is equivalent to `flex: 1 1 auto`. Beware, this is not the default value. It sizes the item based on its `width`/`height` properties, but makes it fully flexible so that they absorb any extra space along the main axis.
    /// If all items are either `flex: auto`, `flex: initial`, or `flex: none`, any remaining space after the items have been sized will be distributed evenly to the items with `flex: auto`.
    /// @group flex-layout
    .k-flex-auto                { flex: 1 1 auto; }
    /// This is equivalent to `flex: 0 0 auto`. It sizes the item according to its `width`/`height` properties, but makes it fully inflexible.
    /// This is similar to `flex: initial` except it is not allowed to shrink, even in an overflow situation.
    /// @group flex-layout
    .k-flex-none                { flex: none; }
    /// This is equivalent to `flex-grow: 1`. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
    /// @group flex-layout
    .k-flex-grow                { flex-grow: 1; }
    /// This is equivalent to `flex-grow: 0`. The item will not grow.
    /// @group flex-layout
    .k-flex-grow-0              { flex-grow: 0; }
    /// This is equivalent to `flex-shrink: 1`. It determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row.
    /// @group flex-layout
    .k-flex-shrink              { flex-shrink: 1; }
    /// This is equivalent to `flex-shrink: 0`. The item will not srhink.
    /// @group flex-layout
    .k-flex-shrink-0            { flex-shrink: 0; }
    /// This is equivalent to `flex-basis: auto`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It sizes the element according to its size property.
    /// @group flex-layout
    .k-flex-basis-auto          { flex-basis: auto; }
    /// This is equivalent to `flex-basis: 0`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It disregards the element' size property.
    /// @group flex-layout
    .k-flex-basis-0             { flex-basis: 0%; }


    // Flex align
    .k-align-items-start        { align-items: flex-start; }
    .k-align-items-end          { align-items: flex-end; }
    .k-align-items-center       { align-items: center; }
    .k-align-items-stretch      { align-items: stretch; }
    .k-align-items-baseline     { align-items: baseline; }

    .k-align-content-start      { align-content: flex-start; }
    .k-align-content-end        { align-content: flex-end; }
    .k-align-content-center     { align-content: center; }
    .k-align-content-stretch    { align-content: stretch; }
    .k-align-content-baseline   { align-content: baseline; }

    .k-align-self-start         { align-self: flex-start; }
    .k-align-self-end           { align-self: flex-end; }
    .k-align-self-center        { align-self: center; }
    .k-align-self-stretch       { align-self: stretch; }
    .k-align-self-baseline      { align-self: baseline; }


    // Flex justify
    .k-justify-content-start    { justify-content: flex-start; }
    .k-justify-content-end      { justify-content: flex-end; }
    .k-justify-content-center   { justify-content: center; }
    .k-justify-content-between  { justify-content: space-between; }
    .k-justify-content-around   { justify-content: space-around; }
    .k-justify-content-evenly   { justify-content: space-evenly; }


    // Columns
    .k-column {
        flex-grow: 1;
        flex-basis: 0;
    }


    // Aliases
    .k-flex                     { @extend .k-flex-1; }
    .k-no-flex                  { @extend .k-flex-none; }
    .k-no-flex-grow             { @extend .k-flex-grow-0; }
    .k-no-flex-shrink           { @extend .k-flex-shrink-0; }
    .k-hbox                     { @extend .k-d-flex-row; }
    .k-vbox                     { @extend .k-d-flex-col; }
    .k-columnset                { @extend .k-d-flex-row; }
    .k-rowset                   { @extend .k-d-flex-col; }

}

// #endregion

// #endregion
// #region @import "_float.scss"; -> /packages/bootstrap/scss/utils/_float.scss
// #region @import "~@progress/kendo-theme-default/scss/utils/_float.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/utils/_float.scss
@include exports( "utils/float" ) {

    // sass-lint:disable-block no-important

    .k-float-left  { float: left !important; }
    .k-float-right { float: right !important; }
    .k-float-none  { float: none !important; }


    // Float wrap
    .k-floatwrap::after,
    .k-grid-toolbar::after,
    .k-slider-items::after {
        content: "";
        display: block;
        clear: both;
    }

}

// #endregion

// #endregion
// #region @import "_grid.scss"; -> /packages/bootstrap/scss/utils/_grid.scss
// #region @import "~@progress/kendo-theme-default/scss/utils/_grid.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/utils/_grid.scss
@include exports("utils/grid") {

    /// This is equivalent to `display: grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
    /// @group grid-layout
    .k-d-grid                   { display: grid; }
    .k-grid-cols-none           { grid-template-columns: none; }
    .k-grid-rows-none           { grid-template-rows: none; }


    // Grid flow
    .k-grid-flow-col            { grid-auto-flow: column; }
    .k-grid-flow-col-dense      { grid-auto-flow: column dense; }
    .k-grid-flow-row            { grid-auto-flow: row; }
    .k-grid-flow-row-dense      { grid-auto-flow: row dense; }


    // Columns
    .k-colspan-all              { grid-column: 1 / -1; }
    .k-colspan-auto             { grid-column: auto; }


    // Rows
    .k-rowspan-all              { grid-row: 1 / -1; }
    .k-rowspan-auto             { grid-row: auto; }


    // Grid utilities
    @if $enable-grid-classes {
        @for $i from 1 through $grid-cols {
            .k-grid-cols-#{$i}   { grid-template-columns: repeat($i, minmax(0, 1fr)); }
            .k-colspan-#{$i}    { grid-column: span $i; }
            .k-col-start-#{$i}  { grid-column-start: $i; }
            .k-col-end-#{$i}    { grid-column-end: $i; }
        }
        @for $i from 1 through $grid-rows {
            .k-grid-rows-#{$i}   { grid-template-rows: repeat($i, minmax(0, 1fr)); }
            .k-rowspan-#{$i}    { grid-row: span $i; }
            .k-row-start-#{$i}  { grid-row-start: $i; }
            .k-row-end-#{$i}    { grid-row-end: $i; }
        }
    }

}

// #endregion

// #endregion
// #region @import "_overflow.scss"; -> /packages/bootstrap/scss/utils/_overflow.scss
// #region @import "~@progress/kendo-theme-default/scss/utils/_overflow.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/utils/_overflow.scss
@include exports( "utils/overflow" ) {

    @each $force, $attribute in $utils-classes-force {

        @each $overflow in $utils-overflows {

            @each $axis in $utils-overflow-axis {
                .k-overflow#{$axis}#{$overflow}#{$force} {
                    overflow: $overflow#{$attribute};
                }
            }

            @each $overflow-y in $utils-overflows {
                .k-overflow-#{$overflow}-#{$overflow-y}#{$force} {
                    overflow-x: $overflow#{$attribute};
                    overflow-y: $overflow-y#{$attribute};
                }
            }
        }
    }

}

// #endregion

// #endregion
// #region @import "_position.scss"; -> /packages/bootstrap/scss/utils/_position.scss
// #region @import "~@progress/kendo-theme-default/scss/utils/_position.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/utils/_position.scss
@include exports( "utils/position" ) {

    @each $pos in (static, relative, absolute, fixed, sticky) {
        .k-#{$pos},
        .k-pos-#{$pos} { position: $pos; } // sass-lint:disable-line brace-style
    }

    @each $side in (top, right, bottom, left) {
        .k-#{$side},
        .k-pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
    }

    .k-top-start,
    .k-pos-top-start {
        top: 0;
        left: 0;

        .k-rtl &,
        &[dir="rtl"],
        [dir="rtl"] & {
            left: auto;
            right: 0;
        }
    }
    .k-top-end,
    .k-pos-top-end {
        top: 0;
        right: 0;

        .k-rtl &,
        &[dir="rtl"],
        [dir="rtl"] & {
            right: auto;
            left: 0;
        }
    }
    .k-bottom-start,
    .k-pos-bottom-start {
        bottom: 0;
        left: 0;

        .k-rtl &,
        &[dir="rtl"],
        [dir="rtl"] & {
            left: auto;
            right: 0;
        }
    }
    .k-bottom-end,
    .k-pos-bottom-end {
        bottom: 0;
        right: 0;

        .k-rtl &,
        &[dir="rtl"],
        [dir="rtl"] & {
            right: auto;
            left: 0;
        }
    }

}

// #endregion

// #endregion
// #region @import "_spacing.scss"; -> /packages/bootstrap/scss/utils/_spacing.scss
// #region @import "~@progress/kendo-theme-default/scss/utils/_spacing.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/utils/_spacing.scss
@include exports( "utils/spacing" ) {

    // sass-lint:disable-block no-important
    // sass-lint:disable-block indentation

    // Padding
    @each $name, $prop in (
        pt: padding-top,
        pr: padding-right,
        pb: padding-bottom,
        pl: padding-left
    ) {
        .k-#{$name}-0 { #{$prop}: 0; }
        .k-#{$name}-0-f { #{$prop}: 0 !important; }
    }

    // Margin
    @each $name, $prop in (
        mt: margin-top,
        mr: margin-right,
        mb: margin-bottom,
        ml: margin-left
    ) {
        .k-#{$name}-0 { #{$prop}: 0; }
        .k-#{$name}-0-f { #{$prop}: 0 !important; }
    }

}

// #endregion

// #endregion
// #region @import "_table-layout.scss"; -> /packages/bootstrap/scss/utils/_table-layout.scss
// #region @import "~@progress/kendo-theme-default/scss/utils/_table-layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/utils/_table-layout.scss
@include exports( "utils/table-layout" ) {

    // sass-lint:disable-block no-important

    // Table layout modes
    .k-table-layout-fixed           { table-layout: fixed; }
    .k-table-layout-auto            { table-layout: auto; }

}

// #endregion

// #endregion
// #region @import "_text.scss"; -> /packages/bootstrap/scss/utils/_text.scss
// #region @import "~@progress/kendo-theme-default/scss/utils/_text.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/utils/_text.scss
@include exports( "utils/text" ) {

    $text-align: ( left, right, center, justify ) !default;
    $text-transform: ( lowercase, uppercase, capitalize ) !default;

    // Wrapping
    .k-text-nowrap                  { white-space: nowrap !important; } // sass-lint:disable-line no-important
    .k-text-ellipsis                { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // sass-lint:disable-line one-declaration-per-line

    // Align
    @each $align in $text-align {
        .k-text-#{$align}           { text-align: $align !important; } // sass-lint:disable-line no-important
    }

    // Transform
    @each $transform in $text-transform {
        .k-text-#{$transform}       { text-transform: $transform !important; } // sass-lint:disable-line no-important
    }

    // Named font-weight
    .k-font-weight-light            { font-weight: $font-weight-light !important; } // sass-lint:disable-line no-important
    .k-font-weight-normal           { font-weight: $font-weight-normal !important; } // sass-lint:disable-line no-important
    .k-font-weight-bold             { font-weight: $font-weight-bold !important; } // sass-lint:disable-line no-important

}

// #endregion

// #endregion
// #region @import "_transform.scss"; -> /packages/bootstrap/scss/utils/_transform.scss
// #region @import "~@progress/kendo-theme-default/scss/utils/_transform.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/utils/_transform.scss
@include exports( "utils/transform" ) {

    // Flip
    .k-flip-h               { transform: scaleX( -1 ); }
    .k-flip-v               { transform: scaleY( -1 ); }
    .k-flip-h.k-flip-v      { transform: scale( -1, -1 ); }


    // Rotate
    .k-rotate-45            { transform: rotate( 45deg ); }
    .k-rotate-90            { transform: rotate( 90deg ); }
    .k-rotate-135           { transform: rotate( 135deg ); }
    .k-rotate-180           { transform: rotate( 180deg ); }
    .k-rotate-225           { transform: rotate( 225deg ); }
    .k-rotate-270           { transform: rotate( 270deg ); }
    .k-rotate-315           { transform: rotate( 315deg ); }


    // Scale
    .k-scale-0              { transform: scale( 0, 0 ); }
    .k-scale-1              { transform: scale( 1, 1 ); }
    .k-scale-2              { transform: scale( 2, 2 ); }


    // Translate
    .k-translate-0          { transform: translate( 0, 0 ); }
    .k-translate-0-50       { transform: translate( 0, 50% ); }
    .k-translate-0-100      { transform: translate( 0, 100% ); }
    .k-translate-50-0       { transform: translate( 50%, 0 ); }
    .k-translate-50-50      { transform: translate( 50%, 50% ); }
    .k-translate-50-100     { transform: translate( 50%, 100% ); }
    .k-translate-100-0      { transform: translate( 100%, 0 ); }
    .k-translate-100-50     { transform: translate( 100%, 50% ); }
    .k-translate-100-100    { transform: translate( 100%, 100% ); }

}

// #endregion

// #endregion

// #endregion
// #region @import "icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/icons/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/icons/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/icons/_layout.scss
// #region @import "./font/WebComponentsIcons.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/icons/font/WebComponentsIcons.scss
// #region @import "../../mixins/_index.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_index.scss
// #region @import /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion

@include exports("WebComponentsIcons.ttf") {
    @include register-data-uri("WebComponentsIcons.ttf", "data:font/ttf;base64, ")
}

// #endregion

@include exports( "icons/layout" ) {
    $icon-font-url: map-get( $data-uris, "WebComponentsIcons.ttf" ) !default;

    @font-face {
        font-family: "WebComponentsIcons";
        font-style: normal;
        font-weight: normal;
        src: url(#{$icon-font-url}) format( "truetype" );
    }

    .k-icon {
        width: 1em;
        height: 1em;
        outline: 0;
        font-size: $icon-size;
        font-family: "WebComponentsIcons";
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        line-height: 1;
        speak: none;
        text-transform: none;
        text-decoration: none;
        flex-shrink: 0;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        position: relative;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;

        &:hover,
        &:focus {
            text-decoration: none;
        }
    }
    .k-no-flexbox { display: inline-block; }

    .k-svg-icon {
        width: 1em;
        height: 1em;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        position: relative;

        > svg {
            fill: currentColor;
            flex: 1 0 auto;
        }

        &.k-flip-h,
        &.k-flip-v,
        &.k-flip-h.k-flip-v {
            transform: none;
        }

        &.k-flip-h {
            > svg {
                transform: scaleX( -1 );
            }
        }

        &.k-flip-v {
            > svg {
                transform: scaleY( -1 );
            }
        }

        &.k-flip-h.k-flip-v {
            > svg {
                transform: scale( -1, -1 );
            }
        }
    }

    .k-icon-with-modifier {
        position: relative;
        margin: .25em;
    }

    .k-icon-modifier {
        position: absolute;
        font-size: .5em;
        bottom: 0;
        right: 0;
        margin: 0 -.5em -.5em 0;
    }

    .k-i-none::before {
        content: "";
        display: none;
    }

    .k-widget .k-icon {
        &.k-i-expand,
        &.k-i-collapse {
            cursor: pointer;
        }
    }

    .k-icon-xs { font-size: ( $icon-size * .5 ); }
    .k-icon-sm { font-size: ( $icon-size * .75 ); }
    .k-icon-md { font-size: ( $icon-size * 2 ); }
    .k-icon-lg { font-size: ( $icon-size * 3 ); }
    .k-icon-xl { font-size: ( $icon-size * 4 ); }


    .k-i-caret-tr::before { content: "\e000"; }
    .k-i-arrow-45-up-right::before { content: "\e000"; }
    .k-i-collapse-ne::before { content: "\e000"; }
    .k-i-resize-ne::before { content: "\e000"; }
    .k-i-caret-br::before { content: "\e001"; }
    .k-i-arrow-45-down-right::before { content: "\e001"; }
    .k-i-collapse-se::before { content: "\e001"; }
    .k-i-resize-se::before { content: "\e001"; }
    .k-i-caret-bl::before { content: "\e002"; }
    .k-i-arrow-45-down-left::before { content: "\e002"; }
    .k-i-collapse-sw::before { content: "\e002"; }
    .k-i-resize-sw::before { content: "\e002"; }
    .k-i-caret-tl::before { content: "\e003"; }
    .k-i-arrow-45-up-left::before { content: "\e003"; }
    .k-i-collapse-nw::before { content: "\e003"; }
    .k-i-resize-nw::before { content: "\e003"; }
    .k-i-caret-alt-up::before { content: "\e004"; }
    .k-i-arrow-60-up::before { content: "\e004"; }
    .k-i-arrow-n::before { content: "\e004"; }
    .k-i-kpi-trend-increase::before { content: "\e004"; }
    .k-i-expand-n::before { content: "\e004"; }
    .k-i-sarrow-n::before { content: "\e004"; }
    .k-i-caret-alt-right::before { content: "\e005"; }
    .k-i-arrow-60-right::before { content: "\e005"; }
    .k-i-arrow-e::before { content: "\e005"; }
    .k-i-expand::before { content: "\e005"; }
    .k-i-expand-e::before { content: "\e005"; }
    .k-i-sarrow-e::before { content: "\e005"; }
    .k-i-caret-alt-down::before { content: "\e006"; }
    .k-i-arrow-60-down::before { content: "\e006"; }
    .k-i-arrow-s::before { content: "\e006"; }
    .k-i-kpi-trend-decrease::before { content: "\e006"; }
    .k-i-expand-s::before { content: "\e006"; }
    .k-i-collapse::before { content: "\e006"; }
    .k-i-sarrow-s::before { content: "\e006"; }
    .k-i-caret-alt-left::before { content: "\e007"; }
    .k-i-arrow-60-left::before { content: "\e007"; }
    .k-i-arrow-w::before { content: "\e007"; }
    .k-i-expand-w::before { content: "\e007"; }
    .k-i-sarrow-w::before { content: "\e007"; }
    .k-i-caret-alt-to-top::before { content: "\e008"; }
    .k-i-arrow-end-up::before { content: "\e008"; }
    .k-i-seek-n::before { content: "\e008"; }
    .k-i-caret-alt-to-right::before { content: "\e009"; }
    .k-i-arrow-end-right::before { content: "\e009"; }
    .k-i-seek-e::before { content: "\e009"; }
    .k-i-caret-alt-to-bottom::before { content: "\e00a"; }
    .k-i-arrow-end-down::before { content: "\e00a"; }
    .k-i-seek-s::before { content: "\e00a"; }
    .k-i-caret-alt-to-left::before { content: "\e00b"; }
    .k-i-arrow-end-left::before { content: "\e00b"; }
    .k-i-seek-w::before { content: "\e00b"; }
    .k-i-caret-double-alt-up::before { content: "\e00c"; }
    .k-i-arrow-double-60-up::before { content: "\e00c"; }
    .k-i-arrow-seek-up::before { content: "\e00c"; }
    .k-i-caret-double-alt-right::before { content: "\e00d"; }
    .k-i-arrow-double-60-right::before { content: "\e00d"; }
    .k-i-arrow-seek-right::before { content: "\e00d"; }
    .k-i-forward-sm::before { content: "\e00d"; }
    .k-i-caret-double-alt-down::before { content: "\e00e"; }
    .k-i-arrow-double-60-down::before { content: "\e00e"; }
    .k-i-arrow-seek-down::before { content: "\e00e"; }
    .k-i-caret-double-alt-left::before { content: "\e00f"; }
    .k-i-arrow-double-60-left::before { content: "\e00f"; }
    .k-i-arrow-seek-left::before { content: "\e00f"; }
    .k-i-rewind-sm::before { content: "\e00f"; }
    .k-i-caret-alt-expand::before { content: "\e010"; }
    .k-i-arrows-kpi::before { content: "\e010"; }
    .k-i-kpi::before { content: "\e010"; }
    .k-i-caret-alt-sort::before { content: "\e010"; }
    .k-i-arrows-no-change::before { content: "\e011"; }
    .k-i-arrow-overflow-down::before { content: "\e012"; }
    .k-i-chevron-up::before { content: "\e013"; }
    .k-i-arrow-chevron-up::before { content: "\e013"; }
    .k-i-arrowhead-n::before { content: "\e013"; }
    .k-i-chevron-right::before { content: "\e014"; }
    .k-i-arrow-chevron-right::before { content: "\e014"; }
    .k-i-arrowhead-e::before { content: "\e014"; }
    .k-i-chevron-down::before { content: "\e015"; }
    .k-i-arrow-chevron-down::before { content: "\e015"; }
    .k-i-arrowhead-s::before { content: "\e015"; }
    .k-i-chevron-left::before { content: "\e016"; }
    .k-i-arrow-chevron-left::before { content: "\e016"; }
    .k-i-arrowhead-w::before { content: "\e016"; }
    .k-i-arrow-up::before { content: "\e017"; }
    .k-i-arrow-right::before { content: "\e018"; }
    .k-i-arrow-down::before { content: "\e019"; }
    .k-i-arrow-left::before { content: "\e01a"; }
    .k-i-level-down::before { content: "\e01b"; }
    .k-i-arrow-drill::before { content: "\e01b"; }
    .k-i-level-up::before { content: "\e01c"; }
    .k-i-arrow-parent::before { content: "\e01c"; }
    .k-i-level-to-top::before { content: "\e01d"; }
    .k-i-arrow-root::before { content: "\e01d"; }
    .k-i-level-root::before { content: "\e01d"; }
    .k-i-col-resize::before { content: "\e01e"; }
    .k-i-arrows-resizing::before { content: "\e01e"; }
    .k-i-arrows-axes::before { content: "\e01f"; }
    .k-i-arrows-dimensions::before { content: "\e01f"; }
    .k-i-dimension::before { content: "\e01f"; }
    .k-i-arrows-swap::before { content: "\e020"; }
    .k-i-drag-and-drop::before { content: "\e021"; }
    .k-i-categorize::before { content: "\e022"; }
    .k-i-grid::before { content: "\e023"; }
    .k-i-grid-layout::before { content: "\e024"; }
    .k-i-group::before { content: "\e025"; }
    .k-i-ungroup::before { content: "\e026"; }
    .k-i-handler-drag::before { content: "\e027"; }
    .k-i-layout::before { content: "\e028"; }
    .k-i-layout-1-by-4::before { content: "\e029"; }
    .k-i-layout-2-by-2::before { content: "\e02a"; }
    .k-i-page-layout::before { content: "\e02a"; }
    .k-i-layout-side-by-side::before { content: "\e02b"; }
    .k-i-layout-stacked::before { content: "\e02c"; }
    .k-i-columns::before { content: "\e02d"; }
    .k-i-rows::before { content: "\e02e"; }
    .k-i-reorder::before { content: "\e02f"; }
    .k-i-menu::before { content: "\e030"; }
    .k-i-hamburger::before { content: "\e030"; }
    .k-i-more-vertical::before { content: "\e031"; }
    .k-i-more-v::before { content: "\e031"; }
    .k-i-vbars::before { content: "\e031"; }
    .k-i-more-horizontal::before { content: "\e032"; }
    .k-i-more-h::before { content: "\e032"; }
    .k-i-hbars::before { content: "\e032"; }
    .k-i-overlap::before { content: "\e033"; }
    .k-i-home::before { content: "\e034"; }
    .k-i-root::before { content: "\e034"; }
    .k-i-undo::before { content: "\e100"; }
    .k-i-undo-large::before { content: "\e100"; }
    .k-i-redo::before { content: "\e101"; }
    .k-i-redo-large::before { content: "\e101"; }
    .k-i-arrow-rotate-ccw::before { content: "\e102"; }
    .k-i-reset::before { content: "\e102"; }
    .k-i-arrow-rotate-cw::before { content: "\e103"; }
    .k-i-reload::before { content: "\e103"; }
    .k-i-refresh::before { content: "\e103"; }
    .k-i-recurrence::before { content: "\e103"; }
    .k-i-arrows-repeat::before { content: "\e103"; }
    .k-i-arrows-no-repeat::before { content: "\e104"; }
    .k-i-non-recurrence::before { content: "\e104"; }
    .k-i-refresh-clear::before { content: "\e104"; }
    .k-i-arrow-rotate-ccw-small::before { content: "\e105"; }
    .k-i-reset-sm::before { content: "\e105"; }
    .k-i-arrow-rotate-cw-small::before { content: "\e106"; }
    .k-i-reload-sm::before { content: "\e106"; }
    .k-i-refresh-sm::before { content: "\e106"; }
    .k-i-recurrence-sm::before { content: "\e106"; }
    .k-i-arrows-repeat-sm::before { content: "\e106"; }
    .k-i-clock::before { content: "\e107"; }
    .k-i-calendar::before { content: "\e108"; }
    .k-i-save::before { content: "\e109"; }
    .k-i-floppy::before { content: "\e109"; }
    .k-i-print::before { content: "\e10a"; }
    .k-i-printer::before { content: "\e10a"; }
    .k-i-pencil::before { content: "\e10b"; }
    .k-i-edit::before { content: "\e10b"; }
    .k-i-trash::before { content: "\e10c"; }
    .k-i-delete::before { content: "\e10c"; }
    .k-i-paperclip::before { content: "\e10d"; }
    .k-i-attachment::before { content: "\e10d"; }
    .k-i-clip::before { content: "\e10d"; }
    .k-i-paperclip-alt::before { content: "\e10e"; }
    .k-i-attachment-45::before { content: "\e10e"; }
    .k-i-clip-45::before { content: "\e10e"; }
    .k-i-link::before { content: "\e10f"; }
    .k-i-link-horizontal::before { content: "\e10f"; }
    .k-i-hyperlink::before { content: "\e10f"; }
    .k-i-link-h::before { content: "\e10f"; }
    .k-i-unlink::before { content: "\e110"; }
    .k-i-unlink-horizontal::before { content: "\e110"; }
    .k-i-hyperlink-remove::before { content: "\e110"; }
    .k-i-unlink-h::before { content: "\e110"; }
    .k-i-link-vertical::before { content: "\e111"; }
    .k-i-link-v::before { content: "\e111"; }
    .k-i-unlink-vertical::before { content: "\e112"; }
    .k-i-unlink-v::before { content: "\e112"; }
    .k-i-lock::before { content: "\e113"; }
    .k-i-unlock::before { content: "\e114"; }
    .k-i-cancel::before { content: "\e115"; }
    .k-i-cancel-outline::before { content: "\e116"; }
    .k-i-deny::before { content: "\e116"; }
    .k-i-cancel-circle::before { content: "\e117"; }
    .k-i-check::before { content: "\e118"; }
    .k-i-checkmark::before { content: "\e118"; }
    .k-i-tick::before { content: "\e118"; }
    .k-i-check-outline::before { content: "\e119"; }
    .k-i-checkmark-outline::before { content: "\e119"; }
    .k-i-success::before { content: "\e119"; }
    .k-i-check-circle::before { content: "\e11a"; }
    .k-i-checkmark-circle::before { content: "\e11a"; }
    .k-i-x::before { content: "\e11b"; }
    .k-i-close::before { content: "\e11b"; }
    .k-i-clear::before { content: "\e11b"; }
    .k-i-times::before { content: "\e11b"; }
    .k-i-group-delete::before { content: "\e11b"; }
    .k-i-x-outline::before { content: "\e11c"; }
    .k-i-close-outline::before { content: "\e11c"; }
    .k-i-clear-outline::before { content: "\e11c"; }
    .k-i-times-outline::before { content: "\e11c"; }
    .k-i-error::before { content: "\e11c"; }
    .k-i-x-circle::before { content: "\e11d"; }
    .k-i-close-circle::before { content: "\e11d"; }
    .k-i-clear-circle::before { content: "\e11d"; }
    .k-i-times-circle::before { content: "\e11d"; }
    .k-i-plus::before { content: "\e11e"; }
    .k-i-add::before { content: "\e11e"; }
    .k-i-plus-outline::before { content: "\e11f"; }
    .k-i-add-outline::before { content: "\e11f"; }
    .k-i-plus-circle::before { content: "\e120"; }
    .k-i-add-circle::before { content: "\e120"; }
    .k-i-minus::before { content: "\e121"; }
    .k-i-kpi-trend-equal::before { content: "\e121"; }
    .k-i-minus-outline::before { content: "\e122"; }
    .k-i-minus-circle::before { content: "\e123"; }
    .k-i-sort-asc::before { content: "\e124"; }
    .k-i-sort-desc::before { content: "\e125"; }
    .k-i-sort-clear::before { content: "\e126"; }
    .k-i-unsort::before { content: "\e126"; }
    .k-i-sort-asc-small::before { content: "\e127"; }
    .k-i-sort-asc-sm::before { content: "\e127"; }
    .k-i-sort-desc-small::before { content: "\e128"; }
    .k-i-sort-desc-sm::before { content: "\e128"; }
    .k-i-filter::before { content: "\e129"; }
    .k-i-filter-clear::before { content: "\e12a"; }
    .k-i-filter-small::before { content: "\e12b"; }
    .k-i-filter-sm::before { content: "\e12b"; }
    .k-i-filter-sort-asc-small::before { content: "\e12c"; }
    .k-i-filter-sort-asc-sm::before { content: "\e12c"; }
    .k-i-filter-sort-desc-small::before { content: "\e12d"; }
    .k-i-filter-sort-desc-sm::before { content: "\e12d"; }
    .k-i-filter-add-expression::before { content: "\e12e"; }
    .k-i-filter-add-group::before { content: "\e12f"; }
    .k-i-login::before { content: "\e130"; }
    .k-i-sign-in::before { content: "\e130"; }
    .k-i-logout::before { content: "\e131"; }
    .k-i-sign-out::before { content: "\e131"; }
    .k-i-download::before { content: "\e132"; }
    .k-i-upload::before { content: "\e133"; }
    .k-i-hyperlink-open::before { content: "\e134"; }
    .k-i-hyperlink-open-sm::before { content: "\e135"; }
    .k-i-launch::before { content: "\e136"; }
    .k-i-window::before { content: "\e137"; }
    .k-i-window-maximize::before { content: "\e137"; }
    .k-i-maximize::before { content: "\e137"; }
    .k-i-window-restore::before { content: "\e138"; }
    .k-i-windows::before { content: "\e138"; }
    .k-i-tiles::before { content: "\e138"; }
    .k-i-restore::before { content: "\e138"; }
    .k-i-window-minimize::before { content: "\e139"; }
    .k-i-minimize::before { content: "\e139"; }
    .k-i-gear::before { content: "\e13a"; }
    .k-i-cog::before { content: "\e13a"; }
    .k-i-custom::before { content: "\e13a"; }
    .k-i-gears::before { content: "\e13b"; }
    .k-i-cogs::before { content: "\e13b"; }
    .k-i-wrench::before { content: "\e13c"; }
    .k-i-settings::before { content: "\e13c"; }
    .k-i-eye::before { content: "\e13d"; }
    .k-i-preview::before { content: "\e13d"; }
    .k-i-search::before { content: "\e13e"; }
    .k-i-zoom::before { content: "\e13e"; }
    .k-i-zoom-in::before { content: "\e13f"; }
    .k-i-zoom-out::before { content: "\e140"; }
    .k-i-arrows-move::before { content: "\e141"; }
    .k-i-pan::before { content: "\e141"; }
    .k-i-move::before { content: "\e141"; }
    .k-i-calculator::before { content: "\e142"; }
    .k-i-cart::before { content: "\e143"; }
    .k-i-shopping-cart::before { content: "\e143"; }
    .k-i-connector::before { content: "\e144"; }
    .k-i-plus-sm::before { content: "\e145"; }
    .k-i-splus::before { content: "\e145"; }
    .k-i-minus-sm::before { content: "\e146"; }
    .k-i-sminus::before { content: "\e146"; }
    .k-i-kpi-status-deny::before { content: "\e147"; }
    .k-i-kpi-status-hold::before { content: "\e148"; }
    .k-i-kpi-status-open::before { content: "\e149"; }
    .k-i-equal::before { content: "\e14a"; }
    .k-i-not-equal::before { content: "\e14b"; }
    .k-i-less-or-equal::before { content: "\e14c"; }
    .k-i-greater-or-equal::before { content: "\e14d"; }
    .k-i-divide::before { content: "\e14e"; }
    .k-i-accessibility::before { content: "\e14f"; }
    .k-i-barcode-outline::before { content: "\e150"; }
    .k-i-barcode::before { content: "\e151"; }
    .k-i-barcode-scanner::before { content: "\e152"; }
    .k-i-qr-code-outline::before { content: "\e153"; }
    .k-i-qr-code::before { content: "\e154"; }
    .k-i-qr-code-scanner::before { content: "\e155"; }
    .k-i-barcode-qr-code-scanner::before { content: "\e156"; }
    .k-i-signature::before { content: "\e157"; }
    .k-i-hand::before { content: "\e158"; }
    .k-i-pointer::before { content: "\e159"; }
    .k-i-cursor::before { content: "\e159"; }
    .k-i-stick::before { content: "\e15a"; }
    .k-i-unstick::before { content: "\e15b"; }
    .k-i-set-column-position::before { content: "\e15c"; }
    .k-i-play::before { content: "\e200"; }
    .k-i-pause::before { content: "\e201"; }
    .k-i-stop::before { content: "\e202"; }
    .k-i-rewind::before { content: "\e203"; }
    .k-i-forward::before { content: "\e204"; }
    .k-i-volume-down::before { content: "\e205"; }
    .k-i-volume-low::before { content: "\e205"; }
    .k-i-volume-up::before { content: "\e206"; }
    .k-i-volume-high::before { content: "\e206"; }
    .k-i-volume-mute::before { content: "\e207"; }
    .k-i-volume-off::before { content: "\e207"; }
    .k-i-hd::before { content: "\e208"; }
    .k-i-closed-captions::before { content: "\e209"; }
    .k-i-subtitles::before { content: "\e209"; }
    .k-i-playlist::before { content: "\e20a"; }
    .k-i-music-notes::before { content: "\e20b"; }
    .k-i-audio::before { content: "\e20b"; }
    .k-i-play-sm::before { content: "\e20c"; }
    .k-i-pause-sm::before { content: "\e20d"; }
    .k-i-stop-sm::before { content: "\e20e"; }
    .k-i-heart-outline::before { content: "\e300"; }
    .k-i-fav-outline::before { content: "\e300"; }
    .k-i-favorite-outline::before { content: "\e300"; }
    .k-i-heart::before { content: "\e301"; }
    .k-i-fav::before { content: "\e301"; }
    .k-i-favorite::before { content: "\e301"; }
    .k-i-star-outline::before { content: "\e302"; }
    .k-i-bookmark-outline::before { content: "\e302"; }
    .k-i-star::before { content: "\e303"; }
    .k-i-bookmark::before { content: "\e303"; }
    .k-i-checkbox::before { content: "\e304"; }
    .k-i-shape-rect::before { content: "\e304"; }
    .k-i-checkbox-checked::before { content: "\e305"; }
    .k-i-checkbox-indeterminate::before { content: "\e306"; }
    .k-i-tri-state-indeterminate::before { content: "\e306"; }
    .k-i-checkbox-null::before { content: "\e307"; }
    .k-i-tri-state-null::before { content: "\e307"; }
    .k-i-circle::before { content: "\e308"; }
    .k-i-radiobutton::before { content: "\e309"; }
    .k-i-shape-circle::before { content: "\e309"; }
    .k-i-radiobutton-checked::before { content: "\e30a"; }
    .k-i-bell::before { content: "\e400"; }
    .k-i-notification::before { content: "\e400"; }
    .k-i-info-circle::before { content: "\e401"; }
    .k-i-information::before { content: "\e401"; }
    .k-i-info::before { content: "\e401"; }
    .k-i-note::before { content: "\e401"; }
    .k-i-question-circle::before { content: "\e402"; }
    .k-i-question::before { content: "\e402"; }
    .k-i-help::before { content: "\e402"; }
    .k-i-exclamation-circle::before { content: "\e403"; }
    .k-i-warning::before { content: "\e403"; }
    .k-i-exception::before { content: "\e403"; }
    .k-i-camera::before { content: "\e500"; }
    .k-i-photo-camera::before { content: "\e500"; }
    .k-i-image::before { content: "\e501"; }
    .k-i-photo::before { content: "\e501"; }
    .k-i-image-export::before { content: "\e502"; }
    .k-i-photo-export::before { content: "\e502"; }
    .k-i-zoom-actual-size::before { content: "\e503"; }
    .k-i-zoom-best-fit::before { content: "\e504"; }
    .k-i-image-resize::before { content: "\e505"; }
    .k-i-crop::before { content: "\e506"; }
    .k-i-mirror::before { content: "\e507"; }
    .k-i-flip-horizontal::before { content: "\e508"; }
    .k-i-flip-h::before { content: "\e508"; }
    .k-i-flip-vertical::before { content: "\e509"; }
    .k-i-flip-v::before { content: "\e509"; }
    .k-i-rotate::before { content: "\e50a"; }
    .k-i-rotate-right::before { content: "\e50b"; }
    .k-i-rotate-cw::before { content: "\e50b"; }
    .k-i-rotate-left::before { content: "\e50c"; }
    .k-i-rotate-ccw::before { content: "\e50c"; }
    .k-i-brush::before { content: "\e50d"; }
    .k-i-palette::before { content: "\e50e"; }
    .k-i-droplet::before { content: "\e50f"; }
    .k-i-paint::before { content: "\e50f"; }
    .k-i-background::before { content: "\e50f"; }
    .k-i-shape-line::before { content: "\e510"; }
    .k-i-line::before { content: "\e510"; }
    .k-i-brightness-contrast::before { content: "\e511"; }
    .k-i-sliders::before { content: "\e512"; }
    .k-i-saturation::before { content: "\e512"; }
    .k-i-invert-colors::before { content: "\e513"; }
    .k-i-transparency::before { content: "\e514"; }
    .k-i-opacity::before { content: "\e514"; }
    .k-i-grayscale::before { content: "\e515"; }
    .k-i-blur::before { content: "\e516"; }
    .k-i-sharpen::before { content: "\e517"; }
    .k-i-shapes::before { content: "\e518"; }
    .k-i-shape::before { content: "\e518"; }
    .k-i-round-corners::before { content: "\e519"; }
    .k-i-bring-to-front::before { content: "\e51a"; }
    .k-i-front-element::before { content: "\e51a"; }
    .k-i-bring-to-back::before { content: "\e51b"; }
    .k-i-back-element::before { content: "\e51b"; }
    .k-i-bring-forward::before { content: "\e51c"; }
    .k-i-forward-element::before { content: "\e51c"; }
    .k-i-bring-backward::before { content: "\e51d"; }
    .k-i-backward-element::before { content: "\e51d"; }
    .k-i-align-self-start::before { content: "\e51e"; }
    .k-i-align-left-element::before { content: "\e51e"; }
    .k-i-align-self-center::before { content: "\e51f"; }
    .k-i-align-center-element::before { content: "\e51f"; }
    .k-i-align-self-end::before { content: "\e520"; }
    .k-i-align-right-element::before { content: "\e520"; }
    .k-i-align-self-start-alt::before { content: "\e521"; }
    .k-i-align-top-element::before { content: "\e521"; }
    .k-i-align-self-center-alt::before { content: "\e522"; }
    .k-i-align-middle-element::before { content: "\e522"; }
    .k-i-align-self-end-alt::before { content: "\e523"; }
    .k-i-align-bottom-element::before { content: "\e523"; }
    .k-i-thumbnails-up::before { content: "\e524"; }
    .k-i-thumbnails-right::before { content: "\e525"; }
    .k-i-thumbnails-down::before { content: "\e526"; }
    .k-i-thumbnails-left::before { content: "\e527"; }
    .k-i-fullscreen::before { content: "\e528"; }
    .k-i-full-screen::before { content: "\e528"; }
    .k-i-fullscreen-enter::before { content: "\e528"; }
    .k-i-fullscreen-exit::before { content: "\e529"; }
    .k-i-full-screen-exit::before { content: "\e529"; }
    .k-i-droplet-slash::before { content: "\e52a"; }
    .k-i-reset-color::before { content: "\e52a"; }
    .k-i-paint-remove::before { content: "\e52a"; }
    .k-i-background-remove::before { content: "\e52a"; }
    .k-i-photos::before { content: "\e52b"; }
    .k-i-images::before { content: "\e52b"; }
    .k-i-gallery::before { content: "\e52b"; }
    .k-i-align-to-grid::before { content: "\e52c"; }
    .k-i-size-to-grid::before { content: "\e52d"; }
    .k-i-make-same-size::before { content: "\e52e"; }
    .k-i-make-same-width::before { content: "\e52f"; }
    .k-i-make-same-height::before { content: "\e530"; }
    .k-i-make-horizontal-spacing-equal::before { content: "\e531"; }
    .k-i-increase-horizontal-spacing::before { content: "\e532"; }
    .k-i-decrease-horizontal-spacing::before { content: "\e533"; }
    .k-i-remove-horizontal-spacing::before { content: "\e534"; }
    .k-i-make-vertical-spacing-equal::before { content: "\e535"; }
    .k-i-increase-vertical-spacing::before { content: "\e536"; }
    .k-i-decrease-vertical-spacing::before { content: "\e537"; }
    .k-i-remove-vertical-spacing::before { content: "\e538"; }
    .k-i-eyedropper::before { content: "\e539"; }
    .k-i-snap-grid::before { content: "\e53a"; }
    .k-i-snap-to-gridlines::before { content: "\e53b"; }
    .k-i-snap-to-snaplines::before { content: "\e53c"; }
    .k-i-dimentions::before { content: "\e53d"; }
    .k-i-align-self-stretch::before { content: "\e53e"; }
    .k-i-align-stretch-element-horizontal::before { content: "\e53e"; }
    .k-i-align-self-stretch-alt::before { content: "\e53f"; }
    .k-i-align-stretch-element-vertical::before { content: "\e53f"; }
    .k-i-align-items-start::before { content: "\e540"; }
    .k-i-align-left-elements::before { content: "\e540"; }
    .k-i-align-items-center::before { content: "\e541"; }
    .k-i-align-center-elements::before { content: "\e541"; }
    .k-i-align-items-end::before { content: "\e542"; }
    .k-i-align-right-elements::before { content: "\e542"; }
    .k-i-align-items-stretch::before { content: "\e543"; }
    .k-i-align-stretch-elements-horizontal::before { content: "\e543"; }
    .k-i-align-items-baseline::before { content: "\e544"; }
    .k-i-align-baseline-horizontal::before { content: "\e544"; }
    .k-i-align-items-start-alt::before { content: "\e545"; }
    .k-i-align-top-elements::before { content: "\e545"; }
    .k-i-align-items-center-alt::before { content: "\e546"; }
    .k-i-align-middle-elements::before { content: "\e546"; }
    .k-i-align-items-end-alt::before { content: "\e547"; }
    .k-i-align-bottom-elements::before { content: "\e547"; }
    .k-i-align-items-stretch-alt::before { content: "\e548"; }
    .k-i-align-stretch-elements-vertical::before { content: "\e548"; }
    .k-i-align-items-baseline-alt::before { content: "\e549"; }
    .k-i-align-baseline-vertical::before { content: "\e549"; }
    .k-i-justify-content-start::before { content: "\e54a"; }
    .k-i-justify-start-horizontal::before { content: "\e54a"; }
    .k-i-justify-content-center::before { content: "\e54b"; }
    .k-i-justify-center-horizontal::before { content: "\e54b"; }
    .k-i-justify-content-end::before { content: "\e54c"; }
    .k-i-justify-end-horizontal::before { content: "\e54c"; }
    .k-i-justify-content-between::before { content: "\e54d"; }
    .k-i-justify-between-horizontal::before { content: "\e54d"; }
    .k-i-justify-content-around::before { content: "\e54e"; }
    .k-i-justify-around-horizontal::before { content: "\e54e"; }
    .k-i-justify-content-start-alt::before { content: "\e54f"; }
    .k-i-justify-start-vertical::before { content: "\e54f"; }
    .k-i-justify-content-center-alt::before { content: "\e550"; }
    .k-i-justify-center-vertical::before { content: "\e550"; }
    .k-i-justify-content-end-alt::before { content: "\e551"; }
    .k-i-justify-end-vertical::before { content: "\e551"; }
    .k-i-justify-content-between-alt::before { content: "\e552"; }
    .k-i-justify-between-vertical::before { content: "\e552"; }
    .k-i-justify-content-around-alt::before { content: "\e553"; }
    .k-i-justify-around-vertical::before { content: "\e553"; }
    .k-i-file-wrench::before { content: "\e600"; }
    .k-i-page-properties::before { content: "\e600"; }
    .k-i-bold::before { content: "\e601"; }
    .k-i-italic::before { content: "\e602"; }
    .k-i-underline::before { content: "\e603"; }
    .k-i-font-family::before { content: "\e604"; }
    .k-i-foreground-color::before { content: "\e605"; }
    .k-i-text::before { content: "\e605"; }
    .k-i-convert-lowercase::before { content: "\e606"; }
    .k-i-convert-uppercase::before { content: "\e607"; }
    .k-i-strikethrough::before { content: "\e608"; }
    .k-i-strike-through::before { content: "\e608"; }
    .k-i-subscript::before { content: "\e609"; }
    .k-i-sub-script::before { content: "\e609"; }
    .k-i-supscript::before { content: "\e60a"; }
    .k-i-sup-script::before { content: "\e60a"; }
    .k-i-superscript::before { content: "\e60a"; }
    .k-i-div::before { content: "\e60b"; }
    .k-i-all::before { content: "\e60c"; }
    .k-i-h1::before { content: "\e60d"; }
    .k-i-h2::before { content: "\e60e"; }
    .k-i-h3::before { content: "\e60f"; }
    .k-i-h4::before { content: "\e610"; }
    .k-i-h5::before { content: "\e611"; }
    .k-i-h6::before { content: "\e612"; }
    .k-i-list-ordered::before { content: "\e613"; }
    .k-i-list-numbered::before { content: "\e613"; }
    .k-i-insert-ordered-list::before { content: "\e613"; }
    .k-i-list-unordered::before { content: "\e614"; }
    .k-i-list-bulleted::before { content: "\e614"; }
    .k-i-insert-unordered-list::before { content: "\e614"; }
    .k-i-indent::before { content: "\e615"; }
    .k-i-indent-increase::before { content: "\e615"; }
    .k-i-outdent::before { content: "\e616"; }
    .k-i-indent-decrease::before { content: "\e616"; }
    .k-i-insert-top::before { content: "\e617"; }
    .k-i-insert-up::before { content: "\e617"; }
    .k-i-insert-n::before { content: "\e617"; }
    .k-i-insert-middle::before { content: "\e618"; }
    .k-i-insert-m::before { content: "\e618"; }
    .k-i-insert-bottom::before { content: "\e619"; }
    .k-i-insert-down::before { content: "\e619"; }
    .k-i-insert-s::before { content: "\e619"; }
    .k-i-align-top::before { content: "\e61a"; }
    .k-i-align-middle::before { content: "\e61b"; }
    .k-i-align-bottom::before { content: "\e61c"; }
    .k-i-align-left::before { content: "\e61d"; }
    .k-i-justify-left::before { content: "\e61d"; }
    .k-i-align-center::before { content: "\e61e"; }
    .k-i-justify-center::before { content: "\e61e"; }
    .k-i-align-right::before { content: "\e61f"; }
    .k-i-justify-left::before { content: "\e61f"; }
    .k-i-align-justify::before { content: "\e620"; }
    .k-i-justify-full::before { content: "\e620"; }
    .k-i-align-remove::before { content: "\e621"; }
    .k-i-justify-clear::before { content: "\e621"; }
    .k-i-text-wrap::before { content: "\e622"; }
    .k-i-horizontal-rule::before { content: "\e623"; }
    .k-i-rule-horizontal::before { content: "\e623"; }
    .k-i-hr::before { content: "\e623"; }
    .k-i-table-align-top-left::before { content: "\e624"; }
    .k-i-table-align-top-center::before { content: "\e625"; }
    .k-i-table-align-top-right::before { content: "\e626"; }
    .k-i-table-align-middle-left::before { content: "\e627"; }
    .k-i-table-align-middle-center::before { content: "\e628"; }
    .k-i-table-align-middle-right::before { content: "\e629"; }
    .k-i-table-align-bottom-left::before { content: "\e62a"; }
    .k-i-table-align-bottom-center::before { content: "\e62b"; }
    .k-i-table-align-bottom-right::before { content: "\e62c"; }
    .k-i-table-align-remove::before { content: "\e62d"; }
    .k-i-borders-all::before { content: "\e62e"; }
    .k-i-all-borders::before { content: "\e62e"; }
    .k-i-borders-outside::before { content: "\e62f"; }
    .k-i-outside-borders::before { content: "\e62f"; }
    .k-i-borders-inside::before { content: "\e630"; }
    .k-i-inside-borders::before { content: "\e630"; }
    .k-i-borders-inside-horizontal::before { content: "\e631"; }
    .k-i-border-inside-h::before { content: "\e631"; }
    .k-i-inside-horizontal-borders::before { content: "\e631"; }
    .k-i-borders-inside-vertical::before { content: "\e632"; }
    .k-i-borders-inside-v::before { content: "\e632"; }
    .k-i-inside-vertical-borders::before { content: "\e632"; }
    .k-i-border-top::before { content: "\e633"; }
    .k-i-top-border::before { content: "\e633"; }
    .k-i-border-bottom::before { content: "\e634"; }
    .k-i-bottom-border::before { content: "\e634"; }
    .k-i-border-left::before { content: "\e635"; }
    .k-i-left-border::before { content: "\e635"; }
    .k-i-border-right::before { content: "\e636"; }
    .k-i-right-border::before { content: "\e636"; }
    .k-i-borders-none::before { content: "\e637"; }
    .k-i-border-no::before { content: "\e637"; }
    .k-i-no-borders::before { content: "\e637"; }
    .k-i-borders-show-hide::before { content: "\e638"; }
    .k-i-form::before { content: "\e639"; }
    .k-i-border::before { content: "\e639"; }
    .k-i-form-element::before { content: "\e63a"; }
    .k-i-code-snippet::before { content: "\e63b"; }
    .k-i-select-all::before { content: "\e63c"; }
    .k-i-button::before { content: "\e63d"; }
    .k-i-select-box::before { content: "\e63e"; }
    .k-i-calendar-date::before { content: "\e63f"; }
    .k-i-group-box::before { content: "\e640"; }
    .k-i-textarea::before { content: "\e641"; }
    .k-i-textbox::before { content: "\e642"; }
    .k-i-textbox-hidden::before { content: "\e643"; }
    .k-i-password::before { content: "\e644"; }
    .k-i-paragraph-add::before { content: "\e645"; }
    .k-i-edit-tools::before { content: "\e646"; }
    .k-i-template-manager::before { content: "\e647"; }
    .k-i-change-manually::before { content: "\e648"; }
    .k-i-track-changes::before { content: "\e649"; }
    .k-i-track-changes-enable::before { content: "\e64a"; }
    .k-i-track-changes-accept::before { content: "\e64b"; }
    .k-i-track-changes-accept-all::before { content: "\e64c"; }
    .k-i-track-changes-reject::before { content: "\e64d"; }
    .k-i-track-changes-reject-all::before { content: "\e64e"; }
    .k-i-document-manager::before { content: "\e64f"; }
    .k-i-custom-icon::before { content: "\e650"; }
    .k-i-book::before { content: "\e651"; }
    .k-i-dictionary-add::before { content: "\e651"; }
    .k-i-image-add::before { content: "\e652"; }
    .k-i-image-light-dialog::before { content: "\e652"; }
    .k-i-image-insert::before { content: "\e652"; }
    .k-i-insert-image::before { content: "\e652"; }
    .k-i-image-edit::before { content: "\e653"; }
    .k-i-image-map-editor::before { content: "\e654"; }
    .k-i-comment::before { content: "\e655"; }
    .k-i-comment-remove::before { content: "\e656"; }
    .k-i-comments-remove::before { content: "\e657"; }
    .k-i-comments-remove-all::before { content: "\e657"; }
    .k-i-silverlight::before { content: "\e658"; }
    .k-i-media-manager::before { content: "\e659"; }
    .k-i-video-external::before { content: "\e65a"; }
    .k-i-flash-manager::before { content: "\e65b"; }
    .k-i-binoculars::before { content: "\e65c"; }
    .k-i-find-and-replace::before { content: "\e65c"; }
    .k-i-find::before { content: "\e65c"; }
    .k-i-copy::before { content: "\e65d"; }
    .k-i-files::before { content: "\e65d"; }
    .k-i-cut::before { content: "\e65e"; }
    .k-i-clipboard::before { content: "\e65f"; }
    .k-i-paste::before { content: "\e65f"; }
    .k-i-clipboard-code::before { content: "\e660"; }
    .k-i-paste-as-html::before { content: "\e660"; }
    .k-i-clipboard-word::before { content: "\e661"; }
    .k-i-paste-from-word::before { content: "\e661"; }
    .k-i-clipboard-word-alt::before { content: "\e662"; }
    .k-i-paste-from-word-strip-file::before { content: "\e662"; }
    .k-i-clipboard-html::before { content: "\e663"; }
    .k-i-paste-html::before { content: "\e663"; }
    .k-i-clipboard-markdown::before { content: "\e664"; }
    .k-i-paste-markdown::before { content: "\e664"; }
    .k-i-clipboard-text::before { content: "\e665"; }
    .k-i-paste-plain-text::before { content: "\e665"; }
    .k-i-apply-format::before { content: "\e666"; }
    .k-i-clear-css::before { content: "\e667"; }
    .k-i-clearformat::before { content: "\e667"; }
    .k-i-copy-format::before { content: "\e668"; }
    .k-i-strip-all-formatting::before { content: "\e669"; }
    .k-i-strip-css-format::before { content: "\e66a"; }
    .k-i-strip-font-elements::before { content: "\e66b"; }
    .k-i-strip-span-elements::before { content: "\e66c"; }
    .k-i-strip-word-formatting::before { content: "\e66d"; }
    .k-i-format-code-block::before { content: "\e66e"; }
    .k-i-building-blocks::before { content: "\e66f"; }
    .k-i-style-builder::before { content: "\e66f"; }
    .k-i-puzzle-piece::before { content: "\e670"; }
    .k-i-module-manager::before { content: "\e670"; }
    .k-i-puzzle::before { content: "\e670"; }
    .k-i-link-add::before { content: "\e671"; }
    .k-i-hyperlink-light-dialog::before { content: "\e671"; }
    .k-i-hyperlink-insert::before { content: "\e671"; }
    .k-i-globe-link::before { content: "\e672"; }
    .k-i-hyperlink-globe::before { content: "\e672"; }
    .k-i-globe-unlink::before { content: "\e673"; }
    .k-i-hyperlink-globe-remove::before { content: "\e673"; }
    .k-i-envelop-link::before { content: "\e674"; }
    .k-i-hyperlink-email::before { content: "\e674"; }
    .k-i-anchor::before { content: "\e675"; }
    .k-i-table-add::before { content: "\e676"; }
    .k-i-table-light-dialog::before { content: "\e676"; }
    .k-i-table-insert::before { content: "\e676"; }
    .k-i-create-table::before { content: "\e676"; }
    .k-i-table::before { content: "\e677"; }
    .k-i-table-properties::before { content: "\e678"; }
    .k-i-table-cell::before { content: "\e679"; }
    .k-i-table-cell-properties::before { content: "\e67a"; }
    .k-i-table-column-insert-left::before { content: "\e67b"; }
    .k-i-add-column-left::before { content: "\e67b"; }
    .k-i-table-column-insert-right::before { content: "\e67c"; }
    .k-i-add-column-right::before { content: "\e67c"; }
    .k-i-table-row-insert-above::before { content: "\e67d"; }
    .k-i-add-row-above::before { content: "\e67d"; }
    .k-i-table-row-insert-below::before { content: "\e67e"; }
    .k-i-add-row-below::before { content: "\e67e"; }
    .k-i-table-column-delete::before { content: "\e67f"; }
    .k-i-delete-column::before { content: "\e67f"; }
    .k-i-table-row-delete::before { content: "\e680"; }
    .k-i-delete-row::before { content: "\e680"; }
    .k-i-table-cell-delete::before { content: "\e681"; }
    .k-i-table-delete::before { content: "\e682"; }
    .k-i-cells-merge::before { content: "\e683"; }
    .k-i-merge-cells::before { content: "\e683"; }
    .k-i-cells-merge-horizontally::before { content: "\e684"; }
    .k-i-cells-merge-h::before { content: "\e684"; }
    .k-i-merge-horizontally::before { content: "\e684"; }
    .k-i-cells-merge-vertically::before { content: "\e685"; }
    .k-i-cells-merge-v::before { content: "\e685"; }
    .k-i-merge-vertically::before { content: "\e685"; }
    .k-i-cell-split-horizontally::before { content: "\e686"; }
    .k-i-cells-split-h::before { content: "\e686"; }
    .k-i-cell-split-vertically::before { content: "\e687"; }
    .k-i-cells-split-v::before { content: "\e687"; }
    .k-i-table-unmerge::before { content: "\e688"; }
    .k-i-normal-layout::before { content: "\e688"; }
    .k-i-pane-freeze::before { content: "\e689"; }
    .k-i-freeze-pane::before { content: "\e689"; }
    .k-i-row-freeze::before { content: "\e68a"; }
    .k-i-freeze-row::before { content: "\e68a"; }
    .k-i-column-freeze::before { content: "\e68b"; }
    .k-i-col-freeze::before { content: "\e68b"; }
    .k-i-freeze-col::before { content: "\e68b"; }
    .k-i-toolbar-float::before { content: "\e68c"; }
    .k-i-spell-checker::before { content: "\e68d"; }
    .k-i-validation-xhtml::before { content: "\e68e"; }
    .k-i-validation-data::before { content: "\e68f"; }
    .k-i-toggle-full-screen-mode::before { content: "\e690"; }
    .k-i-formula-fx::before { content: "\e691"; }
    .k-i-fx::before { content: "\e691"; }
    .k-i-sum::before { content: "\e692"; }
    .k-i-symbol::before { content: "\e693"; }
    .k-i-dollar::before { content: "\e694"; }
    .k-i-currency::before { content: "\e694"; }
    .k-i-percent::before { content: "\e695"; }
    .k-i-custom-format::before { content: "\e696"; }
    .k-i-format-number::before { content: "\e696"; }
    .k-i-decimal-increase::before { content: "\e697"; }
    .k-i-increace-decimal::before { content: "\e697"; }
    .k-i-decimal-decrease::before { content: "\e698"; }
    .k-i-decrease-decimal::before { content: "\e698"; }
    .k-i-font-size::before { content: "\e699"; }
    .k-i-image-absolute-position::before { content: "\e69a"; }
    .k-i-table-wizard::before { content: "\e69b"; }
    .k-i-crosstab::before { content: "\e69c"; }
    .k-i-crosstab-wizard::before { content: "\e69d"; }
    .k-i-table-body::before { content: "\e69e"; }
    .k-i-table-column-groups::before { content: "\e69f"; }
    .k-i-table-corner::before { content: "\e6a0"; }
    .k-i-table-row-groups::before { content: "\e6a1"; }
    .k-i-globe-outline::before { content: "\e700"; }
    .k-i-globe::before { content: "\e701"; }
    .k-i-map-marker::before { content: "\e702"; }
    .k-i-marker-pin::before { content: "\e702"; }
    .k-i-map-marker-target::before { content: "\e703"; }
    .k-i-marker-pin-target::before { content: "\e703"; }
    .k-i-pin::before { content: "\e704"; }
    .k-i-unpin::before { content: "\e705"; }
    .k-i-share::before { content: "\e800"; }
    .k-i-user::before { content: "\e801"; }
    .k-i-inbox::before { content: "\e802"; }
    .k-i-blogger::before { content: "\e803"; }
    .k-i-blogger-box::before { content: "\e804"; }
    .k-i-delicious::before { content: "\e805"; }
    .k-i-delicious-box::before { content: "\e806"; }
    .k-i-digg::before { content: "\e807"; }
    .k-i-digg-box::before { content: "\e808"; }
    .k-i-envelop::before { content: "\e809"; }
    .k-i-email::before { content: "\e809"; }
    .k-i-letter::before { content: "\e809"; }
    .k-i-envelop-box::before { content: "\e80a"; }
    .k-i-email-box::before { content: "\e80a"; }
    .k-i-letter-box::before { content: "\e80a"; }
    .k-i-facebook::before { content: "\e80b"; }
    .k-i-facebook-box::before { content: "\e80c"; }
    .k-i-google::before { content: "\e80d"; }
    .k-i-google-box::before { content: "\e80e"; }
    .k-i-google-plus::before { content: "\e80f"; }
    .k-i-google-plus-box::before { content: "\e810"; }
    .k-i-linkedin::before { content: "\e811"; }
    .k-i-linkedin-box::before { content: "\e812"; }
    .k-i-myspace::before { content: "\e813"; }
    .k-i-myspace-box::before { content: "\e814"; }
    .k-i-pinterest::before { content: "\e815"; }
    .k-i-pinterest-box::before { content: "\e816"; }
    .k-i-reddit::before { content: "\e817"; }
    .k-i-reddit-box::before { content: "\e818"; }
    .k-i-stumble-upon::before { content: "\e819"; }
    .k-i-stumble-upon-box::before { content: "\e81a"; }
    .k-i-tell-a-friend::before { content: "\e81b"; }
    .k-i-tell-a-friend-box::before { content: "\e81c"; }
    .k-i-tumblr::before { content: "\e81d"; }
    .k-i-tumblr-box::before { content: "\e81e"; }
    .k-i-twitter::before { content: "\e81f"; }
    .k-i-twitter-box::before { content: "\e820"; }
    .k-i-yammer::before { content: "\e821"; }
    .k-i-yammer-box::before { content: "\e822"; }
    .k-i-behance::before { content: "\e823"; }
    .k-i-behance-box::before { content: "\e824"; }
    .k-i-dribbble::before { content: "\e825"; }
    .k-i-dribbble-box::before { content: "\e826"; }
    .k-i-rss::before { content: "\e827"; }
    .k-i-rss-box::before { content: "\e828"; }
    .k-i-vimeo::before { content: "\e829"; }
    .k-i-vimeo-box::before { content: "\e82a"; }
    .k-i-youtube::before { content: "\e82b"; }
    .k-i-youtube-box::before { content: "\e82c"; }
    .k-i-folder::before { content: "\e900"; }
    .k-i-folder-open::before { content: "\e901"; }
    .k-i-folder-add::before { content: "\e902"; }
    .k-i-folder-up::before { content: "\e903"; }
    .k-i-folder-more::before { content: "\e904"; }
    .k-i-fields-more::before { content: "\e904"; }
    .k-i-aggregate-fields::before { content: "\e905"; }
    .k-i-file::before { content: "\e906"; }
    .k-i-file-vertical::before { content: "\e906"; }
    .k-i-page-portrait::before { content: "\e906"; }
    .k-i-file-v::before { content: "\e906"; }
    .k-i-file-add::before { content: "\e907"; }
    .k-i-insert-file::before { content: "\e907"; }
    .k-i-file-txt::before { content: "\e908"; }
    .k-i-txt::before { content: "\e908"; }
    .k-i-file-csv::before { content: "\e909"; }
    .k-i-csv::before { content: "\e909"; }
    .k-i-file-excel::before { content: "\e90a"; }
    .k-i-file-xls::before { content: "\e90a"; }
    .k-i-excel::before { content: "\e90a"; }
    .k-i-xls::before { content: "\e90a"; }
    .k-i-xlsa::before { content: "\e90a"; }
    .k-i-file-word::before { content: "\e90b"; }
    .k-i-file-doc::before { content: "\e90b"; }
    .k-i-word::before { content: "\e90b"; }
    .k-i-doc::before { content: "\e90b"; }
    .k-i-file-mdb::before { content: "\e90c"; }
    .k-i-mdb::before { content: "\e90c"; }
    .k-i-file-ppt::before { content: "\e90d"; }
    .k-i-ppt::before { content: "\e90d"; }
    .k-i-file-pdf::before { content: "\e90e"; }
    .k-i-pdf::before { content: "\e90e"; }
    .k-i-pdfa::before { content: "\e90e"; }
    .k-i-file-psd::before { content: "\e90f"; }
    .k-i-psd::before { content: "\e90f"; }
    .k-i-file-flash::before { content: "\e910"; }
    .k-i-flash::before { content: "\e910"; }
    .k-i-file-config::before { content: "\e911"; }
    .k-i-config::before { content: "\e911"; }
    .k-i-file-ascx::before { content: "\e912"; }
    .k-i-ascx::before { content: "\e912"; }
    .k-i-file-bac::before { content: "\e913"; }
    .k-i-bac::before { content: "\e913"; }
    .k-i-file-zip::before { content: "\e914"; }
    .k-i-zip::before { content: "\e914"; }
    .k-i-film::before { content: "\e915"; }
    .k-i-css3::before { content: "\e916"; }
    .k-i-html5::before { content: "\e917"; }
    .k-i-code::before { content: "\e918"; }
    .k-i-html::before { content: "\e918"; }
    .k-i-source-code::before { content: "\e918"; }
    .k-i-view-source::before { content: "\e918"; }
    .k-i-css::before { content: "\e919"; }
    .k-i-js::before { content: "\e91a"; }
    .k-i-exe::before { content: "\e91b"; }
    .k-i-csproj::before { content: "\e91c"; }
    .k-i-vbproj::before { content: "\e91d"; }
    .k-i-cs::before { content: "\e91e"; }
    .k-i-vb::before { content: "\e91f"; }
    .k-i-sln::before { content: "\e920"; }
    .k-i-cloud::before { content: "\e921"; }
    .k-i-file-horizontal::before { content: "\e922"; }
    .k-i-page-landscape::before { content: "\e922"; }
    .k-i-file-h::before { content: "\e922"; }
    .k-i-subreport::before { content: "\e923"; }
    .k-i-data::before { content: "\e924"; }
    .k-i-report-header-section::before { content: "\e925"; }
    .k-i-report-footer-section::before { content: "\e926"; }
    .k-i-group-header-section::before { content: "\e927"; }
    .k-i-group-footer-section::before { content: "\e928"; }
    .k-i-page-header-section::before { content: "\e929"; }
    .k-i-page-footer-section::before { content: "\e92a"; }
    .k-i-detail-section::before { content: "\e92b"; }
    .k-i-toc-section::before { content: "\e92c"; }
    .k-i-group-section::before { content: "\e92d"; }
    .k-i-parameters::before { content: "\e92e"; }
    .k-i-data-csv::before { content: "\e92f"; }
    .k-i-data-json::before { content: "\e930"; }
    .k-i-data-sql::before { content: "\e931"; }
    .k-i-data-web::before { content: "\e932"; }
    .k-i-data-rest::before { content: "\e946"; }
    .k-i-group-collection::before { content: "\e933"; }
    .k-i-parameter-boolean::before { content: "\e934"; }
    .k-i-parameter-date-time::before { content: "\e935"; }
    .k-i-parameter-float::before { content: "\e936"; }
    .k-i-parameter-integer::before { content: "\e937"; }
    .k-i-parameter-string::before { content: "\e938"; }
    .k-i-toc-section-level::before { content: "\e939"; }
    .k-i-inherited::before { content: "\e93a"; }
    .k-i-file-video::before { content: "\e93b"; }
    .k-i-file-audio::before { content: "\e93c"; }
    .k-i-file-image::before { content: "\e93d"; }
    .k-i-file-presentation::before { content: "\e93e"; }
    .k-i-file-data::before { content: "\e93f"; }
    .k-i-file-disc-image::before { content: "\e940"; }
    .k-i-file-programming::before { content: "\e941"; }
    .k-i-file-typescript::before { content: "\e947"; }
    .k-i-parameters-byte-array::before { content: "\e942"; }
    .k-i-parameters-unknown::before { content: "\e943"; }
    .k-i-file-error::before { content: "\e944"; }
    .k-i-file-validation::before { content: "\e944"; }
    .k-i-files-error::before { content: "\e945"; }
    .k-i-files-validation::before { content: "\e945"; }
    .k-i-graph::before { content: "\ea00"; }
    .k-i-chart-column-clustered::before { content: "\ea01"; }
    .k-i-chart-column-stacked::before { content: "\ea02"; }
    .k-i-chart-column-stacked100::before { content: "\ea03"; }
    .k-i-chart-column-range::before { content: "\ea04"; }
    .k-i-chart-bar-clustered::before { content: "\ea05"; }
    .k-i-chart-bar-stacked::before { content: "\ea06"; }
    .k-i-chart-bar-stacked100::before { content: "\ea07"; }
    .k-i-chart-bar-range::before { content: "\ea08"; }
    .k-i-chart-area-clustered::before { content: "\ea09"; }
    .k-i-chart-area-stacked::before { content: "\ea0a"; }
    .k-i-chart-area-stacked100::before { content: "\ea0b"; }
    .k-i-chart-area-range::before { content: "\ea0c"; }
    .k-i-chart-line::before { content: "\ea0d"; }
    .k-i-chart-line-stacked::before { content: "\ea0e"; }
    .k-i-chart-line-stacked100::before { content: "\ea0f"; }
    .k-i-chart-line-markers::before { content: "\ea10"; }
    .k-i-chart-line-stacked-markers::before { content: "\ea11"; }
    .k-i-chart-line-stacked100-markers::before { content: "\ea12"; }
    .k-i-chart-pie::before { content: "\ea13"; }
    .k-i-chart-doughnut::before { content: "\ea14"; }
    .k-i-chart-scatter::before { content: "\ea15"; }
    .k-i-chart-scatter-smooth-lines-markers::before { content: "\ea16"; }
    .k-i-chart-scatter-smooth-lines::before { content: "\ea17"; }
    .k-i-chart-scatter-straight-lines-markers::before { content: "\ea18"; }
    .k-i-chart-scatter-straight-lines::before { content: "\ea19"; }
    .k-i-chart-bubble::before { content: "\ea1a"; }
    .k-i-chart-candlestick::before { content: "\ea1b"; }
    .k-i-chart-ohlc::before { content: "\ea1c"; }
    .k-i-chart-radar::before { content: "\ea1d"; }
    .k-i-chart-radar-markers::before { content: "\ea1e"; }
    .k-i-chart-radar-filled::before { content: "\ea1f"; }
    .k-i-chart-rose::before { content: "\ea20"; }
    .k-i-chart-choropleth::before { content: "\ea21"; }


    // Manual aliases
    .k-plus { @extend .k-i-plus; }
    .k-minus { @extend .k-i-minus; }


    // RTL icons
    .k-rtl .k-i-indent-increase,
    .k-rtl .k-i-indent-decrease,
    .k-rtl .k-i-expand,
    .k-rtl .k-i-collapse,
    [dir="rtl"] .k-i-expand,
    [dir="rtl"] .k-i-collapse {
        transform: scaleX(-1);
    }

    .k-sprite {
        display: inline-block;
        width: 16px;
        height: 16px;
        overflow: hidden;
        background-repeat: no-repeat;
        font-size: 0;
        line-height: 0;
        text-align: center;
        -ms-high-contrast-adjust: none;
    }
    .k-image {
        display: inline-block;
    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/icons/_theme.scss

// #endregion

// #endregion
// #region @import "typography/_index.scss"; -> /packages/bootstrap/scss/typography/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/typography/_variables.scss
// #region @import /packages/bootstrap/scss/typography/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/typography/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/typography/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/typography/_layout.scss
@include exports( "typography/layout" ) {

    .k-typography {
        @include typography(
            // handle html.k-typography with styles already present
            if( get-font-family( $typography-config, body ) == inherit, null, get-font-family( $typography-config, body ) ),
            get-font-size( $typography-config, body ),
            get-line-height( $typography-config, body ),
            get-font-weight( $typography-config, body ),
            get-letter-spacing( $typography-config, body )
        );

        p {
            margin: 0 0 $paragraph-margin-bottom;
        }
    }

    // Headings
    .k-h1 {
        @include typography( map-get($typography-config, h1) );
        margin: 0 0 $h1-margin-bottom;
    }
    .k-h2 {
        @include typography( map-get($typography-config, h2) );
        margin: 0 0 $h2-margin-bottom;
    }
    .k-h3 {
        @include typography( map-get($typography-config, h3) );
        margin: 0 0 $h3-margin-bottom;
    }
    .k-h4 {
        @include typography( map-get($typography-config, h4) );
        margin: 0 0 $h4-margin-bottom;
    }
    .k-h5 {
        @include typography( map-get($typography-config, h5) );
        margin: 0 0 $h5-margin-bottom;
    }
    .k-h6 {
        @include typography( map-get($typography-config, h6) );
        margin: 0 0 $h6-margin-bottom;
    }

    // Display
    .k-display-1 {
        @include typography( map-get($typography-config, display-1) );
    }
    .k-display-2 {
        @include typography( map-get($typography-config, display-2) );
    }
    .k-display-3 {
        @include typography( map-get($typography-config, display-3) );
    }
    .k-display-4 {
        @include typography( map-get($typography-config, display-4) );
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/typography/_theme.scss

// #endregion

// #endregion
// #region @import "avatar/_index.scss"; -> /packages/bootstrap/scss/avatar/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/avatar/_variables.scss
// Avatar
$avatar-border-width: 1px !default;
$avatar-border-radius: map-get( $spacing, 1 ) !default;

$avatar-font-family: $font-family !default;
$avatar-font-size: $font-size !default;
$avatar-line-height: $line-height !default;


$avatar-sizes: () !default;
// sass-lint:disable indentation
$avatar-sizes: map-merge((
    sm: map-get( $spacing, 4 ),
    md: map-get( $spacing, 8 ),
    lg: map-get( $spacing, 16 )
), $avatar-sizes);
// sass-lint:enable indentation


$avatar-theme-colors: () !default;
$avatar-theme-colors: map-merge( $avatar-theme-colors, $theme-colors );

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/avatar/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/avatar/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/avatar/_layout.scss
@include exports( "avatar/layout" ) {

    // Avatar
    .k-avatar {
        border-width: 0;
        border-style: solid;
        box-sizing: border-box;
        flex-shrink: 0;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        overflow: hidden;
    }


    // Avatar text
    .k-avatar-text,
    .k-avatar-initials {
        font-family: $avatar-font-family;
        font-size: $avatar-font-size;
        line-height: $avatar-line-height;
    }


    // Avatar icon
    .k-avatar-icon {}


    // 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;
        }
    }


    // Sizes
    @each $name, $size in $avatar-sizes {
        .k-avatar-#{$name} {
            width: $size;
            height: $size;
            flex-basis: $size;
        }
    }


    // Shapes
    .k-avatar-square {}
    .k-avatar-rounded {
        @include border-radius( $avatar-border-radius );
    }
    .k-avatar-circle {
        border-radius: 50%;
    }


    // Bordered
    .k-avatar-bordered {
        border-width: $avatar-border-width;
    }


}


// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/avatar/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/avatar/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/avatar/_theme.scss
@include exports( "avatar/theme" ) {

    // Solid Avatars
    @each $name, $color in $avatar-theme-colors {
        .k-avatar-solid.k-avatar-#{$name} {
            border-color: $color;
            color: contrast-wcag( $color );
            background-color: $color;
        }
    }

    // Outline avatars
    .k-avatar-outline {
        border-color: currentColor;
    }

    @each $name, $color in $avatar-theme-colors {
        .k-avatar-outline.k-avatar-#{$name} {
            color: $color;
        }
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "badge/_index.scss"; -> /packages/bootstrap/scss/badge/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../utils/_position.scss"; -> /packages/bootstrap/scss/utils/_position.scss
// #region @import /packages/bootstrap/scss/utils/_position.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/badge/_variables.scss
// Badge
$badge-padding-x: $badge-padding-x !default;
$badge-padding-y: $badge-padding-y !default;
$badge-border-width: 1px !default;
$badge-border-radius: $badge-border-radius !default;
$badge-font-size: $badge-font-size !default;
$badge-line-height: 1 !default;

$badge-padding-x-sm: ( $badge-padding-x / 2 ) !default;
$badge-padding-y-sm: ( $badge-padding-y / 2 ) !default;
$badge-border-width-sm: $badge-border-width !default;
$badge-border-radius-sm: $border-radius-sm !default;
$badge-font-size-sm: ( $badge-font-size * .8333333333 ) !default;
$badge-line-height-sm: 1 !default;

$badge-padding-x-lg: ( $badge-padding-x * 1.5 ) !default;
$badge-padding-y-lg: ( $badge-padding-y * 1.5 ) !default;
$badge-border-width-lg: $badge-border-width !default;
$badge-border-radius-lg: $border-radius-lg !default;
$badge-font-size-lg: ( $badge-font-size * 1.1666666666 ) !default;
$badge-line-height-lg: 1.25 !default;

$badge-fixed-size: 20px !default;
$badge-calc-size: calc( #{$badge-line-height * 1em} + #{$badge-padding-y * 2} + #{$badge-border-width * 2} ) !default;
$badge-size: if( $use-calc-badge-size, $badge-calc-size, $badge-fixed-size );
$badge-dot-size: 10px;

$badge-fixed-size-sm: 15px !default;
$badge-calc-size-sm: calc( #{$badge-line-height-sm * 1em} + #{$badge-padding-y-sm * 2} + #{$badge-border-width-sm * 2} ) !default;
$badge-size-sm: if( $use-calc-badge-size, $badge-calc-size-sm, $badge-fixed-size-sm );
$badge-dot-size-sm: 6px;

$badge-fixed-size-lg: 30px !default;
$badge-calc-size-lg: calc( #{$badge-line-height-lg * 1em} + #{$badge-padding-y-lg * 2} + #{$badge-border-width-lg * 2} ) !default;
$badge-size-lg: if( $use-calc-badge-size, $badge-calc-size-lg, $badge-fixed-size-lg );
$badge-dot-size-lg: 12px;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/badge/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/badge/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/badge/_layout.scss
@include exports( "badge/layout" ) {

    .k-badge {
        padding: 0;
        border-width: 0;
        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;
    }
    .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
    .k-badge-sm {
        padding: $badge-padding-y-sm $badge-padding-x-sm;
        border-width: $badge-border-width-sm;
        font-size: $badge-font-size-sm;
        line-height: $badge-line-height-sm;

        &:empty { padding: $badge-padding-y-sm; }
    }
    .k-badge-md {
        padding: $badge-padding-y $badge-padding-x;
        border-width: $badge-border-width;
        font-size: $badge-font-size;
        line-height: $badge-line-height;

        &:empty { padding: $badge-padding-y; }
    }
    .k-badge-lg {
        padding: $badge-padding-y-lg $badge-padding-x-lg;
        border-width: $badge-border-width-lg;
        font-size: $badge-font-size-lg;
        line-height: $badge-line-height-lg;

        &:empty { padding: $badge-padding-y-lg; }
    }


    // Badge shapes
    .k-badge-rounded {
        &.k-badge-sm { @include border-radius( $badge-border-radius-sm ); }
        &.k-badge-md { @include border-radius( $badge-border-radius ); }
        &.k-badge-lg { @include border-radius( $badge-border-radius-lg ); }
    }
    .k-badge-pill {
        border-radius: 5rem;
    }
    .k-badge-circle {
        padding: 0 !important; // sass-lint:disable-line no-important
        border-radius: 100%;

        &.k-badge-sm {
            width: $badge-size-sm;
            height: $badge-size-sm;
        }
        &.k-badge-md {
            width: $badge-size;
            height: $badge-size;
        }
        &.k-badge-lg {
            width: $badge-size-lg;
            height: $badge-size-lg;
        }
    }
    .k-badge-dot {
        padding: 0 !important;  // sass-lint:disable-line no-important
        border-radius: 100%;
        font-size: 0;

        &.k-badge-sm {
            width: $badge-dot-size-sm;
            height: $badge-dot-size-sm;
        }
        &.k-badge-md {
            width: $badge-dot-size;
            height: $badge-dot-size;
        }
        &.k-badge-lg {
            width: $badge-dot-size-lg;
            height: $badge-dot-size-lg;
        }
    }

    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 $component-bg;
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/badge/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/badge/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/badge/_theme.scss
@include exports( "badge/theme" ) {

    // Solid badges
    @each $name, $color in $theme-colors {
        .k-badge-solid.k-badge-#{$name} {
            border-color: $color;
            color: contrast-wcag( $color );
            background-color: $color;
        }
    }

    // Outline badges
    .k-badge-outline {
        border-color: currentColor;
        background-color: $component-bg;
    }

    @each $name, $color in $theme-colors {
        .k-badge-outline.k-badge-#{$name} {
            color: $color;
        }
    }
}

// #endregion

@include exports("badge/theme/bootstrap") {

}

// #endregion

// #endregion
// #region @import "loader/_index.scss"; -> /packages/bootstrap/scss/loader/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/loader/_variables.scss
// Loader
$loader-segment-border-radius: 50% !default;
$loader-segment-size-sm: 6px !default;
$loader-segment-size-md: 10px !default;
$loader-segment-size-lg: 20px !default;

$loader-padding-sm: $loader-segment-size-sm / 2 !default;
$loader-padding-md: $loader-segment-size-md / 2 !default;
$loader-padding-lg: $loader-segment-size-lg / 2 !default;

$loader-pulsing-2-segment-margin-x-sm: 1.5px !default;
$loader-pulsing-2-segment-margin-x-md: 2.5px !default;
$loader-pulsing-2-segment-margin-x-lg: 5px !default;

$loader-spinner-3-width-sm: $loader-segment-size-sm * 4 !default;
$loader-spinner-3-height-sm: 20px !default;
$loader-spinner-3-width-md: $loader-segment-size-md * 4 !default;
$loader-spinner-3-height-md: 34px !default;
$loader-spinner-3-width-lg: $loader-segment-size-lg * 4 !default;
$loader-spinner-3-height-lg: 65px !default;

$loader-spinner-4-width-sm: $loader-segment-size-sm * 4 !default;
$loader-spinner-4-height-sm: $loader-spinner-4-width-sm !default;
$loader-spinner-4-width-md: $loader-segment-size-md * 4 !default;
$loader-spinner-4-height-md: $loader-spinner-4-width-md !default;
$loader-spinner-4-width-lg: $loader-segment-size-lg * 4 !default;
$loader-spinner-4-height-lg: $loader-spinner-4-width-lg !default;

$loader-secondary-bg: #212529 !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/loader/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/loader/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/loader/_layout.scss
@include exports( "loader/layout" ) {

    .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 {
        position: relative;
    }

    // Loader segment
    .k-loader-segment {
        position: absolute;
        display: inline-block;

        &::after {
            content: "";
            display: block;
            border-radius: $loader-segment-border-radius;
        }
    }

    // Loader sizes
    .k-loader-sm {
        padding: $loader-padding-sm;

        .k-loader-segment {
            &::after {
                width: $loader-segment-size-sm;
                height: $loader-segment-size-sm;
            }
        }
    }
    .k-loader-md {
        padding: $loader-padding-md;

        .k-loader-segment {
            &::after {
                width: $loader-segment-size-md;
                height: $loader-segment-size-md;
            }
        }
    }
    .k-loader-lg {
        padding: $loader-padding-lg;

        .k-loader-segment {
            &::after {
                width: $loader-segment-size-lg;
                height: $loader-segment-size-lg;
            }
        }
    }


    // Loader Animation Types
    .k-loader-pulsing-2 {
        .k-loader-segment {
            position: relative;

            &:nth-child(1) {
                animation: pulsing-2-first-child 1s ease infinite;
            }

            &:nth-child(2) {
                animation: pulsing-2-second-child 1s ease infinite;
            }
        }

        &.k-loader-sm {
            .k-loader-segment {
                &:first-child {
                    margin-right: $loader-pulsing-2-segment-margin-x-sm;
                }

                &:last-child {
                    margin-left: $loader-pulsing-2-segment-margin-x-sm;
                }
            }
        }

        &.k-loader-md {
            .k-loader-segment {
                &:first-child {
                    margin-right: $loader-pulsing-2-segment-margin-x-md;
                }

                &:last-child {
                    margin-left: $loader-pulsing-2-segment-margin-x-md;
                }
            }
        }

        &.k-loader-lg {
            .k-loader-segment {
                &:first-child {
                    margin-right: $loader-pulsing-2-segment-margin-x-lg;
                }

                &:last-child {
                    margin-left: $loader-pulsing-2-segment-margin-x-lg;
                }
            }
        }
    }

    .k-loader-spinner-3 {
        .k-loader-segment {
            &:nth-child(1) {
                animation: spinner-3-first-child 2s ease infinite;
            }

            &:nth-child(2) {
                animation: spinner-3-second-child 2s ease infinite;
            }

            &:nth-child(3) {
                animation: spinner-3-third-child 2s ease infinite;
            }
        }

        &.k-loader-sm {
            .k-loader-canvas {
                width: $loader-spinner-3-width-sm;
                height: $loader-spinner-3-height-sm;
            }
        }

        &.k-loader-md {
            .k-loader-canvas {
                width: $loader-spinner-3-width-md;
                height: $loader-spinner-3-height-md;
            }
        }

        &.k-loader-lg {
            .k-loader-canvas {
                width: $loader-spinner-3-width-lg;
                height: $loader-spinner-3-height-lg;
            }
        }
    }

    .k-loader-spinner-4 {
        .k-loader-canvas {
            animation: spinner-4 1.833s ease infinite;
        }

        .k-loader-segment {
            &:nth-child(1) {
                animation: spinner-4-first-child 1.833s ease infinite;
            }

            &:nth-child(2) {
                animation: spinner-4-second-child 1.833s ease infinite;
            }

            &:nth-child(3) {
                animation: spinner-4-third-child 1.833s ease infinite;
            }

            &:nth-child(4) {
                animation: spinner-4-fourth-child 1.833s ease infinite;
            }
        }

        &.k-loader-sm {
            .k-loader-canvas {
                width: $loader-spinner-4-width-sm;
                height: $loader-spinner-4-height-sm;
            }
        }

        &.k-loader-md {
            .k-loader-canvas {
                width: $loader-spinner-4-width-md;
                height: $loader-spinner-4-height-md;
            }
        }

        &.k-loader-lg {
            .k-loader-canvas {
                width: $loader-spinner-4-width-lg;
                height: $loader-spinner-4-height-lg;
            }
        }
    }


    // Pulsing 2
    @keyframes pulsing-2-first-child {
        0% { transform: scale(1); }
        50% { transform: scale(1.5); }
        100% { transform: scale(1); }
    }
    @keyframes pulsing-2-second-child {
        0% { transform: scale(1.5); }
        50% { transform: scale(1); }
        100% { transform: scale(1.5); }
    }

    // Spinner 3
    @keyframes spinner-3-first-child {
        0% {
            top: 0;
            left: 50%;
            transform: translateX(-50%) translateY(0);
        }

        33.3% {
            top: 100%;
            left: 0;
            transform: translateX(0) translateY(-100%);
        }

        66.6% {
            top: 100%;
            left: 100%;
            transform: translateX(-100%) translateY(-100%);
        }

        100% {
            top: 0;
            left: 50%;
            transform: translateX(-50%) translateY(0);
        }
    }
    @keyframes spinner-3-second-child {
        0% {
            top: 100%;
            left: 0;
            transform: translateX(0) translateY(-100%);
        }

        33.3% {
            top: 100%;
            left: 100%;
            transform: translateX(-100%) translateY(-100%);
        }

        66.6% {
            top: 0;
            left: 50%;
            transform: translateX(-50%) translateY(0);
        }

        100% {
            top: 100%;
            left: 0;
            transform: translateX(0) translateY(-100%);
        }
    }
    @keyframes spinner-3-third-child {
        0% {
            top: 100%;
            left: 100%;
            transform: translateX(-100%) translateY(-100%);
        }

        33.3% {
            top: 0;
            left: 50%;
            transform: translateX(-50%) translateY(0);
        }

        66.6% {
            top: 100%;
            left: 0;
            transform: translateX(0) translateY(-100%);
        }

        100% {
            top: 100%;
            left: 100%;
            transform: translateX(-100%) translateY(-100%);
        }
    }

    // Spinner 4
    @keyframes spinner-4-first-child {
        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-second-child {
        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-third-child {
        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-fourth-child {
        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);
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/loader/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/loader/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/loader/_theme.scss
@include exports( "loader/theme" ) {

    @each $name, $color in $theme-colors {
        .k-loader-#{$name} {
            .k-loader-segment {
                &::after {
                    @if $name == "secondary" {
                        background-color: $loader-secondary-bg;
                    } @else {
                        background-color: $color;
                    }
                }
            }
        }
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "chip/_index.scss"; -> /packages/bootstrap/scss/chip/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/chip/_variables.scss
// Chip
$chips-margin: 8px !default;

$chip-padding-x: 6px !default;
$chip-padding-y: 4px !default;
$chip-height: 32px !default;
$chip-border-radius: $chip-height / 2 !default;
$chip-font-size: 16px !default;

$chip-selected-icon-size: 24px !default;
$chip-selected-icon-offset: 6px !default;
$chip-selected-icon-no-icon-offset: 0px !default;
$chip-selected-icon-font-size: $chip-font-size !default;

$chip-content-padding-x: 6px !default;

$chip-icons-size: 24px !default;
$chip-icon-margin: 0px !default;
$chip-remove-icon-margin: 0px !default;
$chip-remove-icon-font-size: 14px !default;

$chip-avatar-size: 24px !default;

$chip-filled-bg: #e4e7eb !default;
$chip-filled-text: $body-text !default;
$chip-filled-border: transparent !default;

$chip-filled-hovered-bg: #ced3db !default;
$chip-filled-hovered-border: transparent !default;

$chip-filled-focused-bg: $chip-filled-bg !default;
$chip-filled-focused-shadow: 0 0 0 3px rgba($chip-filled-bg, .5) !default;

$chip-filled-selected-bg: #c7cdd5 !default;
$chip-filled-selected-border: transparent !default;

$chip-filled-success-bg: rgba($success, .15) !default;
$chip-filled-success-text: $success !default;
$chip-filled-success-border: transparent !default;

$chip-filled-warning-bg: rgba($warning, .15) !default;
$chip-filled-warning-text: $warning !default;
$chip-filled-warning-border: transparent !default;

$chip-filled-error-bg: rgba($error, .15) !default;
$chip-filled-error-text: $error !default;
$chip-filled-error-border: transparent !default;

$chip-filled-info-bg: rgba($info, .15) !default;
$chip-filled-info-text: $info !default;
$chip-filled-info-border: transparent !default;

$chip-outline-bg: transparent !default;
$chip-outline-text: #6c757d !default;
$chip-outline-border: $chip-outline-text !default;

$chip-outline-hovered-bg: rgba(206, 211, 219, .3) !default;
$chip-outline-hovered-text: $chip-outline-text !default;
$chip-outline-hovered-border: $chip-outline-border !default;

$chip-outline-focused-bg: $chip-outline-bg !default;
$chip-outline-focused-text: $chip-outline-text !default;
$chip-outline-focused-border: $chip-outline-border !default;
$chip-outline-focused-shadow: $chip-filled-focused-shadow !default;

$chip-outline-selected-bg: rgba(199, 205, 213, .5) !default;
$chip-outline-selected-text: $chip-outline-text !default;

$chip-outline-success-bg: transparent !default;
$chip-outline-success-text: $success !default;
$chip-outline-success-border: $success !default;

$chip-outline-warning-bg: transparent !default;
$chip-outline-warning-text: $warning !default;
$chip-outline-warning-border: $warning !default;

$chip-outline-error-bg: transparent !default;
$chip-outline-error-text: $error !default;
$chip-outline-error-border: $error !default;

$chip-outline-info-bg: transparent !default;
$chip-outline-info-text: $info !default;
$chip-outline-info-border: $info !default;

$chip-filled-single-selected-bg: rgba($primary, .12) !default;
$chip-filled-single-selected-text: $primary !default;
$chip-filled-single-selected-border: transparent !default;

$chip-outline-single-selected-bg: $chip-filled-single-selected-bg !default;
$chip-outline-single-selected-text: $primary !default;
$chip-outline-single-selected-border: $primary !default;

$chip-multiple-selected-icon-bg: rgba(0, 0, 0, .36) !default;
$chip-multiple-selected-icon-text: #ffffff !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/chip/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/chip/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/chip/_layout.scss
@include exports("chip/layout") {

    .k-chip-list {
        display: inline-flex;

        > * {
            margin-right: $chips-margin;

            &:last-child {
                margin-right: 0;
            }
        }
    }

    .k-selection-single {
        .k-selected-icon-wrapper {
            display: none;
        }
    }

    .k-selection-multiple {
        .k-selected-icon-wrapper {
            width: 0;
            height: $chip-selected-icon-size;
            position: relative;
            left: $chip-selected-icon-offset;
            display: flex;
            align-items: center;
            justify-content: center;
            visibility: hidden;
            z-index: 1;
        }

        .k-selected-icon {
            font-size: $chip-selected-icon-font-size;
        }

        .k-chip-selected {
            .k-selected-icon-wrapper {
                width: $chip-selected-icon-size;
                visibility: visible;
            }
        }

        > .k-chip-has-icon {
            .k-selected-icon-wrapper {
                border-radius: 50%;
                position: absolute;
            }
        }

        :not(.k-chip-has-icon) {
            .k-selected-icon-wrapper {
                left: $chip-selected-icon-no-icon-offset;
                opacity: 0;
                transition: width .2s, opacity .2s;
            }

            &.k-chip-selected {
                .k-selected-icon-wrapper {
                    opacity: 1;
                }
            }
        }
    }

    .k-chip {
        overflow: hidden;
        padding: $chip-padding-y $chip-padding-x;
        height: $chip-height;
        border-radius: $chip-border-radius;
        position: relative;
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: $chip-font-size;
        cursor: pointer;
        user-select: none;

        &:focus,
        &.k-chip-focus {
            outline: 0;
        }

        &.k-chip-disabled {
            @include disabled( $disabled-styling );
        }
    }

    .k-chip-content {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 $chip-content-padding-x;
        flex: 1 1 auto;
    }

    .k-chip-icon,
    .k-remove-icon {
        width: $chip-icons-size;
        height: $chip-icons-size;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 0 auto;
    }

    .k-chip-icon {
        margin-left: $chip-icon-margin;
    }

    .k-remove-icon {
        margin-right: $chip-remove-icon-margin;
        font-size: $chip-remove-icon-font-size;
    }

    .k-chip-avatar {
        width: $chip-avatar-size;
        height: $chip-avatar-size;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
    }

}


@include exports("chip/layout/rtl") {

    .k-chip-list {
        &[dir="rtl"],
        .k-rtl & {
            > * {
                margin-right: 0;
                margin-left: $chips-margin;

                &:last-child {
                    margin-left: 0;
                }
            }
        }
    }

    .k-chip {
        &[dir="rtl"],
        .k-rtl & {
            .k-chip-icon {
                margin-left: 0;
                margin-right: $chip-icon-margin;
            }

            .k-remove-icon {
                margin-right: 0;
                margin-left: $chip-remove-icon-margin;
            }

            .k-selection-multiple & {
                .k-selected-icon-wrapper {
                    left: 0;
                    right: $chip-selected-icon-offset;
                }

                &:not(.k-chip-has-icon) {
                    .k-selected-icon-wrapper {
                        left: 0;
                        right: $chip-selected-icon-no-icon-offset;
                    }
                }
            }
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/chip/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/chip/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/chip/_theme.scss
@include exports("chip/theme") {

    .k-selection-single {
        .k-chip-selected {
            &.k-chip-filled {
                @include fill(
                    $chip-filled-single-selected-text,
                    $chip-filled-single-selected-bg,
                    $chip-filled-single-selected-border
                );
            }

            &.k-chip-outline {
                @include fill(
                    $chip-outline-single-selected-text,
                    $chip-outline-single-selected-bg,
                    $chip-outline-single-selected-border
                );
            }
        }
    }

    .k-selection-multiple {
        > .k-chip-has-icon {
            &.k-chip-selected {
                .k-selected-icon-wrapper {
                    color: $chip-multiple-selected-icon-text;
                    background-color: $chip-multiple-selected-icon-bg;
                }
            }
        }
    }

    .k-chip-filled {
        @include fill(
            $chip-filled-text,
            $chip-filled-bg,
            $chip-filled-border
        );

        &:hover,
        &.k-chip-hover {
            background-color: $chip-filled-hovered-bg;
            border-color: $chip-filled-hovered-border;
        }

        &:focus,
        &.k-chip-focused {
            background-color: $chip-filled-focused-bg;
            box-shadow: $chip-filled-focused-shadow;
        }

        &.k-chip-selected {
            background-color: $chip-filled-selected-bg;
            border-color: $chip-filled-selected-border;
        }

        &.k-chip-success {
            @include fill(
                $chip-filled-success-text,
                $chip-filled-success-bg,
                $chip-filled-success-border
            );
        }

        &.k-chip-warning {
            @include fill(
                $chip-filled-warning-text,
                $chip-filled-warning-bg,
                $chip-filled-warning-border
            );
        }

        &.k-chip-error {
            @include fill(
                $chip-filled-error-text,
                $chip-filled-error-bg,
                $chip-filled-error-border
            );
        }

        &.k-chip-info {
            @include fill(
                $chip-filled-info-text,
                $chip-filled-info-bg,
                $chip-filled-info-border
            );
        }
    }

    .k-chip-outline {
        @include fill(
            $chip-outline-text,
            $chip-outline-bg,
            $chip-outline-border
        );

        &:hover,
        &.k-chip-hover {
            @include fill(
                $chip-outline-hovered-text,
                $chip-outline-hovered-bg,
                $chip-outline-hovered-border
            );
        }

        &:focus,
        &.k-chip-focused {
            @include fill(
                $chip-outline-focused-text,
                $chip-outline-focused-bg,
                $chip-outline-focused-border
            );
            box-shadow: $chip-outline-focused-shadow;
        }

        &.k-chip-selected {
            color: $chip-outline-selected-text;
            background-color: $chip-outline-selected-bg;
        }

        &.k-chip-success {
            @include fill(
                $chip-outline-success-text,
                $chip-outline-success-bg,
                $chip-outline-success-border
            );
        }

        &.k-chip-warning {
            @include fill(
                $chip-outline-warning-text,
                $chip-outline-warning-bg,
                $chip-outline-warning-border
            );
        }

        &.k-chip-error {
            @include fill(
                $chip-outline-error-text,
                $chip-outline-error-bg,
                $chip-outline-error-border
            );
        }

        &.k-chip-info {
            @include fill(
                $chip-outline-info-text,
                $chip-outline-info-bg,
                $chip-outline-info-border
            );
        }
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "cursor/_index.scss"; -> /packages/bootstrap/scss/cursor/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies


// Component
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/cursor/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/cursor/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/cursor/_layout.scss
@include exports( "cursor/layout" ) {

    @each $cursor in $cursors {
        .k-cursor-#{$cursor} {
            cursor: $cursor;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/cursor/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/cursor/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/cursor/_theme.scss
@include exports( "cursor/theme" ) {

}

// #endregion

// #endregion

// #endregion
// @import "list/_index.scss";
// #region @import "forms/_index.scss"; -> /packages/bootstrap/scss/forms/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies // TODO: extract variables
// #region @import "../tooltip/variables"; -> /packages/bootstrap/scss/tooltip/_variables.scss
// Tooltip
$tooltip-padding-y: $tooltip-padding-y !default;
$tooltip-padding-x: $tooltip-padding-x !default;
$tooltip-max-width: $tooltip-max-width !default;
$tooltip-border-width: 0px !default;
$tooltip-border-radius: $tooltip-border-radius !default;

$tooltip-font-family: $font-family !default;
$tooltip-font-size: $tooltip-font-size !default;
$tooltip-line-height: $line-height !default;

$tooltip-title-font-size: ($tooltip-font-size * 1.25) !default;
$tooltip-title-line-height: 1 !default;

$tooltip-callout-size: $tooltip-arrow-height !default;

$tooltip-bg: $tooltip-bg !default;
$tooltip-text: contrast-wcag($tooltip-bg) !default;
$tooltip-border: $tooltip-bg !default;

$tooltip-primary-bg: $primary !default;
$tooltip-primary-text: contrast-wcag( $tooltip-primary-bg ) !default;
$tooltip-primary-border: $tooltip-primary-bg !default;
$tooltip-info-bg: $info !default;
$tooltip-info-text: contrast-wcag( $tooltip-info-bg ) !default;
$tooltip-info-border: $tooltip-info-bg !default;
$tooltip-success-bg: $success !default;
$tooltip-success-text: contrast-wcag( $tooltip-success-bg ) !default;
$tooltip-success-border: $tooltip-success-bg !default;
$tooltip-warning-bg: $warning !default;
$tooltip-warning-text: contrast-wcag( $tooltip-warning-bg ) !default;
$tooltip-warning-border: $tooltip-warning-bg !default;
$tooltip-error-bg: $error !default;
$tooltip-error-text: contrast-wcag( $tooltip-error-bg ) !default;
$tooltip-error-border: $tooltip-error-bg !default;

// #endregion
// #region @import "../button/_variables.scss"; -> /packages/bootstrap/scss/button/_variables.scss
// Button

/// Width of border around buttons
/// @group buttons
$button-border-width: $btn-border-width !default;
/// Border radius of buttons
/// @group buttons
$button-border-radius: $border-radius !default;

/// Horizontal padding of buttons
/// @group buttons
$button-padding-x: $btn-padding-x !default;
/// Vertical padding of buttons
/// @group buttons
$button-padding-y: $btn-padding-y !default;
$button-font-family: $font-family !default;
$button-font-size: $font-size !default;
$button-line-height: $btn-line-height !default;

$button-padding-x-sm: $btn-padding-x-sm !default;
$button-padding-y-sm: $btn-padding-y-sm !default;
$button-line-height-sm: $btn-line-height-sm !default;

$button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} + #{$button-border-width * 2} ) !default;
$button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;

/// The background of the buttons.
/// @group buttons
$button-bg: $secondary !default;

/// The text color of the buttons.
/// @group buttons
$button-text: contrast-wcag( $button-bg, $gray-900 ) !default;

/// The border color of the buttons.
/// @group buttons
$button-border: $button-bg !default;

/// The background gradient of the buttons.
/// @group buttons
$button-gradient: null !default;
$button-shadow: null !default;

/// The background of hovered buttons.
/// @group buttons
$button-hovered-bg: try-darken( $button-bg, 7.5% ) !default;

/// The text color of hovered buttons.
/// @group buttons
$button-hovered-text: contrast-wcag( $button-hovered-bg, $gray-900 ) !default;

/// The border color of hovered buttons.
/// @group buttons
$button-hovered-border: try-darken( $button-border, 10% ) !default;

/// The background gradient of hovered buttons.
/// @group buttons
$button-hovered-gradient: null !default;
$button-hovered-shadow: null !default;

/// The background color of pressed buttons.
/// @group buttons
$button-pressed-bg:  try-darken( $button-bg, 10% ) !default;

/// The text color of pressed buttons.
/// @group buttons
$button-pressed-text: contrast-wcag( $button-pressed-bg, $gray-900 ) !default;

/// The border color of pressed buttons.
/// @group buttons
$button-pressed-border: try-darken( $button-border, 12.5% ) !default;

/// The background gradient of pressed buttons.
/// @group buttons
$button-pressed-gradient: null !default;
$button-pressed-shadow: null !default;

/// The shadow of focused buttons.
/// @group buttons
$button-focused-shadow: 0 0 0 3px rgba($button-border, .5) !default;


// Disabled button
$button-disabled-bg: null !default;
$button-disabled-text: null !default;


// Primary button
$primary-button-bg: $primary !default;
$primary-button-text: contrast-wcag( $primary-button-bg ) !default;
$primary-button-border: $primary-button-bg !default;
$primary-button-gradient: null !default;

$primary-button-hovered-bg: try-darken( $primary-button-bg, 7.5% ) !default;
$primary-button-hovered-text: contrast-wcag( $primary-button-hovered-bg ) !default;
$primary-button-hovered-border: try-darken( $primary-button-border, 10% ) !default;
$primary-button-hovered-gradient: null !default;

$primary-button-pressed-bg: try-darken( $primary-button-bg, 10% ) !default;
$primary-button-pressed-text: contrast-wcag( $primary-button-pressed-bg ) !default;
$primary-button-pressed-border: try-darken( $primary-button-border, 12.5% ) !default;
$primary-button-pressed-gradient: null !default;
$primary-button-pressed-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, .06) !default;

$primary-button-focused-shadow: 0 0 0 3px rgba($primary-button-border, .5) !default;

$flat-button-hover-opacity: .08 !default;
$flat-button-focused-opacity: null !default;
$flat-button-active-opacity: .16 !default;
$flat-button-selected-opacity: .2 !default;

$clear-button-text: #6c757d !default;
$clear-button-hover-text: $button-text !default;
$clear-button-focused-opacity: .1 !default;

// #endregion
// #region @import "../input/_variables.scss"; -> /packages/bootstrap/scss/input/_variables.scss
// Input

$input-default-width: 12.4em !default;

$input-border-width: $input-border-width !default;
$input-border-height: ( $input-border-width * 2 ) !default;
$input-border-radius: $input-border-radius !default;
$input-border-radius-sm: $input-border-radius-sm !default;
$input-border-radius-lg: $input-border-radius-lg !default;

$input-padding-x: $input-padding-x !default;
$input-padding-y: $input-padding-y !default;
$input-font-family: $font-family !default;
$input-font-size: $font-size !default;
$input-line-height: $input-line-height !default;
$input-line-height-em: $input-line-height * 1em;

$input-padding-x-sm: $input-padding-x-sm !default;
$input-padding-y-sm: $input-padding-y-sm !default;
$input-font-size-sm: $input-font-size-sm !default;
$input-line-height-sm: $input-line-height-sm !default;

$input-padding-x-lg: $input-padding-x-lg !default;
$input-padding-y-lg: $input-padding-y-lg !default;
$input-font-size-lg: $input-font-size-lg !default;
$input-line-height-lg: $input-line-height-lg !default;

$input-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-height} ) !default;
$input-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} + #{$input-border-height} ) !default;
$input-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} + #{$input-border-height} ) !default;

$input-inner-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} ) !default;
$input-inner-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} ) !default;
$input-inner-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} ) !default;

$input-icon-offset: 6.5px !default;
$input-icon-width: calc( #{$icon-size} + #{$input-padding-y * 2} ) !default;
$input-icon-height: calc( #{$input-line-height * $input-font-size} + #{$input-padding-y * 2} ) !default;

$input-bg: $input-bg !default;
$input-text: $input-color !default;
$input-border: $input-border-color !default;
$input-shadow: none !default;

$input-hovered-bg: null !default;
$input-hovered-text: null !default;
$input-hovered-border: null !default;
$input-hovered-shadow: null !default;

$input-focused-bg: $input-focus-bg !default;
$input-focused-text: $input-focus-color !default;
$input-focused-border: $input-focus-border-color !default;
$input-focused-shadow: $input-focus-box-shadow !default;

$input-placeholder-text: $input-placeholder-color !default;
$input-placeholder-opacity: 1 !default;

$input-selected-bg: null !default;
$input-selected-text: null !default;


// Picker
$picker-select-border-width: 1px !default;

$picker-select-padding-x: $input-padding-y !default;
$picker-select-padding-y: $input-padding-y !default;

$picker-select-padding-x-sm: $input-padding-y-sm !default;
$picker-select-padding-y-sm: $input-padding-y-sm !default;

$picker-select-padding-x-lg: $input-padding-y-sm !default;
$picker-select-padding-y-lg: $input-padding-y-sm !default;

$picker-select-calc-size: calc( #{$picker-select-padding-x * 2} + #{$icon-size} ) !default;
$picker-select-calc-size-sm: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-size} ) !default;
$picker-select-calc-size-lg: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-size} ) !default;

$picker-icon-offset: calc( #{$picker-select-calc-size} + #{$picker-select-border-width}  + #{$input-icon-offset}) !default;


// Spinner
$spinner-width: $button-inner-calc-size !default;
$spinner-icon-offset: 1px !default;

// #endregion
// #region @import "../toolbar/_index.scss"; -> /packages/bootstrap/scss/toolbar/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../badge/_index.scss"; -> /packages/bootstrap/scss/badge/_index.scss
// #region @import /packages/bootstrap/scss/badge/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/button/_variables.scss
// #region @import /packages/bootstrap/scss/button/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/button/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/button/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/button/_layout.scss
@include exports("button/layout") {

    // Button
    .k-button {
        @include use-background-clip();
        @include border-radius( $button-border-radius );
        padding: $button-padding-y $button-padding-x;
        box-sizing: border-box;
        border-width: $button-border-width;
        border-style: solid;
        font-size: $button-font-size;
        line-height: $button-line-height;
        font-family: $button-font-family;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        user-select: none;
        cursor: pointer;
        outline: none;
        -webkit-appearance: none;
        position: relative;

        &:disabled,
        &.k-state-disabled {
            @include disabled( $disabled-styling );
        }

        &::-moz-focus-inner {
            padding: 0;
            border: 0;
            outline: 0;
        }

        &:hover,
        &:focus {
            text-decoration: none;
            outline: 0;
        }

        .k-icon,
        .k-image,
        .k-sprite {
            color: inherit;
            align-self: center;
            position: relative;
        }


        // Button variants
        &-icontext {
            overflow: visible; // IE9

            .k-icon,
            .k-image,
            .k-sprite {
                margin: 0 ($button-padding-x / 2) 0 (-$button-padding-x / 2);
            }

            &.k-rtl,
            .k-rtl &,
            &[dir="rtl"],
            [dir="rtl"] & {
                .k-icon,
                .k-image,
                .k-sprite {
                    margin: 0 (-$button-padding-x / 2) 0 ($button-padding-x / 2);
                }
            }
        }

    }


    // Text button
    .k-text-button {
        > .k-icon,
        > .k-button-icon {
            display: none;
        }
    }


    // Icon button
    .k-icon-button,
    .k-button.k-button-icon {
        width: $button-calc-size;
        height: $button-calc-size;
        padding: $button-padding-y;

        .k-text,
        .k-button-text {
            display: none;
        }
    }


    // Input button
    .k-input-button {}
    .k-input-button.k-icon-button {}


    //DropDown Button
    .k-dropdown-button {
        outline: 0;
        display: inline-flex;
        flex-flow: row nowrap;
        vertical-align: middle;
    }


    // Button group
    .k-button-group {
        margin: 0;
        padding: 0;
        border-width: 0;
        box-sizing: border-box;
        color: inherit;
        background-color: transparent;
        list-style: none;
        outline: 0;
        white-space: nowrap;
        display: inline-flex;
        flex-direction: row;
        vertical-align: middle;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-button {
            @include border-radius( 0 );
        }
        .k-button ~ .k-button {
            margin-inline-start: if( $button-border-width == 0, null, -$button-border-width );
        }

        .k-button:hover,
        .k-button.k-state-hover,
        .k-button:active,
        .k-button.k-state-active {
            z-index: 2;
        }

        .k-group-start,
        .k-button:first-child {
            @include border-left-radius( $button-border-radius );
        }
        .k-group-end,
        .k-button:last-child {
            @include border-right-radius( $button-border-radius );
        }
        .k-group-start.k-group-end,
        .k-button:first-child:last-child {
            @include border-radius( $button-border-radius );
        }

        > input[type="radio"],
        > input[type="checkbox"],
        label input[type="radio"],
        label input[type="checkbox"] {
            margin: 0;
            padding: 0;
            clip: rect(0, 0, 0, 0);
            position: absolute;
            pointer-events: none;
        }

    }

    .k-button-group-stretched {
        display: flex;

        .k-button {
            display: inline-block;
            flex: 1 1 auto;
            overflow: hidden;
            text-overflow: ellipsis;

            > .k-icon {
                vertical-align: text-bottom;
            }
        }
    }


    // Split button
    .k-split-button {
        border-width: 0;
        border-radius: 0;
        outline: 0;
        display: inline-flex;
        flex-flow: row nowrap;
        vertical-align: middle;

        .k-button {
            @include border-radius( 0 );
        }

        // .k-button
        > .k-button:first-child {
            @include border-left-radius( $button-border-radius );
        }
        > .k-split-button-arrow,
        > .k-button:last-child {
            @include border-right-radius( $button-border-radius );
            margin-inline-start: if( $button-border-width == 0, null, -$button-border-width );
            padding: $button-padding-y;
            width: auto;
            flex: none;
        }

        &[dir="rtl"] {
            // k-button
            > .k-button:first-child {
                @include border-left-radius( 0 );
                @include border-right-radius( $button-border-radius );
            }
            > .k-button:last-child {
                @include border-right-radius( 0 );
                @include border-left-radius( $button-border-radius );
            }
        }
    }


    // Flat button and bare
    .k-button-flat {
        border-color: transparent !important; // sass-lint:disable-line no-important
        color: inherit;
        background: none !important; // sass-lint:disable-line no-important
        box-shadow: none !important; // sass-lint:disable-line no-important
        transition: color .2s ease-in-out;

        &:hover,
        &.k-state-hover,
        &:active,
        &.k-state-active,
        &:hover:active,
        &:hover.k-state-active {
            color: inherit;
        }

        &::before {
            display: block;
        }
    }
    .k-button.k-flat,
    .k-button.k-bare {
        @extend .k-button-flat;
    }


    // Outline button
    .k-button-outline {
        @include box-shadow( none );
        color: inherit;
        background: none;
    }
    .k-button.k-outline {
        @extend .k-button-outline;
    }

    // RTL
    .k-rtl {

        // Button group
        .k-button-group {

            .k-button {
                @include border-radius( 0 );
            }

            .k-group-start,
            .k-button:first-child {
                @include border-right-radius( $button-border-radius );
            }
            .k-group-end,
            .k-button:last-child {
                @include border-left-radius( $button-border-radius );
            }
            .k-group-start.k-group-end,
            .k-button:first-child:last-child {
                @include border-radius( $button-border-radius );
            }

        }

        // Split button
        .k-split-button {

            .k-button {
                @include border-radius( 0 );
            }

            // k-button
            > .k-button:first-child {
                @include border-left-radius( $button-border-radius );
            }
            > .k-split-button-arrow,
            > .k-button:last-child {
                @include border-right-radius( $button-border-radius );
            }
        }
    }

}




@include exports( "button/layout/overlay" ) {

    // Button overlay
    .k-button-overlay {
        @include border-radius( inherit );
        content: "";
        background: currentColor;
        opacity: 0;
        display: none;
        pointer-events: none;
        position: absolute;
        left: -$button-border-width;
        right: -$button-border-width;
        top: -$button-border-width;
        bottom: -$button-border-width;
        z-index: 0;
        transition: opacity .2s ease-in-out;
    }


    .k-button {

        &::before {
            @extend .k-button-overlay;
        }

        // Hovered state
        &:hover,
        &.k-state-hover {
            &::before {
                opacity: $flat-button-hover-opacity;
            }
        }

        // Focused state
        &:focus,
        &.k-state-focused {
            &::before {
                opacity: $flat-button-focused-opacity;
            }
        }
        &.k-no-focus:not(:hover),
        &.k-no-focus:not(.k-state-hover) {
            &::before {
                opacity: 0;
            }
        }

        // Pressed state
        &:active,
        &.k-state-active {
            &::before {
                opacity: $flat-button-active-opacity;
            }
        }

        // Selected state
        &.k-state-selected {
            &::before {
                opacity: $flat-button-selected-opacity;
            }
        }

        &.k-button-clear {
            &::before {
                display: none;
            }
        }
    }

}




@include exports( "button/layout/focus-ring" ) {

    .k-button {

        &::after {
            @include border-radius( $button-border-radius );
            content: "";
            opacity: 0;
            display: none;
            pointer-events: none;
            position: absolute;
            left: -$button-border-width;
            right: -$button-border-width;
            top: -$button-border-width;
            bottom: -$button-border-width;
            z-index: 0;
            transition: opacity .2s ease-in-out;
        }
    }
}




@include exports( "button/ie-compat" ) {

    .k-ie9,
    .k-ie10 {

        .k-button[disabled]:hover,
        .k-button[disabled]:focus,
        .k-button.k-state-disabled:hover,
        .k-button.k-state-disabled:focus {
            @include disabled-legacy-ie( $disabled-styling );
        }

    }

    .k-ie {

        .k-button,
        .k-button-group {
            display: inline-block;
        }
    }

}

// #endregion

@include exports("button/layout/bootstrap") {

    // Default button
    .k-button {
        transition: $transition;
    }
}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/button/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/button/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/button/_theme.scss
@include exports( "button/theme" ) {

    // Default button
    .k-button {
        @include fill(
            $button-text,
            $button-bg,
            $button-border,
            $button-gradient
        );

        // Hover state
        &:hover,
        &.k-state-hover {
            @include fill(
                $button-hovered-text,
                $button-hovered-bg,
                $button-hovered-border,
                $button-hovered-gradient
            );
        }

        // Focused state
        &:focus,
        &.k-state-focused {
            box-shadow: $button-focused-shadow;
        }

        // Pressed state
        &:active,
        &.k-state-active {
            @include fill(
                $button-pressed-text,
                $button-pressed-bg,
                $button-pressed-border,
                $button-pressed-gradient
            );
            box-shadow: inset $button-pressed-shadow;
        }

        // Selected state
        &.k-state-selected {
            @include fill(
                $primary-button-pressed-text,
                $primary-button-pressed-bg,
                $primary-button-pressed-border,
                $primary-button-pressed-gradient
            );
            box-shadow: $primary-button-pressed-shadow;
        }

        // Disabled state
        // &:disabled,
        // &.k-state-disabled {}

    }


    // Primary button
    .k-button.k-primary {
        @include fill(
            $primary-button-text,
            $primary-button-bg,
            $primary-button-border,
            $primary-button-gradient
        );

        // Hovoer state
        &:hover,
        &.k-state-hover {
            @include fill(
                $primary-button-hovered-text,
                $primary-button-hovered-bg,
                $primary-button-hovered-border,
                $primary-button-hovered-gradient
            );
        }

        // Focused state
        &:focus,
        &.k-state-focused {
            box-shadow: $primary-button-focused-shadow;
        }

        // Active state
        &:active,
        &.k-state-active {
            @include fill(
                $primary-button-pressed-text,
                $primary-button-pressed-bg,
                $primary-button-pressed-border,
                $primary-button-pressed-gradient
            );
            box-shadow: $primary-button-pressed-shadow;
        }

        // Selected state
        &.k-state-selected {
            @include fill(
                $primary-button-pressed-text,
                $primary-button-pressed-bg,
                $primary-button-pressed-border,
                $primary-button-pressed-gradient
            );
            box-shadow: $primary-button-pressed-shadow;
        }

        // Disabled state
        // &:disabled,
        // &.k-state-disabled {}

    }


    // Dropdown button
    .k-dropdown-button {
        &:active > .k-button:not(:disabled),
        &.k-state-active > .k-button:not(:disabled) {
            box-shadow: inset $button-pressed-shadow;
        }

        &:focus > .k-button,
        &.k-state-focused > .k-button {
            box-shadow: $button-focused-shadow;
        }
    }


    // Button group
    .k-button-group {

        // Selected state
        .k-button:active,
        .k-button.k-state-active,
        .k-button.k-state-selected,
        > input[type="radio"]:checked + .k-button,
        > input[type="checkbox"]:checked + .k-button {
            @include fill(
                $primary-button-pressed-text,
                $primary-button-pressed-bg,
                $primary-button-pressed-border,
                $primary-button-pressed-gradient
            );
            box-shadow: $primary-button-pressed-shadow;
        }

        // Focused state
        .k-button:focus,
        .k-button.k-state-focused,
        > input[type="radio"]:focus + .k-button,
        > input[type="checkbox"]:focus + .k-button {
            box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13);
        }

        // Disabled state
        // &:disabled,
        // &.k-state-disabled {}

    }


    // Split button
    .k-split-button:focus,
    .k-split-button.k-state-focused {
        outline: none;
        box-shadow: $button-focused-shadow;
    }

    .k-split-button.k-button-group .k-button {
        &:active,
        &.k-state-active {
            @include fill(
                $button-pressed-text,
                $button-pressed-bg,
                $button-pressed-border,
                $button-pressed-gradient
            );
            box-shadow: inset $button-pressed-shadow;
        }
    }

}




@include exports( "outline-button/theme" ) {

    // Outline button
    .k-button.k-outline {
        border-color: currentColor;
        color: $button-text;
        background: none;
        box-shadow: none;

        // Hover state
        &:hover,
        &.k-state-hover {
            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
        }

        // Focused state
        &:focus,
        &.k-state-focused {
            box-shadow: $button-focused-shadow;
        }

        // Active state
        &:active,
        &.k-state-active {
            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
        }

        // Selected state
        &.k-state-selected {
            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
        }
    }
    .k-button.k-primary.k-outline {
        border-color: currentColor;
        color: $primary-button-bg;
        background: none;
        box-shadow: none;

        // Hover state
        &:hover,
        &.k-state-hover {
            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
        }

        // Focused state
        &:focus,
        &.k-state-focused {
            box-shadow: $primary-button-focused-shadow;
        }

        // Actove state
        &:active,
        &.k-state-active {
            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
            box-shadow: none;
        }

        // Selected state
        &.k-state-selected {
            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
            box-shadow: none;
        }
    }

}




@include exports( "flat-button/theme" ) {

    // Flat button
    .k-button-flat {

        // Explicitly exclude flat button from button group styling
        &,
        .k-button-group & {
            color: inherit;
            background: none;
        }

        &::after {
            display: block;
        }

        &:focus,
        &.k-state-focused {

            &::after {
                box-shadow: inset 0 0 0 2px currentColor;
                opacity: .12;
            }
        }
    }
    .k-button-flat.k-primary {

        // Explicitly exclude flat button from button group styling
        &,
        &:hover,
        &.k-state-hover,
        .k-button-group & {
            color: $primary;
            background: none;
        }
    }

}

@include exports( "clear-button/theme" ) {
    .k-button.k-button-clear {
        border-color: transparent !important; // sass-lint:disable-line no-important
        color: $clear-button-text;
        background: none !important; // sass-lint:disable-line no-important
        box-shadow: none !important; // sass-lint:disable-line no-important

        &::after {
            display: block;
        }

        &:hover,
        &.k-state-hover,
        &:active,
        &.k-state-active,
        &:focus,
        &.k-state-focused {
            color: $clear-button-hover-text;
        }

        &:active,
        &.k-state-active {
            &::after {
                background: transparent;
            }
        }

        &.k-state-focused,
        &.k-state-focused:active {
            &::after {
                background-color: $clear-button-text;
                opacity: $clear-button-focused-opacity;
            }
        }
    }
}

// #endregion

// #endregion

// #endregion
// #region @import "../popup/_index.scss"; -> /packages/bootstrap/scss/popup/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../forms/_variables.scss"; -> /packages/bootstrap/scss/forms/_variables.scss
// Forms
$form-spacer: $padding-x * 2 !default;

$form-font-size: $font-size !default;
$form-line-height: $input-btn-line-height !default;
$form-line-height-em: ($form-line-height * 1em) !default;
$form-line-height-sm: $line-height-sm !default;
$form-line-height-lg: $line-height-lg !default;

$form-fieldset-margin: 2rem 0 0 !default;
$form-fieldset-padding: 0px !default;

$form-legend-margin: 0 0 1rem !default;
$form-legend-padding: 0px !default;
$form-legend-border-width: 0 0 2px !default;
$form-legend-border-style: solid !default;
$form-legend-border-color: $component-border !default;
$form-legend-width: 100% !default;
$form-legend-font-size: 14px !default;
$form-legend-text-transform: uppercase !default;

$form-label-margin-bottom: 0px !default;

$form-button-margin-x: 8px !default;

$form-hint-font-size: 12px !default;
$form-hint-font-style: normal !default;
$form-hint-margin-top: 4px !default;

$form-field-margin-top: 1rem !default;

$form-separator-margin: $form-field-margin-top 0 0 !default;
$form-separator-border-color: $form-legend-border-color !default;

$horizontal-form-label-padding-top: 5px !default;
$horizontal-form-label-margin-x: 10px !default;
$horizontal-form-label-width: 25% !default;
$horizontal-form-label-align: flex-end !default;

$inline-form-element-width: 25% !default;

$forms-invalid-color: $error !default;


// Label
$label-optional-margin-x: 6px !default;
$label-optional-font-size: 12px !default;
$label-optional-font-style: italic !default;


// Fieldset
$fieldset-margin: 30px !default;
$fieldset-font-size: $h4-font-size !default;

$fieldset-bg: null !default;
$fieldset-text: null !default;
$fieldset-border: null !default;

$fieldset-legend-bg: null !default;
$fieldset-legend-text: darken($body-text, 13%) !default;
$fieldset-legend-border: null !default;

// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/popup/_variables.scss
// Popup
$popup-padding-x: 0px !default;
$popup-padding-y: $dropdown-padding-y !default;
$popup-border-width: 1px !default;
$popup-border-radius: $border-radius !default;

$popup-font-size: $font-size !default;
$popup-line-height: $line-height !default;

$popup-header-padding: $list-item-padding-y $list-item-padding-x !default;
$popup-header-font-size: null !default;
$popup-header-text: null !default;
$popup-filter-padding-x: $input-padding-x !default;

$popup-content-padding-x: map-get( $spacing, 2 ) !default;
$popup-content-padding-y: map-get( $spacing, 2 ) !default;

$popup-bg: $dropdown-bg !default;
$popup-text: $dropdown-link-color !default;
$popup-border: $dropdown-border-color !default;
$popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/popup/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/popup/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/popup/_layout.scss

@include exports("popup/layout") {

    .k-popup {
        @include use-background-clip();
        @include border-radius( $popup-border-radius );
        margin: 0;
        padding: $popup-padding-y $popup-padding-x;
        border-width: $popup-border-width;
        border-style: solid;
        box-sizing: border-box;
        font-size: $popup-font-size;
        line-height: $popup-line-height;
        display: flex;
        flex-direction: column;
        align-items: stretch;

        > .k-widget {
            border-width: 0;
        }

        &.k-colorpicker-popup {
            display: flex;
            align-items: center;
        }

        .k-item {
            outline: none;
        }

        .k-rtl,
        [dir="rtl"] & {
            .k-list-optionlabel {
                text-align: right;
            }
        }
    }
    .k-animation-container {
        @include border-bottom-radius-only( $border-radius );

        .k-popup {}
    }

    .k-animation-container-shown {
        overflow: visible;
    }

    .k-popup > kendo-list > .k-first {
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }

    // Virtual list -> K1 - virtuallist.less
    .k-popup .k-item.k-first {
        position: relative;
    }

    .k-popup > .k-group-header,
    .k-popup > .k-virtual-wrap > .k-group-header {
        padding: $popup-header-padding;
        min-height: $line-height-em;
        font-size: $popup-header-font-size;
        white-space: normal;
        transition: $transition;
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }
    .k-popup > .k-group-header {
        margin-top: -$popup-padding-y;
    }

    .k-popup .k-outer-group-header {
        padding: $popup-header-padding;
        min-height: $line-height-em;
        font-size: $popup-header-font-size;
        white-space: normal;

        &.k-virtual-item {
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    .k-popup > .k-colorpalette {
        padding: $popup-content-padding-y $popup-content-padding-x;
    }

    .k-popup .k-list .k-item > .k-group {
        padding: 0 .5em;
        font-size: ($font-size * .714);
        line-height: $font-size;
        text-transform: uppercase;
        position: absolute;
        top: 0;
        right: 0;
    }
    .k-popup .k-list .k-item > .k-group::before {
        content: "";
        width: $font-size;
        height: $font-size;
        border-width: ($font-size / 2);
        border-style: solid;
        box-sizing: border-box;
        display: block;
        position: absolute;
        left: -$font-size;
        bottom: 0;
    }
    .k-rtl.k-popup .k-list .k-item > .k-group,
    [dir="rtl"] .k-popup .k-list .k-item > .k-group {
        right: auto;
        left: 0;

        &::before {
            right: -14px;
            left: auto;
        }
    }
    .k-group-header+div>.k-list>.k-item.k-first::before {
        content: " ";
        display: block;
        border-top-width: 1px;
        border-top-style: solid;
        position: absolute;
        top: -1px;
        left: 0;
        right: 0;
    }

    .k-popup .k-list > .k-outer-group-header {
        border-top-width: 1px;
        border-top-style: solid;
    }
    // Transparent popup
    .k-popup.k-popup-transparent {
        border-width: 0;
        background-color: transparent;
    }

    // Flush popup
    .k-popup.k-popup-flush {
        padding: 0;
    }
}


@include exports( "list/layout" ) {

    // Layout
    .k-list-scroller {
        position: relative;
        overflow: auto;
    }
    .k-list {
        height: auto;

        > .k-item {
            display: flex;
            align-items: center;
            align-content: center;
            cursor: pointer;

            > .k-icon {
                align-self: center;
                margin-right: $padding-x;
            }
        }

        > .k-custom-item {
            font-style: italic;

            > .k-i-plus {
                margin-left: auto;
                margin-right: 0;
            }
        }

        [dir="rtl"] & {
            > .k-item {
                > .k-icon {
                    margin-right: 0;
                    margin-left: $padding-x;
                }
            }
        }
    }

    .k-list .k-item,
    .k-list-optionlabel {
        padding: $list-item-padding-y $list-item-padding-x;
        min-height: $line-height-em;
        line-height: $line-height-em;
        white-space: normal;
        transition-property: color, background-color, outline-color, box-shadow;
        transition-duration: 200ms;
        transition-timing-function: ease;
    }
    .k-list-optionlabel {
        cursor: pointer;
        outline: none;
    }


    // Filter
    .k-list-filter {
        display: block;
        position: relative;
        padding: $padding-x;
        min-height: calc( #{$padding-y * 4} + #{$form-line-height-em} + #{$button-padding-y * 2} );
        box-sizing: border-box;
        flex: 1 0 auto;

        > .k-textbox {
            // remove the !important declaration when https://github.com/telerik/kendo-ui-core/issues/2617 is fixed
            width: 100% !important; // sass-lint:disable-block no-important
            box-sizing: border-box;
            padding-left: $popup-filter-padding-x;
            padding-right: calc( #{$icon-size} + #{$padding-x} );
        }

        > .k-icon {
            position: absolute;
            right: calc( #{$input-padding-x} + #{$padding-x} );
            top: 50%;
            transform: translateY(-50%);
        }


        .k-rtl &,
        [dir="rtl"] & {

            > .k-textbox {
                padding-right: $popup-filter-padding-x;
                padding-left: calc( #{$icon-size} + #{$padding-x} );
            }
            > .k-icon {
                left: calc( #{$input-padding-x} + #{$padding-x} );
                right: auto;
            }

        }
    }

    .k-dropdown-button .k-popup {
        .k-item {
            cursor: pointer;
        }
    }

    //SplitButton
    //TODO: Wait for final design + revise
    .k-split-button,
    .k-dropdown-button {
        .k-list .k-item:focus {
            outline: none;
        }
    }

}




@include exports( "listcontainer/layout" ) {

    .k-list-container {

        .k-button {
            @include border-radius( 0 );
            padding: $list-item-padding-y $list-item-padding-x;
            border-width: 0;
            color: inherit;
            background-color: transparent;
            background-image: none;
            line-height: inherit;
            display: flex;
            justify-content: flex-start;

            .k-icon {
                margin: 0 $icon-spacing 0 0;
            }

            .k-ie11 & {
                display: flex;
            }
        }

        // Button disabled state
        .k-button.k-state-disabled {
            pointer-events: none;
        }

        .k-nodata {
            min-height: 138px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-transform: uppercase;
            font-weight: lighter;
            text-align: center;
            white-space: normal;

            .k-button {
                display: inline-flex;
                border-width: 1px;
            }
        }

        .k-separator {
            height: 0;
        }
    }

    .k-virtual-content {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        position: relative;

        > .k-virtual-list > .k-virtual-item {
            position: absolute;
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            white-space: nowrap;
        }
    }

}



@include exports( "common/decoration/shadow/legacy" ) {

    .k-shadow {
        box-shadow: $popup-shadow;
    }

}

// #endregion

@include exports("popup/layout/bootstrap") {

    .k-popup {
        .k-outer-group-header {
            font-size: $font-size-sm;

            &.k-first {
                border-bottom-width: $frozen-grouping-header-border-width;
                border-bottom-style: solid;
            }
        }

        .k-header,
        .k-group-header {
            font-weight: 600;
            font-size: $font-size-sm;
        }

        &.k-column-menu {
            padding-top: 0;
            padding-bottom: 0;
        }
    }
}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/popup/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/popup/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/popup/_theme.scss
@include exports("popup/theme") {

    .k-popup {
        @include fill(
            $popup-text,
            $popup-bg,
            $popup-border
        );
    }

    .k-popup > kendo-list > .k-first {
        border-bottom-color: $border-color;
    }

    .k-popup > .k-group-header,
    .k-popup > .k-virtual-wrap > .k-group-header {
        color: $popup-header-text;
    }

    .k-popup > .k-group-header,
    .k-popup .k-outer-group-header.k-first,
    .k-popup > .k-virtual-wrap > .k-group-header {
        border-bottom-color: $border-color;
        box-shadow: $list-container-shadow;
    }
    .k-popup .k-outer-group-header {
        color: $popup-header-text;
        border-bottom-color: $border-color;
    }
    .k-popup .k-list .k-item > .k-group {
        color: $grouping-header-text;
        background: $grouping-header-bg;
    }
    .k-popup .k-list .k-item > .k-group::before {
        border-color: $grouping-header-bg $grouping-header-bg transparent transparent;
    }
    .k-rtl.k-popup .k-list .k-item > .k-group::before,
    [dir="rtl"] .k-popup .k-list .k-item > .k-group::before {
        border-color: $grouping-header-bg transparent transparent $grouping-header-bg;
    }
    .k-group-header+div > .k-list > .k-item.k-first::before {
        border-color: $grouping-border;
    }
    .k-list > .k-outer-group-header {
        border-color: $grouping-border;
    }
    .k-popup > .k-colorpalette,
    .k-popup > .k-flatcolorpicker {
        background: transparent;
    }
}

@include exports( "list/theme" ) {

    .k-list {}

    .k-list .k-item:hover,
    .k-list .k-item.k-state-hover,
    .k-list-optionlabel:hover,
    .k-list-optionlabel.k-state-hover {
        @include fill(
            $list-item-hovered-text,
            $list-item-hovered-bg
        );

        &.k-state-selected {
            color: $list-item-selected-text;
            background-color: shade( $list-item-selected-bg );
        }
    }

    .k-list .k-item:focus,
    .k-list .k-item.k-state-focused,
    .k-list-optionlabel:focus,
    .k-list-optionlabel.k-state-focused {
        @include box-shadow( $list-item-focused-shadow );
    }

    .k-list .k-item.k-state-selected,
    .k-list-optionlabel.k-state-selected {
        @include fill(
            $list-item-selected-text,
            $list-item-selected-bg
        );
    }

    .k-animation-container {
        @include border-bottom-radius-only( $border-radius );
    }

    .k-animation-container-shown,
    .k-animation-container > .k-popup {
        @include box-shadow( $popup-shadow );
    }

    .k-animation-container-fixed > .k-popup {
        @include box-shadow( none );
    }
}




@include exports( "listcontainer/theme" ) {


    .k-list-container {

        // Button normal state
        .k-button,
        .k-button.k-state-active {
            box-shadow: none;
        }


        // Button hover state
        .k-button:hover,
        .k-button.k-state-hover {
            @include fill(
                $list-item-hovered-text,
                $list-item-hovered-bg
            );
            background-image: none;
        }

        // Button pressed state
        .k-button:active,
        .k-button.k-state-active {
            @include fill(
                $list-item-selected-text,
                $list-item-selected-bg
            );
            background-image: none;
        }

        // Button disabled state
        .k-button.k-state-disabled {
            background: transparent;
        }


        // Button focus state
        .k-button:focus,
        .k-button.k-state-focused {
            box-shadow: $list-item-focused-shadow;
        }

        .k-nodata {
            color: $list-container-no-data-text;

            .k-button {
                @include fill(
                    $button-text,
                    $button-bg,
                    $button-border,
                    $button-gradient
                );
            }
        }

    }

}

// #endregion

@include exports( "popup/theme/bootstrap" ) {

    .k-popup {

        .k-header,
        .k-group-header {
            color: $dropdown-header-color;
        }

        .k-outer-group-header {
            border-top-color: $grouping-border;
            color: $frozen-grouping-header-text;

            &.k-first {
                border-color: $grouping-border;
            }
        }
    }

    .k-popup > .k-group-header,
    .k-popup > .k-virtual-wrap > .k-group-header {
        border-bottom-color: $grouping-border;
    }

    .k-popup > .k-group-header,
    .k-popup .k-outer-group-header.k-first,
    .k-popup > .k-virtual-wrap > .k-group-header {
        box-shadow: none;
    }

}

@include exports( "list/theme/bootstrap" ) {

    .k-list {}

    .k-list .k-item:focus,
    .k-list .k-item.k-state-focused,
    .k-list-optionlabel:focus,
    .k-list-optionlabel.k-state-focused {
        box-shadow: inset 0 0 0 3px rgba($list-item-text, .15);

        &:hover,
        &.k-state-hover {
            box-shadow: inset 0 0 0 3px rgba($list-item-hovered-text, .15);
        }

        &.k-state-selected {
            box-shadow: inset 0 0 0 3px rgba($list-item-selected-text, .15);
        }
    }

    .k-animation-container-shown,
    .k-animation-container > .k-popup {
        @include box-shadow( none );
    }

}


@include exports( "listcontainer/theme/bootstrap" ) {


    .k-list-container {

        .k-list-optionlabel {
            border-bottom-color: $input-border;
        }

        // Button normal state
        .k-button {}

        // Button focus state
        .k-button:focus,
        .k-button.k-state-focused {
            box-shadow: inset 0 0 0 3px rgba($list-item-text, .15);

            &:hover,
            &.k-state-hover {
                box-shadow: inset 0 0 0 3px rgba($list-item-hovered-text, .15);
            }

            &:active,
            &.k-state-active {
                box-shadow: inset 0 0 0 3px rgba($list-item-selected-text, .15);
            }
        }

        // Button group states
        .k-button-group {
            .k-button:active,
            .k-button.k-state-active {
                background-color: $primary-button-pressed-bg;
                box-shadow: $primary-button-pressed-shadow;
            }
        }

    }

}

// #endregion

// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/toolbar/_variables.scss
// Toolbar

/// The horizontal padding of the container.
/// @group toolbar
$toolbar-padding-x: $table-cell-padding / 2 !default;
/// The vertical padding of the container.
/// @group toolbar
$toolbar-padding-y: $table-cell-padding / 2 !default;
$toolbar-border-width: 1px !default;
$toolbar-border-radius: null !default;
$toolbar-spacing: $toolbar-padding-x !default;

$toolbar-inner-calc-size: calc( #{$button-calc-size} + #{$toolbar-padding-y * 2} ) !default;

$toolbar-font-family: $font-family !default;
$toolbar-font-size: $font-size !default;
$toolbar-line-height: $line-height !default;

$toolbar-bg: $header-bg !default;
$toolbar-text: $header-text !default;
$toolbar-border: $header-border !default;
$toolbar-gradient: null !default;
$toolbar-shadow: null !default;

$toolbar-button-expanded-bg: null !default;
$toolbar-button-expanded-shadow: none !default;

$toolbar-separator-border: inherit !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/toolbar/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/toolbar/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/toolbar/_layout.scss
@include exports("toolbar/layout") {

    // Base
    .k-toolbar {
        @include use-background-clip();
        margin: 0;
        // Until flex gap is available in chrome
        // padding: $toolbar-padding-y $toolbar-padding-x;
        padding: ($toolbar-padding-y / 2) $toolbar-padding-x;
        border-width: $toolbar-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $toolbar-font-family;
        font-size: $toolbar-font-size;
        line-height: $toolbar-line-height;
        list-style: none;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        &::before {
            content: "";
            height: $button-calc-size;
        }

        &.k-toolbar-resizable {
            flex-wrap: nowrap;
        }

        > * {
            // Until flex gap is available in chrome
            margin-top: ($toolbar-padding-y / 2);
            margin-bottom: ($toolbar-padding-y / 2);
            margin-right: $toolbar-spacing;
            flex-shrink: 0;
            display: inline-flex;
            align-items: stretch;
            align-content: center;
            vertical-align: middle;

            > label {
                margin-right: $toolbar-spacing;
            }
        }
        > :last-child {
            margin-right: 0;
        }

        .k-button,
        .k-button-group,
        .k-separator,
        .k-split-button,
        .k-textbox,
        .k-widget,
        label {
            align-self: center;
        }
        .k-split-button > .k-button {
            align-self: stretch;
        }


        // Button
        .k-button {}


        // Toggle button
        .k-toggle-button {}


        // Button group
        .k-button-group {}


        // Split button
        .k-split-button {}


        // Overflow anchor
        .k-overflow-anchor {
            @include border-radius( 0 );
            margin: 0;
            padding: $toolbar-padding-y;
            width: $toolbar-inner-calc-size;
            height: 100%;
            border-width: 0;
            border-color: inherit;
            box-sizing: border-box;
            justify-content: center;
            position: absolute;
            top: 0;
            right: 0;

            &::before {
                display: block;
            }
        }


        // Separator
        .k-separator,
        .k-toolbar-separator {
            width: 0;
            height: $line-height-em;
            border-width: 0 0 0 1px;
            border-style: solid;
        }


        // Spacer
        .k-spacer,
        .k-toolbar-spacer {
            height: $line-height-em;
            flex: 1 1 auto;
        }


        // Template
        .k-toolbar-template {
            align-self: center;
            align-items: center;
        }

    }


    // Angular specific
    kendo-toolbar-renderer {
        border-color: inherit;
    }


    // Overflow container
    .k-overflow-container {

        // Group
        .k-overflow-tool-group {
            display: block;
        }

        // Button
        .k-overflow-button {
            width: 100%;
        }

        // Button group
        .k-button-group {
            display: flex;
            flex-direction: column;

            .k-button {
                margin: if( $button-border-width == 0, null, 0);
            }
        }

        // Hidden items
        .k-overflow-hidden {
            display: none;
        }
    }




    // RTL
    .k-toolbar {

        &.k-rtl,
        .k-rtl &,
        &[dir="rtl"],
        [dir="rtl"] & {

            > * {
                margin-right: 0;
                margin-left: $toolbar-spacing;

                > label {
                    margin-right: 0;
                    margin-left: $toolbar-spacing;
                }
            }
            > :last-child {
                margin-left: 0;
            }

            .k-overflow-anchor {
                margin: 0;
                right: auto;
                left: 0;
            }
        }
    }

}

// #endregion


// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/toolbar/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/toolbar/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/toolbar/_theme.scss
@include exports("toolbar/theme") {

    // Theme
    .k-toolbar {
        @include fill(
            $toolbar-text,
            $toolbar-bg,
            $toolbar-border,
            $toolbar-gradient
        );
        @include box-shadow( $toolbar-shadow );


        // Overflow anchor
        .k-overflow-anchor {
            color: inherit;
            background: transparent;
        }


        // Expanded state
        .k-state-border-up,
        .k-state-border-down {
            background: $toolbar-button-expanded-bg;
            box-shadow: $toolbar-button-expanded-shadow;

            &::before,
            .k-button::before {
                opacity: 0;
            }
        }


        // Separator
        .k-separator {
            border-color: $toolbar-separator-border;
        }


        // Button disabled state
        .k-button.k-state-disabled {
            &::after {
                opacity: 0;
            }
        }


        // Button group
        .k-button-group {}

        .k-combobox {
            .k-state-border-up,
            .k-state-border-down {
                box-shadow: $toolbar-button-expanded-shadow;
            }
        }

    }

}

// #endregion


// #endregion

// #endregion
// #region @import "../window/_variables.scss"; -> /packages/bootstrap/scss/window/_variables.scss
// Window
$window-border-width: 1px !default;
$window-border-radius: $border-radius !default;
$window-font-family: $font-family !default;
$window-font-size: $font-size !default;
$window-line-height: $line-height !default;

$window-inner-padding-x: $modal-inner-padding !default;
$window-inner-padding-y: $modal-inner-padding !default;

$window-titlebar-padding-x: $modal-header-padding-x !default;
$window-titlebar-padding-y: $modal-header-padding-y !default;
$window-titlebar-border-width: 0 0 1px !default;
$window-titlebar-border-style: solid !default;

$window-title-spacing: 0px !default;
$window-title-font-size: $font-size-lg !default;
$window-title-line-height: $modal-title-line-height !default;

$window-bg: $modal-content-bg !default;
$window-text: $modal-content-color !default;
$window-border: $modal-content-border-color !default;

$window-titlebar-bg: null !default;
$window-titlebar-text: null !default;
$window-titlebar-border: $modal-header-border-color !default;

$window-shadow: null !default;
$window-focused-shadow: null !default;

$window-sizes: () !default;
$window-sizes: map-merge((
        sm: 300px,
        md: 800px,
        lg: 1200px
), $window-sizes);

// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/forms/_variables.scss
// #region @import /packages/bootstrap/scss/forms/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/forms/_layout.scss
$twbs-font-size-base: $font-size-base !default;
$twbs-input-padding-x: $input-btn-padding-x !default;
$twbs-input-padding-y: $input-btn-padding-y !default;
$twbs-input-line-height: $line-height-base !default;

$twbs-font-size-base-sm: $font-size-sm !default;
$twbs-input-padding-x-sm: $input-padding-x-sm !default;
$twbs-input-padding-y-sm: $input-padding-y-sm !default;
$twbs-input-line-height-sm: $input-line-height-sm !default;

$twbs-font-size-base-lg: $font-size-lg !default;
$twbs-input-padding-x-lg: $input-padding-x-lg !default;
$twbs-input-padding-y-lg: $input-padding-y-lg !default;
$twbs-input-line-height-lg: $input-line-height-lg !default;

// #region @import "~@progress/kendo-theme-default/scss/forms/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/forms/_layout.scss
@include exports("forms/layout") {

    // Common
    .k-form,
    .k-form-inline {
        font-size: $form-font-size;
        line-height: $form-line-height;
    }

    // Vertical Form
    .k-form {
        border: 0;

        .k-label,
        kendo-label,
        .k-form-label {
            margin-bottom: $form-label-margin-bottom;
            display: flex;
            flex-flow: row nowrap;
        }
        .k-checkbox-label,
        .k-radio-label {
            display: inline-flex;
        }

        .k-form-fieldset {
            margin: $form-fieldset-margin;
            padding: $form-fieldset-padding;
            border: 0;

            > * {
                &:first-child {
                    margin-top: 0;
                }
            }
        }

        .k-form-legend {
            margin: $form-legend-margin;
            padding: $form-legend-padding;
            border-width: $form-legend-border-width;
            border-style: $form-legend-border-style;
            width: $form-legend-width;
            font-size: $form-legend-font-size;
            text-transform: $form-legend-text-transform;
        }


        // Form group
        .k-form-group {
            padding: 0;
        }

        .k-form-field,
        .k-form-buttons,
        .k-daterangepicker .k-textbox-container {
            margin-top: $form-field-margin-top;
        }

        > *,
        .k-daterangepicker .k-textbox-container {
            &:first-child {
                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( $disabled-styling );
            }
        }

        .k-alert-error {
            font-size: $font-size-sm;
            margin-top: $padding-y * 2;
        }

        .k-field-info {
            display: inline-block;
            font-size: $font-size-xs;
            line-height: 1;
            margin: 0 $padding-x;
        }

        .k-textbox,
        .k-textarea,
        .k-autocomplete,
        .k-combobox,
        .k-dropdown,
        .k-multiselect,
        .k-dateinput,
        .k-datepicker,
        .k-datetimepicker,
        .k-daterangepicker-wrap,
        .k-timepicker,
        .k-numerictextbox,
        .k-maskedtextbox,
        .k-textbox-container,
        .k-floating-label-container {
            display: flex;
            width: 100%;
        }
    }

    // Form Buttons Container
    .k-form-buttons {
        display: flex;

        > * {
            margin-right: $form-button-margin-x;

            &:last-child {
                margin-right: 0;
            }
        }
    }

    // Form Hint/Error Messages
    .k-form-hint,
    .k-form-error {
        margin-top: $form-hint-margin-top;
        display: flex;
        font-size: $form-hint-font-size;
        font-style: $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: $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: $horizontal-form-label-margin-x;
                padding-top: $horizontal-form-label-padding-top;
                width: $horizontal-form-label-width;
                flex-direction: column;
                align-items: $horizontal-form-label-align;
                justify-content: flex-start;
            }
            .k-label-optional {
                margin: 0;
                align-self: inherit;
            }
        }

        .k-form-field-wrap {
            flex: 1;
        }

        .k-form-buttons {
            margin-top: 2 * $form-field-margin-top;
        }
    }

    // RTL Adjustments
    .k-form {
        [dir="rtl"],
        .k-rtl & {
            .k-form-buttons,
            &.k-form-buttons {
                > * {
                    margin-right: 0;
                    margin-left: $form-button-margin-x;

                    &:last-child {
                        margin-left: 0;
                    }
                }
            }

            .k-label-optional {
                margin-left: 0;
                margin-right: $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: $horizontal-form-label-margin-x;
                }
            }
        }
    }


    // Scheduler
    .k-form-inline {
        padding: $form-spacer;

        fieldset {
            border-width: 1px 0 0;
            border-style: solid;
            margin: ($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: $font-size-sm;
            text-align: left;
            font-weight: 600;
            line-height: 1;
            margin-bottom: $padding-y-lg * 2;
            text-transform: uppercase;
            padding: 0 $padding-x 0 0;
            width: auto;
        }

        .k-form-field {
            display: flex;
            align-items: flex-start;
            text-align: left;
            margin-bottom: $padding-y-lg * 2;

            > span:not(.k-widget) {
                width: $inline-form-element-width;
                text-align: right;
                line-height: $line-height;
                padding: calc( #{$padding-y} + #{$input-border-width} ) 0;
                padding-right: $padding-x-lg;
                align-self: center;
            }

            > input {
                align-self: center;
            }

            > input:not(.k-checkbox):not(.k-radio) {
                flex: 1 1 auto;
            }

            .k-alert-error {
                font-size: $font-size-sm;
                margin-top: $padding-y * 2;
            }

            .k-field-info {
                display: block;
                font-size: $font-size-xs;
                line-height: 1;
                margin: 0;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

}

@include exports("edit-form/layout") {

    // Edit form
    .k-edit-form-container {
        width: 400px;
        min-width: 400px;
        border-color: inherit;
        position: relative;
    }


    // Tabstrip
    .k-edit-form-container .k-tabstrip-wrapper {
        margin: (-$window-inner-padding-y) (-$window-inner-padding-x);
    }
    .k-edit-form-container .k-tabstrip.k-root-tabs {
        margin-bottom: $window-inner-padding-y;
    }
    .k-edit-form-container .k-tabstrip .k-tabstrip-items {
        padding: $window-inner-padding-y $window-inner-padding-x 0;
    }
    .k-edit-form-container .k-tabstrip .k-content {
        padding: $window-inner-padding-y $window-inner-padding-x;
        border-width: 0;
    }


    // Edit buttons
    .k-edit-buttons {
        padding: $toolbar-padding-y $toolbar-padding-x;
        border-width: 1px 0 0;
        border-style: solid;
        border-color: inherit;
        text-align: right;
        clear: both;
    }
    .k-edit-buttons .k-button + .k-button {
        margin-left: ( $spacer-x / 2 );
    }
    .k-edit-form-container .k-edit-buttons {
        margin: $window-inner-padding-y (-$window-inner-padding-x) (-$window-inner-padding-y);
        padding: $window-inner-padding-y $window-inner-padding-x;
    }


    // Action buttons
    .k-popup-edit-form > .k-action-buttons,
    .k-edit-form-container .k-action-buttons {
        margin: $spacer (-$window-inner-padding-x) (-$window-inner-padding-y);
    }


    .k-edit-label {
        margin: 0 0 $spacer-y 0;
        padding: calc( #{$input-padding-y} + #{$input-border-width} ) 0;
        width: 30%;
        line-height: $form-line-height;
        text-align: right;
        float: left;
        clear: both;
    }
    .k-edit-field {
        margin: 0 0 $spacer-y 0;
        width: 65%;
        float: right;
        clear: right;
        position: relative;

        &.k-no-editor {
            padding: calc( #{$input-padding-y} + #{$input-border-width} ) 0;
        }
    }

    .k-edit-field {

        > .k-widget,
        > .k-textbox,
        > .k-textarea {
            width: 100%;
            box-sizing: border-box;
        }
        > .k-colorpicker {
            width: auto;
        }

        input[type="radio"]:not(.k-radio),
        input[type="checkbox"]:not(.k-checkbox) {
            margin-right: .4ex;
        }

        .k-radio-label,
        .k-checkbox-label {
            margin-right: ($spacer);
        }

        > .k-reset > li + li {
            margin-top: ($spacer / 2);
        }

        .k-reset .k-widget {
            margin: 0 .4ex 0 1ex;
        }
    }

}

@include exports("edit-form/rtl") {

    .k-rtl {

        .k-edit-buttons {
            text-align: left;

            .k-button + .k-button {
                margin-left: 0;
                margin-right: .5em;
            }
        }
    }

}

@include exports("forms/integration-with-bootstrap-forms") {
    $twbs-font-size-base: 1rem !default;
    $twbs-input-padding-x: .75rem !default;
    $twbs-input-padding-y: .5rem !default;
    $twbs-input-line-height: 1.25 !default;

    $bootstrap-integration-input-height: ($twbs-input-padding-y * 2) + ($twbs-font-size-base * $twbs-input-line-height) !default;

    $twbs-font-size-base-sm: .875rem !default;
    $twbs-input-padding-x-sm: .5rem !default;
    $twbs-input-padding-y-sm: .25rem !default;
    $twbs-input-line-height-sm: 1.5 !default;

    $bootstrap-integration-input-height-sm: ($twbs-input-padding-y-sm * 2) + ($twbs-font-size-base-sm * $twbs-input-line-height-sm) !default;

    $twbs-font-size-base-lg: 1.25rem !default;
    $twbs-input-padding-x-lg: 1rem !default;
    $twbs-input-padding-y-lg: .5rem !default;
    $twbs-input-line-height-lg: 1.5 !default;

    $bootstrap-integration-input-height-lg: ($twbs-input-padding-y-lg * 2) + ($twbs-font-size-base-lg * $twbs-input-line-height-lg) !default;

    $numerictextbox-icon-offset-sm: 2px !default;

    .k-widget.form-control {
        padding: 0;
    }

    .k-widget.form-control,
    .k-maskedtextbox.form-control .k-textbox,
    .k-textbox.form-control {
        width: 100%;
    }

    .k-multiselect.form-control {
        height: auto;
    }

    .input-group {
        .k-dateinput-wrap,
        .k-dropdown-wrap,
        .k-multiselect-wrap,
        .k-numeric-wrap,
        .k-picker-wrap,
        .k-maskedtextbox .k-textbox {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;

            .k-select {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
        }

        .k-widget.form-control,
        .k-maskedtextbox.form-control .k-textbox,
        .k-textbox.form-control {
            width: auto;
        }

        .k-widget.form-control:not(:first-child):not(:last-child) {
            .k-dateinput-wrap,
            .k-dropdown-wrap,
            .k-multiselect-wrap,
            .k-numeric-wrap,
            .k-picker-wrap,
            > .k-textbox {
                border-radius: 0;
            }
        }
    }

    .input-group-prepend + .k-widget {
        .k-dateinput-wrap,
        .k-dropdown-wrap,
        .k-multiselect-wrap,
        .k-numeric-wrap,
        .k-picker-wrap,
        > .k-textbox {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-top-right-radius: $border-radius;
            border-bottom-right-radius: $border-radius;
        }
    }

    // Bootstrap form-control, form-control-sm, form-control-lg
    .k-widget {
        &.form-control {
            .k-input {
                padding: $twbs-input-padding-y $twbs-input-padding-x;
                height: $bootstrap-integration-input-height;
            }

            &-sm {
                .k-input {
                    padding: $twbs-input-padding-y-sm $twbs-input-padding-x-sm;
                    height: $bootstrap-integration-input-height-sm;
                }

                .k-dateinput-wrap,
                .k-dropdown-wrap,
                .k-picker-wrap {
                    .k-select {
                        padding: $twbs-input-padding-y-sm;
                    }
                }

                .k-select {
                    width: $bootstrap-integration-input-height-sm;
                }
            }

            &-lg {
                .k-input {
                    padding: $twbs-input-padding-y-lg $twbs-input-padding-x-lg;
                    height: $bootstrap-integration-input-height-lg;
                }

                .k-dateinput-wrap,
                .k-dropdown-wrap,
                .k-picker-wrap {
                    .k-select {
                        padding: $twbs-input-padding-y-lg;
                    }
                }

                .k-select {
                    width: $bootstrap-integration-input-height-lg;
                }
            }
        }
    }

    .k-maskedtextbox {
        &.form-control {
            .k-textbox {
                height: calc( #{$bootstrap-integration-input-height} + #{$input-border-width * 2} );
                padding: $twbs-input-padding-y $twbs-input-padding-x;
            }

            &-sm {
                .k-textbox {
                    height: calc( #{$bootstrap-integration-input-height-sm} + #{$input-border-width + 2} );
                    padding: $twbs-input-padding-y-sm $twbs-input-padding-x-sm;
                    line-height: $twbs-input-line-height-sm;
                }
            }

            &-lg {
                .k-textbox {
                    height: calc( #{$bootstrap-integration-input-height-lg} + #{$input-border-width * 2} );
                    padding: $twbs-input-padding-y-lg $twbs-input-padding-x-lg;
                    line-height: $twbs-input-line-height-lg;
                }
            }
        }
    }

    .k-textbox {
        &.form-control {
            height: calc( #{$bootstrap-integration-input-height} + #{$input-border-width * 2} );
            padding: $twbs-input-padding-y $twbs-input-padding-x;

            &-sm {
                height: calc( #{$bootstrap-integration-input-height-sm} + #{$input-border-width * 2} );
                padding: $twbs-input-padding-y-sm $twbs-input-padding-x-sm;
                line-height: $twbs-input-line-height-sm;
            }

            &-lg {
                height: calc( #{$bootstrap-integration-input-height-lg} + #{$input-border-width * 2} );
                padding: $twbs-input-padding-y-lg $twbs-input-padding-x-lg;
                line-height: $twbs-input-line-height-lg;
            }
        }
    }

    .k-dateinput,
    .k-numerictextbox {
        &.form-control {
            &-sm {
                .k-link-increase > .k-icon {
                    bottom: -$numerictextbox-icon-offset-sm;
                }

                .k-link-decrease > .k-icon {
                    top: -$numerictextbox-icon-offset-sm;
                }

                .k-link {
                    height: ($bootstrap-integration-input-height-sm / 2);
                }
            }

            &-lg {
                .k-link {
                    height: $bootstrap-integration-input-height-lg / 2;
                }
            }
        }
    }

    .k-dateinput {
        &.form-control {
            .k-dateinput-wrap {
                .k-select {
                    padding-top: 0;
                    padding-bottom: 0;
                }
            }
        }
    }
}

// #endregion

@include exports("forms/layout/bootstrap") {

    // Forms
    .k-form,
    .k-form-inline {
        legend {
            font-size: $font-size * 1.5;
            font-weight: normal;
            line-height: $line-height;
            text-transform: none;
        }

        .k-field-info {
            opacity: .7;
        }
    }

    .k-form {
        legend {
            margin-bottom: $padding-y;
        }

        .k-field-info {
            margin: 0 $padding-x / 2;
        }
    }

    .k-form-inline {
        legend {
            margin-bottom: 0;
        }

        .k-form-field {
            > span:not(.k-widget) {
                padding: calc( #{$padding-y} - #{$input-border-width} ) 0;
                padding-right: $padding-x;
            }
        }
    }

}

@include exports("edit-form/layout/bootstrap") {

    .k-edit-label {
        padding: calc( #{$padding-y} - #{$input-border-width} ) 0;
    }

}


// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/forms/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/forms/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/forms/_theme.scss
@include exports( "forms/theme" ) {

    .k-form,
    .k-form-inline {
        @include fill ( $color: $body-text );

        fieldset {
            legend {
                @include fill ( $color: $fieldset-legend-text );
            }
        }

        .k-form-legend {
            @include fill ( $border: $form-legend-border-color );
        }

        .k-field-info {
            @include fill ( $color: lighten($body-text, 33%) );
        }

        .k-alert-error {
            @include fill ( $color: $error );
        }
    }

    .k-form-error,
    .k-text-error,
    .k-form-field-error .k-label {
        @include fill ( $color: $error );
    }

    .k-form-separator {
        @include fill ( $border: $form-separator-border-color );
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "listgroup/_index.scss"; -> /packages/bootstrap/scss/listgroup/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/listgroup/_variables.scss
// Listgroup
$listgroup-border-width: $list-group-border-width !default;
$listgroup-border-radius: $list-group-border-radius !default;

$listgroup-font-size: $font-size !default;
$listgroup-line-height: $line-height !default;

$listgroup-bg: $list-group-bg !default;
$listgroup-text: $list-group-color !default;
$listgroup-border: $list-group-border-color !default;

$listgroup-item-padding-x: $list-group-item-padding-x !default;
$listgroup-item-padding-y: $list-group-item-padding-y !default;
$listgroup-item-border-width: $list-group-border-width !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/listgroup/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/listgroup/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/listgroup/_layout.scss
@include exports( "listgroup/layout" ) {

    .k-listgroup {
        @include border-radius( $listgroup-border-radius );
        margin: 0;
        padding: 0;
        border-width: $listgroup-border-width;
        border-style: solid;
        font-size: $listgroup-font-size;
        line-height: $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: $listgroup-item-border-width;
        }
    }
    .k-listgroup-flush {
        @include border-radius( 0 );
        border-left-width: 0;
        border-right-width: 0;
    }


    .k-listgroup-item {
        padding: $listgroup-item-padding-y $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: (-$listgroup-item-padding-y) (-$listgroup-item-padding-x);
            padding: $listgroup-item-padding-y $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: $listgroup-item-padding-y;
                display: flex;
                align-items: center;
                flex: 0 0 auto;
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
            }
        }
    }
    .k-listgroup-item-segmented {
        align-items: stretch;

        > .k-link {
            margin-right: 0;
        }

        > .k-select {
            margin: (-$listgroup-item-padding-y) (-$listgroup-item-padding-x) (-$listgroup-item-padding-y) 0;
            padding: $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: (-$listgroup-item-padding-y) (-$listgroup-item-padding-x);
        padding: $listgroup-item-padding-y $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;
    }

}



@include exports( "listgroup/layout/rtl" ) {

    [dir="rtl"] {

        .k-listgroup-item {

            > .k-link {

                > .k-select {
                    right: auto;
                    left: 0;

                    .k-icon {
                        transform: scaleX(-1);
                    }
                }
            }
        }
        .k-listgroup-item-segmented {

            > .k-link {
                margin-right: -$listgroup-item-padding-x;
                margin-left: 0;
            }

            > .k-select {
                margin-right: 0;
                margin-left: -$listgroup-item-padding-x;
                border-right-width: 1px;
                border-left-width: 0;

                .k-icon {
                    transform: scaleX(-1);
                }
            }
        }
    }

}




@include exports( "listgroup/layout/noflexbox" ) {

    .k-noflexbox {
        .k-listgroup,
        .k-listgroup > ul
        .k-listgroup-item,
        .k-listgroup-item > .k-link {
            display: block;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/listgroup/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/listgroup/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/listgroup/_theme.scss
@include exports( "listgroup/theme" ) {

    .k-listgroup {
        @include fill(
            $listgroup-text,
            $listgroup-bg,
            $listgroup-border
        );
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "adaptive/_index.scss"; -> /packages/bootstrap/scss/adaptive/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../listgroup/_index.scss"; -> /packages/bootstrap/scss/listgroup/_index.scss
// #region @import /packages/bootstrap/scss/listgroup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../checkbox/_index.scss"; -> /packages/bootstrap/scss/checkbox/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/checkbox/_variables.scss
// Checkboxes
$checkbox-size: map-get( $spacing, 4 ) !default;
$checkbox-radius: map-get( $spacing, 1 ) !default;
$checkbox-border-width: 1px !default;
$checkbox-line-height: calc( #{$checkbox-size} + #{$checkbox-border-width} ) !default;

$checkbox-icon-size: $checkbox-size !default;
$checkbox-icon-type: svg !default;
$checkbox-icon-glyph: "\e118" !default;
$checkbox-icon-svg: escape-svg( $custom-checkbox-indicator-icon-checked ) !default;

$checkbox-indeterminate-style: dash !default;
$checkbox-dash-width:  ( $checkbox-size / 2 ) !default;
$checkbox-dash-height: 2px !default;
$checkbox-square-width:  ( $checkbox-size / 2 ) !default;
$checkbox-square-height: ( $checkbox-size / 2 ) !default;

$checkbox-label-margin-x: 8px;

$checkbox-bg: $custom-control-indicator-bg !default;
$checkbox-text: transparent !default;
$checkbox-border: $custom-control-indicator-border-color !default;
$checkbox-hovered-bg: $checkbox-bg !default;
$checkbox-hovered-text: $checkbox-text !default;
$checkbox-hovered-border: $checkbox-border !default;
$checkbox-checked-bg: $custom-control-indicator-checked-bg !default;
$checkbox-checked-text: $custom-control-indicator-checked-color !default;
$checkbox-checked-border: $custom-control-indicator-checked-border-color !default;
$checkbox-indeterminate-bg: $custom-checkbox-indicator-indeterminate-bg !default;
$checkbox-indeterminate-text: $custom-checkbox-indicator-indeterminate-color !default;
$checkbox-indeterminate-border: $custom-checkbox-indicator-indeterminate-border-color !default;
$checkbox-focused-border: $custom-control-indicator-focus-border-color !default;
$checkbox-focused-shadow: $custom-control-indicator-focus-box-shadow !default;
$checkbox-focused-checked-border: $checkbox-checked-border !default;
$checkbox-focused-checked-shadow: $custom-control-indicator-focus-box-shadow !default;
$checkbox-disabled-bg: $custom-control-indicator-disabled-bg !default;
$checkbox-disabled-text: null !default;
$checkbox-disabled-border: null !default;
$checkbox-disabled-checked-bg: $custom-control-indicator-checked-disabled-bg !default;
$checkbox-disabled-checked-text: null !default;
$checkbox-disabled-checked-border: null !default;
$checkbox-invalid-bg: null !default;
$checkbox-invalid-text: $invalid-text !default;
$checkbox-invalid-border: $invalid-border !default;

$checkbox-list-margin: 0px !default;
$checkbox-list-padding: 0px !default;
$checkbox-list-item-margin-top: 16px !default;
$checkbox-list-horizontal-item-margin-x: 32px !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/checkbox/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/checkbox/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/checkbox/_layout.scss
@include exports( "checkbox/layout" ) {

    // Container box
    .k-checkbox {
        @include border-radius( $checkbox-radius );
        margin: 0;
        padding: 0;
        width: $checkbox-size;
        height: $checkbox-size;
        line-height: initial;
        border-width: $checkbox-border-width;
        border-style: solid;
        outline: 0;
        box-sizing: border-box;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        -webkit-appearance: none;
    }

    // Checkmark
    .k-checkbox::before {
        width: $checkbox-icon-size;
        height: $checkbox-icon-size;
        font-size: $checkbox-icon-size;
        line-height: 1;
        transform: scale(0) translate(-50%, -50%);
        overflow: hidden;
        position: absolute;
        top: 50%;
        left: 50%;

        @if $checkbox-icon-type == "svg" {
            content: "";
            background-repeat: no-repeat;
            background-size: 50%;
            background-position: 50%;
            background-image: $checkbox-icon-svg;
        } @else {
            content: $checkbox-icon-glyph;
            font-family: "WebComponentsIcons", monospace;
        }
    }

    // Hover state
    .k-checkbox:hover {
        cursor: pointer;
    }


    // Checked state
    .k-checkbox:checked::before {
        @include border-radius( $checkbox-radius );
        transform: scale(1) translate(-50%, -50%);
    }


    // Indeterminate state
    .k-checkbox:indeterminate::before,
    .k-checkbox.k-state-indeterminate::before {
        content: "";
        background-color: currentColor;
        transform: scale(1) translate(-50%, -50%);

        @if $checkbox-indeterminate-style == "dash" {
            width: $checkbox-dash-width;
            height: $checkbox-dash-height;
        } @else {
            width: $checkbox-square-width;
            height: $checkbox-square-height;
        }
    }


    // Disabled state
    .k-checkbox:disabled,
    .k-checkbox:disabled + .k-checkbox-label {
        @include disabled( $disabled-styling );
    }

    .k-checkbox + .k-checkbox-label {
        display: inline;
    }

    // Checkbox label
    .k-checkbox-label {
        margin: 0;
        padding: 0;
        line-height: $checkbox-line-height;
        display: inline-flex;
        align-items: flex-start;
        vertical-align: middle;
        position: relative;
        cursor: pointer;

        .k-label {
            cursor: pointer;
        }

        // Hide empty label
        &:empty {
            display: none;
        }

        // Keep it "visible" in jquery grid
        &.k-no-text {
            min-width: 1px;
        }

        .k-ripple {
            top: $checkbox-size / 2;
            left: $checkbox-size / 2;
            right: auto;
            bottom: auto;
            width: $checkbox-size * 5 / 2;
            height: $checkbox-size * 5 / 2;
            transform: translate(-50%, -50%);
            border-radius: 50%;

            // Hide ripple temporarily
            visibility: hidden !important; // sass-lint:disable-line no-important
        }

        .k-ripple-blob {
            // sass-lint:disable-block no-important
            // use !important until ripple can apply these styles from the script
            top: 50% !important;
            left: 50% !important;
            width: 200% !important;
            height: 200% !important;
        }
    }
    .k-checkbox + .k-checkbox-label,
    .k-checkbox-label + .k-checkbox {
        margin-left: $checkbox-label-margin-x;
    }
    .k-checkbox-label > .k-checkbox {
        margin-right: $checkbox-label-margin-x;
        flex-shrink: 0;
    }
    kendo-label.k-checkbox-label > .k-checkbox:last-child {
        margin-right: 0;
    }
    kendo-label.k-checkbox-label > .k-label:first-child {
        margin-right: $checkbox-label-margin-x;
    }

    .k-checkbox-list {
        margin: $checkbox-list-margin;
        padding: $checkbox-list-padding;
        list-style: none;

        .k-checkbox-item {
            margin-top: $checkbox-list-item-margin-top;

            &:first-child {
                margin-top: 0;
            }
        }
    }

    .k-list-horizontal {
        .k-checkbox-item {
            display: inline-block;
            margin: 0 $checkbox-list-horizontal-item-margin-x 0 0;

            &:last-child {
                margin-right: 0;
            }
        }
    }


    // RTL
    .k-rtl,
    [dir="rtl"] {
        .k-checkbox + .k-checkbox-label,
        .k-checkbox-label + .k-checkbox {
            margin-left: 0;
            margin-right: $checkbox-label-margin-x;
        }
        .k-checkbox-label > .k-checkbox {
            margin-right: 0;
            margin-left: $checkbox-label-margin-x;
        }
        kendo-label.k-checkbox-label > .k-checkbox:last-child {
            margin-left: 0;
        }
        kendo-label.k-checkbox-label > .k-label:first-child {
            margin-right: 0;
            margin-left: $checkbox-label-margin-x;
        }

        .k-list-horizontal {
            .k-checkbox-item {
                margin-right: 0;
                margin-left: $checkbox-list-horizontal-item-margin-x;

                &:last-child {
                    margin-left: 0;
                }
            }
        }
    }

}




@include exports( "checkbox/layout/edge" ) {

    .k-checkbox::-ms-check {
        border-width: 0;
        border-color: inherit;
        color: inherit;
        background-color: inherit;
    }

    // IE 11 hack
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .k-checkbox::-ms-check {
            border-width: 1px;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/checkbox/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/checkbox/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/checkbox/_theme.scss
@include exports("checkbox/theme") {

    // Checkbox
    .k-checkbox {
        @include fill(
            $checkbox-text,
            $checkbox-bg,
            $checkbox-border
        );
    }


    // Hover state
    .k-checkbox:hover {
        @include fill(
            $checkbox-hovered-text,
            $checkbox-hovered-bg,
            $checkbox-hovered-border
        );
    }


    // Focus state
    .k-checkbox:focus {
        @include fill( $border: $checkbox-focused-border );
        @include box-shadow( $checkbox-focused-shadow );
    }


    // Indeterminate
    .k-checkbox:indeterminate,
    .k-checkbox.k-state-indeterminate {
        @include fill(
            $checkbox-indeterminate-text,
            $checkbox-indeterminate-bg,
            $checkbox-indeterminate-border
        );
    }


    // Checked
    .k-checkbox:checked {
        @include fill(
            $checkbox-checked-text,
            $checkbox-checked-bg,
            $checkbox-checked-border
        );
    }
    .k-checkbox:checked:focus {
        @include fill( $border: $checkbox-focused-checked-border );
        @include box-shadow( $checkbox-focused-checked-shadow );
    }


    // Disabled
    .k-checkbox:disabled {
        @include fill(
            $checkbox-disabled-text,
            $checkbox-disabled-bg,
            $checkbox-disabled-border
        );
    }
    .k-checkbox:checked:disabled,
    .k-checkbox:indeterminate:disabled,
    .k-checkbox.k-state-indeterminate:disabled {
        @include fill(
            $checkbox-disabled-checked-text,
            $checkbox-disabled-checked-bg,
            $checkbox-disabled-checked-border
        );
    }


    // Invalid
    .k-checkbox.k-invalid,
    .k-checkbox.k-state-invalid,
    .k-checkbox.ng-invalid.ng-touched,
    .k-checkbox.ng-invalid.ng-dirty {
        @include fill( $border: $checkbox-invalid-border );
    }
    .k-checkbox.k-invalid + .k-checkbox-label,
    .k-checkbox.k-state-invalid + .k-checkbox-label,
    .k-checkbox.ng-invalid.ng-touched + .k-checkbox-label,
    .k-checkbox.ng-invalid.ng-dirty + .k-checkbox-label {
        @include fill( $color: $checkbox-invalid-text );
    }
}

// #endregion

// #endregion

// #endregion
// #region @import "../radio/_index.scss"; -> /packages/bootstrap/scss/radio/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../checkbox/_variables.scss"; -> /packages/bootstrap/scss/checkbox/_variables.scss
// #region @import /packages/bootstrap/scss/checkbox/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/radio/_variables.scss
// Radio Buttons
$radio-size: map-get( $spacing, 4 ) !default;
$radio-radius: 50% !default;
$radio-border-width: 1px !default;
$radio-line-height: calc(#{$radio-size} + #{$radio-border-width}) !default;

$radio-icon-size: 6px !default;

$radio-label-margin-x: 8px;

$radio-bg: $checkbox-bg !default;
$radio-text: $checkbox-text !default;
$radio-border: $checkbox-border !default;
$radio-hovered-bg: $checkbox-hovered-bg !default;
$radio-hovered-text: $checkbox-hovered-text !default;
$radio-hovered-border: $checkbox-hovered-border !default;
$radio-checked-bg: $checkbox-checked-bg !default;
$radio-checked-text: $checkbox-checked-text !default;
$radio-checked-border: $checkbox-checked-border !default;
$radio-indeterminate-bg: $radio-checked-bg !default;
$radio-indeterminate-text: $radio-checked-text !default;
$radio-indeterminate-border: $radio-checked-border !default;
$radio-focused-border: $checkbox-focused-border !default;
$radio-focused-shadow: $checkbox-focused-shadow !default;
$radio-focused-checked-border: $checkbox-checked-border !default;
$radio-focused-checked-shadow: $checkbox-focused-checked-shadow !default;
$radio-disabled-bg: $checkbox-disabled-bg !default;
$radio-disabled-text: null !default;
$radio-disabled-border: null !default;
$radio-disabled-checked-bg: $checkbox-disabled-checked-bg !default;
$radio-disabled-checked-text: null !default;
$radio-disabled-checked-border: null !default;
$radio-invalid-bg: null !default;
$radio-invalid-text: $invalid-text !default;
$radio-invalid-border: $invalid-border !default;

$radio-list-margin: 0px !default;
$radio-list-padding: 0px !default;
$radio-list-item-margin-top: 16px !default;
$radio-list-horizontal-item-margin-x: 32px !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/radio/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/radio/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/radio/_layout.scss
@include exports( "radio/layout" ) {

    // Container box
    .k-radio {
        @include border-radius( $radio-radius );
        margin: 0;
        padding: 0;
        width: $radio-size;
        height: $radio-size;
        border-width: $radio-border-width;
        border-style: solid;
        outline: 0;
        box-sizing: border-box;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        -webkit-appearance: none;
    }

    .k-radio::before {
        content: "";
        width: $radio-icon-size;
        height: $radio-icon-size;
        border-radius: 50%;
        background-color: currentColor;
        transform: scale(0) translate(-50%, -50%);
        overflow: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
    }

    // Hover state
    .k-radio:hover {
        cursor: pointer;
    }

    // Checked state
    .k-radio:checked::before {
        @include border-radius( $radio-radius );
        transform: scale(1) translate(-50%, -50%);
    }

    // Disabled state
    .k-radio:disabled,
    .k-radio:disabled + .k-radio-label {
        @include disabled( $disabled-styling );
    }

    .k-radio + .k-radio-label {
        display: inline;
    }

    // Radio label
    .k-radio-label {
        margin: 0;
        padding: 0;
        line-height: $radio-line-height;
        display: inline-flex;
        align-items: flex-start;
        vertical-align: middle;
        position: relative;
        cursor: pointer;

        .k-label {
            cursor: pointer;
        }

        // Hide empty label
        &:empty {
            display: none;
        }

        .k-ripple {
            top: $radio-size / 2;
            left: $radio-size / 2;
            right: auto;
            bottom: auto;
            width: $radio-size * 5 / 2;
            height: $radio-size * 5 / 2;
            transform: translate(-50%, -50%);
            border-radius: 50%;

            // Hide ripple temporarily
            visibility: hidden !important; // sass-lint:disable-line no-important
        }

        .k-ripple-blob {
            // sass-lint:disable-block no-important
            // use !important until ripple can apply these styles from the script
            top: 50% !important;
            left: 50% !important;
            width: 200% !important;
            height: 200% !important;
        }
    }

    .k-radio + .k-radio-label,
    .k-radio-label + .k-radio {
        margin-left: $radio-label-margin-x;
    }
    .k-radio-label > .k-radio {
        margin-right: $radio-label-margin-x;
        flex-shrink: 0;
    }
    kendo-label.k-radio-label > .k-radio:last-child {
        margin-right: 0;
    }
    kendo-label.k-radio-label > .k-label:first-child {
        margin-right: $radio-label-margin-x;
    }

    .k-radio-list {
        margin: $radio-list-margin;
        padding: $radio-list-padding;
        list-style: none;

        .k-radio-item {
            margin-top: $radio-list-item-margin-top;

            &:first-child {
                margin-top: 0;
            }
        }
    }

    .k-list-horizontal {
        .k-radio-item {
            display: inline-block;
            margin: 0 $radio-list-horizontal-item-margin-x 0 0;

            &:last-child {
                margin-right: 0;
            }
        }
    }

    // RTL
    .k-rtl,
    [dir="rtl"] {
        .k-radio + .k-radio-label,
        .k-radio-label + .k-radio {
            margin-left: 0;
            margin-right: $radio-label-margin-x;
        }
        .k-radio-label > .k-radio {
            margin-right: 0;
            margin-left: $radio-label-margin-x;
        }
        kendo-label.k-radio-label > .k-radio:last-child {
            margin-left: 0;
        }
        kendo-label.k-radio-label > .k-label:first-child {
            margin-right: 0;
            margin-left: $radio-label-margin-x;
        }

        .k-list-horizontal {
            .k-radio-item {
                margin-right: 0;
                margin-left: $radio-list-horizontal-item-margin-x;

                &:last-child {
                    margin-left: 0;
                }
            }
        }
    }
}




@include exports( "radio/layout/edge" ) {

    .k-radio::-ms-check {
        border-width: 0;
        border-color: inherit;
        color: inherit;
        background-color: inherit;
    }

    // IE 11 hack
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .k-radio::-ms-check {
            border-width: 1px;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/radio/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/radio/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/radio/_theme.scss
@include exports("radio/theme") {

    // Radio
    .k-radio {
        @include fill(
            $radio-text,
            $radio-bg,
            $radio-border
        );
    }


    // Hover state
    .k-radio:hover {
        @include fill(
            $radio-hovered-text,
            $radio-hovered-bg,
            $radio-hovered-border
        );
    }


    // Focus state
    .k-radio:focus {
        @include fill( $border: $radio-focused-border );
        @include box-shadow( $radio-focused-shadow );
    }


    // Invalid state
    .k-radio.k-invalid,
    .k-radio.k-state-invalid,
    .k-radio.ng-invalid.ng-touched,
    .k-radio.ng-invalid.ng-dirty {
        @include fill( $border: $radio-invalid-border );
    }
    .k-radio.k-invalid + .k-radio-label,
    .k-radio.k-state-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: $radio-invalid-text );
    }


    // Checked
    .k-radio:checked {
        @include fill(
            $radio-checked-text,
            $radio-checked-bg,
            $radio-checked-border
        );
    }

    .k-radio:checked:focus {
        @include fill( $border: $radio-focused-checked-border );
        @include box-shadow( $radio-focused-checked-shadow );
    }


    // Disabled
    .k-radio:disabled {
        @include fill(
            $radio-disabled-text,
            $radio-disabled-bg,
            $radio-disabled-border
        );
    }
    .k-radio:checked:disabled {
        @include fill(
            $radio-disabled-checked-text,
            $radio-disabled-checked-bg,
            $radio-disabled-checked-border
        );
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "../switch/_index.scss"; -> /packages/bootstrap/scss/switch/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/switch/_variables.scss
// Switch
$switch-size: 5em !default;
$switch-border-radius: $switch-size !default;

$switch-font-family: $font-family !default;
$switch-font-size: $font-size-xs !default;
$switch-line-height: $line-height !default;

$switch-track-size: null !default;
$switch-container-border-width: 0px !default;
$switch-container-padding-x: 3px !default;
$switch-container-padding-y: $switch-container-padding-x !default;

$switch-handle-size: (.4 * $switch-size) !default;
$switch-handle-border-radius: $switch-size !default;
$switch-handle-border-width: 0px !default;

$switch-label-display: none !default;
$switch-label-outer-spacing: 8px !default;
$switch-label-inner-spacing: 2px !default;
$switch-label-spacing: calc( #{$switch-label-outer-spacing} + #{$switch-label-inner-spacing} ) !default;
$switch-label-occupied-space: calc( -1 * (#{$switch-handle-size} + #{$switch-label-spacing} + #{$switch-container-padding-x} ) ) !default;
$switch-label-text-transform: null !default !default;

$switch-label-position: calc( #{$switch-label-outer-spacing} - #{$switch-container-border-width} ) !default;
$switch-label-width: calc(100% + #{$switch-label-occupied-space}) !default;
$switch-on-left-x: calc(100% - #{$switch-handle-size}) !default;

$switch-container-shadow: null !default;
$switch-container-hovered-shadow: null !default;
$switch-container-focused-shadow: null !default;

$switch-on-bg: $primary !default;
$switch-on-text: white !default;
$switch-on-border: null !default;
$switch-on-gradient: null !default;
$switch-on-shadow: null !default;

$switch-on-focused-bg: null !default;
$switch-on-focused-text: null !default;
$switch-on-focused-border: null !default;
$switch-on-focused-gradient: null !default;
$switch-on-focused-shadow: 0 0 1px 2px tint( $switch-on-bg, 6 ) !default;

$switch-on-hovered-bg: $primary-button-hovered-bg !default;
$switch-on-hovered-text: $switch-on-text !default;
$switch-on-hovered-border: null !default;
$switch-on-hovered-gradient: null !default;

$switch-on-handle-bg: white !default;
$switch-on-handle-text: $switch-on-text !default;
$switch-on-handle-border: null !default;
$switch-on-handle-gradient: null !default;
$switch-on-handle-shadow: null !default;

$switch-on-handle-hovered-bg: $switch-on-handle-bg !default;
$switch-on-handle-hovered-text: $switch-on-text !default;
$switch-on-handle-hovered-border: null !default;
$switch-on-handle-hovered-gradient: null !default;

$switch-off-bg: $button-bg !default;
$switch-off-text: black !default;
$switch-off-border: null !default;
$switch-off-gradient: null !default;
$switch-off-shadow: null !default;

$switch-off-focused-bg: null !default;
$switch-off-focused-text: null !default;
$switch-off-focused-border: null !default;
$switch-off-focused-gradient: null !default;
$switch-off-focused-shadow: 0 0 1px 2px tint( $switch-off-bg, 6 ) !default;

$switch-off-hovered-bg: $button-hovered-bg !default;
$switch-off-hovered-text: $switch-off-text !default;
$switch-off-hovered-border: null !default;
$switch-off-hovered-gradient: null !default;

$switch-off-handle-bg: $switch-on-handle-bg !default;
$switch-off-handle-text: $switch-off-text !default;
$switch-off-handle-border: null !default;
$switch-off-handle-gradient: null !default;
$switch-off-handle-shadow: null !default;

$switch-off-handle-hovered-bg: $switch-on-handle-hovered-bg !default;
$switch-off-handle-hovered-text: $switch-off-text !default;
$switch-off-handle-hovered-border: null !default;
$switch-off-handle-hovered-gradient: null !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/switch/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/switch/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/switch/_layout.scss
@include exports("switch/layout") {

    .k-switch {
        @include border-radius( $switch-border-radius );
        cursor: pointer;
        width: $switch-size;
        background: none;
        border: 0;
        box-sizing: border-box;
        outline: 0;
        display: inline-flex;
        overflow: hidden;
        vertical-align: middle;
        font-family: $font-family;
        font-size: $font-size-xs;
        line-height: $line-height;
        user-select: none;
        text-align: left;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        [type="checkbox"] {
            display: none;
        }

        .k-ie & {
            display: inline-block;
        }
    }

    .k-switch,
    .k-switch-container,
    .k-switch-handle {
        box-sizing: border-box;
    }

    .k-switch-container {
        @include border-radius( $switch-border-radius );
        padding: $switch-container-padding-y $switch-container-padding-x;
        width: $switch-size;
        border-width: $switch-container-border-width;
        border-style: solid;
        flex: 1 0 auto;
        position: relative;
        outline: 0;
        transition: background-color 200ms ease-out 0s;

        .k-ie & {
            display: block;
        }
    }

    .k-switch-handle {
        @include border-radius( $switch-handle-border-radius );
        width: $switch-handle-size;
        height: $switch-handle-size;
        border-width: $switch-handle-border-width;
        border-style: solid;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        left: 0;
        transition: left 200ms ease-out 0s;

        .k-ie & {
            display: block;
        }
    }

    .k-switch-on .k-switch-handle {
        left: $switch-on-left-x;

        .k-ie &,
        .k-edge & {
            left: 100%;
            margin-left: -$switch-handle-size;
        }
    }

    .k-switch-off .k-switch-handle {
        left: 0;
    }

    .k-switch-label-on,
    .k-switch-label-off {
        display: $switch-label-display;
        width: $switch-label-width;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        text-transform: $switch-label-text-transform;
        line-height: $switch-handle-size;
        overflow: hidden;
    }

    .k-switch-label-on {
        text-align: left;
        left: $switch-label-position;
    }

    .k-switch-label-off {
        text-align: right;
        right: $switch-label-position;
    }

    @if $switch-track-size {

        .k-switch {
            overflow: visible;
        }

        .k-switch-container {
            height: $switch-track-size;
        }

        .k-switch-handle {
            top: calc( #{$switch-track-size / 2} - #{$switch-handle-size / 2} - #{$switch-container-border-width} );
        }

    }

    .k-rtl .k-switch,
    .k-switch[dir = "rtl"] {
        &.k-switch-on .k-switch-handle {
            left: 0;
        }

        &.k-switch-off .k-switch-handle {
            left: $switch-on-left-x;
        }
        .k-switch-label-on {
            text-align: right;
            left: initial;
            right: $switch-label-position;
        }
        .k-switch-label-off {
            text-align: left;
            left: $switch-label-position;
            right: initial;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/switch/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/switch/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/switch/_theme.scss
@include exports("switch/theme") {

    .k-switch-container {
        @include box-shadow( $switch-container-shadow );
    }

    .k-switch-handle {
        @include use-background-clip();
    }

    .k-switch-label-on,
    .k-switch-label-off {
        text-shadow: none;
    }

    .k-switch-on {
        .k-switch-container {
            @include fill(
                $switch-on-text,
                $switch-on-bg,
                $switch-on-border,
                $switch-on-gradient
            );
        }

        .k-switch-handle {
            @include fill(
                $switch-on-handle-text,
                $switch-on-handle-bg,
                $switch-on-handle-border,
                $switch-on-handle-gradient
            );
            @include box-shadow( $switch-on-handle-shadow );
        }

        &:focus,
        &.k-state-focused {
            @include box-shadow( $switch-on-focused-shadow );

            .k-switch-container {
                @include fill(
                    $switch-on-focused-text,
                    $switch-on-focused-bg,
                    $switch-on-focused-border,
                    $switch-on-focused-gradient
                );
            }
        }

        &:hover,
        &.k-state-hover {
            .k-switch-container {
                @include fill(
                    $switch-on-hovered-text,
                    $switch-on-hovered-bg,
                    $switch-on-hovered-border,
                    $switch-on-hovered-gradient
                );
            }

            .k-switch-handle {
                @include fill(
                    $switch-on-handle-hovered-text,
                    $switch-on-handle-hovered-bg,
                    $switch-on-handle-hovered-border,
                    $switch-on-handle-hovered-gradient
                );
            }
        }

        .k-switch-label-off {
            color: transparent;
        }
    }

    .k-switch-off {
        .k-switch-container {
            @include fill(
                $switch-off-text,
                $switch-off-bg,
                $switch-off-border,
                $switch-off-gradient
            );
        }

        .k-switch-handle {
            @include fill(
                $switch-off-handle-text,
                $switch-off-handle-bg,
                $switch-off-handle-border,
                $switch-off-handle-gradient
            );
            @include box-shadow( $switch-off-handle-shadow );
        }

        &:focus,
        &.k-state-focused {
            @include box-shadow( $switch-off-focused-shadow );

            .k-switch-container {
                @include fill(
                    $switch-off-focused-text,
                    $switch-off-focused-bg,
                    $switch-off-focused-border,
                    $switch-off-focused-gradient
                );
            }
        }

        &:hover,
        &.k-state-hover {
            .k-switch-container {
                @include fill(
                    $switch-off-hovered-text,
                    $switch-off-hovered-bg,
                    $switch-off-hovered-border,
                    $switch-off-hovered-gradient
                );
            }

            .k-switch-handle {
                @include fill(
                    $switch-off-handle-hovered-text,
                    $switch-off-handle-hovered-bg,
                    $switch-off-handle-hovered-border,
                    $switch-off-handle-hovered-gradient
                );
            }
        }

        .k-switch-label-on {
            color: transparent;
        }
    }

    .k-switch {
        box-shadow: none;

        &:focus,
        &.k-state-focused {

            .k-switch-container {
                outline: none;
                @include box-shadow( $switch-container-focused-shadow );
            }
        }

        &:hover,
        &.k-state-hover {

            .k-switch-container {
                @include box-shadow( $switch-container-hovered-shadow );
            }
        }

        &.k-state-disabled {
            cursor: default;

            &:focus,
            &.k-state-focused {
                @include box-shadow( $switch-container-shadow );
            }
        }

        &[aria-readonly="true"] {
            pointer-events: none;
        }
    }
}

// #endregion

// #endregion

// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/adaptive/_variables.scss
// Adaptive Common
$adaptive-content-bg: $base-bg !default;
$adaptive-content-text: $primary !default;

$adaptive-menu-bg: $primary !default;
$adaptive-menu-text: contrast-wcag( $adaptive-menu-bg ) !default;

$adaptive-menu-clear-text: $primary !default;

$adaptive-menu-item-border: $component-border !default;
$adaptive-menu-title-text: $component-text !default;

$adaptive-border-width: 1px !default;
$adaptive-font-family: $font-family !default;
$adaptive-font-size: $font-size !default;
$adaptive-line-height: $line-height !default;

$adaptive-bg: $component-bg !default;
$adaptive-text: $component-text !default;
$adaptive-border: $component-border !default;

// Adaptive Grid
$adaptive-grid-sort-text: $primary !default;

// Adaptive Scheduler
$adaptive-scheduler-current-text: $primary !default;
$adaptive-scheduler-base-text: inherit !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/adaptive/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/adaptive/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/adaptive/_layout.scss
@include exports("adaptive/layout") {

    .k-pane-wrapper {
        border-width: $adaptive-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $adaptive-font-family;
        font-size: $adaptive-font-size;
        line-height: $adaptive-line-height;
        display: block;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-pane {
            width: 100%;
            height: 100%;
            user-select: none;
            box-sizing: border-box;
            font-family: sans-serif;
            overflow-x: hidden;

            * {
                background-clip: border-box;
            }
        }

        .k-view {
            top: 0;
            left: 0;
            position: relative;
            border: 0;
            box-sizing: border-box;
            outline: 0;
            font-family: $adaptive-font-family;
            font-size: $adaptive-font-size;
            line-height: $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: $rgba-transparent;
        }

        .k-content {
            min-height: 1px;
            flex: 1;
            align-items: stretch;
            display: block;
            width: auto;
            overflow: hidden;
            position: relative;
        }
    }

}


@include exports("adaptive/layout/grid") {

    .k-pane-wrapper {

        > div.k-pane {
            box-shadow: none;
            font-weight: normal;
        }

        .k-popup-edit-form,
        .k-grid-edit-form,
        .k-grid-column-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-filter-menu {

            .k-filter-selected-items {
                margin: 1em;
                font-weight: normal;
            }
        }

        .k-grid-edit-form {

            .k-popup-edit-form,
            .k-edit-form-container {
                width: auto;
                min-width: auto;
            }
        }

        .k-grid .k-grid-search {
            width: 100%;
            margin-left: 0;
            margin-top: $toolbar-padding-y;

            // Remove top margin if search is the first child in grid toolbar
            &:first-child {
                margin-top: 0;
            }
        }
    }

    .k-grid.k-grid-mobile {
        border-width: 0;
    }

    .k-grid-mobile {
        .k-resize-handle-inner::before {
            content: "\e01e";
            position: absolute;
            font: 16px/1 "WebComponentsIcons";
            // 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-edit-cell > input,
        .k-edit-cell > select,
        .k-grid-edit-row > td > input,
        .k-grid-edit-row > td > select {
            width: 100%;
            box-sizing: border-box;
        }

        .k-header a {
            -webkit-touch-callout: none;

            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;

            -webkit-user-drag: none;
            -moz-user-drag: none;
        }
    }
}

@include exports("adaptive/layout/scheduler") {

    .k-pane-wrapper {

        .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: -1px 0;
            }

            .k-scheduler-recur-end-wrap {
                white-space: nowrap;
            }

            .k-edit-buttons {
                border-width: 0;
            }
        }
    }

    .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: $toolbar-padding-y $toolbar-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;
                }
                .k-m-date-format {}
                .k-y-date-format {
                    font-size: 12px;
                }
            }
        }

        .k-scheduler-footer {
            padding: $toolbar-padding-y $toolbar-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;

            .k-scheduler-mark {
                border-radius: 50%;
            }

            .k-i-reload {
                font-size: 1em;
                margin-right: .5em;
            }

            .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;
        }
    }
}

@include exports("adaptive/layout/common") {

    .k-pane-wrapper {

        .k-grid-edit-form,
        .k-grid-column-menu,
        .k-grid-filter-menu,
        .k-scheduler-edit-form {

            > .k-header {
                display: flex;
                justify-content: space-between;
                padding: .3em .6em;
                width: auto;
                line-height: 2em;

                .k-header-done,
                .k-header-cancel {
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    .k-icon {
                        font-size: 1.5em;
                    }
                }
            }
        }

        .k-list-title,
        .k-filter-help-text {
            padding: $listgroup-item-padding-y $listgroup-item-padding-x;
            display: block;
        }

        .k-listgroup {

            .k-listgroup-item {
                border-color: inherit;
            }
        }
        .k-listgroup + .k-listgroup {
            margin-top: 2em;
        }

        // Column menu
        .k-column-menu {

            .k-filter-item .k-filterable * {
                pointer-events: none;
            }
        }

        // Filter menu
        .k-filter-menu {

            .k-space-right {
                margin: .5em 10px;
                width: auto;
                display: flex;
                align-items: center;
            }

            .k-filter-tools {
                margin: 1em;
                display: flex;
                justify-content: space-between;
            }
        }

        .k-popup-edit-form {

            .k-recur-editor-wrap {
                display: flex;
            }

            .k-mobiletimezoneeditor {
                width: 100;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                position: relative;
                flex: 1 1 auto;
            }
        }

        .k-multicheck-wrap.k-listgroup {
            overflow-y: auto;
        }

        .k-state-disabled {
            opacity: 1;

            > * {
                opacity: .7;
            }
        }

        // Pager

        .k-pager-wrap.k-pager-sm {
            justify-content: center;

            .k-pager-refresh {
                display: none;
            }

        }

        // IE

        .k-ie & {

            .k-scheduler {
                .k-scheduler-toolbar,
                .k-scheduler-footer {
                    line-height: 2em;
                }
            }

            .k-grid {

                .k-icon {
                    text-indent: 0;
                }
            }
        }

        // RTL

        .k-rtl &,
        &[dir="rtl"],
        [dir="rtl"] & {

            .k-grid-edit-form,
            .k-grid-column-menu,
            .k-grid-filter-menu,
            .k-scheduler-edit-form {

                > .k-header {
                    flex-direction: row-reverse;
                }
            }

            .k-filter-menu {

                .k-space-right > .k-i-zoom {
                    left: 15px;
                    right: auto;
                }
            }

            .k-scheduler-mobile {

                .k-scheduler-toolbar {

                    > ul > li {
                        border: 0;
                    }

                    .k-nav-prev,
                    .k-nav-next {
                        transform: scaleX(-1);
                    }
                }

                .k-task .k-i-reload {
                    margin-left: .5em;
                    margin-right: 0;
                }
            }

            .k-scheduler-edit-form .k-item .k-i-arrow-chevron-right {
                transform: scaleX(-1);
            }
        }
    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/adaptive/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/adaptive/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/adaptive/_theme.scss
@include exports("adaptive/theme") {

    .k-pane-wrapper,
    .k-view {
        @extend .k-text-selection !optional;
        @include fill(
            $adaptive-text,
            $adaptive-bg,
            $adaptive-border
        );
    }

    .k-pane-wrapper .k-pane {

        > .k-view > .k-content {
            background-position: 50% 50%;
            background-color: $adaptive-content-bg;
        }

        .k-grid-mobile {

            .k-column-active + th.k-header {
                border-left-color: $body-text;
            }

            .k-resize-handle-inner::before {
                background-color: $base-bg;
            }
        }

        .k-scheduler-mobile {

            .k-nav-current {
                color: $adaptive-scheduler-current-text;
            }

            .k-scheduler-times,
            .k-scheduler-header,
            .k-scheduler-groupcolumn,
            .k-mobile-scheduler-agendadate {
                color: $adaptive-scheduler-base-text;
            }

            .k-time-period,
            .k-mobile-scheduler-agendaweekday {
                color: lighten($base-text, 33%);
            }

            .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: $adaptive-content-bg;
            }

            .k-scheduler-toolbar .k-scheduler-tools > li {
                display: inline-block;
                background-color: inherit;
            }
        }

        .k-grid-edit-form,
        .k-grid-column-menu,
        .k-grid-filter-menu,
        .k-scheduler-edit-form {

            .k-header {
                color: $adaptive-menu-text;
                background-color: $adaptive-menu-bg;

                .k-link {
                    color: inherit;
                }
            }

            .k-item,
            .k-link {
                color: $base-text;
            }

            .k-clear,
            .k-select-all,
            .k-scheduler-delete,
            .k-scheduler-resetSeries { // sass-lint:disable-line class-name-format
                color: $adaptive-menu-clear-text;
            }

        }

        .k-column-menu {

            .k-listgroup-item.k-state-selected {
                color: $adaptive-grid-sort-text;
                background: none;
            }
            .k-listgroup-item.k-state-selected .k-link {
                color: inherit;
            }
        }

    }
}

// #endregion

@include exports("adaptive/theme/bootstrap") {
    .k-pane-wrapper .k-pane {
        .k-filter-menu,
        .k-scheduler-edit-form {

            .k-check {
                border-radius: $border-radius;
            }
        }
    }
}

// #endregion

// #endregion
// @import "loading/_index.scss";
// #region @import "progressbar/_index.scss"; -> /packages/bootstrap/scss/progressbar/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/progressbar/_variables.scss
// Progressbar
$progressbar-height: $progress-height !default;
$progressbar-animation-timing: $progress-bar-animation-timing !default;
$progressbar-border-width: 0px !default;
$progressbar-font-family: $font-family !default;
$progressbar-font-size: $progress-font-size !default;
$progressbar-line-height: 1 !default;

$progressbar-bg: $progress-bg !default;
$progressbar-text: $progress-color !default;
$progressbar-border: null !default;
$progressbar-gradient: null !default;

$progressbar-fill-bg:  $progress-bar-bg !default;
$progressbar-fill-text: $progress-bar-color !default;
$progressbar-fill-border: null !default;
$progressbar-fill-gradient: null !default;

$progressbar-indeterminate-bg: $progressbar-bg !default;
$progressbar-indeterminate-text: $progressbar-text !default;
$progressbar-indeterminate-border: $progressbar-border !default;
$progressbar-indeterminate-gradient: null !default;

$progressbar-chunk-border: $body-bg !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/progressbar/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/progressbar/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/progressbar/_layout.scss
@include exports("progressbar/layout") {

    // Base
    .k-progressbar {
        @include border-radius( $border-radius );
        --kendo-progressbar-progress: 0;
        border-width: $progressbar-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $progressbar-font-family;
        font-size: $progressbar-font-size;
        line-height: $progressbar-line-height;
        display: inline-grid;
        vertical-align: middle;
        position: relative;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;


        // Selection
        > .k-state-selected {
            border-width: 0;
            border-style: solid;
            display: flex;
            overflow: hidden;
            grid-column: 1 / -1;
            grid-row: 1 / -1;
        }


        // Chunks
        > ul {
            border-width: inherit;
            border-style: inherit;
            white-space: nowrap;
            display: flex;
            align-items: stretch;
            flex: 1;
            grid-column: 1 / -1;
            grid-row: 1 / -1;
        }
        .k-item {
            display: block;
            border-width: 0;
            border-style: solid;
            border-color: transparent;
        }

    }


    // 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: 0 ($spacer-x / 2);
        padding-block-start: 0;
        padding-block-end: 0;
        padding-inline-start: ($spacer-x / 2);
        padding-inline-end: ($spacer-x / 2);
        min-width: 10px;
        text-align: center;
        display: inline-block;
        white-space: nowrap;
    }


    // Horizontal
    .k-progressbar-horizontal {
        width: 27em;
        height: $progressbar-height;
        grid-template-columns: 1fr;
        grid-template-rows: 100%;


        .k-progress-status-wrap {
            flex-direction: row;
        }

        > .k-state-selected {
            width: 0;
            width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
            flex-direction: row;

            > .k-progress-status-wrap {
                width: calc( 100% * ( 100 / var( --kendo-progressbar-progress, 1 ) ) );
            }
        }


        // Chunks
        > ul {
            flex-direction: row;
        }
        .k-item {}
        .k-item + .k-item {
            border-left-width: 1px;
            border-inline-start-width: 1px;
            border-inline-end-width: 0;
        }


        // Horizontal reverse
        &.k-progressbar-reverse {

            > .k-state-selected {
                flex-direction: row-reverse;
                justify-self: flex-end;
            }

        }
    }


    // Vertical
    .k-progressbar-vertical {
        width: $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-state-selected {
            height: 0;
            height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
            flex-direction: column-reverse;
            align-self: flex-end;
            align-items: flex-end;

            > .k-progress-status-wrap {
                height: calc( 100% * ( 100 / var( --kendo-progressbar-progress, 1 ) ) ); // sass-lint:disable-line no-duplicate-properties
            }
        }


        // Chunk
        > ul {
            flex-direction: column;
        }
        .k-item {}
        .k-item + .k-item {
            border-top-width: 1px;
            border-block-start-width: 1px;
            border-block-end-width: 0;
        }


        // Vertical reverse
        &.k-progressbar-reverse {
            flex-direction: column;

            > .k-state-selected {
                flex-direction: column;
                align-self: flex-start;
            }
        }
    }


    // Indeterminate
    .k-progressbar-indeterminate {
        .k-progress-status-wrap,
        .k-state-selected,
        .k-item {
            display: none;
        }
    }


    // Blazor specific
    .telerik-blazor.k-progressbar-horizontal {

        > .k-state-selected,
        > .k-state-selected > .k-progress-status-wrap {
            transition: width .1s ease-in-out;
        }
    }

}




@include exports("progressbar/layout/rtl") {

    .k-rtl .k-progressbar,
    .k-progressbar[dir="rtl"] {
        direction: rtl;
    }

}




@include exports("progressbar/layout/ie11") {

    .k-progressbar {
        display: -ms-inline-grid;

        > .k-progress-status-wrap,
        > .k-state-selected {
            -ms-grid-column: 1;
            -ms-grid-row: 1;
        }
    }
    .k-progressbar-horizontal {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: $progressbar-height;

        &.k-progressbar-reverse > .k-state-selected {
            -ms-grid-column-align: end;
        }
    }
    .k-progressbar-vertical {
        -ms-grid-columns: $progressbar-height;
        -ms-grid-rows: 1fr;

        > .k-state-selected {
            -ms-grid-row-align: end;
        }

        &.k-progressbar-reverse > .k-state-selected {
            -ms-grid-row-align: start;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/progressbar/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/progressbar/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/progressbar/_theme.scss
@include exports("progressbar/theme") {

    @keyframes progressbar-indeterminate-animation {
        from { background-position: 0 0; }
        to { background-position: $progressbar-height 0; }
    }

    .k-progressbar {
        @extend .k-text-selection !optional;
        @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );

        .k-state-selected {
            @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
        }

        .k-item {
            border-color: $progressbar-chunk-border;
        }
    }

    .k-progressbar-indeterminate {
        @include fill( $progressbar-indeterminate-text, $progressbar-indeterminate-bg, $progressbar-indeterminate-border );
        @include striped-gradient( shade($progressbar-indeterminate-bg) );
        background-size: $progressbar-height $progressbar-height;
        animation: progressbar-indeterminate-animation $progressbar-animation-timing;
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "ripple/_index.scss"; -> /packages/bootstrap/scss/ripple/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/ripple/_variables.scss
// Ripple

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/ripple/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/ripple/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/ripple/_layout.scss
@include exports( "ripple/layout" ) {
    .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;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/ripple/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/ripple/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/ripple/_theme.scss
@include exports( "ripple/theme" ) {

}

// #endregion

// #endregion

// #endregion
// @import "table/_index.scss";
// #region @import "messagebox/_index.scss"; -> /packages/bootstrap/scss/messagebox/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/messagebox/_variables.scss
// Message box
$message-box-margin: 0 0 $spacer 0 !default;
$message-box-padding-x: $padding-x !default;
$message-box-padding-y: $padding-y !default;
$message-box-border-width: 0 0 0 4px !default;

$message-box-font-size: $font-size !default;
$message-box-line-height: $line-height !default;

$message-box-bg-level: -10 !default;
$message-box-text-level: 6 !default;
$message-box-border-level: -9 !default;

$message-box-link-font-style: normal !default;
$message-box-link-text-decoration: underline !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/messagebox/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/messagebox/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/messagebox/_layout.scss
@include exports("messagebox/layout") {

    // Base
    .k-messagebox {
        margin: $message-box-margin;
        padding: $message-box-padding-y $message-box-padding-x;
        border-width: $message-box-border-width;
        border-style: solid;
        box-sizing: border-box;
        font-size: $message-box-font-size;
        line-height: $message-box-line-height;

        a {
            color: inherit;
            font-style: $message-box-link-font-style;
            text-decoration: $message-box-link-text-decoration;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/messagebox/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/messagebox/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/messagebox/_theme.scss
@include exports("messagebox/theme") {

    @each $color-name, $color in $theme-colors {
        .k-messagebox-#{$color-name} {
            @include fill(
                color-level( $color, $message-box-text-level ),
                color-level( $color, $message-box-bg-level ),
                color-level( $color, $message-box-border-level )
            );
        }
    }

}

// #endregion

// #endregion

// #endregion


// Basic forms
// #region @import "button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "action-buttons/_index.scss"; -> /packages/bootstrap/scss/action-buttons/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/action-buttons/_variables.scss
// Actions
$actions-margin-top: map-get( $spacing, 4 ) !default;
$actions-padding-x: map-get( $spacing, 2 ) !default;
$actions-padding-y: map-get( $spacing, 2 ) !default;
$actions-border-width: 0px !default;
$actions-button-gap: map-get( $spacing, 2 ) !default;

$actions-bg: null !default;
$actions-text: null !default;
$actions-border: null !default;
$actions-gradient: null !default;

$actions-stretched-border: $base-border !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/action-buttons/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/action-buttons/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/action-buttons/_layout.scss
@include exports("action-buttons/layout") {

    .k-actions,
    .k-action-buttons,
    .k-columnmenu-actions {
        padding: $actions-padding-y $actions-padding-x;
        border-width: $actions-border-width;
        border-style: solid;
        border-color: inherit;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-content: flex-end;
        justify-content: flex-end;
        clear: both;

        .k-button + .k-button {
            margin-left: $actions-button-gap;
            flex-shrink: 0;

            .k-rtl &,
            [dir="rtl"] & {
                margin-left: 0;
                margin-right: $actions-button-gap;
            }
        }
    }

    .k-popup .k-actions,
    .k-popup .k-action-buttons,
    .k-popup .k-columnmenu-actions {
        margin-top: $actions-margin-top;
    }

    .k-actions {
        justify-content: flex-start;

        .k-button {
            flex: 0 1 auto;
        }

        &.k-actions-start {
            justify-content: flex-start;
        }

        &.k-actions-center {
            justify-content: center;
        }

        &.k-actions-end {
            justify-content: flex-end;
        }

        &.k-actions-stretched {
            padding: 0;
            align-items: stretch;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            border-width: 1px 0 0;
            border-style: solid;
            display: flex;
            flex-direction: row;
            flex-shrink: 0;
            flex-basis: auto;
            overflow: hidden;

            .k-button {
                background-clip: border-box;
                border-radius: 0;
                padding: 12px 16px;
                border-width: 0;
                text-overflow: ellipsis;
                flex: 1 0 0%;
                flex-grow: 1;
                display: inline-block;
                overflow: hidden;

                width: auto !important; // sass-lint:disable-line no-important
                max-width: 100%;

                ~ .k-button {
                    margin: 0;
                    border-left-width: 1px;
                }
            }
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/action-buttons/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/action-buttons/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/action-buttons/_theme.scss
@include exports("action-buttons/theme") {

    .k-actions,
    .k-action-buttons,
    .k-columnmenu-actions {
        @include fill(
            $actions-text,
            $actions-bg,
            $actions-border,
            $actions-gradient
        );
    }

    .k-actions-stretched {
        border-color: $actions-stretched-border;
    }
}

// #endregion

// #endregion

// #endregion
// #region @import "input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/input/_variables.scss
// #region @import /packages/bootstrap/scss/input/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/input/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/input/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/input/_layout.scss
@include exports( "input/layout" ) {

    // Generic input
    .k-input {
        margin: 0;
        padding: $input-padding-y $input-padding-x;
        width: 100%;
        min-width: 0;
        height: $input-inner-calc-height;
        border: 0;
        outline: 0;
        box-sizing: border-box;
        // Targets https://github.com/telerik/kendo-react/issues/638.
        box-shadow: none;
        color: inherit;
        background: none;
        font: inherit;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        flex: 0 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-appearance: none;

        // Hide clear icon
        &::-ms-clear { display: none; }

        // Placeholder text
        &::placeholder {
            color: $input-placeholder-text;
            opacity: $input-placeholder-opacity;
            user-select: none;
        }
        &:-ms-input-placeholder {
            color: $input-placeholder-text;
        }

        // Invalid
        &:invalid {
            box-shadow: none;
        }
    }


    // TODO: Deprecate
    // Input spacing
    .k-space-left {
        padding-left: 1.9em;

        > .k-icon {
            margin: -8px 0 0;
            position: absolute;
            top: 50%;
            left: 3px;
        }
    }

    .k-space-right {
        padding-right: 1.9em;

        > .k-icon {
            margin: -8px 0 0;
            position: absolute;
            top: 50%;
            right: 3px;
        }
    }


    // Input prefix and suffix
    .k-input-prefix,
    .k-input-suffix {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        height: $button-inner-calc-size;

        > * {
            flex-shrink: 0;
        }

        > .k-icon,
        .k-clear-value > .k-icon {
            width: $button-inner-calc-size;
            height: $button-inner-calc-size;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    }


    // Input with icon styles
    .k-input-icon {
        width: $input-icon-width;
        height: $input-icon-height;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        .k-ie9 & {
            position: absolute;
            height: 100%;
            right: 0;
            top: 0;
        }

        .k-rtl &,
        [dir="rtl"] & {
            .k-ie9 & {
                left: 0;
                right: auto;
            }
        }
    }


    // TODO: remove
    // Clear value
    .k-clear-value {
        cursor: pointer;
    }


    // Searchbar
    .k-searchbar {
        flex: 1 1 auto;
        display: flex;
        flex-flow: row nowrap;
    }


    // Fieldset
    .k-fieldset {
        margin: $fieldset-margin;
        border-width: 1px 0 0;
        border-style: solid;
        padding: 25px 0 0;

        > legend {
            margin-left: 0;
            padding: 0 $padding-x 0 0;
            text-transform: uppercase;
        }
    }


    // Label
    kendo-label > .k-label {
        margin: 0;
    }

    .k-label-optional {
        margin-left: $label-optional-margin-x;
        font-size: $label-optional-font-size;
        font-style: $label-optional-font-style;
        align-self: center;
    }

    .k-label-empty {
        &::before {
            content: "";
            display: inline-block;
        }
    }

    .k-text-disabled {
        @include disabled( $disabled-styling );
    }

}




@include exports("input/layout/jQuery-label") {

    .k-input-label {
        margin-right: $horizontal-form-label-margin-x;
        z-index: 1;

        &:dir(rtl),
        .k-rtl &,
        &.k-rtl,
        [dir="rtl"] &,
        &[dir="rtl"] {
            margin-right: 0;
            margin-left: $horizontal-form-label-margin-x;
        }
    }

}




@include exports("input/layout/autofill-fix") {

    // This is needed for the textbox container to capture browser autofill
    @keyframes autoFillStart {
        from {}
        to {}
    }
    @keyframes autoFillEnd {
        from {}
        to {}
    }

    // Generic class for autofill animations
    .k-autofill:-webkit-autofill {
        animation-name: autoFillStart;
    }
    .k-autofill:not(:-webkit-autofill) {
        animation-name: autoFillEnd;
    }


    .k-textbox:-webkit-autofill {
        animation-name: autoFillStart;
    }
    .k-textbox:not(:-webkit-autofill) {
        animation-name: autoFillEnd;
    }

}

// #endregion

@include exports("input/layout/bootstrap") {

    // Input, Textbox
    .k-textbox {
        transition: $transition;
    }

}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/input/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/input/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/input/_theme.scss
@include exports("input/theme") {
}

// #endregion

// #endregion

// #endregion
// #region @import "floating-label/_index.scss"; -> /packages/bootstrap/scss/floating-label/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/floating-label/_variables.scss
// Floating label
$floating-label-scale: 1 !default;
$floating-label-font-size: $input-font-size !default;
$floating-label-line-height: $input-line-height !default;
$floating-label-height: calc( #{$floating-label-line-height} * 1em ) !default;
$floating-label-offset-x: calc( #{$input-padding-x} + #{$input-border-width} ) !default;
$floating-label-offset-y: calc( #{$floating-label-height} + #{$input-border-width} + #{$input-padding-y} ) !default;

$floating-label-focus-scale: 1 !default;
$floating-label-focus-offset-x: 0 !default;
$floating-label-focus-offset-y: 0 !default;

$floating-label-transition: .2s ease-out !default;

$floating-label-bg: null !default;
$floating-label-text: null !default;

$floating-label-focused-bg: null !default;
$floating-label-focused-text: null !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/floating-label/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/floating-label/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/floating-label/_layout.scss
@include exports( "floating-label/layout" ) {


    // Floating label
    .k-textbox-container,
    .k-floating-label-container {
        padding-top: $floating-label-height;
        display: inline-flex;
        vertical-align: middle;
        position: relative;
        flex-direction: column;
        justify-content: stretch;

        > .k-label {
            max-width: 90%;
            font-size: $floating-label-font-size;
            line-height: $floating-label-line-height;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: absolute;
            top: $floating-label-offset-y;
            left: $floating-label-offset-x;
            overflow: hidden;
            cursor: text;
            transform-origin: left center;
            transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, left $floating-label-transition;
            pointer-events: none;
        }

        > .k-textbox,
        > .k-widget {
            flex: 1 1 auto;
            width: auto;
        }

        &.k-state-empty {
            > .k-label {
                top: $floating-label-offset-y;
                left: $floating-label-offset-x;
                transform: scale( $floating-label-scale );
            }
        }

        > .k-label,
        &:focus-within > .k-label,
        &.k-state-focused > .k-label {
            top: $floating-label-focus-offset-y;
            left: $floating-label-focus-offset-x;
            transform: scale( $floating-label-focus-scale );
        }

        &.k-state-empty:not(.k-state-focused) ::placeholder {
            color: transparent;
        }

        .k-rtl &,
        &[dir="rtl"] {

            > .k-label {
                transform-origin: right center;
            }

            &.k-state-empty {
                > .k-label {
                    left: auto;
                    right: $floating-label-offset-x;
                }
            }

            > .k-label,
            &:focus-within > .k-label,
            &.k-state-focused > .k-label {
                left: auto;
                right: $floating-label-focus-offset-x;
            }
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/floating-label/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/floating-label/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/floating-label/_theme.scss

// #endregion

// #endregion

// #endregion
// #region @import "textbox/_index.scss"; -> /packages/bootstrap/scss/textbox/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../floating-label/_index.scss"; -> /packages/bootstrap/scss/floating-label/_index.scss
// #region @import /packages/bootstrap/scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/textbox/_variables.scss
// Textboxe
$textbox-line-height: $form-line-height-em !default;
$textbox-icon-width: calc( #{$icon-size} + #{$input-padding-x * 2} ) !default;
$textbox-icon-padding-x: 6px !default;
$textbox-icon-padding-y: $textbox-icon-padding-x !default;

$textbox-icon-color: #343a40 !default;
$textbox-icon-opacity: .5 !default;

$textbox-separator-color: $clear-button-text !default;
$textbox-separator-opacity: .5 !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/textbox/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/textbox/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/textbox/_layout.scss
@include exports( "textbox/layout" ) {

    // Textbox
    .k-textbox {
        @include border-radius( $input-border-radius );
        margin: 0;
        padding: 0;
        width: $input-default-width;
        height: $input-calc-height;
        border-width: $input-border-width;
        border-style: solid;
        outline: 0;
        font-family: $input-font-family;
        font-size: $input-font-size;
        line-height: $input-line-height;
        box-sizing: border-box;
        // Targets https://github.com/telerik/kendo-react/issues/638.
        box-shadow: none;
        background: none;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        vertical-align: middle;
        position: relative;
        -webkit-appearance: none;

        // not to be overriden by `background: none`
        @include use-background-clip();

        // Hide clear icon
        &::-ms-clear { display: none; }

        // Placeholder text
        &::placeholder {
            color: $input-placeholder-text;
            opacity: $input-placeholder-opacity;
            user-select: none;
        }
        &:-ms-input-placeholder {
            color: $input-placeholder-text;
        }

        .k-input {}

        .k-button-clear {
            width: $button-inner-calc-size;
            height: $button-inner-calc-size;
            border: 0;
        }

        .k-textbox-separator {
            margin: 0;
            width: 0;
            height: $icon-size;
            border-width: 0 0 0 1px;
            border-style: solid;
        }

        // Disabled state
        &:disabled,
        &[disabled],
        &.k-state-disabled {
            @include disabled( $disabled-styling );

            // Disabled selection
            &::selection {
                @include fill (
                    $color: $input-text,
                    $bg: transparent
                );
            }
        }
    }


    // Textbox
    input.k-textbox {
        padding: $input-padding-y $input-padding-x;
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/textbox/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/textbox/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/textbox/_theme.scss
@include exports("textbox/theme") {

    // Textbox
    .k-textbox {
        @include fill(
            $input-text,
            $input-bg,
            $input-border
        );

        // Selection
        &::selection,
        .k-input::selection {
            @include fill (
                $color: $input-selected-text,
                $bg: $input-selected-bg
            );
        }

        .k-input-prefix,
        .k-input-suffix {
            > .k-icon {
                color: $textbox-icon-color;
                opacity: $textbox-icon-opacity;
            }

            .k-clear-value {
                color: $clear-button-text;
                opacity: .5;

                &:hover {
                    opacity: 1;
                }
            }
        }

        .k-textbox-separator {
            border-color: $textbox-separator-color;
            opacity: $textbox-separator-opacity;
        }

        // Focused
        &:focus,
        &:focus-within,
        &.k-state-focus,
        &.k-state-focused {
            @include fill (
                $input-focused-text,
                $input-focused-bg,
                $input-focused-border
            );
            @include box-shadow( $input-focused-shadow );
        }

        // Hovered
        &:hover,
        &.k-state-hover {
            @include fill(
                $input-hovered-text,
                $input-hovered-bg,
                $input-hovered-border
            );
        }

        // Invalid
        &.k-invalid,
        &.k-state-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            border-color: $invalid-border;

            &:focus,
            &:focus-within,
            &.k-state-focus,
            &.k-state-focused {
                @include box-shadow($invalid-shadow);
            }
        }
    }
}

// #endregion

// #endregion

// #endregion
// #region @import "textarea/_index.scss"; -> /packages/bootstrap/scss/textarea/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../floating-label/_index.scss"; -> /packages/bootstrap/scss/floating-label/_index.scss
// #region @import /packages/bootstrap/scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/textarea/_variables.scss
// Textarea
$textarea-default-width: 18em !default;

$textarea-border-width: $input-border-width !default;
$textarea-border-height: $input-border-height !default;
$textarea-border-radius: $input-border-radius !default;
$textarea-border-radius-sm: $input-border-radius-sm !default;
$textarea-border-radius-lg: $input-border-radius-lg !default;

$textarea-padding-x: $input-padding-x !default;
$textarea-padding-y: $input-padding-y !default;
$textarea-font-family: $input-font-family !default;
$textarea-font-size: $input-font-size !default;
$textarea-line-height: $input-line-height !default;
$textarea-line-height-em: $input-line-height-em !default;

$textarea-padding-x-sm: $input-padding-x-sm !default;
$textarea-padding-y-sm: $input-padding-y-sm !default;
$textarea-font-size-sm: $input-font-size-sm !default;
$textarea-line-height-sm: $input-line-height-sm !default;

$textarea-padding-x-lg: $input-padding-x-lg !default;
$textarea-padding-y-lg: $input-padding-y-lg !default;
$textarea-font-size-lg: $input-font-size-lg !default;
$textarea-line-height-lg: $input-line-height-lg !default;

$textarea-calc-height: $input-calc-height !default;
$textarea-calc-height-sm: $input-calc-height-sm !default;
$textarea-calc-height-lg: $input-calc-height-lg !default;

$textarea-floating-label-padding: null !default;

$textarea-bg: $input-bg !default;
$textarea-text: $input-text !default;
$textarea-border: $input-border !default;
$textarea-shadow: $input-shadow !default;

$textarea-hovered-text: $input-hovered-text !default;
$textarea-hovered-bg: $input-hovered-bg !default;
$textarea-hovered-border: $input-hovered-border !default;
$textarea-hovered-shadow: $input-hovered-shadow !default;

$textarea-focused-text: $input-focused-text !default;
$textarea-focused-bg: $input-focused-bg !default;
$textarea-focused-border: $input-focused-border !default;
$textarea-focused-shadow: $input-focused-shadow !default;

$textarea-placeholder-text: $input-placeholder-text !default;
$textarea-placeholder-opacity: $input-placeholder-opacity !default;

$textarea-selected-text: $input-selected-text !default;
$textarea-selected-bg: $input-selected-bg !default;

$textarea-focused-invalid-shadow: null !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/textarea/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/textarea/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/textarea/_layout.scss
@include exports( "textarea/layout" ) {

    // Textarea
    .k-textarea {
        @include border-radius( $textarea-border-radius );
        margin: 0;
        padding: 0;
        width: $textarea-default-width;
        border-width: $textarea-border-width;
        border-style: solid;
        outline: 0;
        font-family: $textarea-font-family;
        font-size: $textarea-font-size;
        line-height: $textarea-line-height;
        box-sizing: border-box;
        // Targets https://github.com/telerik/kendo-react/issues/638.
        box-shadow: none;
        background: none;
        display: inline-flex;
        flex-flow: row nowrap;
        vertical-align: middle;
        position: relative;
        -webkit-appearance: none;

        // not to be overriden by `background: none`
        @include use-background-clip();

        // Hide clear icon
        &::-ms-clear { display: none; }

        // Placeholder text
        &::placeholder {
            color: $input-placeholder-text;
            opacity: $input-placeholder-opacity;
            user-select: none;
        }

        > .k-input {
            padding: $textarea-padding-y $textarea-padding-x;
            height: auto;
            min-height: $textarea-calc-height;
            overflow-y: auto;
            resize: vertical;
        }

        // Disabled state
        &:disabled,
        &[disabled],
        &.k-state-disabled {
            @include disabled( $disabled-styling );

            // Disabled selection
            &::selection {
                @include fill (
                    $color: $input-text,
                    $bg: transparent
                    // $bg: rgba( contrast-wcag( $input-bg ), .1 )
                );
            }
        }
    }

    // Textarea old rendering
    textarea.k-textarea {
        padding: $textarea-padding-y $textarea-padding-x;
        min-height: $textarea-calc-height;
        display: inline-block;
        resize: both;
    }

    // Floating label
    .k-textbox-container,
    .k-floating-label-container {
        > .k-textarea {
            flex: 1 1 auto;
            width: 100%;
        }
    }
}




@include exports("textarea/layout/IE") {
    // TODO: Remove once we drop IE support

    .k-ie {
        .k-textarea {
            :-ms-input-placeholder,
            &:-ms-input-placeholder {
                color: $input-placeholder-text;
            }
        }
    }
}

// #endregion

@include exports("textarea/layout/bootstrap") {

    //  Textarea
    .k-textarea {
        transition: $transition;
    }

}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/textarea/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/textarea/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/textarea/_theme.scss
@include exports("textarea/theme") {

    // Textarea
    .k-textarea {
        @include fill(
            $textarea-text,
            $textarea-bg,
            $textarea-border
        );

        // Selection
        &::selection,
        .k-input::selection {
            @include fill (
                $color: $textarea-selected-text, // $primary-contrast,
                $bg: $textarea-selected-bg // $primary
            );
        }

        // Focused
        &:focus,
        &:focus-within,
        &.k-state-focus,
        &.k-state-focused {
            @include fill (
                $textarea-focused-text,
                $textarea-focused-bg,
                $textarea-focused-border
            );
            @include box-shadow( $textarea-focused-shadow );
        }

        // Hovered
        &:hover,
        &.k-state-hover {
            @include fill(
                $textarea-hovered-text,
                $textarea-hovered-bg,
                $textarea-hovered-border
            );
        }

        // Invalid
        &.k-invalid,
        &.k-state-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            border-color: $invalid-border;

            &:focus,
            &:focus-within,
            &.k-state-focus,
            &.k-state-focused {
                @include box-shadow($invalid-shadow);
            }
        }
    }

    // Textarea Floating label
    .k-floating-label-container.k-textarea-container,
    .k-textbox-container.k-textarea-container {

        > .k-label {
            @include fill( $color: $textarea-text );
        }
    }
}

// #endregion

// #endregion

// #endregion
// #region @import "checkbox/_index.scss"; -> /packages/bootstrap/scss/checkbox/_index.scss
// #region @import /packages/bootstrap/scss/checkbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "radio/_index.scss"; -> /packages/bootstrap/scss/radio/_index.scss
// #region @import /packages/bootstrap/scss/radio/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "validator/_index.scss"; -> /packages/bootstrap/scss/validator/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../tooltip/_index.scss"; -> /packages/bootstrap/scss/tooltip/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../popup/_index.scss"; -> /packages/bootstrap/scss/popup/_index.scss
// #region @import /packages/bootstrap/scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/tooltip/_variables.scss
// #region @import /packages/bootstrap/scss/tooltip/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/tooltip/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/tooltip/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/tooltip/_layout.scss
@include exports("tooltip/layout") {

    .k-tooltip {
        @include border-radius( $tooltip-border-radius );
        margin: 0;
        padding: $tooltip-padding-y $tooltip-padding-x;
        // max-width: $tooltip-max-width;
        border-width: $tooltip-border-width;
        border-style: solid;
        box-sizing: border-box;
        background-repeat: repeat-x;
        outline: 0;
        font-family: $tooltip-font-family;
        font-size: $tooltip-font-size;
        line-height: $tooltip-line-height;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        position: absolute;
        z-index: 12000;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;
    }

    .k-tooltip-icon {
        margin-inline-end: $icon-spacing;
        flex-shrink: 0;
    }

    .k-tooltip-title {
        margin-bottom: .25em;
        font-size: $tooltip-title-font-size;
        line-height: $tooltip-title-line-height;
    }

    .k-tooltip-content {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .k-tooltip-button {
        margin-inline-start: $icon-spacing;
        flex-shrink: 0;

        .k-icon {
            color: inherit;
            vertical-align: top;
        }
    }


    // Callout
    .k-callout {
        width: ($tooltip-callout-size * 2);
        height: ($tooltip-callout-size * 2);
        border-width: $tooltip-callout-size;
        border-style: solid;
        border-color: transparent;
        box-sizing: border-box;
        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: -$tooltip-callout-size;
        border-bottom-color: currentColor;
        // top: 0;
        top: (-$tooltip-callout-size * 2);
        left: 50%;
        // transform: translate(-50%, -100%);
        pointer-events: none;
    }
    .k-callout-e {
        margin-top: -$tooltip-callout-size;
        border-left-color: currentColor;
        top: 50%;
        // right: 0;
        right: (-$tooltip-callout-size * 2);
        // transform: translate(100%, -50%);
        pointer-events: none;
    }
    .k-callout-s {
        margin-left: -$tooltip-callout-size;
        border-top-color: currentColor;
        // bottom: 0;
        bottom: (-$tooltip-callout-size * 2);
        left: 50%;
        // transform: translate(-50%, 100%);
        pointer-events: none;
    }
    .k-callout-w {
        margin-top: -$tooltip-callout-size;
        border-right-color: currentColor;
        top: 50%;
        // left: 0;
        left: (-$tooltip-callout-size * 2);
        // transform: translate(-100%, -50%);
        pointer-events: none;
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/tooltip/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/tooltip/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/tooltip/_theme.scss
@include exports("tooltip/theme") {
    .k-tooltip-wrapper {
        .k-tooltip {
            box-shadow: $popup-shadow;
        }
    }


    // Default tooltip
    .k-tooltip {
        @include fill(
            $tooltip-text,
            $tooltip-bg,
            $tooltip-border
        );

        .k-callout {
            color: $tooltip-bg;
        }
    }


    // Tooltip variants
    .k-tooltip-primary {
        @include fill(
            $tooltip-primary-text,
            $tooltip-primary-bg,
            $tooltip-primary-border
        );

        .k-callout {
            color: $tooltip-primary-bg;
        }
    }
    .k-tooltip-info {
        @include fill(
            $tooltip-info-text,
            $tooltip-info-bg,
            $tooltip-info-border
        );

        .k-callout {
            color: $tooltip-info-bg;
        }
    }
    .k-tooltip-success {
        @include fill(
            $tooltip-success-text,
            $tooltip-success-bg,
            $tooltip-success-border
        );

        .k-callout {
            color: $tooltip-success-bg;
        }
    }
    .k-tooltip-warning {
        @include fill(
            $tooltip-warning-text,
            $tooltip-warning-bg,
            $tooltip-warning-border
        );

        .k-callout {
            color: $tooltip-warning-bg;
        }
    }
    .k-tooltip-error {
        @include fill(
            $tooltip-error-text,
            $tooltip-error-bg,
            $tooltip-error-border
        );

        .k-callout {
            color: $tooltip-error-bg;
        }
    }
}

// #endregion

// #endregion

// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/validator/_variables.scss

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/validator/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/validator/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/validator/_layout.scss
@include exports("validator/layout") {

    .k-validator-tooltip {
        margin-top: calc( #{$tooltip-callout-size} + #{$tooltip-border-width} );
        width: auto;
        white-space: normal;
        display: flex;
        align-items: center;
        // NOTE: This works around popup / tooltip stackin issue
        z-index: 9999;

        // .k-callout-n { inset-inline-start: 16px; }
    }
    .k-grid .k-validator-tooltip {
        max-width: 300px;
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/validator/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/validator/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/validator/_theme.scss
@include exports( "validator/theme" ) {}

// #endregion

// #endregion

// #endregion


// Inputs
// #region @import "autocomplete/_index.scss"; -> /packages/bootstrap/scss/autocomplete/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../floating-label/_index.scss"; -> /packages/bootstrap/scss/floating-label/_index.scss
// #region @import /packages/bootstrap/scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../popup/_index.scss"; -> /packages/bootstrap/scss/popup/_index.scss
// #region @import /packages/bootstrap/scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/autocomplete/_variables.scss
$autocomplete-default-width: $input-default-width !default;

$autocomplete-padding-x: $input-padding-x !default;
$autocomplete-padding-y: $input-padding-y !default;

$autocomplete-border-width: $input-border-width !default;
$autocomplete-border-radius: $input-border-radius !default;

$autocomplete-font-family: $input-font-family !default;
$autocomplete-font-size: $input-font-size !default;
$autocomplete-line-height: $input-line-height !default;

$autocomplete-icon-width: calc( #{$icon-size} + #{$autocomplete-padding-y * 2} ) !default;
$autocomplete-icon-height: calc( #{$autocomplete-line-height * $autocomplete-font-size} + #{$autocomplete-padding-y * 2} ) !default;

$autocomplete-transition: $transition !default;


// Autocomplete
$autocomplete-bg: $input-bg !default;
$autocomplete-text: $input-text !default;
$autocomplete-border: $input-border !default;
$autocomplete-shadow: $input-shadow !default;

$autocomplete-hovered-bg: $input-hovered-bg !default;
$autocomplete-hovered-text: $input-hovered-text !default;
$autocomplete-hovered-border: $input-hovered-border !default;
$autocomplete-hovered-shadow: $input-hovered-shadow !default;

$autocomplete-focused-bg: $input-focused-bg !default;
$autocomplete-focused-text: $input-focused-text !default;
$autocomplete-focused-border: $input-focused-border !default;
$autocomplete-focused-shadow: $input-focused-shadow !default;

$autocomplete-disabled-bg: null !default;
$autocomplete-disabled-text: null !default;
$autocomplete-disabled-border: null !default;
$autocomplete-disabled-shadow: null !default;

$autocomplete-invalid-bg: null !default;
$autocomplete-invalid-text: null !default;
$autocomplete-invalid-border: $invalid-border !default;
$autocomplete-invalid-shadow: $invalid-shadow !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/autocomplete/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/autocomplete/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/autocomplete/_layout.scss
@include exports( "autocomplete/layout" ) {

    // Autocomplete
    .k-autocomplete {
        @include border-radius( $autocomplete-border-radius );
        @include use-background-clip();
        width: $autocomplete-default-width;
        border-width: $autocomplete-border-width;
        border-style: solid;
        outline: 0;
        box-sizing: border-box;
        font-family: $autocomplete-font-family;
        font-size: $autocomplete-font-size;
        line-height: $autocomplete-line-height;
        white-space: nowrap;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: stretch;
        vertical-align: middle;
        transition: $autocomplete-transition;
        position: relative;
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;


        // Input
        .k-input {
            padding: $autocomplete-padding-y $autocomplete-padding-x;
        }


        // Loading icon
        .k-i-loading {
            width: $autocomplete-icon-width;
            height: $autocomplete-icon-height;
        }


        // Clear value
        .k-clear-value {
            width: $autocomplete-icon-width;
            height: $autocomplete-icon-height;
            outline: 0;
            display: none;
            cursor: pointer;
            opacity: .5;

            &:hover {
                opacity: 1;
            }
        }
        &:hover,
        &:focus-within,
        &.k-state-hover,
        &.k-state-focused {
            .k-clear-value {
                display: inline-flex;
            }
        }

    }


}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/autocomplete/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/autocomplete/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/autocomplete/_theme.scss
@include exports("autocomplete/theme") {

    // Remove first selector when https://github.com/telerik/kendo-angular-dropdowns/issues/656 is done.
    .k-autocomplete.k-header,
    .k-autocomplete {
        @include fill(
            $autocomplete-text,
            $autocomplete-bg,
            $autocomplete-border
        );
        @include box-shadow( $autocomplete-shadow );

        // Hover state
        &:hover,
        &.k-state-hover {
            @include fill(
                $autocomplete-hovered-text,
                $autocomplete-hovered-bg,
                $autocomplete-hovered-border
            );
            @include box-shadow( $autocomplete-hovered-shadow );
        }

        // Focus state
        &:focus-within,
        &.k-state-open,
        &.k-state-focused {
            @include fill(
                $autocomplete-focused-text,
                $autocomplete-focused-bg,
                $autocomplete-focused-border
            );
            @include box-shadow( $autocomplete-focused-shadow );
        }

        // Disabled state
        &:disabled,
        &.k-state-disabled {
            @include fill(
                $autocomplete-disabled-text,
                $autocomplete-disabled-bg,
                $autocomplete-disabled-border
            );
            @include box-shadow( $autocomplete-disabled-shadow );
        }

        // Invalid state
        &.k-invalid,
        &.k-state-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            @include fill(
                $autocomplete-invalid-text,
                $autocomplete-invalid-bg,
                $autocomplete-invalid-border
            );

            &:focus-within,
            &.k-state-focused {
                @include box-shadow( $autocomplete-invalid-shadow );
            }
        }
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "colorpicker/_index.scss"; -> /packages/bootstrap/scss/colorpicker/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../numerictextbox/_index.scss"; -> /packages/bootstrap/scss/numerictextbox/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../floating-label/_index.scss"; -> /packages/bootstrap/scss/floating-label/_index.scss
// #region @import /packages/bootstrap/scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/numerictextbox/_variables.scss
// Numeric textbox
$numerictextbox-spinners-focused-shadow: null !default;

$numeric-bg: $input-bg !default;
$numeric-text: $input-text !default;
$numeric-border: $input-border !default;

$numeric-hovered-bg: $input-hovered-bg !default;
$numeric-hovered-text: $input-hovered-text !default;
$numeric-hovered-border: $input-hovered-border !default;

$numeric-focused-bg: $input-focused-bg !default;
$numeric-focused-text: $input-focused-text !default;
$numeric-focused-border: $input-focused-border !default;
$numeric-focused-shadow: $input-focused-shadow !default;

$numeric-invalid-bg: null !default;
$numeric-invalid-text: $error !default;
$numeric-invalid-border: $invalid-border !default;

$numeric-button-bg: $button-bg !default;
$numeric-button-text: $button-text !default;
$numeric-button-border: $button-border !default;
$numeric-button-gradient: $button-gradient !default;

$numeric-button-hovered-bg: $button-hovered-bg !default;
$numeric-button-hovered-text: $button-hovered-text !default;
$numeric-button-hovered-border: $button-hovered-border !default;
$numeric-button-hovered-gradient: $button-hovered-gradient !default;

$numeric-button-pressed-text: $button-pressed-text !default;
$numeric-button-pressed-bg: $button-pressed-bg !default;
$numeric-button-pressed-border: $button-pressed-border !default;
$numeric-button-pressed-gradient: $button-pressed-gradient !default;
$numeric-button-pressed-shadow: $button-pressed-shadow !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/numerictextbox/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/numerictextbox/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/numerictextbox/_layout.scss
@include exports("numerictextbox/layout") {

    // Base
    .k-numerictextbox {
        width: $input-default-width;
        border-width: 0;
        box-sizing: border-box;
        outline: 0;
        background: none;
        font-family: $input-font-family;
        font-size: $input-font-size;
        line-height: $input-line-height;
        text-align: left;
        white-space: nowrap;
        display: inline-flex;
        vertical-align: middle;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-numeric-wrap {
            @include use-background-clip();
            @include border-radius( $input-border-radius );
            padding: 0;
            width: 100%;
            border-width: 1px;
            border-style: solid;
            box-sizing: border-box;
            position: relative;
            transition: all .1s ease; // sass-lint:disable-block no-transition-all
            cursor: default;
            outline: 0;
            display: flex;
            flex-direction: row;
        }


        // Input
        .k-input {
            text-overflow: clip;
        }


        // Select
        .k-select {
            @include border-right-radius-only( $input-border-radius );
            padding: 0;
            width: $spinner-width;
            border-width: 0;
            box-sizing: border-box;
            border-style: solid;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            flex: 0 0 auto;
            text-align: center;
            cursor: pointer;
        }

        .k-link {
            flex: 1 1 auto;
            display: block;
            overflow: hidden;
            position: relative;

            .k-icon {
                position: absolute;
                right: 50%;
                transform: translateX(50%);
            }
        }

        .k-link-increase .k-icon {
            bottom: -$spinner-icon-offset;
        }

        .k-link-decrease .k-icon {
            top: -$spinner-icon-offset;
        }

        .k-i-warning {
            align-self: center;
            margin-right: $spacer-x / 2;
        }


        // RTL
        .k-rtl &,
        &[dir="rtl"] {
            text-align: right;

            .k-numeric-wrap .k-i-warning {
                align-self: center;
                margin-right: 0;
                margin-left: $spacer-x / 2;
            }

            .k-select {
                @include border-left-radius-only( $input-border-radius );
            }
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/numerictextbox/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/numerictextbox/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/numerictextbox/_theme.scss
@include exports("numerictextbox/theme") {

    // Numeric
    .k-numerictextbox {
        @extend .k-text-selection !optional;

        // Normal state
        .k-numeric-wrap {
            @include fill(
                $numeric-text,
                $numeric-bg,
                $numeric-border
            );

            .k-select {
                @include fill(
                    $numeric-button-text,
                    $numeric-button-bg,
                    $numeric-button-border,
                    $numeric-button-gradient
                );

                &:hover {
                    @include fill(
                        $numeric-button-hovered-text,
                        $numeric-button-hovered-bg,
                        $numeric-button-hovered-border,
                        $numeric-button-hovered-gradient
                    );
                }

                > .k-state-selected,
                > .k-state-active {
                    @include fill(
                        darken($body-text, 25%),
                        $numeric-button-hovered-bg,
                        $numeric-button-hovered-border,
                        $numeric-button-hovered-gradient
                    );
                    box-shadow: $numerictextbox-spinners-focused-shadow;
                }
            }


            // Hovered state
            &:hover,
            &.k-state-hover {
                @include fill(
                    $numeric-hovered-text,
                    $numeric-hovered-bg,
                    $numeric-hovered-border
                );

                .k-select {
                    @include fill(
                        $numeric-button-hovered-text,
                        $numeric-button-hovered-bg,
                        $numeric-button-hovered-border,
                        $numeric-button-hovered-gradient
                    );
                }
            }


            // Focused state
            &.k-state-focused {
                @include fill(
                    $numeric-focused-text,
                    $numeric-focused-bg,
                    $numeric-focused-border
                );
                @include box-shadow($numeric-focused-shadow);
            }

            // Invalid state
            &.k-invalid,
            &.k-invalid:hover,
            &.k-state-invalid {
                border-color: $invalid-border;

                &:focus,
                &.k-state-focused {
                    @include box-shadow($invalid-shadow);
                }
            }
        }

        // Invalid state
        &.k-state-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            .k-numeric-wrap {
                border-color: $invalid-border;

                &.k-state-focused {
                    @include box-shadow($invalid-shadow);
                }
            }
        }
    }
}

// #endregion

@include exports("numerictextbox/theme") {

    // Numeric
    .k-numerictextbox {

        // Normal state
        .k-numeric-wrap {
            transition: $transition;

            .k-select {
                transition: $transition;
            }

            // Selected state
            .k-link.k-state-selected {
                @include fill(
                    $numeric-button-pressed-text,
                    $numeric-button-pressed-bg,
                    $numeric-button-pressed-border,
                    $numeric-button-pressed-gradient
                );
                @include box-shadow( $numeric-button-pressed-shadow );
            }
        }
    }

}

// #endregion

// #endregion
// #region @import "../slider/_index.scss"; -> /packages/bootstrap/scss/slider/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../tooltip/_index.scss"; -> /packages/bootstrap/scss/tooltip/_index.scss
// #region @import /packages/bootstrap/scss/tooltip/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/slider/_variables.scss
// Slider
$slider-size: 200px !default;
$slider-tick-size: null !default;
$slider-alt-size: 30px !default;

$slider-font-family: $font-family !default;
$slider-font-size: $font-size !default;
$slider-line-height: $line-height !default;

$slider-button-offset: 10px !default;
$slider-button-size: ($slider-alt-size - 2) !default;
$slider-button-spacing: ($slider-button-size + $slider-button-offset) !default;
$slider-button-focused-shadow: $button-focused-shadow !default;

$slider-track-thickness: 4px !default;
$slider-draghandle-size: 14px !default;
$slider-draghandle-border-width: 1px !default;
$slider-draghandle-active-scale: 1 !default;
$slider-draghandle-active-size: null !default;

$slider-draghandle-bg: $primary-button-bg !default;
$slider-draghandle-text: $primary-button-text !default;
$slider-draghandle-border: $primary-button-border !default;
$slider-draghandle-gradient: $primary-button-gradient !default;

$slider-draghandle-hovered-bg: $primary-button-hovered-bg !default;
$slider-draghandle-hovered-text: $primary-button-hovered-text !default;
$slider-draghandle-hovered-border: $primary-button-hovered-border !default;
$slider-draghandle-hovered-gradient: $primary-button-hovered-gradient !default;

$slider-draghandle-pressed-bg: $primary-button-pressed-bg !default;
$slider-draghandle-pressed-text: $primary-button-pressed-text !default;
$slider-draghandle-pressed-border: $primary-button-pressed-border !default;
$slider-draghandle-pressed-gradient: $primary-button-pressed-gradient !default;
$slider-draghandle-pressed-shadow: inset $primary-button-pressed-shadow !default;

$slider-draghandle-focused-shadow: $primary-button-focused-shadow !default;

$slider-transition-speed: .3s !default;
$slider-transition-function: ease-out !default;
$slider-draghandle-transition-speed: .4s !default;
$slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default;

$slider-track-bg: $progress-bg !default;
$slider-selection-bg: $progress-bar-bg !default;
$slider-disabled-opacity: null !default;

// #endregion
// #region @import "images/slider-h.scss"; -> /packages/bootstrap/scss/slider/images/slider-h.scss
// #region @import "~@progress/kendo-theme-default/scss/slider/images/slider-h.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/slider/images/slider-h.scss
// #region @import "../../mixins/_index.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_index.scss
// #region @import /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion

@include exports("slider-h.gif") {
    @include register-data-uri("slider-h.gif", "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7")
}

// #endregion

// #endregion
// #region @import "images/slider-v.scss"; -> /packages/bootstrap/scss/slider/images/slider-v.scss
// #region @import "~@progress/kendo-theme-default/scss/slider/images/slider-v.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/slider/images/slider-v.scss
// #region @import "../../mixins/_index.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_index.scss
// #region @import /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion

@include exports("slider-v.gif") {
    @include register-data-uri("slider-v.gif", "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7")
}

// #endregion

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/slider/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/slider/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/slider/_layout.scss
@include exports("slider/layout") {

    .k-slider {
        border-width: 0;
        box-sizing: border-box;
        outline: 0;
        font-family: $slider-font-family;
        font-size: $slider-font-size;
        line-height: $slider-line-height;
        display: block;
        background-color: transparent;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-button {
            height: $slider-button-size;
            line-height: $slider-button-size;
            margin: 0;
            min-width: 0;
            outline: 0;
            padding: 0;
            position: absolute;
            width: $slider-button-size;
            box-sizing: content-box;

            .k-icon {
                vertical-align: baseline;
                line-height: $slider-button-size;
                margin-right: 0;
                height: 100%;
            }
        }

        .k-button-increase {
            right: 0;
            top: 0;
        }

        .k-button-decrease {
            left: 0;
            top: 0;
        }

        .k-label {
            font-size: .92em;
            position: absolute;
            white-space: nowrap;
        }

        .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-state-disabled {
            .k-tick,
            .k-slider-track,
            .k-draghandle {
                cursor: default;
            }
        }

        .k-rtl &,
        &.k-rtl,
        [dir="rtl"] &,
        &[dir="rtl"] {
            .k-slider-selection {
                left: auto;
                right: 0;
            }

            .k-button-increase {
                left: 0;
                right: auto;
            }

            .k-button-decrease {
                right: 0;
                left: auto;
            }
        }
    }

    .k-slider-vertical {
        height: $slider-size;
        width: $slider-alt-size;
        outline: 0;

        .k-button-decrease {
            bottom: 0;
            top: auto;
        }

        .k-tick {
            text-align: right;
            margin-left: 2px;
        }

        .k-slider-topleft .k-tick {
            text-align: left;
        }

        // ticks

        .k-tick { background-position: -92px center; }
        .k-slider-topleft .k-tick { background-position: -122px center; }
        .k-slider-bottomright .k-tick { background-position: -152px center; }

        .k-tick-large {
            display: flex;
            align-items: center;
            background-position: -2px center;
        }

        .k-slider-topleft .k-tick-large { background-position: -32px center; }
        .k-slider-bottomright .k-tick-large { background-position: -62px center; }

        .k-first { background-position: -92px 100%; }
        .k-tick-large.k-first { background-position: -2px 100%; }
        .k-slider-topleft .k-first { background-position: -122px 100%; }
        .k-slider-topleft .k-tick-large.k-first { background-position: -32px 100%; }
        .k-slider-bottomright .k-first { background-position: -152px 100%; }
        .k-slider-bottomright .k-tick-large.k-first { background-position: -62px 100%; }

        .k-last { background-position: -92px 0; }
        .k-tick-large.k-last { background-position: -2px 0; }
        .k-slider-topleft .k-last { background-position: -122px 0; }
        .k-slider-topleft .k-tick-large.k-last { background-position: -32px 0; }
        .k-slider-bottomright .k-last { background-position: -152px 0; }
        .k-slider-bottomright .k-tick-large.k-last { background-position: -62px 0; }

        // labels

        .k-label {
            display: block;
            left: 120%;
            text-align: left;
        }

        .k-last .k-label {
            top: -.5em;
        }

        .k-first .k-label {
            bottom: -.5em;
        }

        .k-slider-topleft .k-label {
            left: auto;
            right: 120%;
        }

        .k-rtl &,
        &.k-rtl,
        [dir="rtl"] &,
        &[dir="rtl"] {
            .k-label {
                left: auto;
                right: 120%;
            }

            .k-slider-topleft .k-label {
                left: 120%;
                right: auto;
            }
        }

    }

    .k-slider-horizontal {
        display: inline-block;
        height: $slider-alt-size;
        width: $slider-size;
        outline: 0;

        // ticks
        .k-tick {
            float: left;
            height: 100%;
            text-align: center;
        }

        .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 {
            left: 0;
            bottom: -1.2em;
            line-height: 1;
            width: 100%;
        }

        .k-first .k-label {
            left: -50%;
        }

        .k-last .k-label {
            left: auto;
            right: -50%;
        }

        .k-slider-topleft .k-label {
            top: -1.2em;
        }

        .k-rtl &,
        &.k-rtl,
        [dir="rtl"] &,
        &[dir="rtl"] {
            .k-slider-track,
            .k-slider-selection {
                right: 0;
                left: auto;
            }
            .k-slider-buttons .k-slider-track {
                right: $slider-button-spacing;
            }

            .k-button .k-i-arrow-e,
            .k-button .k-i-arrow-w {
                transform: scaleX(-1);
            }

            .k-label {
                left: auto;
                right: 0;
            }

            .k-first .k-label {
                right: -50%;
                left: auto;
            }

            .k-last .k-label {
                left: 50%;
                right: auto;
            }
        }
    }

    .k-slider-wrap {
        height: 100%;
        width: 100%;
    }

    .k-slider-track,
    .k-slider-selection {
        margin: 0;
        padding: 0;
        position: absolute;

        .k-slider-horizontal & {
            height: $slider-track-thickness;
            left: 0;
            margin-top: -($slider-track-thickness / 2);
            top: 50%;
        }

        .k-slider-vertical & {
            bottom: 0;
            left: 50%;
            margin-left: -($slider-track-thickness / 2);
            width: $slider-track-thickness;
        }
    }

    .k-slider-buttons .k-slider-track {
        .k-slider-horizontal & {
            left: $slider-button-spacing;
        }

        .k-slider-vertical & {
            bottom: $slider-button-spacing;
        }
    }


    .k-draghandle {
        background-color: transparent;
        background-repeat: no-repeat;
        border-style: solid;
        border-width: $slider-draghandle-border-width;
        outline: 0;
        position: absolute;
        text-align: center;
        text-decoration: none;
        box-sizing: content-box;
        width: $slider-draghandle-size;
        height: $slider-draghandle-size;

        .k-slider-horizontal & {
            top: 50%;
            transform: translateY(-50%);

            &:active,
            &.k-pressed {
                transform: translateY(-50%) scale($slider-draghandle-active-scale);
            }
        }

        .k-slider-vertical & {
            left: 50%;
            transform: translateX(-50%);

            &:active,
            &.k-pressed {
                transform: translateX(-50%) scale($slider-draghandle-active-scale);
            }
        }

        .k-slider-transitions.k-slider-horizontal & {
            transition: left $slider-transition-speed $slider-transition-function, background-color $slider-transition-speed $slider-transition-function, transform $slider-draghandle-transition-speed $slider-draghandle-transition-function;
        }

        .k-slider-transitions.k-slider-vertical & {
            transition: bottom  $slider-transition-speed $slider-transition-function, background-color $slider-transition-speed $slider-transition-function, transform $slider-draghandle-transition-speed $slider-draghandle-transition-function;
        }

        &.k-pressed {
            transition: none;
        }
    }

    .k-slider-selection {
        .k-slider-transitions.k-slider-horizontal & {
            transition: width $slider-transition-speed $slider-transition-function;
        }

        .k-slider-transitions.k-slider-vertical & {
            transition: height $slider-transition-speed $slider-transition-function;
        }

        &.k-pressed {
            transition: none;
        }
    }


    .k-slider-items {
        user-select: none;

        .k-slider-buttons & {
            margin-left: $slider-button-spacing;
        }

        .k-slider-horizontal & {
            height: 100%;
            padding: 2px 0;
            box-sizing: border-box;
        }

        .k-slider-vertical & {
            padding-top: 1px;
        }

        .k-slider-vertical .k-slider-buttons & {
            margin: 0;
            padding-top: $slider-button-spacing;
        }
    }

    .k-slider-tooltip {
        .k-callout-n,
        .k-callout-s {
            margin-left: -$tooltip-callout-size / 2;
        }

        .k-callout-w,
        .k-callout-e {
            margin-top: -$tooltip-callout-size / 2;
        }
    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/slider/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/slider/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/slider/_theme.scss
@include exports("slider/theme") {
    $slider-tick-horizontal-image: map-get($data-uris, "slider-h.gif") !default;
    $slider-tick-vertical-image: map-get($data-uris, "slider-v.gif") !default;

    .k-slider {
        color: $component-text;

        .k-slider-track,
        .k-slider-selection {
            @include border-radius( $border-radius );
        }

        .k-slider-track {
            @include fill( $bg: $slider-track-bg );
        }

        .k-slider-selection {
            @include fill( $bg: $slider-selection-bg );
        }

        .k-button {
            @include border-radius( 50% );
        }

        .k-draghandle {
            @include fill(
                $slider-draghandle-text,
                $slider-draghandle-bg,
                $slider-draghandle-border,
                $slider-draghandle-gradient
            );
            @include border-radius( 50% );

            &:hover {
                @include fill(
                    $slider-draghandle-hovered-text,
                    $slider-draghandle-hovered-bg,
                    $slider-draghandle-hovered-border,
                    $slider-draghandle-hovered-gradient
                );
            }

            &:active,
            &.k-pressed {
                @include fill(
                    $slider-draghandle-pressed-text,
                    $slider-draghandle-pressed-bg,
                    $slider-draghandle-pressed-border,
                    $slider-draghandle-pressed-gradient
                );
                @include box-shadow( $slider-draghandle-pressed-shadow );
            }

            &:focus,
            &.k-state-focused {
                @include box-shadow( $slider-draghandle-focused-shadow );
            }
        }

        &.k-state-focused {
            .k-draghandle {
                @include box-shadow( $slider-draghandle-focused-shadow );
            }
        }

        &.k-state-disabled {
            opacity: $slider-disabled-opacity;
        }

        .k-slider-wrap {
            &:focus {
                outline: none;
            }
        }
    }

    .k-slider-horizontal .k-tick {
        @include background-image( $slider-tick-horizontal-image );
    }

    .k-slider-vertical .k-tick {
        @include background-image( $slider-tick-vertical-image );
    }
}

// #endregion

@include exports("slider/theme/bootstrap") {

    .k-slider {

        .k-button {
            &:active,
            &.k-state-active {
                @include box-shadow( $slider-button-focused-shadow );
            }
        }
    }
}

// #endregion

// #endregion
// #region @import "../popup/_index.scss"; -> /packages/bootstrap/scss/popup/_index.scss
// #region @import /packages/bootstrap/scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/colorpicker/_variables.scss
// Colorpicker
$colorpicker-rect-padding: 15px !default;
$colorpicker-margin: 8px !default;
$colorpicker-width: 349px !default;
$colorpicker-border-width: 1px !default;
$colorpicker-font-family: $font-family !default;
$colorpicker-font-size: $font-size !default;
$colorpicker-line-height: $line-height !default;
$colorpicker-draghandle-width: 14px !default;
$colorpicker-draghandle-height: 14px !default;
$colorpicker-slider-track-size: 10px !default;
$colorpicker-slider-border-radius: 10px !default;
$colorpicker-input-width: 52px !default;
$colorpicker-hex-input-width: 85px !default;
$colorpicker-input-padding-x: $input-padding-y !default;
$colorpicker-input-padding-y: $input-padding-y !default;

$colorpicker-select-border-width: 1px !default;

$colorpicker-bg: $input-bg !default;
$colorpicker-text: $input-text !default;
$colorpicker-border: $input-border !default;

$colorpicker-hovered-bg: null !default;
$colorpicker-hovered-text: null !default;
$colorpicker-hovered-border: null !default;

$colorpicker-focused-bg: null !default;
$colorpicker-focused-text: null !default;
$colorpicker-focused-border: null !default;
$colorpicker-focused-shadow: null !default;

$colorpicker-select-bg: $button-bg !default;
$colorpicker-select-text: $button-text !default;
$colorpicker-select-border: $button-border !default;
$colorpicker-select-gradient: $button-gradient !default;

$colorpicker-select-hovered-bg: $button-hovered-bg !default;
$colorpicker-select-hovered-text: $button-hovered-text !default;
$colorpicker-select-hovered-border: $button-hovered-border !default;
$colorpicker-select-hovered-gradient: $button-hovered-gradient !default;

$colorpicker-select-focused-bg: $button-pressed-bg !default;
$colorpicker-select-focused-text: $button-pressed-text !default;
$colorpicker-select-focused-border: $button-pressed-border !default;
$colorpicker-select-focused-gradient: $button-pressed-gradient !default;
$colorpicker-select-pressed-shadow: $button-pressed-shadow !default;
$colorpicker-select-focused-shadow: $button-focused-shadow !default;

$colorpicker-tool-icon-hovered-border: $colorpicker-select-hovered-border;

$colorpalette-hovered-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
$colorpalette-focused-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;

// #endregion
// #region @import "images/alpha-slider-bgr.scss"; -> /packages/bootstrap/scss/colorpicker/images/alpha-slider-bgr.scss
// #region @import "../../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion

@include exports("alpha-slider-bgr.png") {
    @include register-data-uri("alpha-slider-bgr.png", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAAQCAYAAABnaabpAAAABmJLR0QA/wB+AABtSDmpAAAACXBIWXMAABbqAAAW6gHljkMQAAAAB3RJTUUH3AsbBx0zHBOM9AAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAaTSURBVHjarVxtstowDJSY3ih3eu9McCeulO2Pko4xknZlw8wbGsCOrY/VSlbq9/sdZgb79zpf79dneD6fb9fzb4/jmD8f389p/P/Pr38fx5HNf90/Wtt1fY2/vvuYfxiP6C+4v7r/a3w61szsdf957xj2P/7ep+8j+Z3B/dM1vsaf0drM7JzGf8h5WH+m/2z+avy8fyP6T+V7HEe6t9f9bZb5ND6bG8R+5vWfif5PMj5d+4b+M/l9/Ha4f+b/qewF+1fxI/3Na/yHXw/2W9l3uf7H43HeXl/49G7DNaZrH5x1/MwnEEIwl01j1RemtWBanxf3zV6+sA6b7l/NNcsOyW+dzBvJIZN7JbtozmzdRuSJZG3flDs29ICGvYHsNfMBZZ+ZT0WyQ6JjIzbBriNb8UTXq/7AsALCPiobi+ZAY65w/p+fH78lyJkZGApBMfDpgBOE7zxx6FWH8kSJinFlslPXpjjVDuAgcfgdY//mC8EaVdl3wDEKxtVn0W8qP0GwJ4jy9C/qCInOM3CJ7KQT3COdgchekQUWA2OEE6EubsXGvIgiEa10IfqZKPTKKbwwMHyZ2WVRyReMFESpKBihi4DqAqtk+4UIFJmhsbEg7KQDaBVrqQIGRAasOKQ61gSAZXtjGYKJoOMkSGMBdJTsUQFsJACdkRQ0QNQZAKIhBCdjnSywot1OUsUOC1GZIopIrLIgbDixk/TSCdvopidZwGNpEUjQqgLbjlO7ANgg4AchKJsACL4ACF0QVJgYxEALQYcsCO+y+C6bVTM9hZ2GAfbxeOBWKNs3hNHN9VcYFIhRVIaA5tpBjEcB7NW0fAfQFXbYdWYXazYu2JGTGhhLsVRQyOqD2VoZiEBgyhB10ClvdIKFF2zIm4Gg0kU3oIEEuCojQBMnKizwiAGaSPcVVEZBYVntSymaeoOhYSGd6dajKgaysl+FNSAxoMjJQVICiM6ngiZI4LIvGXwntUcjLe9cM6dGAQ5OwNJIuqraVwb8EBlUloaiAF4T5vdEXtV6swMSD/7SwDMegrCanWJIEAqgHUYGkjJ3U5aVNEZxdqaUVbDrrjc7RYyMAQuA4wTw1Q6CThq3Uj9jAaiyMRSpvDdZnBuvSaNI4UECepXGYsG3ujig2iOr2alliVmeq+WZt+s/QZ/R2w2nPqGZZVx9Vp5s+BqfMrZXn04WFeb7fyhh6LO6euje1jn0KYXReOgzCgU+9CmFexj6xDwZb1XUfT6f117PaJ5g/Nv8U5/TRwo39bl9pAjD/j1a33T/ca14yb9qlbHjONzyPsBr/ynwTveP9B/t/5zGewZ2g/5CGQT2N69/1u05rb9MlQf9h8Ax7D9iRpjsN/OfVAaF/c/yDxl9YD9v803yj/ynBK7p/rN8o/2/+fmgv9DObk1GodRnQKLW6gsk9a4OMVyMVOxzkIIxi2CZI6JRzGXyUJijCylWFr3RqHc6qZWq6Z/aIsQYbJXGd5ioupadjgEQBl0dICKwUaWdR23VUg+znMiwe8gJ4yft6LDZm7gJphxbMJAqdVopdKrN0J3DipV0m6UtkUKV/qnVeiVMb11RU2IsfgahHKJ8x+5ZNaGbxQcEagq1crrb7U9VDxhA0mjWcO/iWkDGRbV19eS5Akpf8DlG4FIAXD1JVAvPJjAcpdZWAZFyeNJ5ukEpAnfBw8SirxpI2Cm4B+xtt/aotKR0esrceIHeN21UPclncmatW6uBgTWCV4cWjFTsZl+djgMntpj18jEAzQIZOyvIbN9/f3/f2mDYKSH7jqU7O+yiMm4IzqQ8ZuQC88hSVhUk2KNtIEaGBlh5krZ2ewaVBmQUKfpKO1CnEdgXbKYbGHdsV2VZ3rSdDhH55sMBSpeAki0p/tYF5w6btvv97jcBXFYYgdteK0vniQwXlBzVf7L1ugAGSjc6iHMrzFNh3oqBdPsTXZB91H4AoRbVDQxKhuELDmsbQLEKJqx9DLbW3tVlmF3fUx+KUGxZzcA8YY6VfanZhJkZMga4kqqqvXIQqK8VgFO10IAoOiriohG9VGUxA1+pvUFkAEqLEUiqbKJxu1h+yAxSYTtKPxpj8r7p2Ct1WCWl7vpa5uzq/N21dJhm96CjW/ev/kchhcmndnQjynYhwrrIflgfmAt1F5ZCqukV6+liLDZq+1GfsNh5+qM6yfPiXW207QbCqglW7dFb/Z9llH5UpaSxkpJB1M1OOq2UlNRDINu8LzbAU02f1a6EilF7Yx1uZvYXV8OgnYxK3JEAAAAASUVORK5CYII=")
}

// #endregion
// #region @import "images/alpha-slider-bgr-reversed.scss"; -> /packages/bootstrap/scss/colorpicker/images/alpha-slider-bgr-reversed.scss
// #region @import "../../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion

@include exports("alpha-slider-bgr-reversed.png") {
    @include register-data-uri("alpha-slider-bgr-reversed.png", "data:image/png;base64, ")
}

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/colorpicker/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/colorpicker/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/colorpicker/_layout.scss
@include exports("colorpicker/layout") {

    .k-colorpicker {
        width: auto;
        border-width: 0;
        box-sizing: border-box;
        outline: 0;
        font-family: $colorpicker-font-family;
        font-size: $colorpicker-font-size;
        line-height: $colorpicker-line-height;
        background: none;
        text-align: left;
        display: inline-flex;
        vertical-align: middle;
        position: relative;
        overflow: visible;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-selected-color {
            padding: $button-padding-y;
            width: $button-inner-calc-size;
            height: $button-inner-calc-size;
            border-width: 0 $colorpicker-select-border-width 0 0;
            border-style: solid;
            border-color: inherit;
            box-sizing: border-box;
            line-height: 0;
            position: relative;
            overflow: hidden;

            .k-i-line {
                border-top: 1px solid $error;
                width: 200%;
                height: 200%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-33%, -33%) rotateZ(45deg);
                transform-origin: 0 0;
            }
            .k-i-line::before {
                display: none;
            }
        }

        .k-tool-icon {
            padding: $button-padding-y;
            width: $button-inner-calc-size;
            height: $button-inner-calc-size;
            border-width: 0 $colorpicker-select-border-width 0 0;
            border-style: solid;
            border-color: inherit;
            box-sizing: border-box;
            font-size: inherit;
            text-align: center;
            flex-direction: column;
            cursor: pointer;

            &::before {
                font-size: $icon-size;
                line-height: 1;
            }

            .k-selected-color {
                margin: 1px 0 0;
                padding: 0;
                width: 14px;
                height: 3px;
                border-width: 0;
                line-height: 0;
                display: inline-block;
            }
        }

        .k-picker-wrap {
            @include use-background-clip();
            @include border-radius( $input-border-radius );
            padding: 0;
            width: 100%;
            border-width: 1px;
            border-style: solid;
            box-sizing: border-box;
            position: relative;
            display: flex;
            flex-direction: row;
            transition: all .1s ease; // sass-lint:disable-block no-transition-all
            overflow: hidden;
            cursor: default;
            outline: 0;
        }


        // Input
        .k-input {}


        // Select
        .k-select {
            @include border-right-radius-only( $input-border-radius );
            padding: $picker-select-padding-y $picker-select-padding-x;
            width: if($use-picker-select-width, $button-inner-calc-size, null);
            border-width: 0;
            border-style: solid;
            border-color: inherit;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            text-align: center;
            cursor: pointer;

            .k-icon {}
        }

        .k-rtl &,
        &[dir="rtl"] {
            .k-selected-color,
            .k-tool-icon {
                border-width: 0 0 0 $colorpicker-select-border-width;
            }

            .k-picker-wrap {
                .k-select {
                    @include border-left-radius-only( $input-border-radius );
                }
            }
        }

    }
    .k-colorpicker + .k-animation-container {
        .k-popup {
            padding: 0;
        }
    }
}




@include exports( "flatcolorpicker/layout" ) {

    .k-flatcolorpicker {
        @include border-radius( $input-border-radius );
        border-width: $colorpicker-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $colorpicker-font-family;
        font-size: $colorpicker-font-size;
        line-height: $colorpicker-line-height;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: $colorpicker-width;
        padding: $colorpicker-rect-padding;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;


        // HSV wrap
        .k-hsv-wrap {}


        // HSV rectangle
        .k-hsv-rectangle {
            position: relative;
            flex: 1 1 auto;
            user-select: none;
            -ms-touch-action: pinch-zoom double-tap-zoom;

            .k-draghandle {
                margin: -7px 0 0 -7px;
                cursor: pointer;
                position: absolute;
                z-index: 10;
                left: 50%;
                top: 50%;
            }
        }
        .k-hsv-gradient {
            height: 180px;
        }


        // Sliders wrap
        .k-sliders-wrap {
            flex-shrink: 0;
            position: relative;

            &.k-hbox {
                margin-left: $colorpicker-margin;

                .k-slider + .k-slider {
                    margin-left: $colorpicker-margin;
                }
            }

            &.k-vbox {
                margin-top: $colorpicker-margin;

                .k-slider + .k-slider {
                    margin-top: $colorpicker-margin;
                }
            }

        }
        .k-sliders-wrap-clearable {

            &.k-hbox {

                .k-clear-color {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                }

                .k-hue-slider,
                .k-alpha-slider {
                    height: 140px;
                    align-self: flex-end;
                }
            }

            &.k-vbox {}

        }


        // Sliders
        .k-slider {
            display: block;

            .k-slider-wrap {
                z-index: 1;
            }

            .k-slider-selection {
                display: none;
            }

            // Draghandle
            .k-draghandle {
                border-width: 3px;
            }

        }


        // Slider orientation
        .k-slider-horizontal {
            width: 100%;
            height: $colorpicker-slider-track-size;
            flex: 0 0 $colorpicker-slider-track-size;

            .k-slider-track {
                margin-top: -($colorpicker-slider-track-size / 2);
                height: $colorpicker-slider-track-size;
                border-radius: $colorpicker-slider-border-radius;
            }
        }
        .k-slider-vertical {
            width: $colorpicker-slider-track-size;
            height: 180px;
            flex: 0 0 $colorpicker-slider-track-size;

            .k-slider-track {
                margin-left: -($colorpicker-slider-track-size / 2);
                width: $colorpicker-slider-track-size;
                border-radius: $colorpicker-slider-border-radius;
            }
        }


        .k-draghandle {
            @include border-radius( 50% );
            width: $colorpicker-draghandle-width;
            height: $colorpicker-draghandle-height;
            border-width: 1px;
            border-style: solid;
            box-sizing: border-box;
        }


        // Color inputs
        .k-colorinputs {
            margin-top: ($colorpicker-margin * 2);

            > .k-gradient-values + .k-gradient-values {
                margin-top: $colorpicker-margin;
            }
        }
        .k-gradient-values {
            justify-content: space-between;

            .k-input,
            .k-textbox {
                padding: $colorpicker-input-padding-y $colorpicker-input-padding-x;
            }

            div,
            input,
            .k-numerictextbox {
                width: $colorpicker-input-width;
                text-align: center;
            }
            div {
                text-transform: uppercase;
                text-align: center;
            }
            .k-hex-value {
                width: $colorpicker-hex-input-width;
            }
        }


        // Selected color
        .k-selected-color {
            border-width: 0 0 1px;
            border-style: solid;
            border-color: inherit;
            background-position: 50% 50%;
        }
        .k-color-input {
            display: flex;
            flex-direction: row;
            position: relative;
        }
        .k-color-value {
            margin: 0 0 0 calc( #{$button-inner-calc-size} * 2 );
            padding: $input-padding-y $input-padding-x;
            width: 100%;
            border: 0;
            box-sizing: border-box;
            font-size: inherit;
            line-height: $input-line-height;
            font-family: $font-family-monospace;
            outline: 0;
            flex: 1;
        }
        .k-clear-color-container {
            display: flex;
            flex-direction: row;
        }
        .k-clear-color {
            flex: 1;
        }
        .k-color-value + .k-clear-color {
            flex: none;
            position: absolute;
            top: 0;
            right: 0;
        }


        // Buttons
        .k-controls {
            margin-top: ($colorpicker-margin * 2);
            text-align: center;
        }
    }

    .k-rtl,
    [dir="rtl"] {
        .k-flatcolorpicker {

            .k-sliders-wrap.k-hbox {
                margin-left: 0;
                margin-right: $colorpicker-margin;

                .k-slider + .k-slider {
                    margin-left: 0;
                    margin-right: $colorpicker-margin;
                }
            }

            .k-color-value {
                margin: 0 calc( #{$button-inner-calc-size} * 2 ) 0 0;
                direction: initial;
                text-align: right;
            }

            .k-color-value + .k-clear-color {
                right: auto;
                left: 0;
            }

        }
    }
}




@include exports( "colorpalette/layout" ) {

    .k-colorpalette {
        border-width: 0;
        box-sizing: border-box;
        outline: 0;
        font-family: $colorpicker-font-family;
        font-size: $colorpicker-font-size;
        line-height: 0;
        display: inline-block;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-palette {
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            position: relative;
        }
        .k-item {
            width: 14px;
            height: 14px;
            box-sizing: border-box;
            overflow: hidden;
            -ms-high-contrast-adjust: none;
            cursor: pointer;
        }
        .k-item:hover,
        .k-item.k-state-hover {
            position: relative;
            z-index: 101;
        }
        .k-item.k-state-selected,
        .k-item.k-state-selected:hover,
        .k-item.k-state-focused,
        .k-item:focus {
            position: relative;
            z-index: 100;
        }
    }

}

// #endregion

@include exports("colorpicker/layout/bootstrap") {

    .k-colorpicker {
        .k-picker-wrap {
            transition: $transition;

            .k-select {
                border-width: 0 0 0 $picker-select-border-width;
                border-color: inherit;
                transition: $transition;
            }
        }

        .k-rtl &,
        &[dir="rtl"] {
            .k-picker-wrap {
                .k-select {
                    border-width: 0 $picker-select-border-width 0 0;
                }
            }
        }
    }

}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/colorpicker/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/colorpicker/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/colorpicker/_theme.scss
@include exports("colorpicker/theme") {

    .k-colorpicker {

        // Normal state
        .k-picker-wrap {
            @include fill(
                $colorpicker-select-text,
                $colorpicker-select-bg,
                $colorpicker-select-border,
                $colorpicker-select-gradient
            );

            &:focus {

            }

            // Invalid state
            &.k-invalid,
            &.k-invalid:hover,
            &.k-state-invalid {
                color: $error;
                border-color: $invalid-border;
            }
        }

        // Hovered state
        .k-tool-icon:hover,
        .k-select:hover,
        .k-tool-icon.k-state-hover,
        .k-select.k-state-hover,
        .k-state-hover {
            @include fill(
                $colorpicker-select-hovered-text,
                $colorpicker-select-hovered-bg,
                $colorpicker-select-hovered-border,
                $colorpicker-select-hovered-gradient
            );
        }

        .k-tool-icon:hover,
        .k-tool-icon.k-state-hover {
            border-color: $colorpicker-tool-icon-hovered-border;
        }

        // Selected state
        .k-state-active {
            @include fill(
                $colorpicker-select-focused-text,
                $colorpicker-select-focused-bg,
                $colorpicker-select-focused-border,
                $colorpicker-select-focused-gradient
            );
            @include box-shadow( $colorpicker-select-pressed-shadow );
        }

        // Focused state
        .k-state-focused {
            box-shadow: $colorpicker-select-focused-shadow;
        }

        // Invalid state
        &.k-state-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            .k-picker-wrap {
                border-color: $invalid-border;
            }
        }

    }

}




@include exports( "flatcolorpicker/theme" ) {

    .k-flatcolorpicker {
        @extend .k-text-selection !optional;
        @include fill(
            $panel-text,
            $panel-bg,
            $panel-border
        );

        .k-color-value {
            @include fill(
                $colorpicker-text,
                $colorpicker-bg,
                $colorpicker-border
            );
        }

        .k-hsv-gradient {
            background: linear-gradient( to bottom, $gradient-transparent-to-black ), linear-gradient( to right, $gradient-white-to-transparent );
        }


        // Sliders
        .k-slider {

            // Draghandle
            .k-draghandle {
                box-shadow: 0 1px 4px rgba(0, 0, 0, .9);
                // sass-lint:enable no-color-literals no-color-keywords
                background-color: transparent;
            }
            .k-draghandle:hover,
            .k-draghandle:focus {
                // sass-lint:disable no-color-literals no-color-keywords
                border-color: white;
                box-shadow: 0 1px 4px black;
                // sass-lint:enable no-color-literals no-color-keywords
                background-color: transparent;
            }

        }


        // Slider type
        .k-hue-slider {
            &.k-slider-horizontal {
                .k-slider-track {
                    background: linear-gradient( to right, $gradient-rainbow );
                }
            }
            &.k-slider-vertical {
                .k-slider-track {
                    background: linear-gradient( to top, $gradient-rainbow );
                }
            }
        }
        .k-alpha-slider {
            .k-slider-track {
                background: url(map-get($data-uris, "alpha-slider-bgr.png")) center;
            }
        }


        .k-draghandle {
            border-color: rgba(255, 255, 255, .8);
            box-shadow: 0 1px 4px rgba(0, 0, 0, .21);
        }

    }


    .k-rtl,
    [dir="rtl"] {
        .k-flatcolorpicker {

            .k-hue-slider.k-slider-horizontal .k-slider-track {
                background: linear-gradient( to left, $gradient-rainbow );
            }

            .k-alpha-slider .k-slider-track {
                background: url(map-get($data-uris, "alpha-slider-bgr-reversed.png")) center;
            }

        }
    }

}




@include exports( "colorpalette/theme" ) {

    .k-colorpalette {
        .k-item:hover,
        .k-item.k-state-hover {
            box-shadow: $colorpalette-hovered-shadow;
        }
        .k-item.k-state-selected,
        .k-item.k-state-selected:hover,
        .k-item.k-state-focused,
        .k-item:focus {
            box-shadow: $colorpalette-focused-shadow;
        }
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "combobox/_index.scss"; -> /packages/bootstrap/scss/combobox/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../floating-label/_index.scss"; -> /packages/bootstrap/scss/floating-label/_index.scss
// #region @import /packages/bootstrap/scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../popup/_index.scss"; -> /packages/bootstrap/scss/popup/_index.scss
// #region @import /packages/bootstrap/scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/combobox/_variables.scss
// Comboboxes
$combobox-select-padding-x: $button-padding-y !default;
$combobox-select-padding-y: $button-padding-y !default;
$combobox-select-width: auto !default;
$combobox-select-border-width: 1px !default;

$combobox-bg: $input-bg !default;
$combobox-text: $input-text !default;
$combobox-border: $input-border !default;

$combobox-hovered-bg: $input-hovered-bg !default;
$combobox-hovered-text: $input-hovered-text !default;
$combobox-hovered-border: $input-hovered-border !default;

$combobox-focused-bg: $input-focused-bg !default;
$combobox-focused-text: $input-focused-text !default;
$combobox-focused-border: $input-focused-border !default;
$combobox-focused-shadow: $input-focused-shadow !default;

$combobox-select-bg: $button-bg !default;
$combobox-select-text: $button-text !default;
$combobox-select-border: $button-border !default;
$combobox-select-gradient: $button-gradient !default;

$combobox-select-hovered-bg: $button-hovered-bg !default;
$combobox-select-hovered-text: $button-hovered-text !default;
$combobox-select-hovered-border: $button-hovered-border !default;
$combobox-select-hovered-gradient: $button-hovered-gradient !default;

$combobox-select-focused-bg: $button-pressed-bg !default;
$combobox-select-focused-text: $button-pressed-text !default;
$combobox-select-focused-border: $button-pressed-border !default;
$combobox-select-focused-gradient: $button-pressed-gradient !default;
$combobox-select-focused-shadow: $button-pressed-shadow !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/combobox/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/combobox/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/combobox/_layout.scss
@include exports("combobox/layout") {

    .k-combobox {
        width: $input-default-width;
        border-width: 0;
        box-sizing: border-box;
        outline: 0;
        background: none;
        font-family: $input-font-family;
        font-size: $input-font-size;
        line-height: $input-line-height;
        text-align: left;
        white-space: nowrap;
        display: inline-flex;
        vertical-align: middle;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-dropdown-wrap {
            @include use-background-clip();
            @include border-radius( $input-border-radius );
            padding: 0;
            width: 100%;
            border-width: 1px;
            border-style: solid;
            box-sizing: border-box;
            position: relative;
            display: flex;
            flex-direction: row;
            transition: all .1s ease; // sass-lint:disable-block no-transition-all
            outline: 0;
            cursor: initial;
        }


        // Input
        .k-input {}


        // Clear value
        .k-clear-value {
            height: ($input-line-height * $input-font-size);
            line-height: ($input-line-height * $input-font-size);
            outline: 0;
            cursor: pointer;
            display: none;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            opacity: .5;
            position: absolute;
            top: $input-padding-y;
            right: $picker-icon-offset;

            &:hover {
                opacity: 1;
            }
        }
        &:hover,
        &:focus-within,
        &.k-state-hover,
        &.k-state-focused,
        .k-dropdown-wrap.k-state-hover,
        .k-dropdown-wrap.k-state-focused {
            .k-clear-value {
                display: inline-flex;
            }
        }

        // Select
        .k-select {
            @include border-right-radius-only( $input-border-radius );
            padding: $combobox-select-padding-y $combobox-select-padding-x;
            width: if($use-picker-select-width, $combobox-select-width, auto);
            border-width: 0 0 0 $combobox-select-border-width;
            box-sizing: border-box;
            border-style: solid;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            text-align: center;
            cursor: pointer;
        }

        &.k-combobox-clearable {
            .k-input {
                padding-right: calc( #{$icon-size} + #{$padding-x} );
            }
        }

        &[dir="rtl"],
        .k-rtl & {
            text-align: right;

            .k-select {
                @include border-left-radius-only( $input-border-radius );
                border-width: 0 $combobox-select-border-width 0 0;
            }

            .k-clear-value {
                right: auto;
                left: $picker-icon-offset;
            }

            &.k-combobox-clearable {
                .k-input {
                    padding-left: calc( #{$icon-size} + #{$padding-x} );
                    padding-right: $input-padding-x;
                }
            }
        }
    }
}

// #endregion

@include exports("combobox/layout/bootstrap") {
    .k-combobox {
        .k-dropdown-wrap {
            transition: $transition;

            .k-select {
                transition: $transition;
            }
        }
    }
}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/combobox/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/combobox/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/combobox/_theme.scss
@include exports("combobox/theme") {

    .k-combobox {
        @extend .k-text-selection !optional;

        // Normal state
        .k-dropdown-wrap {
            @include fill(
                $combobox-text,
                $combobox-bg,
                $combobox-border
            );

            // Invalid state
            &.k-invalid,
            &.k-invalid:hover,
            &.k-state-invalid {
                border-color: $invalid-border;

                &:focus,
                &.k-state-focused {
                    @include box-shadow($invalid-shadow);
                }
            }
        }

        .k-select {
            @include fill(
                $combobox-select-text,
                $combobox-select-bg,
                $combobox-select-border,
                $combobox-select-gradient
            );
        }

        // Hovered state
        > :hover,
        .k-state-hover {
            @include fill(
                $combobox-hovered-text,
                $combobox-hovered-bg,
                $combobox-hovered-border
            );

            .k-select {
                @include fill(
                    $combobox-select-hovered-text,
                    $combobox-select-hovered-bg,
                    $combobox-select-hovered-border,
                    $combobox-select-hovered-gradient
                );
            }
        }

        // Selected state
        > .k-state-focused,
        .k-state-active {
            @include fill(
                $combobox-focused-text,
                $combobox-focused-bg,
                $combobox-focused-border
            );
            @include box-shadow($combobox-focused-shadow);

            .k-select {}
        }

        // Invalid
        &.k-state-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            .k-dropdown-wrap {
                border-color: $invalid-border;

                &:focus,
                &.k-state-focused {
                    @include box-shadow($invalid-shadow);
                }
            }
        }
    }

}

// #endregion

@include exports("combobox/theme/bootstrap") {

    // Combobox
    .k-combobox {

        // Selected state
        .k-state-active {
            .k-select {
                @include fill(
                    $combobox-select-focused-text,
                    $combobox-select-focused-bg,
                    $combobox-select-focused-border,
                    $combobox-select-focused-gradient
                );
                @include box-shadow($combobox-select-focused-shadow);
            }
        }
    }

}

// #endregion

// #endregion
// #region @import "datetime/_index.scss"; -> /packages/bootstrap/scss/datetime/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../action-buttons/_index.scss"; -> /packages/bootstrap/scss/action-buttons/_index.scss
// #region @import /packages/bootstrap/scss/action-buttons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../floating-label/_index.scss"; -> /packages/bootstrap/scss/floating-label/_index.scss
// #region @import /packages/bootstrap/scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../calendar/_index.scss"; -> /packages/bootstrap/scss/calendar/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/calendar/_variables.scss
// Calendar
$calendar-border-width: 1px !default;
$calendar-font-family: $font-family !default;
$calendar-font-size: $font-size !default;
$calendar-line-height: $line-height !default;

$calendar-header-padding-x: $padding-x !default;
$calendar-header-padding-y: $padding-y !default;
$calendar-header-padding-x-sm: ($calendar-header-padding-y / 2) !default;
$calendar-header-padding-y-sm: $calendar-header-padding-x-sm !default;
$calendar-header-border-width: 1px !default;

$calendar-header-min-width: 280px !default;

$calendar-content-padding-x: $calendar-header-padding-x !default;
$calendar-content-padding-y: $calendar-header-padding-y !default;

$calendar-cell-padding-x: .5rem !default;
$calendar-cell-padding-y: $calendar-cell-padding-x !default;
$calendar-cell-line-height: $calendar-line-height !default;
$calendar-cell-size-px: 40px !default;
$calendar-cell-size: ($calendar-cell-size-px / $font-size) * 1rem !default;
$calendar-cell-border-radius: $border-radius !default;

$calendar-header-cell-padding-x: 0px !default;
$calendar-header-cell-padding-y: ($calendar-cell-padding-y / 2) !default;
$calendar-header-cell-font-size: $font-size-sm !default;
$calendar-header-cell-line-height: 2 !default;

$calendar-header-height: 2em !default;

$calendar-navigation-width: 5em !default;
$calendar-navigation-item-height: 2em !default;

$calendar-view-width: 7 * $calendar-cell-size !default;
$calendar-view-height: calc( #{$calendar-cell-size * 8} + #{$calendar-header-height} ) !default;

$calendar-bg: $component-bg !default;
$calendar-text: $component-text !default;
$calendar-border: $component-border !default;

$calendar-header-bg: $header-bg !default;
$calendar-header-text: $header-text !default;
$calendar-header-border: $header-border !default;
$calendar-header-gradient: $header-gradient !default;
$calendar-header-shadow: none !default;

$calendar-header-button-hovered-bg: $button-hovered-bg !default;
$calendar-header-button-hovered-text: $button-hovered-text !default;
$calendar-header-button-hovered-border: $button-hovered-border !default;
$calendar-header-button-hovered-gradient: $button-hovered-gradient !default;

$calendar-header-button-pressed-bg: $button-pressed-bg !default;
$calendar-header-button-pressed-text: $button-pressed-text !default;
$calendar-header-button-pressed-border: $button-pressed-border !default;
$calendar-header-button-pressed-gradient: $button-pressed-gradient !default;
$calendar-header-button-pressed-shadow: $button-pressed-shadow !default;

$calendar-header-cell-text: null !default;
$calendar-header-cell-opacity: $disabled-opacity !default;

$calendar-navigation-bg: $calendar-header-bg !default;
$calendar-navigation-text: $calendar-header-text !default;
$calendar-navigation-border: $calendar-header-border !default;

$calendar-today-nav-margin-x: 8px !default;
$calendar-today-nav-margin-y: 0 !default;
$calendar-today-nav-text: $link-text !default;
$calendar-today-nav-hovered-text: $link-hover-text !default;

$calendar-weekend-text: inherit !default;
$calendar-weekend-bg: transparent !default;
$calendar-weekend-opacity: 1 !default;

$calendar-today-style: box !default;
$calendar-today-color: $primary !default;

$calendar-week-number-bg: transparent !default;
$calendar-week-number-text: $calendar-header-cell-text !default;
$calendar-week-number-opacity: $calendar-header-cell-opacity !default;

$calendar-other-month-opacity: $calendar-header-cell-opacity !default;

$calendar-cell-hovered-bg: $node-hovered-bg !default;
$calendar-cell-hovered-text: $node-hovered-text !default;
$calendar-cell-hovered-border: $node-hovered-border !default;

$calendar-cell-selected-bg: $node-selected-bg !default;
$calendar-cell-selected-text: $node-selected-text !default;
$calendar-cell-selected-border: $node-selected-border !default;

$calendar-cell-focused-shadow: inset $button-focused-shadow !default;
$calendar-cell-selected-focus-shadow: inset 0 0 0 2px rgba($primary-button-pressed-border, .5) !default;


// Multiview Calendar
$multiviewcalendar-button-style: stretched !default;
$multiviewcalendar-button-size: 50px !default;
$multiviewcalendar-gap: ($calendar-content-padding-x * 2) !default;
$multiviewcalendar-content-padding-x: ($multiviewcalendar-gap / 2) !default;
$multiviewcalendar-content-padding-y: 0px !default;
$multiviewcalendar-navigation-margin-x: 0px !default;
$multiviewcalendar-navigation-margin-y: calc( #{$calendar-header-padding-y * 2} + #{$calendar-header-height} + #{$button-border-width * 2} ) !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/calendar/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/calendar/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/calendar/_layout.scss
@include exports("calendar/layout") {

    // Base
    .k-calendar {
        @include use-background-clip();
        border-width: $calendar-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $calendar-font-family;
        font-size: $calendar-font-size;
        line-height: $calendar-line-height;
        position: relative;
        overflow: hidden;
        display: inline-block;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-popup & {
            height: 100%;
        }

        // Common
        .k-link {
            outline: 0;
            color: inherit;
            text-decoration: none;
            white-space: normal;
            cursor: pointer;
            overflow: hidden;
        }

        .k-calendar-view table,
        .k-calendar-view .k-calendar-table {
            margin: 0;
            border-width: 0;
            border-color: inherit;
            border-spacing: 0;
            border-collapse: separate;
            table-layout: fixed;
            outline: 0;
            position: relative;
            z-index: 1;
        }
        .k-calendar-view td,
        .k-calendar-view th,
        .k-calendar-view .k-calendar-td,
        .k-calendar-view .k-calendar-th {
            border-width: 0;
            padding: 0;
            text-align: center;
            border-style: solid;
            border-color: inherit;
            font-weight: normal;
            cursor: default;
        }
        .k-calendar-view th,
        .k-calendar-view .k-calendar-th {
            padding: $calendar-header-cell-padding-y $calendar-header-cell-padding-x;
            font-size: $calendar-header-cell-font-size;
            line-height: $calendar-header-cell-line-height;
            text-transform: uppercase;
            opacity: $calendar-header-cell-opacity;
        }
        .k-calendar-view tbody th,
        .k-calendar-view .k-calendar-tbody .k-calendar-th {
            padding-left: $button-padding-x;
            padding-right: $button-padding-x;
            height: $calendar-header-height;
            font: inherit;
            font-weight: bold;
            text-transform: none;
            text-align: left;
        }


        // Header
        .k-header {
            padding: $calendar-header-padding-y-sm $calendar-header-padding-x-sm;
            border-bottom-width: $calendar-header-border-width;
            border-bottom-style: solid;
            text-align: center;
            display: flex;
            flex-direction: row;
            position: relative;
            z-index: 2;

            .k-link {
                @include border-radius( $border-radius );
                padding: $calendar-header-padding-y-sm;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
            }
        }

        .k-nav-prev,
        .k-nav-next {
            width: ($calendar-line-height * 1em);
            height: ($calendar-line-height * 1em);
            box-sizing: content-box;
        }

        .k-nav-fast {
            margin: 0 $calendar-header-padding-x-sm;
            flex: 1 1 auto;
        }


        // Calendar header
        @at-root .k-calendar-header {
            padding: $calendar-header-padding-y $calendar-header-padding-x;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 0 0 auto;

            .k-title,
            .k-calendar-title {
                font-weight: bold;
            }
            .k-today {
                cursor: pointer;
                outline: none;
            }

            .k-calendar-nav {
                display: flex;
                flex-direction: row;
                align-items: center;
                flex-wrap: nowrap;

                .k-today {
                    margin: $calendar-today-nav-margin-y $calendar-today-nav-margin-x;
                }
            }

            .k-button { @extend .k-button-flat; }
        }

        > .k-calendar-header {
            min-width: $calendar-header-min-width;
            box-sizing: border-box;
        }

        // Footer
        .k-footer,
        .k-calendar-footer {
            text-align: center;
            clear: both;
        }
        .k-nav-today,
        .k-footer > .k-state-disabled {
            padding: $calendar-header-padding-y $calendar-header-padding-x;
            display: block;
        }
        .k-nav-today:hover {
            text-decoration: underline;
        }


        // View wrapper
        .k-calendar-view {
            // setting width / height prevents layout changes in meta views
            width: (7 * $calendar-cell-size);
            height: (7 * $calendar-cell-size);
            position: relative;
            z-index: 1;
            overflow: hidden;
            margin: auto;
        }
        &.k-week-number .k-calendar-view {
            width: (8 * $calendar-cell-size);
        }
        &-infinite .k-calendar-view {
            width: $calendar-view-width;
            height: $calendar-view-height;
        }


        // Content
        .k-content,
        .k-calendar-content {
            width: 100%;
            margin: 0;
            text-align: center;
            flex: 1 1 auto;
            position: relative;

            > table,
            > .k-calendar-table {
                table-layout: fixed;
                margin-right: -17px; // scrollbar-size
            }

            td,
            .k-calendar-td {
                @include border-radius( $calendar-cell-border-radius );
                border-color: transparent;
            }
            .k-link {
                @include border-radius( $calendar-cell-border-radius );
                padding: $calendar-cell-padding-y $calendar-cell-padding-x;
                box-sizing: border-box;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
            }


            // Special days
            .k-weekend {
                @include border-radius( 0 );
                opacity: $calendar-weekend-opacity;
            }
            .k-alt {
                opacity: $calendar-week-number-opacity;
            }
            .k-other-month .k-link {
                opacity: $calendar-other-month-opacity;
            }
            .k-state-disabled {
                opacity: $disabled-opacity;
            }
        }
        table.k-content,
        table.k-calendar-content,
        .k-calendar-table.k-content,
        .k-calendar-table.k-calendar-content {
            display: inline-table;
            vertical-align: top;
        }


        // Month view
        .k-month,
        .k-calendar-monthview {

            td,
            .k-calendar-td {
                width: $calendar-cell-size;
                height: $calendar-cell-size;
            }
            .k-link {
                width: $calendar-cell-size;
                height: $calendar-cell-size;
            }
        }


        // Year view
        .k-year,
        .k-calendar-yearview {
            $cell-size: ( (7 / 4) * $calendar-cell-size);

            td,
            .k-calendar-td {
                width: auto;
                height: auto;
            }
            .k-link {
                width: $cell-size;
                height: $cell-size;
            }
        }


        // Decade view
        .k-decade,
        .k-calendar-decadeview {
            $cell-size: ( (7 / 4) * $calendar-cell-size);

            td,
            .k-calendar-td {
                width: auto;
                height: auto;
            }
            .k-link {
                width: $cell-size;
                height: $cell-size;
            }
        }


        // Century view
        .k-century,
        .k-calendar-centuryview {
            $cell-size: ( (7 / 4) * $calendar-cell-size);

            td,
            .k-calendar-td {
                width: auto;
                height: auto;
            }
            .k-link {
                width: $cell-size;
                height: $cell-size;
                text-align: left;
            }
        }




        // Angular
        &-infinite {
            box-sizing: content-box;
            width: auto;
            display: inline-flex;
            vertical-align: bottom;

            .k-calendar-view,
            .k-calendar-monthview { // <- BACKCOMPAT: ensures backwards compatibility for previous versions of kendo-angular-dateinputs
                padding: 0 $calendar-content-padding-x;
                display: flex;
                flex: 0 0 auto;
                flex-direction: column;
                overflow: hidden;
                box-sizing: content-box;

                &::after {
                    display: block;
                    position: absolute;
                    bottom: 0;
                    content: " ";
                    height: 0;
                    line-height: 0;
                    z-index: 1;
                    width: 150%;
                    left: -25%;
                    box-shadow: 0 0 $calendar-cell-size ($calendar-cell-size / 2) $calendar-bg;
                }
            }

            .k-calendar-header {
                margin-left: -$calendar-content-padding-x;
                margin-right: -$calendar-content-padding-x;
            }

            .k-calendar-weekdays {
                width: 100%;
                flex: 0 0 auto;
            }

            .k-calendar-yearview,
            .k-calendar-decadeview,
            .k-calendar-centuryview {
                .k-content,
                .k-calendar-content {
                    $cell-size: $calendar-view-width / 5;

                    td,
                    .k-calendar-td {
                        width: auto;
                        height: auto;
                    }

                    .k-link,
                    td.k-empty,
                    .k-calendar-td.k-empty {
                        width: $cell-size;
                        height: $cell-size;
                    }
                }
            }

        }
    }




    // Calendar in popup
    .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;
    }

    .k-calendar-navigation {
        width: $calendar-navigation-width;
        flex: 0 0 auto;
        display: block;
        overflow: hidden;
        position: relative;
        z-index: 2;

        &::before,
        &::after {
            display: block;
            position: absolute;
            content: " ";
            height: 0;
            line-height: 0;
            z-index: 1;
            width: 200%;
            left: -50%;
            $shadow-size: 3 * $calendar-navigation-item-height;
            box-shadow: 0 0 $shadow-size ($shadow-size / 2) $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: $calendar-navigation-width;
            }

            li {
                height: $calendar-navigation-item-height;
                line-height: $calendar-navigation-item-height;
                cursor: pointer;
                padding: 0 1em;
            }
        }

        .k-calendar-navigation-marker {
            font-weight: bold;
        }

        .k-calendar-navigation-highlight {
            width: 100%;
            border-width: 1px 0;
            border-style: solid;
            height: $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-state-selected {
        //     color: inherit;
        //     background: transparent;
        //     border-color: transparent;
        // }
    }
}




@include exports("multiviewcalendar/layout") {


    // Multiview calendar
    .k-calendar.k-calendar-range {
        width: auto;

        .k-calendar-view {
            height: auto;
            min-height: (7 * $calendar-cell-size);
            width: auto;
            white-space: nowrap;

            &::after {
                display: none;
            }
        }
        table,
        .k-calendar-table {
            width: auto;
        }
        table.k-content,
        table.k-calendar-content,
        .k-calendar-table.k-content,
        .k-calendar-table.k-calendar-content {
            padding: $multiviewcalendar-content-padding-y $multiviewcalendar-content-padding-x;
        }
        table.k-meta-view,
        .k-calendar-table.k-meta-view {
            margin: 0 -1px;
        }

        .k-meta-header,
        .k-month-header {
            margin: 0 $multiviewcalendar-content-padding-x;
            padding: $calendar-header-cell-padding-y $button-padding-x;
            font-size: $calendar-header-cell-font-size;
            line-height: $calendar-header-cell-line-height;
            text-align: left;
            opacity: $calendar-header-cell-opacity;
            cursor: default;
        }

        .k-range-start {
            border-color: inherit;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .k-range-end {
            border-color: inherit;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .k-range-mid {
            border-color: inherit;
            border-radius: 0;
        }

        // jQuery
        &:not(.k-calendar-infinite) {
            .k-calendar-view {
                display: flex;
                flex-direction: row;

                .k-animation-container-sm & {
                    flex-direction: column;
                }
            }
        }

        // Angular
        &.k-calendar-infinite {
            table,
            .k-calendar-table {
                padding: 0;
                display: flex;
                flex-direction: row;

                > tbody,
                > .k-calendar-tbody {
                    display: inline-block;
                    vertical-align: top;
                }
                > tbody + tbody,
                > .k-calendar-tbody + .k-calendar-tbody {
                    margin-left: $multiviewcalendar-gap;
                }
            }

            &:not(.k-calendar-minimal) {
                @if $multiviewcalendar-button-style == stretched {
                    > .k-button {
                        @extend .k-button-flat;
                        border-radius: 0;
                        width: $multiviewcalendar-button-size;
                    }

                    > .k-calendar-view {
                        border-width: 0 1px;
                        border-style: solid;
                        border-color: inherit;
                    }
                } @else if $multiviewcalendar-button-style == detached {
                    background-color: transparent;
                    border-width: 0;
                    overflow: visible;

                    > .k-calendar-view {
                        $half-size: $multiviewcalendar-button-size / 2;

                        border-width: $calendar-border-width;
                        border-style: solid;
                        border-color: inherit;
                        padding: 0 calc( #{$half-size} + #{$spacer-x} );
                        margin: 0 (-$half-size);
                    }

                    > .k-button {
                        align-self: center;
                        width: $multiviewcalendar-button-size;
                        height: $multiviewcalendar-button-size;
                        border-radius: 50%;
                        z-index: 2;
                    }
                }
            }
        }
    }
}



@include exports("daterangepicker/layout") {

    //jQuery DateRangePicker
    .k-widget.k-daterangepicker {
        border: 0;
    }

}



@include exports("calendar/layout/rtl") {

    .k-rtl .k-calendar,
    .k-calendar[dir="rtl"] {

        .k-nav-prev,
        .k-nav-next,
        .k-prev-view,
        .k-next-view {
            transform: scaleX(-1);
        }

        .k-content.k-scrollable,
        .k-calendar-content.k-scrollable {
            @include hide-scrollbar("left");
        }

        tbody th,
        .k-calendar-tbody .k-calendar-th {
            text-align: right;
        }

        // Content
        .k-content,
        .k-calendar-content {
            > table,
            > .k-calendar-table {
                margin-right: 0;
                margin-left: -17px; // scrollbar-size
            }
        }

    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/calendar/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/calendar/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/calendar/_theme.scss
// Styling of today date
// color - mark the today date with a different text color
// box - instead of changing the text color, show a box around the date

@include exports("calendar/theme") {
    .k-calendar {
        @include fill(
            $calendar-text,
            $calendar-bg,
            $calendar-border
        );


        // Header / footer
        .k-header {
            @include fill(
                $calendar-header-text,
                $calendar-header-bg,
                inherit,
                $calendar-header-gradient
            );
            @include box-shadow( $calendar-header-shadow );
        }

        .k-nav-prev,
        .k-nav-next,
        .k-nav-fast {
            &:hover,
            &.k-state-hover {
                @include fill(
                    $calendar-header-button-hovered-text,
                    $calendar-header-button-hovered-bg,
                    $calendar-header-button-hovered-border,
                    $calendar-header-button-hovered-gradient
                );
            }

            &:active,
            &.k-state-active {
                @include fill(
                    $calendar-header-button-pressed-text,
                    $calendar-header-button-pressed-bg,
                    $calendar-header-button-pressed-border,
                    $calendar-header-button-pressed-gradient
                );
                @include box-shadow( $calendar-header-button-pressed-shadow );
            }
        }


        // Today navigation
        .k-footer .k-nav-today,
        .k-calendar-header .k-today {
            color: $calendar-today-nav-text;

            &:hover,
            &:focus {
                color: $calendar-today-nav-hovered-text;
            }
        }


        // Header cells
        .k-content th,
        .k-calendar-content th,
        .k-content .k-calendar-th,
        .k-calendar-content .k-calendar-th {
            color: $calendar-header-cell-text;
        }


        // Special days
        .k-content .k-today,
        .k-calendar-content .k-today {
            @if $calendar-today-style == box {
                .k-link {
                    box-shadow: inset 0 0 0 1px $calendar-today-color;
                }
                &.k-state-focused .k-link {
                    box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
                }
            } @else if $calendar-today-style == color {
                color: $calendar-today-color;
            }
        }
        .k-weekend {
            @include fill(
                $calendar-weekend-text,
                $calendar-weekend-bg
            );
        }
        .k-alt {
            @include fill(
                $calendar-week-number-text,
                $calendar-week-number-bg
            );
        }
        .k-out-of-range {
            pointer-events: none;
            visibility: hidden;
        }


        // Interactive states
        .k-state-hover .k-link,
        td:hover .k-link,
        .k-calendar-td:hover .k-link {
            @include fill(
                $calendar-cell-hovered-text,
                $calendar-cell-hovered-bg,
                $calendar-cell-hovered-border
            );
        }
        .k-state-selected .k-link {
            @include fill(
                $calendar-cell-selected-text,
                $calendar-cell-selected-bg,
                $calendar-cell-selected-border
            );
        }
        .k-state-selected.k-state-hover .k-link,
        .k-state-selected:hover .k-link {
            @include fill(
                $calendar-cell-selected-text,
                try-shade( $calendar-cell-selected-bg ),
                try-shade( $calendar-cell-selected-border )
            );
        }
        .k-state-focused .k-link {
            box-shadow: $calendar-cell-focused-shadow;
        }
        .k-state-selected.k-state-focused .k-link {
            box-shadow: $calendar-cell-selected-focus-shadow;
        }


        // Calendar navigation
        .k-calendar-navigation {
            @include fill(
                $calendar-navigation-text,
                $calendar-navigation-bg
            );
            box-shadow: inset -1px 0 $calendar-navigation-border;

            li:hover {
                color: $calendar-today-nav-hovered-text;
            }
        }
        .k-calendar-navigation-highlight {
            @include fill(
                $calendar-text,
                $calendar-bg,
                $calendar-border
            );
        }


        &[dir="rtl"],
        .k-rtl & {
            .k-calendar-navigation {
                box-shadow: inset 1px 0 $calendar-navigation-border;
            }
        }

        // Invalid
        &.k-invalid,
        &.k-invalid:hover,
        &.k-state-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            border-color: $invalid-border;
        }
    }

}




@include exports("multiviewcalendar/theme") {

    .k-calendar.k-calendar-range {

        $calendar-range-gap: 1px !default;
        $calendar-range-bg: rgba( $calendar-cell-selected-bg, .25 );
        $calendar-range-split-size: 5px !default;

        .k-range-start,
        .k-range-end,
        .k-range-mid {
            // sass-lint:disable-block indentation
            background-image: linear-gradient(
                transparent $calendar-range-gap,
                $calendar-range-bg $calendar-range-gap,
                $calendar-range-bg calc(100% - #{$calendar-range-gap}),
                transparent calc(100% - #{$calendar-range-gap})
            );

            .k-ie &,
            .k-edge & {
                background-image: none;
                background-color: $calendar-range-bg;
            }
        }

        .k-range-start.k-range-end {
            background-image: none;
            background-color: transparent;
        }

        .k-range-start,
        .k-range-end {
            .k-link {
                background-color: $calendar-cell-selected-bg;
            }
        }

        .k-range-start.k-state-active,
        .k-range-end.k-state-active {
            .k-link {
                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: $calendar-range-gap;
                bottom: $calendar-range-gap;
                width: $calendar-range-split-size;
            }
        }

        .k-range-split-start::after {
            left: -$calendar-range-split-size;
            right: auto;
            background-image: linear-gradient(to left, $calendar-range-bg, transparent 100%);
        }

        .k-range-split-end::after {
            right: -$calendar-range-split-size;
            left: auto;
            background-image: linear-gradient(to right, $calendar-range-bg, transparent 100%);
        }
    }

}

@include exports("daterangepicker/theme") {

    //jQuery DateRangePicker
    .k-daterangepicker {
        // Invalid
        &.k-state-invalid {
            .k-dateinput-wrap {
                border-color: $invalid-border;
            }
        }
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "../popup/_index.scss"; -> /packages/bootstrap/scss/popup/_index.scss
// #region @import /packages/bootstrap/scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/datetime/_variables.scss
// DateTime
$time-highlight-size: 1px;

$time-list-highlight-color: $component-border !default;
$time-list-focused-bg: rgba(0, 0, 0, .02) !default;
$time-list-title-focus: black !default;

$time-header-padding: $padding-y $padding-x !default;
$timepicker-header-height: 2em;

$time-list-padding: $padding-y * 5 !default;
$time-list-focus-size: 2px !default;
$time-list-width: 5em !default;
$time-list-height: 200px !default;

$dateinput-text: null !default;

$datetime-width: ((4 * $time-list-width) + 1em) !default;

$datetime-bg: $input-bg !default;
$datetime-text: $input-text !default;
$datetime-border: $input-border !default;

$datetime-hovered-bg: $input-hovered-bg !default;
$datetime-hovered-text: $input-hovered-text !default;
$datetime-hovered-border: $input-hovered-border !default;

$datetime-focused-bg: $input-focused-bg !default;
$datetime-focused-text: $input-focused-text !default;
$datetime-focused-border: $input-focused-border !default;
$datetime-focused-shadow: $input-focused-shadow !default;

$datetime-select-bg: $button-bg !default;
$datetime-select-text: $button-text !default;
$datetime-select-border: $button-border !default;
$datetime-select-gradient: $button-gradient !default;

$datetime-select-hovered-bg: $button-hovered-bg !default;
$datetime-select-hovered-text: $button-hovered-text !default;
$datetime-select-hovered-border: $button-hovered-border !default;
$datetime-select-hovered-gradient: $button-hovered-gradient !default;

$datetime-select-focused-bg: $button-pressed-bg !default;
$datetime-select-focused-text: $button-pressed-text !default;
$datetime-select-focused-border: $button-pressed-border !default;
$datetime-select-focused-gradient: $button-pressed-gradient !default;
$datetime-select-focused-shadow: $button-pressed-shadow !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/datetime/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/datetime/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/datetime/_layout.scss
@include exports("datetime/layout") {

    // Common
    .k-dateinput,
    .k-datepicker,
    .k-datetimepicker,
    .k-timepicker {
        width: $input-default-width;
        border-width: 0;
        box-sizing: border-box;
        outline: 0;
        font-family: $input-font-family;
        font-size: $input-font-size;
        line-height: $input-line-height;
        text-align: left;
        white-space: nowrap;
        background: none;
        display: inline-flex;
        vertical-align: middle;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        // Wrappers
        .k-dateinput-wrap,
        .k-picker-wrap {
            @include use-background-clip();
            @include border-radius( $input-border-radius );
            padding: 0;
            width: 100%;
            border-width: 1px;
            border-style: solid;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            position: relative;
            transition: all .1s ease; // sass-lint:disable-block no-transition-all
            cursor: default;
            outline: 0;
        }


        // Input
        .k-input {}


        // Select
        .k-select {
            @include border-right-radius-only( $input-border-radius );
            padding: 0;
            border-width: 0;
            box-sizing: border-box;
            border-style: solid;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            text-align: center;
            cursor: pointer;

            .k-icon {}
        }

        &[dir="rtl"],
        .k-rtl & {
            text-align: right;

            .k-select {
                @include border-left-radius-only( $input-border-radius );
            }
        }
    }

    // Datepicker
    .k-datepicker,
    .k-datetimepicker,
    .k-timepicker {
        .k-select {
            padding: 0;
            width: $spinner-width;
            border-width: 0;
        }

        .k-i-warning {
            display: none;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            overflow: visible;
        }

        .k-state-invalid {
            .k-i-warning {
                display: inline-block;
            }
        }

        .k-widget.k-dateinput {
            width: 100%;
            flex: 1 1 auto;
            margin: 0;
        }

        .k-dateinput-wrap {
            border: 0;
            @include border-left-radius-only( $input-border-radius );
        }

        .k-picker-wrap {
            &.k-state-invalid {
                transition: none;
            }
        }

        .k-rtl &,
        &[dir="rtl"] {
            .k-i-warning {
                right: auto;
            }
        }
    }

    .k-datepicker,
    .k-timepicker {

        .k-i-warning {
            right: calc( #{ $button-inner-calc-size } + #{ $input-padding-x-sm });
        }

        .k-rtl &,
        &[dir="rtl"] {
            .k-i-warning {
                left: calc( #{ $button-inner-calc-size } + #{ $input-padding-x-sm });
            }
        }
    }

    // Timepicker
    .k-timepicker {}

    // Datetimepicker
    .k-datetimepicker {

        .k-select {
            padding: 0;
            width: auto;
            border-left-width: 0;
            align-items: stretch;
        }

        .k-link {
            padding: 0;
            width: $button-inner-calc-size;
            height: 100%;
            border-width: 0;
            border-style: solid;
            border-color: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
        }

        .k-i-warning {
            right: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm });
        }

        .k-rtl &,
        &[dir="rtl"] {
            .k-i-warning {
                left: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm });
            }
        }
    }

    .k-datetime-container {

        .k-datetime-wrap {
            width: $datetime-width;
            overflow: hidden;
        }

        .k-datetime-buttongroup {
            padding: $button-padding-x;
        }

        .k-datetime-selector {
            display: flex;
            transition: transform .2s;
        }

        .k-datetime-calendar-wrap,
        .k-datetime-time-wrap {
            text-align: center;
            flex: 0 0 $datetime-width;
        }

        .k-timeselector {
            outline: none;
        }

        .k-time-list-container {
            justify-content: center;
        }

        .k-time-tab {

            .k-datetime-selector {
                transform: translateX(-100%);
            }
        }

        .k-actions,
        .k-action-buttons,
        .k-columnmenu-actions {
            .k-button {
                flex: 1 1 50%;
            }
        }

        .k-actions {
            &.k-actions-start,
            &.k-actions-center,
            &.k-actions-end {
                .k-button {
                    flex: 0 1 auto;
                }
            }
        }

        .k-rtl &,
        &.k-rtl,
        [dir="rtl"] &,
        &[dir="rtl"] {
            .k-time-tab {

                .k-datetime-selector {
                    transform: translateX(100%);
                }
            }
        }
    }

    // Dateinput
    .k-dateinput {
        .k-select {
            padding: 0;
            border-width: 0;
            width: $spinner-width;
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        .k-link {
            width: 100%;
            flex: 1 1 auto;
            display: block;
            overflow: hidden;
            position: relative;

            .k-icon {
                position: absolute;
                right: 50%;
                transform: translateX(50%);
            }
        }

        .k-link-increase .k-icon {
            bottom: -$spinner-icon-offset;
        }

        .k-link-decrease .k-icon {
            top: -$spinner-icon-offset;
        }

        .k-i-warning {
            display: none;
            position: absolute;
            right: $padding-x;
            top: 50%;
            transform: translateY(-50%);
            overflow: visible;
        }

        &.k-state-invalid .k-i-warning {
            display: inline-block;
        }

        .k-rtl &,
        &[dir="rtl"] {
            .k-i-warning {
                left: $padding-x;
                right: auto;
            }
        }

    }

    // Infinite timepicker
    .k-timeselector {

        .k-actions,
        .k-action-buttons,
        .k-columnmenu-actions {
            .k-button {
                flex: 1 1 50%;
            }
        }

        .k-actions {
            &.k-actions-start,
            &.k-actions-center,
            &.k-actions-end {
                .k-button {
                    flex: 0 1 auto;
                }
            }
        }
    }


    // Header
    .k-time-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2 * $padding-y $padding-x * 2;
        line-height: $timepicker-header-height;

        .k-title {
            font-weight: bold;
        }

        .k-time-now {
            border-width: 0;
            line-height: inherit;
            cursor: pointer;
        }
    }

    // Content
    .k-time-list-wrapper {
        display: inline-block;
        overflow: hidden;
        box-sizing: content-box;
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        padding: $time-list-padding 0;
        text-align: center;
        min-width: $time-list-width;
        height: $time-list-height;
        flex: 1 1 auto;

        .k-title {
            display: block;
            text-align: center;
            font-size: $font-size-xs;
            position: absolute;
            text-transform: capitalize;
            font-weight: bold;
            min-width: 100%;
            height: 1.5em;
            line-height: 1.5em;
            margin-top: -$time-list-padding;
            z-index: 12;
        }

        &.k-state-focused {
            &::before,
            &::after {
                display: block;
                content: " ";
                position: absolute;
                width: 100%;
                left: 0;
                pointer-events: none;
                height: calc(50% - 1em);
                box-sizing: border-box;
                border-width: 0;
                border-style: solid;
            }

            &::before {
                top: 0;
            }

            &::after {
                bottom: 0;
            }
        }
    }

    .k-time-container {
        position: absolute;
        display: block;
        overflow-x: hidden;
        overflow-y: scroll;
        line-height: $line-height;
        left: 0;
        right: 0;
        top: $time-list-padding;
        bottom: $time-list-padding;

        @include hide-scrollbar("right");

        > ul {
            height: auto;
            width: $time-list-width;
            margin: auto;
        }

        .k-rtl &,
        &.k-rtl,
        [dir="rtl"] &,
        &[dir="rtl"]  {
            @include hide-scrollbar("left");
        }
    }

    .k-time-list-container {
        display: flex;
        position: relative;
    }

    .k-time-list {
        position: absolute;
        display: flex;
        z-index: 10;
        outline: 0;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;

        &::before,
        &::after {
            display: block;
            position: absolute;
            content: " ";
            height: 0;
            line-height: 0;
            z-index: 1;
            width: 200%;
            left: -50%;
        }

        &::before { top: 0; }
        &::after { bottom: 0;}
    }

    .k-time-list .k-item {
        padding: $list-item-padding-y $list-item-padding-x;
        min-height: calc( #{decimal-round($line-height-em, 2)} + 2px );
        line-height: calc( #{decimal-round($line-height-em, 2)} + 2px );
    }

    .k-time-highlight {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        width: 100%;
        height: $button-inner-calc-size;
        z-index: 1;
        border-width: $time-highlight-size 0;
        border-style: solid;
        border-radius: .1px; // workaround for https://bugs.webkit.org/show_bug.cgi?id=175117
    }

    .k-time-container .k-scrollable-placeholder {
        position: absolute;
        width: 1px;
        top: 0;
        right: 0;
    }

    .k-time-separator {
        display: inline-flex;
        align-self: center;
        justify-content: center;
        height: 100%;
        z-index: 11;
    }
}

// #endregion

@include exports("datetime/layout/bootstrap") {

    .k-datepicker,
    .k-datetimepicker,
    .k-timepicker {
        .k-select {
            width: auto;
        }

        .k-picker-wrap,
        .k-select {
            transition: $transition;
        }
    }

    .k-datepicker,
    .k-timepicker {
        .k-picker-wrap {
            .k-select {
                padding: $picker-select-padding-y $picker-select-padding-x;
                border-width: 0 0 0 $picker-select-border-width;
            }
        }

        .k-i-warning {
            right: $spacer * 2.5;
        }

        .k-state-invalid {
            transition: none;
        }

        .k-rtl &,
        &[dir="rtl"] {
            .k-i-warning {
                left: $spacer * 2.5;
            }
        }
    }

    // Timepicker header
    .k-time-header {
        padding: $time-header-padding;

        .k-title {
            font-weight: bold;
        }

        .k-time-now {
            cursor: pointer;
        }
    }

    // Timepicker content
    .k-time-list-wrapper {
        .k-title {
            z-index: 12;
            font-size: $font-size-xs;
        }
    }

    // Datetimepicker
    .k-datetimepicker {
        .k-link {
            padding: 0;
            width: calc( #{$button-border-width} + #{$icon-size} + #{$button-padding-y * 2} );
            border-width: 0 0 0 $picker-select-border-width;
        }

        .k-i-warning {
            right: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm });
        }

        .k-state-invalid {
            transition: none;
        }

        .k-rtl &,
        &[dir="rtl"] {
            .k-i-warning {
                left: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm });
            }
        }
    }

    // Dateinput
    .k-dateinput {
        .k-dateinput-wrap,
        .k-select {
            transition: $transition;
        }
    }
}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/datetime/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/datetime/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/datetime/_theme.scss
@include exports("datetime/theme") {

    // Common
    .k-dateinput,
    .k-datepicker,
    .k-datetimepicker,
    .k-timepicker {
        @extend .k-text-selection !optional;
    }

    // Shared
    .k-datepicker,
    .k-timepicker,
    .k-datetimepicker {

        // Normal state
        .k-picker-wrap {
            @include fill(
                $datetime-text,
                $datetime-bg,
                $datetime-border
            );

            // Hovered state
            &:hover,
            &.k-state-hover {
                @include fill(
                    $datetime-hovered-text,
                    $datetime-hovered-bg,
                    $datetime-hovered-border
                );

                .k-select {
                    @include fill(
                        $datetime-select-hovered-text,
                        $datetime-select-hovered-bg,
                        $datetime-select-hovered-border,
                        $datetime-select-hovered-gradient
                    );
                }
            }

            // Selected state
            &.k-state-focused,
            &.k-state-active {
                @include fill(
                    $datetime-focused-text,
                    $datetime-focused-bg,
                    $datetime-focused-border
                );
                @include box-shadow($datetime-focused-shadow);

                .k-select {}
            }
        }

        .k-select {
            @include fill(
                $datetime-select-text,
                $datetime-select-bg,
                $datetime-select-border,
                $datetime-select-gradient
            );
        }

        .k-i-warning {
            color: $error;
        }
    }

    // Timepicker
    .k-timepicker {}


    // Timepicker header
    .k-time-header {

        .k-time-now {
            color: $primary;
            background: transparent;

            &:hover,
            &:focus {
                color: $link-hover-text;
            }
        }
    }

    // Timepicker content
    .k-time-list-wrapper {
        background-color: $popup-bg;

        .k-title {
            @include fill(
                $header-text,
                $header-bg,
                $header-border,
                $header-gradient
            );
            background: $popup-bg;
            opacity: $disabled-opacity;
        }

        &.k-state-focused {
            .k-title {
                color: $time-list-title-focus;
                opacity: 1;
            }

            &::before,
            &::after {
                background-color: $time-list-focused-bg;
            }
        }
    }

    .k-time-list {
        &::before,
        &::after {
            $shadow-size: 3em;
            box-shadow: 0 0 $shadow-size ($shadow-size / 2) $popup-bg;
        }

        .k-item:hover {
            color: $primary;
        }
    }

    .k-time-container {
        background: transparent;
    }

    .k-time-highlight {
        background-color: $component-bg;
        border-color: $time-list-highlight-color;
    }

    .k-datetime-container {
        .k-date-tab {

            .k-datetime-buttongroup,
            .k-datetime-selector {
                background-color: $component-bg;
            }
        }
    }

    // Dateinput
    .k-dateinput {

        // Normal state
        .k-dateinput-wrap {
            @include fill(
                $datetime-text,
                $datetime-bg,
                $datetime-border
            );
        }
        .k-select {
            @include fill(
                $datetime-select-text,
                $datetime-select-bg,
                $datetime-select-border,
                $datetime-select-gradient
            );

            &:hover {
                @include fill(
                    $datetime-select-hovered-text,
                    $datetime-select-hovered-bg,
                    $datetime-select-hovered-border,
                    $datetime-select-hovered-gradient
                );
            }

            > .k-state-selected,
            > .k-state-active {
                @include fill(
                    $datetime-select-hovered-text,
                    $datetime-select-hovered-bg,
                    $datetime-select-hovered-border,
                    $datetime-select-hovered-gradient
                );
                color: darken($body-text, 25%);
                box-shadow: inset $datetime-select-focused-shadow;
            }
        }

        // Hovered state
        .k-state-hover {
            @include fill(
                $datetime-hovered-text,
                $datetime-hovered-bg,
                $datetime-hovered-border
            );

            .k-select {
                @include fill(
                    $datetime-select-hovered-text,
                    $datetime-select-hovered-bg,
                    $datetime-select-hovered-border,
                    $datetime-select-hovered-gradient
                );
            }
        }

        // Focused state
        .k-state-focused {
            @include fill(
                $datetime-focused-text,
                $datetime-focused-bg,
                $datetime-focused-border
            );
            @include box-shadow($datetime-focused-shadow);

            .k-picker-wrap > & {
                box-shadow: none;
            }

            .k-select {}
        }
    }

    .k-dateinput,
    .k-datepicker,
    .k-datetimepicker,
    .k-timepicker {
        .k-dateinput-wrap,
        .k-picker-wrap {
            // Invalid
            &.k-invalid,
            &.k-invalid:hover,
            &.k-state-invalid {
                border-color: $invalid-border;

                &:focus,
                &.k-state-focused {
                    @include box-shadow($invalid-shadow);
                }
            }
        }
        // Invalid
        &.k-state-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            .k-dateinput-wrap,
            .k-picker-wrap {
                border-color: $invalid-border;

                &:focus,
                &.k-state-focused {
                    @include box-shadow($invalid-shadow);
                }
            }
        }
    }
}

// #endregion

@include exports("datetime/theme/bootstrap") {

    // Shared
    .k-datepicker,
    .k-timepicker,
    .k-datetimepicker {

        // Normal state
        .k-picker-wrap {

            // Selected state
            &.k-state-active {
                .k-select {
                    @include fill(
                        $datetime-select-focused-text,
                        $datetime-select-focused-bg,
                        $datetime-select-focused-border,
                        $datetime-select-focused-gradient
                    );
                }
            }

        }

    }

    // Timepicker content
    .k-time-list {
        &::before,
        &::after {
            $shadow-size: 3em;
            box-shadow: 0 0 $shadow-size ($shadow-size) $popup-bg;
        }
    }

    // Dateinput
    .k-dateinput {

        // Selected state
        .k-link.k-state-selected {
            @include fill(
                $datetime-select-focused-text,
                $datetime-select-focused-bg,
                $datetime-select-focused-border,
                $datetime-select-focused-gradient
            );
        }

    }

}

// #endregion

// #endregion
// #region @import "dropdowngrid/_index.scss"; -> /packages/bootstrap/scss/dropdowngrid/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../floating-label/_index.scss"; -> /packages/bootstrap/scss/floating-label/_index.scss
// #region @import /packages/bootstrap/scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../combobox/_index.scss"; -> /packages/bootstrap/scss/combobox/_index.scss
// #region @import /packages/bootstrap/scss/combobox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../popup/_index.scss"; -> /packages/bootstrap/scss/popup/_index.scss
// #region @import /packages/bootstrap/scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../grid/_variables.scss"; -> /packages/bootstrap/scss/grid/_variables.scss
// Grid
$grid-padding-x: $cell-padding-x !default;
$grid-padding-y: $cell-padding-y !default;

$grid-header-padding-x: $grid-padding-x !default;
$grid-header-padding-y: $grid-padding-y !default;
$grid-header-font-size: null !default;

$grid-footer-padding-x: $grid-header-padding-x !default;
$grid-footer-padding-y: $grid-header-padding-y !default;

$grid-grouping-header-padding-x: ($grid-padding-y / 2) !default;
$grid-grouping-header-padding-y: $grid-grouping-header-padding-x !default;

$grid-filter-cell-padding-x: $grid-padding-y !default;
$grid-filter-cell-padding-y: $grid-filter-cell-padding-x !default;

$grid-toolbar-padding-x: $toolbar-padding-x !default;
$grid-toolbar-padding-y: $toolbar-padding-y !default;
$grid-toolbar-spacing: $toolbar-spacing !default;

$grid-cell-padding-x: $grid-padding-x !default;
$grid-cell-padding-y: $grid-padding-y !default;
$grid-cell-horizontal-border-width: 0px !default;
$grid-cell-vertical-border-width: 1px !default;

$grid-cell-placeholder-line-width: 80% !default;

$grid-border-width: 1px !default;
$grid-font-family: $font-family !default;
$grid-font-size: $font-size !default;
$grid-line-height: $line-height !default;

/// Background color of the grid component
/// @group grid
$grid-bg: $table-bg !default;
/// Text color of the grid component
/// @group grid
$grid-text: $table-color !default;
/// Border color of the grid component
/// @group grid
$grid-border: $table-border-color !default;

/// Background color of grid header
/// @group grid
$grid-header-bg: $header-bg !default;
/// Text color of grid header
/// @group grid
$grid-header-text: $header-text !default;
/// Border color of grid header
/// @group grid
$grid-header-border: $header-border !default;
/// Background gradient of grid header
/// @group grid
$grid-header-gradient: $header-gradient !default;

/// Background color of grid footer
/// @group grid
$grid-footer-bg: $grid-header-bg !default;
/// Text color of grid footer
/// @group grid
$grid-footer-text: $grid-header-text !default;
/// Border color of grid footer
/// @group grid
$grid-footer-border: $grid-header-border !default;

$grid-group-drag-clue-line-height: 1.5 !default;

/// Background color of alternating rows in grid
/// @group grid
$grid-alt-bg: $table-accent-bg !default;
/// Text color of alternating rows in grid
/// @group grid
$grid-alt-text: null !default;
/// Border color of alternating rows in grid
/// @group grid
$grid-alt-border: null !default;

/// Background color of hovered rows in grid
/// @group grid
$grid-hovered-bg: $table-hover-bg !default;
/// Text color of hovered rows in grid
/// @group grid
$grid-hovered-text: $table-hover-color !default;
/// Border color of hovered rows in grid
/// @group grid
$grid-hovered-border: null !default;

/// Background color of selected rows in grid
/// @group grid
$grid-selected-bg: rgba($selected-bg, .25) !default;
/// Text color of selected rows in grid
/// @group grid
$grid-selected-text: $grid-text !default;
/// Border color of selected rows in grid
/// @group grid
$grid-selected-border: $grid-border !default;

$grid-grouping-row-bg: darken($grid-bg, 7%) !default;
$grid-grouping-row-text: $grid-text !default;

$grid-sorted-bg: rgba( contrast-wcag( $grid-bg ), .02 ) !default;
$grid-sorting-indicator-text: $primary !default;
$grid-sorting-index-font-size: ($icon-size * .75) !default;
$grid-sorting-index-height: $icon-size !default;
$grid-sorting-index-spacing-y: 2px !default;
$grid-sorting-index-spacing-x: -$grid-sorting-index-spacing-y !default;

$grid-focused-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .08) !default;

$grid-command-cell-button-spacing: .16em !default;

$grid-search-width: 15.7em !default;

$grid-sticky-bg: $grid-bg !default;
$grid-sticky-text:  $grid-text !default;
$grid-sticky-border: rgba($grid-text, .5) !default;

$grid-sticky-alt-bg: darken($grid-bg, 5%) !default;

$grid-sticky-header-bg: $grid-header-bg !default;
$grid-sticky-header-text: $grid-header-text !default;
$grid-sticky-header-border: $grid-sticky-border !default;

$grid-sticky-footer-bg: $grid-header-bg !default;
$grid-sticky-footer-hovered-bg: $grid-sticky-footer-bg !default;

$grid-sticky-selected-bg: mix($selected-bg, #ffffff, 25%) !default;
$grid-sticky-selected-alt-bg: shade($grid-sticky-selected-bg, .4) !default;

$grid-sticky-hovered-bg: darken($grid-bg, 8%) !default;
$grid-sticky-selected-hovered-bg: shade($grid-sticky-selected-bg, .7) !default;

// #endregion


// Component
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/dropdowngrid/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/dropdowngrid/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/dropdowngrid/_layout.scss
@include exports("dropdowngrid/layout") {

    .k-dropdowngrid-popup {
        overflow: hidden;
    }
    .k-dropdowngrid-popup .k-virtual-wrap {
        margin: 0;
    }


    // Grid list
    .k-grid-list {
        width: 100%;
        max-width: none;
        border-width: 0;
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;
        empty-cells: show;
        outline: none;
        display: table;
    }


    // Header
    .k-dropdowngrid-popup .k-grid-header {
        padding: 0;
        border-width: 0 0 1px 0;
        border-style: solid;
        border-color: inherit;
        font-size: $grid-header-font-size;
        display: block;
    }
    .k-dropdowngrid-popup .k-grid-header-wrap {
        border-width: 0 $grid-cell-vertical-border-width 0 0;
        border-style: solid;
        border-color: inherit;
        vertical-align: top;
        display: inline-block;
        overflow: hidden;
    }
    .k-dropdowngrid-popup .k-grid-header table {
        margin-bottom: -1px;
        width: 100%;
        max-width: none;
        border-width: 0;
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;
        empty-cells: show;
        outline: none;
    }
    .k-dropdowngrid-popup .k-grid-header .k-header {
        padding: $grid-header-padding-y $grid-header-padding-x;
        border-width: 0 0 0 $grid-cell-vertical-border-width;
        border-style: solid;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        &:first-child {
            border-left: 0;
        }
    }


    // Rows
    .k-grid-list > .k-item {
        box-sizing: border-box;
        display: table-row;
        position: relative;
    }
    .k-grid-list > .k-item > .k-cell,
    .k-grid-list > .k-item > .k-group,
    .k-grid-list > .k-item > .k-spacer-group {
        box-sizing: border-box;
        display: table-cell;
        vertical-align: middle;
    }
    .k-grid-list.k-virtual-list > .k-item > .k-cell,
    .k-grid-list.k-virtual-list > .k-item > .k-group,
    .k-grid-list.k-virtual-list > .k-item > .k-spacer-group {
        display: inline-block;
    }
    .k-grid-list > .k-item:last-child > .k-cell,
    .k-grid-list > .k-item:last-child > .k-group-cell,
    .k-grid-list > .k-item:last-child > .k-spacer-cell {
        border-bottom-width: 0;
    }


    // Cells
    .k-grid-list > .k-item > .k-cell {
        padding: $grid-cell-padding-y $grid-cell-padding-x;
        border-width: 0 0 $grid-cell-horizontal-border-width $grid-cell-vertical-border-width;
        border-style: solid;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        &:first-child {
            border-left: 0;
        }
    }


    // Grouping
    .k-dropdowngrid-popup .k-group-header {
        margin: 0;
        padding: $grid-header-padding-y $grid-header-padding-x;
        min-height: auto;
        text-align: left;
    }
    .k-grid-list > .k-item > .k-group-cell,
    .k-grid-list > .k-item > .k-spacer-cell {
        padding: 0;
        width: 0;
        border-left-width: 0;
        border-right-width: 0;
        overflow: visible;
        position: relative;
    }
    .k-grid-list > .k-item > .k-group-cell > span {
        padding: 0 ($grid-cell-padding-x / 2);
        font-size: .875em;
        position: absolute;
        top: 0;
        right: 0;
    }


    // Footer
    .k-dropdowngrid-popup .k-footer {
        padding: $grid-footer-padding-y $grid-footer-padding-x;
        border-width: 1px 0 0 0;
        border-style: solid;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        position: relative;
        flex-shrink: 0;
    }


    // RTL
    .k-rtl {
        &.k-dropdowngrid-popup .k-grid-header-wrap,
        .k-dropdowngrid-popup .k-grid-header-wrap {
            border-right-width: 0;
            border-left-width: $grid-cell-vertical-border-width;
        }
        &.k-dropdowngrid-popup .k-grid-header .k-header,
        .k-dropdowngrid-popup .k-grid-header .k-header,
        .k-grid-list > .k-item > .k-cell {
            border-left-width: 0;
            border-right-width: $grid-cell-vertical-border-width;
            text-align: right;
        }
        &.k-dropdowngrid-popup .k-grid-header .k-header:first-child,
        .k-dropdowngrid-popup .k-grid-header .k-header:first-child,
        .k-grid-list > .k-item > .k-cell:first-child {
            border-right-width: 0;
        }
        div.k-dropdowngrid-popup .k-group-header {
            text-align: right;
        }
        .k-grid-list > .k-item > .k-group-cell > span {
            right: auto;
            left: 0;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/dropdowngrid/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/dropdowngrid/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/dropdowngrid/_theme.scss
@include exports("dropdowngrid/theme") {

    // Dropdowngrid
    .k-dropdowngrid-popup {
        border-color: $grid-border;
        color: $grid-text;
        background-color: $grid-bg;
    }


    // Header
    .k-dropdowngrid-popup .k-header,
    .k-dropdowngrid-popup .k-grid-header {
        border-color: $grid-header-border;
        color: $grid-header-text;
        background-color: $grid-header-bg;
    }


    // Footer
    .k-dropdowngrid-popup .k-footer {
        border-color: $grid-header-border;
        color: $grid-header-text;
        background-color: $grid-header-bg;
    }


    // Group header
    .k-dropdowngrid-popup .k-group-header {
        border-color: $grid-header-border;
        color: $grid-header-text;
        background-color: $grid-header-bg;
    }


    // Alt
    .k-dropdowngrid-popup .k-item:nth-child(2n) {
        background-color: $grid-alt-bg;
    }


    // Cells
    .k-dropdowngrid-popup .k-cell {
        border-color: $grid-border;
    }


    // Interactive states
    .k-dropdowngrid-popup .k-item.k-state-hover {
        border-color: $grid-hovered-border;
        color: $grid-hovered-text;
        background-color: $grid-hovered-bg;
    }
    .k-dropdowngrid-popup .k-item.k-state-selected {
        border-color: $grid-selected-border;
        color: $grid-selected-text;
        background-color: $grid-selected-bg;
    }
    .k-dropdowngrid-popup .k-item.k-state-focused {
        box-shadow: $grid-focused-shadow;
    }


    // Grouping
    .k-dropdowngrid-popup .k-group-cell span {
        background-color: $grid-text;
        color: $grid-bg;
    }
    .k-grid-list > .k-item.k-last > .k-cell,
    .k-grid-list > .k-item.k-last > .k-group-cell,
    .k-grid-list > .k-item.k-last > .k-spacer-cell {
        border-bottom-color: $grid-text;
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "dropdownlist/_index.scss"; -> /packages/bootstrap/scss/dropdownlist/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../floating-label/_index.scss"; -> /packages/bootstrap/scss/floating-label/_index.scss
// #region @import /packages/bootstrap/scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../popup/_index.scss"; -> /packages/bootstrap/scss/popup/_index.scss
// #region @import /packages/bootstrap/scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/dropdownlist/_variables.scss
// Dropdownlist
$dropdownlist-bg: $button-bg !default;
$dropdownlist-text: $button-text !default;
$dropdownlist-border: $button-border !default;
$dropdownlist-gradient: $button-gradient !default;

$dropdownlist-hovered-bg: $button-hovered-bg !default;
$dropdownlist-hovered-text: $button-hovered-text !default;
$dropdownlist-hovered-border: $button-hovered-border !default;
$dropdownlist-hovered-gradient: $button-hovered-gradient !default;

$dropdownlist-focused-bg: $button-pressed-bg !default;
$dropdownlist-focused-text: $button-pressed-text !default;
$dropdownlist-focused-border: $button-pressed-border !default;
$dropdownlist-focused-gradient: $button-pressed-gradient !default;
$dropdownlist-focused-shadow: $button-focused-shadow !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/dropdownlist/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/dropdownlist/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/dropdownlist/_layout.scss
@include exports("dropdownlist/layout") {

    .k-dropdown {
        width: $input-default-width;
        border-width: 0;
        outline: 0;
        background: none;
        box-sizing: border-box;
        font-family: $input-font-family;
        font-size: $input-font-size;
        line-height: $input-line-height;
        text-align: left;
        white-space: nowrap;
        display: inline-flex;
        vertical-align: middle;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-dropdown-wrap {
            @include use-background-clip();
            @include border-radius( $input-border-radius );
            padding: 0;
            width: 100%;
            display: flex;
            flex-direction: row;
            border-width: 1px;
            border-style: solid;
            box-sizing: border-box;
            position: relative;
            transition: all .1s ease; // sass-lint:disable-block no-transition-all
            cursor: pointer;
            outline: 0;


            // Input
            .k-input {}


            // Select
            .k-select {
                @include border-right-radius-only( $input-border-radius );
                padding: $picker-select-padding-y $picker-select-padding-x;
                width: if($use-picker-select-width, $button-inner-calc-size, null);
                border-width: 0;
                box-sizing: border-box;
                border-style: solid;
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 0 0 auto;
                text-align: center;
                cursor: pointer;
            }

            // Clear value
            .k-clear-value {
                height: ($input-line-height * $input-font-size);
                line-height: ($input-line-height * $input-font-size);
                outline: 0;
                cursor: pointer;
                display: none;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                opacity: .5;
                position: absolute;
                top: $input-padding-y;
                right: $picker-icon-offset;

                &:hover {
                    opacity: 1;
                }
            }


            // Focused
            &.k-state-focused,
            &.k-state-hover,
            &:hover {
                .k-clear-value {
                    display: inline-flex;
                }
            }
        }

    }


    // RTL

    .k-dropdown.k-rtl,
    .k-dropdown[dir="rtl"],
    .k-rtl .k-dropdown,
    [dir="rtl"] .k-dropdown {
        text-align: right;

        .k-select {
            @include border-left-radius-only( $input-border-radius );
        }

        .k-dropdown-wrap .k-clear-value {
            right: auto;
            left: $picker-icon-offset;
        }
    }



    // Dropdown operator
    .k-dropdown-operator {
        width: auto;

        .k-dropdown-wrap {
            .k-input {
                display: none;
            }
            .k-select {
                width: $button-inner-calc-size;
                height: $button-inner-calc-size;
            }
        }

    }


    // Native select
    select.k-dropdown {
        @include border-radius( $input-border-radius );
        padding: $input-padding-y $input-padding-x;
        border-width: 1px;
        border-style: solid;
        outline: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all .1s ease; // sass-lint:disable-block no-transition-all
        cursor: pointer;
    }

}

// #endregion

@include exports("dropdownlist/layout/bootstrap") {

    // Dropdown
    .k-dropdown {

        .k-dropdown-wrap {
            transition: $transition;
        }
    }

}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/dropdownlist/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/dropdownlist/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/dropdownlist/_theme.scss
@include exports( "dropdownlist/theme" ) {

    .k-dropdown {
        @extend .k-text-selection !optional;

        .k-dropdown-wrap {
            @include fill(
                $dropdownlist-text,
                $dropdownlist-bg,
                $dropdownlist-border,
                $dropdownlist-gradient
            );

            // Hover state
            &:hover,
            &.k-state-hover {
                @include fill(
                    $dropdownlist-hovered-text,
                    $dropdownlist-hovered-bg,
                    $dropdownlist-hovered-border,
                    $dropdownlist-hovered-gradient
                );
            }

            &.k-state-active {}

            // Focused state
            &.k-state-focused {
                @include fill(
                    $dropdownlist-focused-text,
                    $dropdownlist-focused-bg,
                    $dropdownlist-focused-border,
                    $dropdownlist-focused-gradient
                );
                @include box-shadow($dropdownlist-focused-shadow);
            }

            // Invalid state
            &.k-invalid,
            &.k-invalid:hover,
            &.k-state-invalid {
                border-color: $invalid-border;

                &:focus,
                &.k-state-focused {
                    @include box-shadow($invalid-shadow);
                }
            }
        }

        // Invalid
        &.k-state-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            > .k-dropdown-wrap {
                border-color: $invalid-border;

                &:focus,
                &.k-state-focused {
                    @include box-shadow($invalid-shadow);
                }
            }
        }

    }

    // Native select
    select.k-dropdown {
        @include fill(
            $dropdownlist-text,
            $dropdownlist-bg,
            $dropdownlist-border,
            $dropdownlist-gradient
        );

        // Hover state
        &:hover {
            @include fill(
                $dropdownlist-hovered-text,
                $dropdownlist-hovered-bg,
                $dropdownlist-hovered-border,
                $dropdownlist-hovered-gradient
            );
        }

        // Focused state
        &:focus {
            @include fill(
                $dropdownlist-focused-text,
                $dropdownlist-focused-bg,
                $dropdownlist-focused-border,
                $dropdownlist-focused-gradient
            );
            @include box-shadow($dropdownlist-focused-shadow);
        }
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "dropdowntree/_index.scss"; -> /packages/bootstrap/scss/dropdowntree/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../floating-label/_index.scss"; -> /packages/bootstrap/scss/floating-label/_index.scss
// #region @import /packages/bootstrap/scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> /packages/bootstrap/scss/dropdownlist/_index.scss
// #region @import /packages/bootstrap/scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../multiselect/_index.scss"; -> /packages/bootstrap/scss/multiselect/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../floating-label/_index.scss"; -> /packages/bootstrap/scss/floating-label/_index.scss
// #region @import /packages/bootstrap/scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../popup/_index.scss"; -> /packages/bootstrap/scss/popup/_index.scss
// #region @import /packages/bootstrap/scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/multiselect/_variables.scss
// Multiselect
$multiselect-width: 100% !default;

$multiselect-token-opacity: .07 !default;
$multiselect-token-focused-opacity: .46 !default;
$multiselect-token-focused-text: $base-bg !default;
$multiselect-token-focused-bg: $base-text !default;
$multiselect-token-disabled-text: rgba( $base-text, .42 ) !default;
$multiselect-token-hover-text: $base-bg !default;
$multiselect-token-hover-bg: rgba( $base-text, .54 ) !default;
$multiselect-remove-text: $base-bg !default;
$multiselect-remove-bg: rgba( $base-text, .4 ) !default;
$multiselect-remove-hover-text: $multiselect-remove-text !default;
$multiselect-remove-hover-bg: rgba( $base-text, .54 ) !default;
$multiselect-remove-focused-text: rgba( $base-text, .54 ) !default;
$multiselect-remove-focused-bg: rgba($base-bg, .93) !default;

$multiselect-bg: $input-bg !default;
$multiselect-text: $input-text !default;
$multiselect-border: $input-border !default;

$multiselect-hovered-bg: $input-hovered-bg !default;
$multiselect-hovered-text: $input-hovered-text !default;
$multiselect-hovered-border: $input-hovered-border !default;

$multiselect-focused-bg: $input-focused-bg !default;
$multiselect-focused-text: $input-focused-text !default;
$multiselect-focused-border: $input-focused-border !default;
$multiselect-focused-shadow: $input-focused-shadow !default;

$multiselect-button-focused-bg: $button-pressed-bg !default;
$multiselect-button-focused-text: $button-pressed-text !default;
$multiselect-button-focused-border: $button-pressed-border !default;
$multiselect-button-focused-gradient: $button-pressed-gradient !default;
$multiselect-button-focused-shadow: $button-pressed-shadow !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/multiselect/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/multiselect/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/multiselect/_layout.scss

@include exports("multiselect/layout") {

    // Base
    .k-multiselect {
        @include border-radius( $input-border-radius );
        width: $multiselect-width;
        border-width: 0;
        box-sizing: border-box;
        outline: 0;
        background: none;
        font-family: $input-font-family;
        font-size: $input-font-size;
        line-height: $input-line-height;
        text-align: left;
        white-space: nowrap;
        display: inline-flex;
        vertical-align: middle;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-loading-hidden {
            visibility: hidden;
        }

        .k-multiselect-wrap {
            @include use-background-clip();
            @include border-radius( $input-border-radius );
            padding: 0 $picker-select-calc-size 0 0;
            width: 100%;
            border-width: 1px;
            border-style: solid;
            box-sizing: border-box;
            position: relative;
            transition: all .1s ease; // sass-lint:disable-block no-transition-all
            cursor: text;
            outline: 0;

            // Input
            .k-input {
                float: left;
            }

            // Height placeholder
            &::before {
                content: "";
                width: 0;
                height: $input-inner-calc-height;
                float: left;
            }

            // Token list
            ul {
                vertical-align: top;
            }
            li {
                @include use-background-clip();

                &.k-button {
                    float: left;
                }
                .k-icon {
                    cursor: pointer;
                }
            }


            // Token
            .k-button {
                min-height: calc( #{$form-line-height-em} + #{$button-padding-y-sm} + 2px );
                padding: ($button-padding-y-sm / 2) ($button-padding-x / 2);
                margin: $padding-y-sm 0 0 $padding-y-sm;
                cursor: default;
                display: inline-flex;
                flex-direction: row;
                align-items: center;
                line-height: inherit;
                white-space: normal;

                .k-select {
                    display: flex;
                    cursor: pointer;
                    margin-left: $padding-x;
                    align-self: stretch;
                }

                &:last-child {
                    margin-bottom: $padding-y-sm;
                }
            }

            .k-searchbar {
                // search bar must be floated to align after any selected tags
                // (or align below them, if space is not available)
                float: left;
                width: auto;

                .k-input {
                    padding-right: 0;
                }
            }

            .k-i-loading {
                height: ($input-line-height * $input-font-size);
                line-height: ($input-line-height * $input-font-size);
                position: absolute;
                top: $input-padding-y;
                right: $input-icon-offset;
            }

            .k-clear-value {
                height: ($input-line-height * $input-font-size);
                line-height: ($input-line-height * $input-font-size);
                outline: 0;
                cursor: pointer;
                display: none;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                opacity: .5;
                position: absolute;
                top: $input-padding-y;
                right: $input-icon-offset;

                &:hover {
                    opacity: 1;
                }
            }
            &:hover,
            &.k-state-hover,
            &.k-state-focused {
                .k-clear-value {
                    display: inline-flex;
                }
            }
        }


        &.k-state-hover,
        &.k-state-focused {
            > .k-multiselect-wrap {
                .k-clear-value {
                    display: inline-flex;
                }
            }
        }

        &[dir="rtl"],
        .k-rtl & {
            text-align: right;

            .k-multiselect-wrap {
                padding-left: $picker-select-calc-size;
                padding-right: 0;

                &::before,
                li.k-button,
                .k-input {
                    float: right;
                }

                .k-searchbar {
                    float: right;

                    .k-input {
                        padding-left: 0;
                        padding-right: $input-padding-x;
                    }
                }

                .k-button {
                    width: auto;
                    margin-right: $padding-y-sm;
                    margin-left: 0;

                    .k-select {
                        margin-left: 0;
                        margin-right: $padding-x;
                    }
                }
            }

            .k-clear-value,
            .k-i-loading {
                right: auto;
                left: $input-icon-offset;
            }
        }

        ::-ms-clear {
            display: none;
        }
    }
}

// #endregion

@include exports("multiselect/layout/bootstrap") {
    .k-multiselect {
        .k-multiselect-wrap {
            transition: $transition;

            .k-button {
                margin: calc( #{$padding-y-sm} - 1px ) 0 0 calc( #{$padding-y-sm} - 1px );

                &:last-child {
                    margin-bottom: calc( #{$padding-y-sm} - 1px );
                }
            }
        }
    }
}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/multiselect/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/multiselect/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/multiselect/_theme.scss
@include exports("multiselect/theme") {

    .k-multiselect {
        @extend .k-text-selection !optional;

        &.k-state-focused {
            > .k-multiselect-wrap {
                @include fill(
                    $multiselect-focused-text,
                    $multiselect-focused-bg,
                    $multiselect-focused-border
                );
                @include box-shadow($multiselect-focused-shadow);

                // Invalid + focused
                &.k-invalid,
                &.k-invalid:hover,
                &.k-state-invalid {
                    @include box-shadow($invalid-shadow);
                }
            }
            // Invalid + focused
            &.k-state-invalid,
            &.ng-invalid.ng-touched,
            &.ng-invalid.ng-dirty {
                .k-multiselect-wrap {
                    @include box-shadow($invalid-shadow);
                }
            }

        }

        .k-multiselect-wrap {
            @include fill(
                $multiselect-text,
                $multiselect-bg,
                $multiselect-border
            );

            > .k-readonly {
                opacity: .6;
            }


            li {
                .k-icon {
                    opacity: .6;
                }

                .k-icon:hover {
                    opacity: 1;
                }

                &.k-button:active,
                &.k-button.k-state-active {
                    @include fill(
                        $multiselect-button-focused-text,
                        $multiselect-button-focused-bg,
                        $multiselect-button-focused-border,
                        $multiselect-button-focused-gradient
                    );
                    @include box-shadow( $multiselect-button-focused-shadow );
                }

                // Focused state
                &:focus,
                &.k-state-focused {
                    .k-icon {
                        opacity: 1;
                    }
                }
            }

            .k-i-loading {
                background-color: $multiselect-bg;
            }


            &:hover,
            &.k-state-hover {
                @include fill(
                    $multiselect-hovered-text,
                    $multiselect-hovered-bg,
                    $multiselect-hovered-border
                );
            }

            // Invalid state
            &.k-invalid,
            &.k-invalid:hover,
            &.k-state-invalid {
                border-color: $invalid-border;
            }
        }

        // Invalid,
        &.k-state-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            .k-multiselect-wrap {
                border-color: $invalid-border;
            }
        }
    }

}

// #endregion


// #endregion

// #endregion
// #region @import "../treeview/_index.scss"; -> /packages/bootstrap/scss/treeview/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../checkbox/_index.scss"; -> /packages/bootstrap/scss/checkbox/_index.scss
// #region @import /packages/bootstrap/scss/checkbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/treeview/_variables.scss
// Treeview
$treeview-padding-x: 2px !default;
$treeview-padding-y: $treeview-padding-x !default;
$treeview-font-family: $font-family !default;
$treeview-font-size: $font-size !default;
$treeview-line-height: $form-line-height !default;

$treeview-indent: 16px !default;

$treeview-item-padding-x: $button-padding-y !default;
$treeview-item-padding-y: $treeview-item-padding-x !default;
$treeview-item-border-width: 1px !default;
$treeview-item-border-radius: $border-radius !default;

$treeview-bg: null !default;
$treeview-text: $component-text !default;
$treeview-border: null !default;

$treeview-item-hovered-text: $list-group-hover-color !default;
$treeview-item-hovered-bg: $list-group-hover-bg !default;
$treeview-item-hovered-border: $node-hovered-bg !default;
$treeview-item-hovered-gradient: null !default;

$treeview-item-selected-text: $selected-text !default;
$treeview-item-selected-bg: $selected-bg !default;
$treeview-item-selected-border: $treeview-item-selected-bg !default;
$treeview-item-selected-gradient: null !default;

$treeview-item-focused-shadow: 0 0 0 2px $base-border !default;
$treeview-item-selected-focused-shadow: 0 0 0 2px rgba( $node-selected-border, .5 ) !default;

$treeview-loadmore-checkboxes-padding-x: calc( #{$icon-spacing} + #{$checkbox-size} + #{$treeview-indent} ) !default;
$treeview-loadmore-checkboxes-icon-indent: calc( -1 * (#{$icon-spacing} + #{$treeview-indent}) ) !default;
$treeview-loadmore-checkboxes-icon-margin-x: $icon-spacing !default;

$treeview-loadmore-text: $primary !default;
$treeview-loadmore-bg: transparent !default;
$treeview-loadmore-border: null !default;

$treeview-loadmore-hover-text: $primary-darker !default;
$treeview-loadmore-hover-bg: transparent !default;
$treeview-loadmore-hover-border: null !default;

$treeview-loadmore-focus-text: $primary !default;
$treeview-loadmore-focus-bg: transparent !default;
$treeview-loadmore-focus-border: null !default;
$treeview-loadmore-focus-shadow: none !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/treeview/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/treeview/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/treeview/_layout.scss
@include exports("treeview/layout") {

    // Base
    .k-treeview {
        padding: $treeview-padding-y $treeview-padding-x;
        border-width: 0;
        background: none;
        box-sizing: border-box;
        outline: 0;
        font-family: $treeview-font-family;
        font-size: $treeview-font-size;
        line-height: $treeview-line-height;
        display: block;
        cursor: default;
        overflow: auto;
        white-space: nowrap;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-content,
        > .k-group,
        .k-item > .k-group {
            margin: 0;
            padding: 0;
            background: none;
            list-style: none;
            position: relative;

            &.ng-animating {
                overflow: hidden;
            }
        }

        // Wrappers
        .k-top,
        .k-mid,
        .k-bot {
            display: flex;
            flex-direction: row;
            align-items: center;
            align-content: center;
        }

        // Items
        .k-item {
            outline-style: none;
            margin: 0;
            padding: 0 0 0 $treeview-indent;
            border-width: 0;
            display: block;
        }

        // Link
        .k-in {
            @include border-radius( $treeview-item-border-radius );
            margin: 0;
            padding: $treeview-item-padding-y $treeview-item-padding-x;
            border: $treeview-item-border-width solid transparent;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            align-content: center;
            vertical-align: middle;
            position: relative;
        }
        .k-in.k-state-focused {
            z-index: 1;
        }

        // LoadMore button
        .k-treeview-load-more-button {
            cursor: pointer;

            &:hover,
            &.k-state-hover,
            &:focus,
            &.k-state-focused {
                text-decoration: underline;
            }
        }
        .k-treeview-load-more-checkboxes-container {
            padding-left: $treeview-loadmore-checkboxes-padding-x;

            .k-i-loading {
                margin-left: $treeview-loadmore-checkboxes-icon-indent;
                margin-right: $treeview-loadmore-checkboxes-icon-margin-x;
            }
        }

        // Expand / collapse
        .k-i-expand,
        .k-i-collapse {
            margin-left: -$treeview-indent;
            cursor: pointer;
        }

        // Checkboxes
        .k-checkbox-wrapper {
            margin-right: $icon-spacing;
        }

        // TODO: Delete the following block when https://github.com/telerik/kendo-angular-treeview/issues/138 is done
        // Drag and Drop icon
        .k-i-drag-and-drop {
            position: absolute;
            transform: translate(-50%, -50%);
            z-index: 1000;
        }

        // Other content
        .k-in .k-icon,
        .k-in .k-image,
        .k-in .k-sprite {
            margin-right: $icon-spacing;
        }
    }

    // RTL
    .k-rtl .k-treeview,
    .k-treeview[dir="rtl"] {

        // Items
        .k-item {
            padding-left: 0;
            padding-right: $treeview-indent;
        }

        .k-treeview-load-more-checkboxes-container {
            padding-left: 0;
            padding-right: $treeview-loadmore-checkboxes-padding-x;

            .k-i-loading {
                margin-left: $treeview-loadmore-checkboxes-icon-margin-x;
                margin-right: $treeview-loadmore-checkboxes-icon-indent;
            }
        }

        // Expand / collapse
        .k-i-expand,
        .k-i-collapse {
            margin-left: 0;
            margin-right: -$treeview-indent;
        }

        // Checkboxes
        .k-checkbox-wrapper {
            margin-right: 0;
            margin-left: $icon-spacing;
        }

        // Other content
        .k-in .k-icon,
        .k-in .k-image,
        .k-in .k-sprite {
            margin-left: $icon-spacing;
            margin-right: 0;
        }

    }
}

// #endregion


@include exports( "treeview/layout/bootstrap" ) {

    // Base
    .k-treeview {

        .k-top,
        .k-mid,
        .k-bot {
            padding-top: 2px;
            padding-bottom: 2px;
        }


        // Item
        .k-in {
            transition: $transition;
        }

    }

}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/treeview/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/treeview/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/treeview/_theme.scss
@include exports("treeview/theme") {

    // Appearance
    .k-treeview {
        @include fill(
            $treeview-text,
            $treeview-bg,
            $treeview-border
        );


        // Item
        .k-in {}


        // Interactive states
        .k-in:hover,
        .k-in.k-state-hover {
            @include fill(
                $treeview-item-hovered-text,
                $treeview-item-hovered-bg,
                $treeview-item-hovered-border,
                $treeview-item-hovered-gradient
            );
        }
        .k-in.k-state-selected {
            @include fill(
                $treeview-item-selected-text,
                $treeview-item-selected-bg,
                $treeview-item-selected-border,
                $treeview-item-selected-gradient
            );
        }
        .k-in.k-state-focused {
            @include box-shadow( $treeview-item-focused-shadow );
        }
        .k-in.k-state-selected.k-state-focused {
            @include box-shadow( $treeview-item-selected-focused-shadow );
        }

        // LoadMore button
        .k-treeview-load-more-button {
            @include fill(
                $treeview-loadmore-text,
                $treeview-loadmore-bg,
                $treeview-loadmore-border
            );
        }

        .k-treeview-load-more-button:hover,
        .k-treeview-load-more-button.k-state-hover {
            @include fill(
                $treeview-loadmore-hover-text,
                $treeview-loadmore-hover-bg,
                $treeview-loadmore-hover-border
            );
        }

        .k-treeview-load-more-button:focus,
        .k-treeview-load-more-button.k-state-focused {
            @include fill(
                $treeview-loadmore-focus-text,
                $treeview-loadmore-focus-bg,
                $treeview-loadmore-focus-border
            );
            @include box-shadow( $treeview-loadmore-focus-shadow );
        }
    }

}

// #endregion

// #endregion

// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/dropdowntree/_variables.scss
// Dropdowntree
$dropdowntree-popup-spacer-x: $padding-x !default;
$dropdowntree-popup-spacer-y: $dropdowntree-popup-spacer-x !default;
$dropdowntree-filter-shadow: none !default;
$dropdowntree-filter-spacer: 0px !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/dropdowntree/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/dropdowntree/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/dropdowntree/_layout.scss
@include exports("dropdowntree/layout") {

    .k-dropdowntree {
        @extend .k-multiselect;
        @extend .k-dropdown;
        width: $input-default-width;
    }

    // Dropdowntree popup
    .k-popup-dropdowntree {
        padding: 0;

        .k-list-filter {
            box-shadow: $dropdowntree-filter-shadow;
            margin: 0 0 $dropdowntree-filter-spacer;
        }

        .k-check-all {
            padding: $dropdowntree-popup-spacer-y $dropdowntree-popup-spacer-x 0;
        }
        .k-list-filter .k-check-all {
            padding-top: 0;
        }

        .k-treeview {
            padding: $dropdowntree-popup-spacer-y $dropdowntree-popup-spacer-x;
        }
    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/dropdowntree/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/dropdowntree/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/dropdowntree/_theme.scss
@include exports("dropdowntree/theme") {

    // Dropdown tree doesn't need any theme, because it extends dropdown list and multiselects

}

// #endregion

// #endregion

// #endregion
// #region @import "maskedtextbox/_index.scss"; -> /packages/bootstrap/scss/maskedtextbox/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../floating-label/_index.scss"; -> /packages/bootstrap/scss/floating-label/_index.scss
// #region @import /packages/bootstrap/scss/floating-label/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/maskedtextbox/_variables.scss
// Masked textbox

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/maskedtextbox/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss
@include exports("maskedtextbox/layout") {

    .k-maskedtextbox {
        width: $input-default-width;
        font-family: $input-font-family;
        font-size: $input-font-size;
        line-height: $input-line-height;
        border-width: 0;
        box-sizing: border-box;
        outline: 0;
        background: none;
        text-align: left;
        white-space: nowrap;
        display: inline-flex;
        vertical-align: middle;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        > .k-textbox {
            flex: 1 0 0%;
            min-width: 0;

            &.k-state-invalid {
                transition: none;

                + .k-i-warning {
                    display: inline-block;
                }
            }
        }

        .k-i-warning {
            display: none;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: $padding-x;
        }

        &[dir="rtl"],
        .k-rtl & {
            text-align: right;

            .k-i-warning {
                right: auto;
                left: $padding-x;
            }
        }

        ::-ms-clear {
            display: none;
        }
    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/maskedtextbox/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/maskedtextbox/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/maskedtextbox/_theme.scss
@include exports("maskedtextbox/theme") {

    .k-maskedtextbox {
        @extend .k-text-selection !optional;

        .k-i-warning {
            color: $error;
        }

        &.k-state-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            .k-textbox {
                border-color: $invalid-border;
            }

            &:focus,
            &.k-state-focused {
                .k-textbox {
                    @include box-shadow($invalid-shadow);
                }
            }
        }
    }
}

// #endregion

// #endregion

// #endregion
// #region @import "multiselect/_index.scss"; -> /packages/bootstrap/scss/multiselect/_index.scss
// #region @import /packages/bootstrap/scss/multiselect/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "numerictextbox/_index.scss"; -> /packages/bootstrap/scss/numerictextbox/_index.scss
// #region @import /packages/bootstrap/scss/numerictextbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "searchbox/_index.scss"; -> /packages/bootstrap/scss/searchbox/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/searchbox/_variables.scss
// Searchbox
$searchbox-padding-x: $input-padding-x !default;
$searchbox-padding-y: $input-padding-y !default;
$searchbox-border-width: $input-border-width !default;
$searchbox-border-radius: $input-border-radius !default;

$searchbox-font-family: $input-font-family !default;
$searchbox-font-size: $input-font-size !default;
$searchbox-line-height: $input-line-height !default;

$searchbox-bg: $input-bg !default;
$searchbox-text: $input-text !default;
$searchbox-border: $input-border !default;

$searchbox-hover-bg: $input-hovered-bg !default;
$searchbox-hover-text: $input-hovered-text !default;
$searchbox-hover-border: $input-hovered-border !default;

$searchbox-focus-bg: $input-focused-bg !default;
$searchbox-focus-text: $input-focused-text !default;
$searchbox-focus-border: $input-focused-border !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/searchbox/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/searchbox/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/searchbox/_layout.scss
@include exports("searchbox/layout") {

    // Searchbox
    .k-searchbox {
        @include use-background-clip();
        @include border-radius( $searchbox-border-radius );
        border-width: 1px;
        border-style: solid;
        font-family: $searchbox-font-family;
        font-size: $searchbox-font-size;
        line-height: $searchbox-line-height;
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        flex-flow: row nowrap;
        position: relative;
        overflow: hidden;

        > .k-input {
            padding: $searchbox-padding-y $searchbox-padding-x;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/searchbox/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/searchbox/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/searchbox/_theme.scss
@include exports("searchbox/theme") {

    // Searchbox
    .k-searchbox {
        @include fill(
            $searchbox-text,
            $searchbox-bg,
            $searchbox-border
        );


        // Hover state
        &:hover,
        &.k-state-hover {
            @include fill(
                $searchbox-hover-text,
                $searchbox-hover-bg,
                $searchbox-hover-border
            );
        }


        // Focus state
        &:focus,
        &:focus-within,
        &.k-state-focus {
            @include fill(
                $searchbox-focus-text,
                $searchbox-focus-bg,
                $searchbox-focus-border
            );
            @include box-shadow( $input-focused-shadow );
        }


        // Disabled
        &:disabled,
        &.k-state-disabled {
            @include disabled( $disabled-styling );
        }

    }
}

// #endregion

// #endregion

// #endregion
// #region @import "upload/_index.scss"; -> /packages/bootstrap/scss/upload/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../action-buttons/_index.scss"; -> /packages/bootstrap/scss/action-buttons/_index.scss
// #region @import /packages/bootstrap/scss/action-buttons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/upload/_variables.scss
// Upload
$upload-border-width: 1px !default;
$upload-font-family: $font-family !default;
$upload-font-size: $font-size !default;
$upload-line-height: $line-height !default;
$upload-max-height: 300px !default;

$upload-bg: $component-bg !default;
$upload-text: $component-text !default;
$upload-border: $component-border !default;

$upload-dropzone-padding-x: map-get( $spacing, 2 ) !default;
$upload-dropzone-padding-y: map-get( $spacing, 2 ) !default;
$upload-dropzone-spacing: ($upload-dropzone-padding-x * 2) !default;
$upload-dropzone-bg: $toolbar-bg !default;
$upload-dropzone-text: darken($component-bg, 27%) !default;
$upload-dropzone-text-opacity: null !default;
$upload-dropzone-border: $toolbar-border !default;
$upload-dropzone-hover-bg: try-shade( $upload-dropzone-bg, .2) !default;

$upload-item-padding-x: $spacer !default;
$upload-item-padding-y: $spacer !default;

$upload-multiple-items-spacing: 12px !default;

$upload-validation-font-size: 11px !default;
$upload-icon-spacing: $upload-dropzone-padding-x !default;
$upload-icon-color: darken($component-bg, 27%) !default;

$upload-item-image-width: 24px !default;
$upload-item-image-height: 34px !default;
$upload-item-image-border: 2px !default;

$upload-group-icon-size: $icon-size-lg !default;

$upload-disabled-text: darken($component-bg, 27%) !default;
$upload-disabled-border: darken($component-bg, 27%) !default;

$upload-progress-thickness: 2px !default;
$upload-progress-bg: $info !default;
$upload-progress-text: $base-text !default;

$upload-success-bg: $success !default;
$upload-success-text: $success !default;

$upload-error-bg: $error !default;
$upload-error-text: $error !default;
$upload-error-border: lighten($error, 29%) !default;

$upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/upload/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/upload/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/upload/_layout.scss
@include exports("upload/layout") {

    .k-upload {
        border-width: $upload-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $upload-font-family;
        font-size: $upload-font-size;
        line-height: $upload-line-height;
        position: relative;
        display: block;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-upload-button {
            min-width: 7em;
        }

        // Drop zone
        .k-dropzone {
            padding: $upload-dropzone-padding-y $upload-dropzone-padding-x;
            border-width: 0;
            text-align: right;
            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-size: $font-size;
                line-height: $form-line-height;
                font-weight: normal;
                display: flex;
                align-items: center;
                position: relative;

                > .k-icon {
                    margin-right: $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: $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: $upload-item-padding-y $upload-item-padding-x calc(#{$upload-item-padding-y} + #{$upload-progress-thickness});
                border-width: 0 0 1px;
                border-style: solid;
                border-color: inherit;
                outline: none;
                display: flex;
                align-items: flex-start;
                position: relative;
            }
            .k-file:last-child {
                border-width: 0;
            }

            .k-filename {
                margin-left: $spacer-x;
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                position: relative;
            }

            .k-upload-status {
                .k-icon {
                    vertical-align: middle;
                }
            }

            .k-upload-pct {
                margin: 0 $upload-icon-spacing;
                font-weight: normal;
                vertical-align: middle;
            }

            ~ .k-clear-selected,
            ~ .k-upload-selected {
                margin-top: -$padding-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-information {
                display: block;
            }

            .k-file-name {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                position: relative;
            }

            .k-file-size,
            .k-file-information,
            .k-file-validation-message {
                font-size: $upload-validation-font-size;
                line-height: 1;
            }

            .k-file-extension-wrapper,
            .k-multiple-files-extension-wrapper,
            .k-file-invalid-extension-wrapper,
            .k-multiple-files-invalid-extension-wrapper {
                margin: ($upload-item-image-border / 2) 0;
                width: 24px;
                height: 34px;
                border-width: 2px;
                border-style: solid;
                font-size: $font-size * .57;
                text-transform: uppercase;
                box-sizing: content-box;
                position: absolute;
                top: $upload-item-padding-y;
            }

            .k-file-group-wrapper,
            .k-file-invalid-group-wrapper,
            .k-multiple-files-group-wrapper,
            .k-multiple-files-invalid-group-wrapper {

                .k-file-group {
                    font-size: $upload-group-icon-size;
                }

                .k-file-state {
                    position: absolute;
                }
            }

            .k-file-invalid-extension-wrapper,
            .k-multiple-files-invalid-extension-wrapper {
                font-size: 1.2em;
            }

            .k-multiple-files-extension-wrapper,
            .k-multiple-files-invalid-extension-wrapper {
                margin-top: $padding-y;
            }

            .k-file-state {
                visibility: hidden;
            }

            // Old icon rendering
            .k-file-invalid-extension-wrapper + .k-file-name-size-wrapper,
            .k-file-single > .k-file-extension-wrapper + .k-file-name-size-wrapper {
                // 24px - image width
                margin-left: calc( 24px + #{$spacer-x} );
                //34px - $upload-item-image-height; 2px - $upload-item-image-border;
                min-height: 34px + (2px * 2);
                display: block;
                overflow: hidden;
            }

            // Old icon rendering
            .k-multiple-files-invalid-extension-wrapper + .k-file-name-size-wrapper,
            .k-multiple-files-extension-wrapper + .k-file-name-size-wrapper {
                // 24px - image width
                margin-left: calc( 24px + #{$spacer-x} );
            }

            // Old icon rendering
            .k-file-extension-wrapper + .k-file-name-size-wrapper {
                margin-bottom: -2px;

                .k-file-size,
                .k-file-information,
                .k-file-validation-message {
                    font-size: $font-size-sm * .786;
                }
            }

            // Old icon rendering
            .k-file-extension-wrapper::before,
            .k-multiple-files-extension-wrapper::before,
            .k-multiple-files-extension-wrapper::after,
            .k-file-invalid-extension-wrapper::before,
            .k-multiple-files-invalid-extension-wrapper::before,
            .k-multiple-files-invalid-extension-wrapper::after {
                content: "";
                border-style: solid;
                display: inline-block;
                position: absolute;
            }

            // Old icon rendering
            .k-file-extension-wrapper::before,
            .k-multiple-files-extension-wrapper::before,
            .k-file-invalid-extension-wrapper::before,
            .k-multiple-files-invalid-extension-wrapper::before {
                top: -1px;
                right: -1px;
                width: 0;
                height: 0;
                border-width: 6px;
                margin-top: -1px;
                margin-right: -1px;
            }

            // Old icon rendering
            .k-multiple-files-extension-wrapper::after,
            .k-multiple-files-invalid-extension-wrapper::after {
                top: -6px;
                left: -6px;
                width: 15px;
                height: 35px;
                border-width: 2px 0 0 2px;
            }

            // Old icon rendering
            .k-file-extension,
            .k-file-invalid-icon {
                position: absolute;
                bottom: 0;
                line-height: normal;
            }

            // Old icon rendering
            .k-file-invalid-icon {
                margin-left: 4px;
            }

            .k-file-extension {
                margin-left: .2em;
                margin-bottom: .3em;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
                left: 0;
            }

            .k-upload-action {
                border-width: 0;
                color: inherit;
                background: none;
                box-shadow: none;
            }
        }

        .k-upload-files .k-file-name-size-wrapper {
            margin-left: 0;
            margin-right: 0;
            min-height: $upload-group-icon-size;
            display: block;
            overflow: hidden;
            flex: 1 0 0;
        }

        // old rendering
        .k-file-multiple > .k-file-name-size-wrapper {
            margin-left: $upload-item-padding-x;
        }

        .k-multiple-files-wrapper,
        .k-file-single > .k-file-name-size-wrapper,
        .k-file > .k-file-name-size-wrapper {
            margin-left: $padding-x;
            margin-right: 0;
            min-height: $upload-group-icon-size;
            display: block;
            overflow: hidden;
            flex: 1 0 0;
        }

        .k-multiple-files-wrapper {
            .k-file-name-size-wrapper {
                margin-bottom: $upload-multiple-items-spacing;
                display: block;
            }

            .k-file-information {
                margin-top: -($upload-multiple-items-spacing / 3);
            }
        }

        //old rendering
        .k-progress {
            height: $upload-progress-thickness;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .k-progressbar {
            height: $upload-progress-thickness;
            position: absolute;
            bottom: $upload-item-padding-y / 2;
            // successed
            width: calc(100% - #{$upload-item-padding-x}*2);

            .k-progress {
                position: absolute;
                width: 100%;
                max-width: 100%;
                height: 100%;
            }
        }

        .k-file-invalid > .k-progress {
            width: 100%;
        }


        // Action buttons
        .k-actions,
        .k-action-buttons {
            border-top-width: 1px;
        }

        // RTL styles
        &[dir = "rtl"],
        .k-rtl & {
            .k-dropzone  {
                text-align: left;

                .k-upload-status > .k-icon {
                    margin-left: $padding-y-lg;
                    margin-right: 0;
                }
            }

            .k-multiple-files-wrapper,
            .k-file-single > .k-file-name-size-wrapper,
            .k-file-multiple > .k-file-name-size-wrapper,
            .k-file > .k-file-name-size-wrapper {
                margin-right: $padding-x;
            }

            .k-button+.k-button {
                border-right-width: 0;
            }

            //old rendering
            .k-progress {
                left: auto;
                right: 0;
            }
        }
    }

    .k-upload-button {
        position: relative;
        overflow: hidden;
        direction: ltr;

        input {
            // font should not depend on outside styles, otherwise upload may break
            font: 170px monospace !important; // sass-lint:disable-block no-important
            margin: 0;
            padding: 0;
            filter: alpha(opacity=0);
            opacity: 0;
            cursor: pointer;
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: 1;
        }
        input[disabled],
        input.k-state-disabled {
            visibility: hidden;
        }
    }

    .k-ie9 {
        .k-upload-status-total {
            top: 1.5em;

            > .k-icon {
                margin-top: -3px;
            }
        }
    }

    // No flexbox variant for older browsers
    .k-no-flexbox {

        // Upload files list
        .k-upload-files {
            .k-file-multiple,
            .k-file-single {
                display: block;
                width: 100%;
            }

            .k-upload-status {
                position: absolute;
                right: $upload-item-padding-x;
                top: $upload-item-padding-y;
            }

            .k-file-group-wrapper,
            .k-file-invalid-group-wrapper,
            .k-multiple-files-group-wrapper,
            .k-multiple-files-invalid-group-wrapper {
                position: absolute;
                top: $upload-item-padding-y;
            }

            .k-multiple-files-wrapper,
            .k-file-single > .k-file-name-size-wrapper,
            .k-file > .k-file-name-size-wrapper {
                margin-left: calc( #{$upload-group-icon-size} + #{$padding-x} );
                margin-right: calc( (#{$button-calc-size} + #{$button-padding-x} * 2) + 2em );
            }
        }

        .k-dropzone {
            position: relative;
            text-align: left;

            .k-upload-button {
                display: inline-block;
            }

            .k-dropzone-hint,
            .k-upload-status-total {
                position: absolute;
                top: calc(#{$upload-dropzone-padding-y} + (#{$button-padding-x} / 2));
                right: $upload-dropzone-padding-x;
            }
        }

        // RTL styles
        [dir = "rtl"],
        .k-rtl {
            .k-dropzone-hint,
            .k-upload-status-total,
            .k-upload-files .k-upload-status {
                right: auto;
                left: $upload-dropzone-padding-x;
            }

            .k-multiple-files-wrapper,
            .k-file-single > .k-file-name-size-wrapper,
            .k-file > .k-file-name-size-wrapper {
                margin-left: calc( (#{$button-calc-size} + #{$button-padding-x} * 2) + 2em );
                margin-right: calc( #{$upload-group-icon-size} + #{$padding-x} );

            }
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/upload/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/upload/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/upload/_theme.scss
@include exports("upload/theme") {

    .k-upload {
        @include fill(
            $upload-text,
            $upload-bg,
            $upload-border
        );

        .k-dropzone {
            @include fill(
                $upload-dropzone-text,
                $upload-dropzone-bg,
                $upload-dropzone-border
            );

            &.k-dropzone-hover,
            &.k-dropzone-hovered {
                background-color: $upload-dropzone-hover-bg;
            }

            .k-upload-status,
            .k-dropzone-hint {
                color: $upload-dropzone-text;
                opacity: $upload-dropzone-text-opacity;
            }

        }

        .k-file {

            &.k-state-focused {
                box-shadow: inset $upload-focused-shadow;
            }

            .k-upload-action.k-state-focused {
                box-shadow: $upload-focused-shadow;
            }

        }

        .k-upload-status {
            color: $base-text;
        }

        // Upload status: uploading
        .k-file-progress {

            .k-file-name {
                color: $upload-progress-text;
            }
            .k-progress {
                background-color: $upload-progress-bg;
            }
        }


        // Upload status: success
        .k-file-success {
            .k-progress {
                background-color: $upload-success-bg;
            }
        }

        // Upload satus: error
        .k-file-error,
        .k-file-invalid {
            .k-file-validation-message {
                color: $upload-error-text;
            }
            .k-progress {
                background-color: $upload-error-bg;
            }
        }

        .k-file-extension-wrapper,
        .k-multiple-files-extension-wrapper,
        .k-file-group-wrapper,
        .k-multiple-files-group-wrapper,
        .k-file-invalid-extension-wrapper,
        .k-multiple-files-invalid-extension-wrapper,
        .k-file-invalid-group-wrapper,
        .k-multiple-files-invalid-group-wrapper {
            color: $upload-icon-color;
            border-color: $upload-icon-color;
        }

        // old rendering
        .k-file-invalid-extension-wrapper,
        .k-multiple-files-invalid-extension-wrapper,
        .k-file-error .k-file-extension-wrapper,
        .k-file-invalid-group-wrapper,
        .k-multiple-files-invalid-group-wrapper,
        .k-file-error .k-file-group-wrapper {
            border-color: $upload-icon-color;
        }

        // old rendering
        .k-file-extension-wrapper::before,
        .k-multiple-files-extension-wrapper::before,
        .k-file-invalid-extension-wrapper::before,
        .k-multiple-files-invalid-extension-wrapper::before,
        .k-file-error .k-file-extension-wrapper::before {
            background-color: $upload-bg;
            border-color: transparent transparent $upload-icon-color $upload-icon-color;
        }

        // old rendering
        .k-multiple-files-extension-wrapper::after,
        .k-multiple-files-invalid-extension-wrapper::after {
            border-top-color: $upload-icon-color;
            border-left-color: $upload-icon-color;
        }

        .k-file-size,
        .k-file-validation-message,
        .k-file-information {
            color: $upload-disabled-text;
        }

        .k-multiple-files-wrapper .k-file-information {
            color: $upload-text;
        }

        // Invalid,
        &.k-state-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            border-color: $invalid-border;
        }
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "dropzone/_index.scss"; -> /packages/bootstrap/scss/dropzone/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/dropzone/_variables.scss
// Dropzone
$dropzone-padding-x: map-get( $spacing, 2 ) !default;
$dropzone-padding-y: map-get( $spacing, 2 ) !default;
$dropzone-border-width: 1px !default;
$dropzone-min-height: 220px !default;

$dropzone-font-family: $font-family !default;
$dropzone-font-size: $font-size !default;
$dropzone-line-height: $line-height !default;

$dropzone-bg: contrast-wcag( $component-bg, $gray-100, $gray-900 ) !default;
$dropzone-text: $component-text !default;
$dropzone-border: $component-border !default;

$dropzone-icon-size: ( $icon-size * 3 ) !default;
$dropzone-icon-spacing: map-get( $spacing, 6 ) !default;
$dropzone-icon-text: try-tint( $dropzone-text, 8 ) !default;
$dropzone-icon-hover-text: $primary !default;

$dropzone-hint-font-size: null !default;
$dropzone-hint-spacing: map-get( $spacing, 2 ) !default;
$dropzone-hint-text: null !default;

$dropzone-note-font-size: $font-size-xs !default;
$dropzone-note-spacing: null !default;
$dropzone-note-text: try-tint( $dropzone-text, 8 ) !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/dropzone/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/dropzone/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/dropzone/_layout.scss
@include exports("dropzone/layout") {

    // Dropzone
    .k-external-dropzone {
        height: $dropzone-min-height;
        display: flex;
        flex-flow: row nowrap;
    }

    // Dropzpne inner
    .k-dropzone-inner {
        @include use-background-clip();
        padding: $dropzone-padding-y $dropzone-padding-x;
        border-width: $dropzone-border-width;
        border-style: solid;
        box-sizing: border-box;
        font-size: $dropzone-font-size;
        font-family: $dropzone-font-family;
        line-height: $dropzone-line-height;
        flex: 1 1 auto;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;

        > .k-icon,
        .k-dropzone-icon {
            margin-bottom: $dropzone-icon-spacing;
            font-size: $dropzone-icon-size;
        }

        .k-dropzone-hint {
            margin-bottom: $dropzone-hint-spacing;
            font-size: $dropzone-hint-font-size;
        }

        .k-dropzone-note {
            margin-bottom: $dropzone-note-spacing;
            font-size: $dropzone-note-font-size;
        }
    }


    // No flexbox
    .k-no-flexbox {
        .k-dropzone-inner {
            padding-top: ( $dropzone-padding-y * 6 );
            padding-bottom: ( $dropzone-padding-y * 6 );
            width: 100%;
            height: 100%;
        }

        .k-dropzone-hint,
        .k-dropzone-note {
            display: block;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/dropzone/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/dropzone/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/dropzone/_theme.scss
@include exports( "dropzone/theme" ) {

    // Dropzone
    .k-dropzone-inner {
        @include fill(
            $dropzone-text,
            $dropzone-bg,
            $dropzone-border
        );

        > .k-icon,
        .k-dropzone-icon {
            color: $dropzone-icon-text;
        }
        .k-dropzone-hint {
            color: $dropzone-hint-text;
        }
        .k-dropzone-note {
            color: $dropzone-note-text;
        }
    }


    // Hover
    .k-external-dropzone-hover {

        .k-icon,
        .k-dropzone-icon {
            color: $dropzone-icon-hover-text;
        }
    }

}

// #endregion

// #endregion

// #endregion


// Other forms
// #region @import "listbox/_index.scss"; -> /packages/bootstrap/scss/listbox/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../popup/_index.scss"; -> /packages/bootstrap/scss/popup/_index.scss
// #region @import /packages/bootstrap/scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/listbox/_variables.scss
// Listbox
$listbox-margin: 5px !default;
$listbox-button-margin: $padding-x !default;
$listbox-width: 12.4em !default;
$listbox-default-height: 200px !default;

$listbox-border-width: 1px !default;
$listbox-font-family: $font-family !default;
$listbox-font-size: $font-size !default;
$listbox-line-height: $line-height !default;

$listbox-bg: $panel-bg !default;
$listbox-text: $panel-text !default;
$listbox-border: $panel-border !default;

$listbox-item-padding-x: null !default;
$listbox-item-padding-y: null !default;

$listbox-drop-hint-border-width: null !default;
$listbox-drop-hint-width: 1px !default;

$listbox-drag-clue-padding-y: $list-item-padding-y !default;
$listbox-drag-clue-padding-x: $list-item-padding-x !default;
$listbox-drag-clue-line-height: $line-height-em !default;

$listbox-drag-clue-bg: $list-item-selected-bg !default;
$listbox-drag-clue-text: $list-item-selected-text !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/listbox/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/listbox/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/listbox/_layout.scss
@include exports( "listbox/layout" ) {

    .k-listbox {
        width: $listbox-width;
        height: $listbox-default-height;
        border-width: 0;
        outline: 0;
        font-family: $listbox-font-family;
        font-size: $listbox-font-size;
        line-height: $listbox-line-height;
        vertical-align: top;
        background-color: transparent;
        display: inline-flex;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-listbox-toolbar ul {
            display: flex;
        }

        &.k-listbox-toolbar-left,
        &.k-listbox-toolbar-right {
            .k-listbox-toolbar ul {
                flex-direction: column;
            }

            .k-listbox-toolbar li + li {
                margin-top: $listbox-button-margin;
            }
        }

        &.k-listbox-toolbar-left {
            flex-direction: row;

            .k-listbox-toolbar {
                margin-right: $listbox-margin;
            }
        }

        &.k-listbox-toolbar-right {
            flex-direction: row-reverse;

            .k-listbox-toolbar {
                margin-left: $listbox-margin;
            }
        }

        &.k-listbox-toolbar-top,
        &.k-listbox-toolbar-bottom {
            flex-direction: column;

            .k-listbox-toolbar ul {
                flex-direction: row;
            }

            .k-listbox-toolbar li + li {
                margin-left: $listbox-button-margin;
            }
        }

        &.k-listbox-toolbar-top {
            .k-listbox-toolbar {
                margin-bottom: $listbox-margin;
            }
        }

        &.k-listbox-toolbar-bottom {
            .k-listbox-toolbar {
                margin-top: $listbox-margin;
            }
        }

        .k-list-scroller {
            @include use-background-clip();
            width: 100%;
            border-width: $listbox-border-width;
            border-style: solid;
            box-sizing: border-box;
        }

        .k-drop-hint {
            border-top-width: $listbox-drop-hint-width;
            border-top-style: solid;
        }

        .k-ghost {
            opacity: .5;
        }

        .k-rtl &,
        &[dir="rtl"],
        [dir="rtl"] & {

            &.k-listbox-toolbar-left,
            &.k-listbox-toolbar-right {
                .k-listbox-toolbar {
                    transform: scaleX(-1);
                }
            }

            &.k-listbox-toolbar-left {
                .k-listbox-toolbar {
                    margin-right: 0;
                    margin-left: $listbox-margin;
                }
            }

            &.k-listbox-toolbar-right {
                .k-listbox-toolbar {
                    margin-right: $listbox-margin;
                    margin-left: 0;
                }
            }
        }
    }

    .k-item {
        cursor: default;
    }

    .k-item.k-drag-clue {
        @include border-radius( 0 );
        padding: $listbox-drag-clue-padding-y $listbox-drag-clue-padding-x;
        line-height: $listbox-drag-clue-line-height;
        border-width: 0;
        font-size: $font-size;
    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/listbox/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/listbox/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/listbox/_theme.scss
@include exports("listbox/theme") {

    .k-listbox {
        .k-list-scroller {
            @include fill(
                $listbox-text,
                $listbox-bg,
                $listbox-border
            );
        }
        .k-drop-hint {
            border-top-color: $primary;
        }
    }

    li.k-item.k-drag-clue {
        background-color: $listbox-drag-clue-bg;
        color: $listbox-drag-clue-text;
    }
}

// #endregion


// #endregion

// #endregion
// #region @import "slider/_index.scss"; -> /packages/bootstrap/scss/slider/_index.scss
// #region @import /packages/bootstrap/scss/slider/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "switch/_index.scss"; -> /packages/bootstrap/scss/switch/_index.scss
// #region @import /packages/bootstrap/scss/switch/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "rating/_index.scss"; -> /packages/bootstrap/scss/rating/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/rating/_variables.scss
// Rating
$rating-font-family: $font-family !default;
$rating-font-size: $font-size !default;
$rating-line-height: $line-height !default;

$rating-container-margin-x: $padding-x-sm !default;

$rating-item-padding-x: $padding-x-sm !default;
$rating-item-padding-y: $padding-y !default;

$rating-label-margin-x: $padding-x !default;
$rating-label-margin-y: $padding-y !default;
$rating-label-line-height: $line-height-lg !default;

$rating-icon-size: ($icon-size * 1.5) !default;

$rating-icon-text: try-lighten($base-text, 55%) !default;
$rating-icon-selected-text: $selected-bg !default;
$rating-icon-hover-text: $selected-bg !default;
$rating-icon-focused-text: $selected-bg !default;

$rating-icon-focused-shadow: 0 2px 3.6px rgba(black, .1) !default;
$rating-icon-focused-selected-shadow: 0 2px 3.6px rgba($selected-bg, .4) !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/rating/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/rating/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/rating/_layout.scss
@include exports("rating/layout") {

    .k-rating {
        margin: 0;
        padding: 0;
        border-width: 0;
        box-sizing: border-box;
        outline: 0;
        background: none;
        font-family: $rating-font-family;
        font-size: $rating-font-size;
        line-height: $rating-line-height;
        display: inline-flex;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;
    }

    .k-rating-container {
        flex: 0 1 auto;
        position: relative;
        box-sizing: border-box;
        margin: 0 $rating-container-margin-x;

        .k-rating-item {
            display: inline-flex;
            position: relative;
            padding: $rating-item-padding-y $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-icon {
                font-size: $rating-icon-size;
            }

            .k-rating-precision-part,
            .k-rating-precision-complement {
                display: inline-block;
                position: absolute;
                top: $rating-item-padding-y;
                left: $rating-item-padding-x;
                overflow: hidden;
            }

            .k-rating-precision-complement {
                direction: rtl;
            }
        }
    }

    .k-rating-label {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        line-height: $rating-label-line-height;
        margin: $rating-label-margin-y $rating-label-margin-x;
    }

    .k-ie9 {
        .k-rating-label,
        .k-rating-container,
        .k-rating-item {
            display: inline-block;
        }
    }

    .k-rtl,
    [dir="rtl"] {
        .k-rating-precision-part  {
            left: auto;
            right: $rating-item-padding-x;
        }

        .k-rating-item .k-rating-precision-complement {
            direction: ltr;
        }
    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/rating/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/rating/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/rating/_theme.scss
@include exports("rating/theme") {

    .k-rating {
        @extend .k-text-selection !optional;
        color: $component-text;

        &:focus,
        &.k-state-focused {

            .k-rating-item {
                > .k-icon {
                    text-shadow: $rating-icon-focused-shadow;
                }

                &.k-state-selected > .k-icon {
                    text-shadow: $rating-icon-focused-selected-shadow;
                }
            }
        }
    }

    .k-rating-item {
        color: $rating-icon-text;

        &.k-state-selected {
            color: $rating-icon-selected-text;

            &:focus,
            &.k-state-focused {
                color: $rating-icon-focused-text;
            }
        }

        &:hover,
        &.k-state-hover {
            color: $rating-icon-hover-text;
            cursor: pointer;
        }
    }
}


// #endregion

// #endregion

// #endregion


// Date time
// #region @import "calendar/_index.scss"; -> /packages/bootstrap/scss/calendar/_index.scss
// #region @import /packages/bootstrap/scss/calendar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Command interfaces
// #region @import "appbar/_index.scss"; -> /packages/bootstrap/scss/appbar/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/appbar/_variables.scss
// Appbar
$appbar-margin-y: null !default;
$appbar-margin-x: null !default;
$appbar-padding-y: map-get( $spacing, 2 ) !default;
$appbar-padding-x: map-get( $spacing, 4 ) !default;
$appbar-border-width: 0px !default;

$appbar-font-size: $font-size !default;
$appbar-line-height: $line-height !default;
$appbar-font-family: $font-family !default;
$appbar-gap: map-get( $spacing, 2 ) !default;

$appbar-light-bg: #ffffff !default;
$appbar-light-text: #6c757d !default;

$appbar-dark-bg: #343a40 !default;
$appbar-dark-text: rgba(#f8f9fa, .6) !default;

$appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16);
$appbar-bottom-box-shadow:  0px -1px 1px rgba(0, 0, 0, .16);

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/appbar/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/appbar/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/appbar/_layout.scss
@include exports("appbar/layout") {

    // Appbar
    .k-appbar {
        @include use-background-clip();
        margin: $appbar-margin-y $appbar-margin-x;
        padding: $appbar-padding-y $appbar-padding-x;
        border-width: $appbar-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $appbar-font-family;
        font-size: $appbar-font-size;
        line-height: $appbar-line-height;
        list-style: none;
        display: flex;
        gap: $appbar-gap;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        > * {
            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;
        }
    }

    .k-appbar-static {
        position: static;
    }

    .k-appbar-sticky {
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .k-appbar-fixed {
        width: 100%;
        position: fixed;
        z-index: 1;
    }

    .k-appbar-top {
        top: 0;
        bottom: auto;
    }

    .k-appbar-bottom {
        top: auto;
        bottom: 0;

        &.k-appbar-fixed {
            bottom: 0;
        }
    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/appbar/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/appbar/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/appbar/_theme.scss
@include exports("appbar/theme") {

    .k-appbar {
        @include box-shadow( $appbar-box-shadow );
    }
    .k-appbar-bottom {
        @include box-shadow( $appbar-bottom-box-shadow );
    }


    // AppBar theme colors
    @each $name, $color in $theme-colors {
        .k-appbar-#{$name} {
            @if $name == "light" {
                color: $appbar-light-text;
                background-color: $appbar-light-bg;
            } @else if $name == "dark" {
                color: $appbar-dark-text;
                background-color: $appbar-dark-bg;
            } @else {
                color: contrast-wcag( $color );
                background-color: $color;
            }
        }
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "menu/_index.scss"; -> /packages/bootstrap/scss/menu/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/menu/_variables.scss
// Menu
$menu-border-width: 0px !default;
$menu-font-family: $font-family !default;
$menu-font-size: $font-size !default;
$menu-line-height: $line-height !default;

$menu-bg: $header-bg !default;
$menu-text: $header-text !default;
$menu-border: $header-border !default;
$menu-gradient: null !default;

$menu-item-padding-x: $navbar-nav-link-padding-x !default;
$menu-item-padding-y: $nav-item-padding-y !default;
$menu-item-spacing: $nav-item-margin !default;
$menu-item-icon-spacing: $icon-spacing !default;

$menu-item-bg: null !default;
$menu-item-text: rgba( $menu-text, .5 ) !default;
$menu-item-border: null !default;
$menu-item-gradient: null !default;

$menu-item-hover-bg: null !default;
$menu-item-hover-text: rgba( $menu-text, .7 ) !default;
$menu-item-hover-border: null !default;
$menu-item-hover-gradient: null !default;

$menu-item-expanded-bg: null !default;
$menu-item-expanded-text: rgba( $menu-text, .9 ) !default;
$menu-item-expanded-border: null !default;
$menu-item-expanded-gradient: null !default;

$menu-item-focus-shadow: inset 0 0 0 3px rgba( $menu-text, .15 ) !default;

$menu-separator-spacing: 2px !default;

$menu-scroll-button-bg: $menu-bg !default;
$menu-scroll-button-text: rgba( $menu-text, .5 ) !default;
$menu-scroll-button-border: $menu-border !default;
$menu-scroll-button-gradient: null !default;

$menu-scroll-button-hover-bg: null !default;
$menu-scroll-button-hover-text: rgba( $menu-text, .7 ) !default;
$menu-scroll-button-hover-border: null !default;
$menu-scroll-button-hover-gradient: null !default;


// Menu popup
$menu-popup-padding-x: $popup-padding-x !default;
$menu-popup-padding-y: $popup-padding-y !default;
$menu-popup-border-width: $popup-border-width !default;
$menu-popup-font-size: $font-size !default;
$menu-popup-line-height: $line-height !default;

$menu-popup-bg: $popup-bg !default;
$menu-popup-text: $popup-text !default;
$menu-popup-border: $popup-border !default;
$menu-popup-gradient: null !default;

$menu-popup-item-padding-x: $list-item-padding-x !default;
$menu-popup-item-padding-y: $list-item-padding-y !default;
$menu-popup-item-padding-end: calc( #{$list-item-padding-x * 2} + #{$icon-size} ) !default;
$menu-popup-item-spacing: 0px !default;
$menu-popup-item-icon-spacing: $icon-spacing !default;

$menu-popup-item-bg: null !default;
$menu-popup-item-text: null !default;
$menu-popup-item-border: null !default;
$menu-popup-item-gradient: null !default;

$menu-popup-item-hover-bg: $list-item-hovered-bg !default;
$menu-popup-item-hover-text: $list-item-hovered-text !default;
$menu-popup-item-hover-border: null !default;
$menu-popup-item-hover-gradient: null !default;

$menu-popup-item-expanded-bg: $list-item-selected-bg !default;
$menu-popup-item-expanded-text: $list-item-selected-text !default;
$menu-popup-item-expanded-border: null !default;
$menu-popup-item-expanded-gradient: null !default;

$menu-popup-item-focus-shadow: $menu-item-focus-shadow !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/menu/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/menu/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/menu/_layout.scss
@include exports("menu/layout") {

    // Base
    .k-menu {
        @include use-background-clip();
        border-width: $menu-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $menu-font-family;
        font-size: $menu-font-size;
        line-height: $menu-line-height;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        position: relative;
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;
    }


    // Menu item
    .k-menu-item {
        border-width: 0;
        outline: 0;
        display: flex;
        flex: 0 0 auto;
        position: relative;
        user-select: none;
    }


    // Menu link
    .k-menu-link {
        padding: $menu-item-padding-y $menu-item-padding-x;
        outline: 0;
        color: inherit;
        display: flex;
        flex-direction: row;
        flex: 1 1 auto;
        align-items: center;
        position: relative;
        white-space: nowrap;
        cursor: pointer;

        > .k-icon:not(.k-menu-expand-arrow),
        > .k-image,
        > .k-sprite {
            margin-right: $menu-item-icon-spacing;
        }
    }


    // Expand arrow
    .k-menu-expand-arrow {
        margin-left: $icon-spacing;
        margin-right: -$icon-spacing;
        position: relative;
    }
    .k-menu-expand-arrow.k-i-arrow-60-left,
    .k-menu-expand-arrow.k-i-arrow-60-right {
        margin: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .k-menu-expand-arrow.k-i-arrow-60-right {
        right: $icon-spacing;
    }
    .k-menu-expand-arrow.k-i-arrow-60-left {
        left: $icon-spacing;
    }


    // Orientation -- horizontal
    .k-menu-horizontal {
        flex-direction: row;

        > .k-menu-item  + .k-menu-item {
            margin-left: $menu-item-spacing;
        }

        > .k-separator {
            margin: 0 $menu-separator-spacing;
            width: 0;
            height: auto;
            border-width: 0 0 0 1px;
            border-style: solid;
            flex-shrink: 0;
        }
    }


    // Orientation -- vertical
    .k-menu-vertical {
        flex-direction: column;

        > .k-menu-item + .k-menu-item {
            margin-top: $menu-item-spacing;
        }

        > .k-menu-item > .k-menu-link {
            padding: $menu-popup-item-padding-y $menu-popup-item-padding-x;
            padding-right: $menu-popup-item-padding-end;
        }

        > .k-separator {
            margin: $menu-separator-spacing 0;
            height: 0;
            border-width: 1px 0 0;
            border-style: solid;
            border-color: $panel-border;
            display: block;
        }
    }


    // Menu popup
    .k-menu-popup {
        border-width: $menu-popup-border-width;
        border-style: solid;
        overflow: auto;
        max-height: 80vh;
    }


    // Sub menu
    .k-menu-group {
        margin: 0;
        padding: $menu-popup-padding-y $menu-popup-padding-x;
        font-size: $menu-popup-font-size;
        line-height: $menu-popup-line-height;
        list-style: none;
        display: none;
        position: absolute;

        .k-menu-popup & {
            position: relative;
            display: flex;
            flex-direction: column;
        }

        // jquery popup overrides those
        .k-menu-item {
            font-size: $menu-popup-font-size;
            line-height: $menu-popup-line-height;
        }

        .k-menu-item + .k-menu-item {
            margin-top: $menu-popup-item-spacing;
        }

        .k-menu-link {
            padding: $menu-popup-item-padding-y $menu-popup-item-padding-x;
            padding-right: $menu-popup-item-padding-end;
        }

        .k-separator {
            margin: $menu-separator-spacing 0;
            height: 0;
            border-width: 1px 0 0;
            border-style: solid;
            border-color: $panel-border;
            display: block;
        }
    }


    // Context menu
    .k-popups-wrapper {
        position: relative;
        border: 0;
        margin: 0;
        padding: 0;
    }
    .k-context-menu {
        margin: 0;
        padding: $menu-popup-padding-y $menu-popup-padding-x;
        border-width: $menu-popup-border-width;
        border-style: solid;

        &.k-menu-horizontal {
            padding: $menu-popup-padding-x $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; // sass-lint:disable-line no-important
        flex-wrap: nowrap;
    }
    .k-context-menu-popup {
        z-index: 12000;

        > .k-popup:not(.k-menu-popup),
        .k-context-menu {
            border: 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;
            left: 0;
            height: 100%;
            width: 16px;
            border-right-width: 1px;
        }
        &.k-scroll-right {
            top: 0;
            right: 0;
            height: 100%;
            width: 16px;
            border-left-width: 1px;
        }
        &.k-scroll-up {
            top: 0;
            left: 0;
            width: 100%;
            height: 16px;
            border-bottom-width: 1px;
        }
        &.k-scroll-down {
            bottom: 0;
            left: 0;
            width: 100%;
            height: 16px;
            border-top-width: 1px;
        }
    }


    // RTL
    .k-rtl,
    [dir="rtl"] {

        .k-menu-link {
            > .k-icon:not(.k-menu-expand-arrow),
            > .k-image,
            > .k-sprite {
                margin-left: $menu-item-icon-spacing;
                margin-right: 0;
            }
        }

        .k-menu-expand-arrow.k-i-arrow-60-down {
            margin-left: -$icon-spacing;
            margin-right: $icon-spacing;
        }


        // Orientation -- horizontal
        .k-menu-horizontal {

            > .k-menu-item  + .k-menu-item {
                margin-right: $menu-item-spacing;
                margin-left: 0;
            }
        }


        // Orientation -- vertical
        .k-menu-vertical {

            > .k-menu-item > .k-menu-link {
                padding-right: $menu-popup-item-padding-x;
                padding-left: $menu-popup-item-padding-end;
            }
        }


        // Sub menu
        .k-menu-group {

            .k-menu-link {
                padding-right: $menu-popup-item-padding-x;
                padding-left: $menu-popup-item-padding-end;
            }

        }

    }

}

// #endregion

@include exports("menu/layout/bootstrap") {

    .k-menu.k-menu-horizontal:not(.k-context-menu) {
        padding: $navbar-padding-y $navbar-padding-x;
    }
    .k-menu.k-menu-vertical:not(.k-context-menu) {
        padding: $navbar-padding-y 0;
    }

    .k-menu-group,
    .k-menu-vertical {

        .k-menu-popup & {
            padding: 0;
        }
    }

    .k-context-menu-popup {
        > .k-popup:not(.k-menu-popup) {
            padding: 0;
        }

        .k-context-menu {
            @include border-radius( $border-radius );
        }

        .k-header {
            font-size: inherit;
            font-weight: inherit;
        }
    }
}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/menu/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/menu/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/menu/_theme.scss
@include exports("menu/theme") {

    .k-menu:not(.k-context-menu) {
        @include fill(
            $menu-text,
            $menu-bg,
            $menu-border,
            $menu-gradient
        );

        > .k-item {
            @include fill(
                $menu-item-text,
                $menu-item-bg,
                $menu-item-border,
                $menu-item-gradient
            );

            &:hover,
            &.k-state-hover {
                @include fill(
                    $menu-item-hover-text,
                    $menu-item-hover-bg,
                    $menu-item-hover-border,
                    $menu-item-hover-gradient
                );
            }

            > .k-state-active {
                @include fill(
                    $menu-item-expanded-text,
                    $menu-item-expanded-bg,
                    $menu-item-expanded-border,
                    $menu-item-expanded-gradient
                );
            }

            &:focus,
            &.k-state-focused {
                @include box-shadow( $menu-item-focus-shadow );
            }
        }
    }

    .k-menu-group,
    .k-menu.k-context-menu {
        @include fill(
            $menu-popup-text,
            $menu-popup-bg,
            $menu-popup-border,
            $menu-popup-gradient
        );

        .k-item {
            @include fill(
                $menu-popup-item-text,
                $menu-popup-item-bg,
                $menu-popup-item-border,
                $menu-popup-item-gradient
            );

            &:hover,
            &.k-state-hover {
                @include fill(
                    $menu-popup-item-hover-text,
                    $menu-popup-item-hover-bg,
                    $menu-popup-item-hover-border,
                    $menu-popup-item-hover-gradient
                );
            }

            > .k-state-active {
                @include fill(
                    $menu-popup-item-expanded-text,
                    $menu-popup-item-expanded-bg,
                    $menu-popup-item-expanded-border,
                    $menu-popup-item-expanded-gradient
                );
            }

            &:focus,
            &.k-state-focused {
                @include box-shadow( $menu-popup-item-focus-shadow );
            }
        }
    }


    // Scrolling
    .k-menu-scroll-button {
        @include fill(
            $menu-scroll-button-text,
            $menu-scroll-button-bg,
            $menu-scroll-button-border,
            $menu-scroll-button-gradient
        );

        &:hover {
            @include fill(
                $menu-scroll-button-hover-text,
                $menu-scroll-button-hover-bg,
                $menu-scroll-button-hover-border,
                $menu-scroll-button-hover-gradient
            );

            &::before {
                opacity: 0;
            }
        }
    }
}

// #endregion

@include exports("menu/theme/bootstrap") {

    .k-context-menu-popup {
        .k-header {
            color: inherit;
        }
    }

}

// #endregion

// #endregion
// #region @import "toolbar/_index.scss"; -> /packages/bootstrap/scss/toolbar/_index.scss
// #region @import /packages/bootstrap/scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Popups and modals
// #region @import "dialog/_index.scss"; -> /packages/bootstrap/scss/dialog/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../window/_index.scss"; -> /packages/bootstrap/scss/window/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../forms/_index.scss"; -> /packages/bootstrap/scss/forms/_index.scss
// #region @import /packages/bootstrap/scss/forms/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../action-buttons/_index.scss"; -> /packages/bootstrap/scss/action-buttons/_index.scss
// #region @import /packages/bootstrap/scss/action-buttons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/window/_variables.scss
// #region @import /packages/bootstrap/scss/window/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/window/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/window/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/window/_layout.scss
@include exports("window/layout") {

    .k-window {
        @include use-background-clip();
        @include border-radius( $window-border-radius );
        padding: 0;
        border-width: $window-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $window-font-family;
        font-size: $window-font-size;
        line-height: $window-line-height;
        display: inline-flex;
        flex-direction: column;
        position: absolute;
        z-index: 10002;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-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 $window-sizes {
        .k-window-#{$size} { width: $width; }
    }


    // Title bar
    .k-window-titlebar {
        @include use-background-clip();
        @include border-top-radius( $window-border-radius );
        padding: $window-titlebar-padding-y $window-titlebar-padding-x;
        border-width: $window-titlebar-border-width;
        border-style: $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 {
        margin: $window-title-spacing;
        font-size: $window-title-font-size;
        line-height: $window-title-line-height;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: default;
        flex: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        &::before {
            content: "\200b";
        }
    }


    // Actions
    .k-window-actions {
        margin: calc( -1 * ( #{$button-padding-y} + #{$button-border-width} ) );
        line-height: 1;
        display: flex;
        flex-direction: row;
        flex-shrink: 0;
        align-items: center;
        vertical-align: top;
    }


    // Content
    .k-window-content,
    .k-prompt-container {
        padding: $window-inner-padding-y $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: -($window-inner-padding-y / 2);
    }

    .k-window-iframecontent {
        padding: 0;
        overflow: visible;

        .k-content-frame {
            vertical-align: top;
            border: 0;
            width: 100%;
            height: 100%;
        }
    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/window/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/window/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/window/_theme.scss
@include exports("window/theme") {

    // Window
    .k-window {
        @extend .k-text-selection !optional;
        @include fill(
            $window-text,
            $window-bg,
            $window-border
        );
        @include box-shadow( $window-shadow );
    }

    .k-window {
        &:focus,
        &.k-state-focused {
            @include box-shadow( $window-focused-shadow );
        }
    }


    // Titlebar
    .k-window-titlebar {
        @include fill(
            $window-titlebar-text,
            $window-titlebar-bg,
            $window-titlebar-border
        );
    }

}

// #endregion

@include exports("window/theme/bootstrap") {

    // Window actions
    .k-window-actions {
        margin-top: -$window-titlebar-padding-y;
        margin-bottom: -$window-titlebar-padding-y;
    }
    .k-window-action {
        margin: 0 0 0 ( $spacer / 2 );
        padding: $window-titlebar-padding-y $window-titlebar-padding-x;
        width: 1em;
        height: 1em;
        border-width: 0;
        opacity: .5;

        // fix: IE 11 tends to displace the buttons, so we remove the padding
        .k-ie & {
            padding: 0;
            line-height: 1;
        }
    }
    .k-window-action:hover {
        opacity: .75;
    }
    .k-button.k-window-action {
        &::before,
        &::after {
            display: none;
        }
    }

}




@include exports("popup-edit-form/layout") {

    .k-popup-edit-form .k-edit-buttons {
        border-color: $window-titlebar-border;
    }

}

// #endregion

// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/dialog/_variables.scss
// Dialog
$dialog-titlebar-bg: null !default;
$dialog-titlebar-text: null !default;
$dialog-titlebar-border: null !default;

$dialog-buttongroup-padding-x: $window-inner-padding-x !default;
$dialog-buttongroup-padding-y: $window-inner-padding-y !default;
$dialog-buttongroup-border-width: 1px !default;

$dialog-button-gap: .5rem !default;

$dialog-stretched-button-padding-x: $button-padding-x !default;
$dialog-stretched-button-padding-y: $button-padding-y !default;
$dialog-stretched-button-border-width: $button-border-width !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/dialog/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/dialog/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/dialog/_layout.scss
@include exports("dialog/layout") {

    .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 {}

    .k-dialog-close {
        align-self: flex-end;
    }


    // Actions
    .k-dialog-actions {}
    .k-dialog-action {}


    // Content
    .k-dialog-content {}


    // Buttons
    .k-dialog-buttongroup {
        @include border-bottom-radius( $window-border-radius );
        padding: $dialog-buttongroup-padding-y $dialog-buttongroup-padding-x;
        border-width: $dialog-buttongroup-border-width 0 0;
        border-style: solid;
        border-color: inherit;
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        overflow: hidden;

        .k-button {
            // Kendo UI for jQuery sets inline width
            width: auto !important; // sass-lint:disable-line no-important
            max-width: 100%;
        }

        .k-button ~ .k-button {
            margin-left: $dialog-button-gap;

            .k-rtl &,
            [dir="rtl"] & {
                margin-left: 0;
                margin-right: $dialog-button-gap;
            }
        }
    }


    // Needed for the jQuery buttonLayout configuration:
    // https://docs.telerik.com/kendo-ui/api/javascript/ui/dialog/configuration/buttonlayout
    .k-dialog-button-layout-stretched {
        padding: 0;
        align-items: stretch;

        .k-button {
            @include border-radius( 0 );
            padding: $dialog-stretched-button-padding-y $dialog-stretched-button-padding-x;
            border-width: 0;
            text-overflow: ellipsis;
            flex: 1 0 0%;
            display: inline-block; // needed for ellipsis overflow
            overflow: hidden;
        }

        .k-button ~ .k-button {
            margin: 0;
            border-left-width: $dialog-stretched-button-border-width;

            .k-rtl &,
            [dir="rtl"] & {
                margin: 0;
                border-left-width: 0;
                border-right-width: $dialog-stretched-button-border-width;
            }
        }
    }

    // Kendo UI for jQuery uses these styles
    .k-window-sm .k-dialog-button-layout-stretched {
        flex-direction: column;

        .k-button {
            flex: 0 0 auto;
            padding: ($dialog-stretched-button-padding-x / 2) ($dialog-stretched-button-padding-x / 2);
        }

        .k-button ~ .k-button {
            border-width: 0;
            border-top-width: $dialog-stretched-button-border-width;
        }
    }
    .k-window-md .k-dialog-button-layout-stretched {

        .k-button {
            padding: ($dialog-stretched-button-padding-x * .75) ($dialog-stretched-button-padding-x * .75);
        }
    }


    // No flexbox variant for older browsers
    .k-no-flexbox {

        .k-dialog-buttongroup {
            display: block;
            text-align: right;
        }

        .k-window-sm .k-dialog-button-layout-stretched {
            .k-button {
                display: block;
            }
        }

        .k-rtl,
        [dir="rtl"] {

            .k-dialog-buttongroup {
                text-align: left;
            }
        }

    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/dialog/_theme.scss
@include exports("dialog/theme") {

    .k-dialog {}

    // Titlebar
    .k-dialog-titlebar {
        @include fill(
            $dialog-titlebar-text,
            $dialog-titlebar-bg,
            $dialog-titlebar-border
        );
    }

    // Buttons
    .k-dialog-buttongroup {
        border-color: $window-titlebar-border;
    }

}

// #endregion

// #endregion
// #region @import "drawer/_index.scss"; -> /packages/bootstrap/scss/drawer/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../toolbar/_index.scss"; -> /packages/bootstrap/scss/toolbar/_index.scss
// #region @import /packages/bootstrap/scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/drawer/_variables.scss
// Drawer
$drawer-bg: $body-bg !default;
$drawer-text: $body-text !default;
$drawer-border: $component-border !default;
$drawer-border-width: 1px !default;
$drawer-font-family: $font-family !default;
$drawer-font-size: $font-size !default;
$drawer-line-height: $line-height !default;
$drawer-content-padding-x: $padding-x !default;
$drawer-content-padding-y: $padding-y !default;

$drawer-scrollbar-width: 7px !default;
$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
$drawer-scrollbar-bg: #dedede !default;
$drawer-scrollbar-radius: 20px !default;
$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;

$drawer-item-padding-x: $padding-x !default;
$drawer-item-padding-y: $padding-y !default;
$drawer-item-font-size: 16px !default;
$drawer-item-line-height: $line-height-lg !default;
$drawer-icon-size: $icon-size !default;

$drawer-mini-initial-width: calc(2 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;

$drawer-hovered-bg: $hovered-bg !default;
$drawer-hovered-text: $hovered-text !default;

$drawer-focused-bg: $hovered-bg !default;
$drawer-focused-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .15) !default;

$drawer-selected-bg: $selected-bg !default;
$drawer-selected-text: $selected-text !default;
$drawer-selected-hover-bg: try-darken( $selected-bg, 7.5% ) !default;
$drawer-selected-hover-text: $selected-text !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/drawer/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/drawer/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/drawer/_layout.scss
@include exports("drawer/layout") {

    .k-drawer-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    kendo-drawer.k-drawer,
    kendo-drawer .k-drawer-wrapper {
        transition: none;
    }
    .k-drawer {
        height: 100%;
        border-width: 0;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $drawer-font-family;
        font-size: $drawer-font-size;
        line-height: $drawer-line-height;
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        transition: all 300ms ease-in-out; // sass-lint:disable-line no-transition-all
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        // Borders
        .k-drawer-mini &.k-drawer-start,
        .k-drawer-expanded &.k-drawer-start,
        .k-drawer-left.k-drawer-mini &,
        .k-drawer-left.k-drawer-expanded & {
            border-right-width: $drawer-border-width;
        }
        .k-drawer-mini &.k-drawer-end,
        .k-drawer-expanded &.k-drawer-end,
        .k-drawer-right.k-drawer-mini &,
        .k-drawer-right.k-drawer-expanded & {
            border-left-width: $drawer-border-width;
        }

        // Position
        &.k-drawer-start,
        .k-drawer-left & {
            top: 0;
            left: 0;
        }
        &.k-drawer-end,
        .k-drawer-right & {
            top: 0;
            right: 0;
        }
    }
    .k-drawer-content {
        flex: 1 1 auto;
    }


    // Overlay drawer
    .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;
        }


        // right drawer
        .k-drawer.k-drawer-end,
        &.k-drawer-right .k-drawer {
            order: 1;
        }

    }


    // Drawer items
    .k-drawer-wrapper {
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin; // Scrollbar styles for Mozilla
        transition: all 300ms ease-in-out; // sass-lint:disable-line no-transition-all

        // Scrollbar styles for Chrome, Safari and Opera
        &::-webkit-scrollbar {
            width: $drawer-scrollbar-width;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: $drawer-scrollbar-radius;
        }
    }
    .k-drawer-items,
    .k-drawer-items ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .k-drawer-item {
        padding: $drawer-item-padding-y $drawer-item-padding-x;
        outline: 0;
        color: inherit;
        font-size: $drawer-item-font-size;
        line-height: $drawer-item-line-height;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        cursor: pointer;

        > .k-drawer-link {
            margin: (-$drawer-item-padding-y) (-$drawer-item-padding-x);
            padding: $drawer-item-padding-y $drawer-item-padding-x;
            color: inherit;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            flex: 1 0 auto;
        }

        .k-icon {
            margin: 0 $drawer-item-padding-x;
            height: auto;
            font-size: $drawer-icon-size;
            line-height: $drawer-item-line-height;
            flex-shrink: 0;
        }

        .k-item-text {
            padding: 0 $drawer-item-padding-x;
            display: inline-block;
            white-space: nowrap;
        }
    }
    .k-drawer-separator {
        padding: 0;
        height: 1px;
    }



    // Mini mode
    .k-drawer-mini {

        .k-drawer-wrapper {
            width: $drawer-mini-initial-width;
        }

    }


    .k-rtl,
    [dir="rtl"] {

        // Borders
        &.k-drawer-mini .k-drawer-start,
        .k-drawer-mini .k-drawer-start,
        .k-drawer-expanded .k-drawer-start,
        &.k-drawer-expanded .k-drawer-start {
            border-left-width: $drawer-border-width;
            border-right-width: 0;
        }
        &.k-drawer-mini .k-drawer-end,
        .k-drawer-mini .k-drawer-end,
        &.k-drawer-expanded .k-drawer-end
        .k-drawer-expanded .k-drawer-end {
            border-left-width: 0;
            border-right-width: $drawer-border-width;
        }

        // Position
        &.k-drawer-overlay .k-drawer-start,
        .k-drawer-overlay .k-drawer-start {
            left: auto;
            right: 0;
        }
        &.k-drawer-overlay .k-drawer-end,
        .k-drawer-overlay .k-drawer-end {
            left: 0;
            right: auto;
        }

        // Order
        .k-drawer-left.k-drawer-push .k-drawer {
            order: 1;
        }
        .k-drawer-right.k-drawer-push .k-drawer {
            order: 0;
        }
    }
}

// #endregion

@include exports( "drawer/layout/bootstrap" ) {
    .k-drawer-container {
        .k-drawer-items {

            .k-item-text {
                padding: 0;
            }

            .k-icon {
                margin: 0;

                & + .k-item-text {
                    padding-left: $drawer-item-padding-x;
                }
            }
        }

        .k-rtl & .k-drawer-items,
        [dir="rtl"] & .k-drawer-items,
        &[dir="rtl"] {
            .k-icon + .k-item-text {
                padding-left: 0;
                padding-right: $drawer-item-padding-x;
            }
        }
    }
}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/drawer/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/drawer/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/drawer/_theme.scss
@include exports("drawer/theme") {

    .k-drawer {
        @extend .k-text-selection !optional;
        @include fill(
            $drawer-text,
            $drawer-bg,
            $drawer-border
        );
    }

    // Drawer items
    .k-drawer-wrapper {
        scrollbar-color: $drawer-scrollbar-color $drawer-scrollbar-bg;

        &::-webkit-scrollbar-track {
            background: $drawer-scrollbar-bg;
        }
        &::-webkit-scrollbar-thumb {
            background: $drawer-scrollbar-color;
        }
        &::-webkit-scrollbar-thumb:hover {
            background: $drawer-scrollbar-hovered-color;
        }
    }
    .k-drawer-item {

        &:hover,
        &.k-state-hover {
            color: $drawer-hovered-text;
            background-color: $drawer-hovered-bg;
        }

        &:focus,
        &.k-state-focused {
            background-color: $drawer-focused-bg;
            box-shadow: $drawer-focused-shadow;

            &:hover,
            &.k-state-hover {
                color: $drawer-hovered-text;
                background-color: $drawer-hovered-bg;
            }
        }

        &.k-state-selected {
            color: $drawer-selected-text;
            background-color: $drawer-selected-bg;

            &:hover,
            &.k-state-hover {
                color: $drawer-selected-hover-text;
                background-color: $drawer-selected-hover-bg;
            }
        }
    }
    .k-drawer-separator {
        background-color: $drawer-border;
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "notification/_index.scss"; -> /packages/bootstrap/scss/notification/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../popup/_index.scss"; -> /packages/bootstrap/scss/popup/_index.scss
// #region @import /packages/bootstrap/scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/notification/_variables.scss
// Notification
$notification-padding-x: $alert-padding-x !default;
$notification-padding-y: $alert-padding-y !default;
$notification-border-width: $alert-border-width !default;
$notification-border-radius: $alert-border-radius !default;

$notification-shadow: $popup-shadow !default;

$notification-font-family: $font-family !default;
$notification-font-size: $font-size-sm !default;
$notification-line-height: $line-height !default;

$notification-icon-offset: 3px !default;
$notification-icon-spacing: $icon-spacing !default;

$notification-bg: $component-bg !default;
$notification-text: $component-text !default;
$notification-border: $component-border !default;
$notification-info-bg: tint($info, 10) !default;
$notification-info-text: shade($info, 6) !default;
$notification-info-border: tint($info, 9) !default;
$notification-success-bg: tint($success, 10) !default;
$notification-success-text: shade($success, 6) !default;
$notification-success-border: tint($success, 9) !default;
$notification-warning-bg: tint($warning, 10) !default;
$notification-warning-text: shade($warning, 6) !default;
$notification-warning-border: tint($warning, 9) !default;
$notification-error-bg: tint($error, 10) !default;
$notification-error-text: shade($error, 6) !default;
$notification-error-border: tint($error, 9) !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/notification/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/notification/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/notification/_layout.scss
@include exports("notification/layout") {

    // Base
    .k-notification-group {
        position: fixed;
        display: inline-flex;
        flex-wrap: wrap;
        max-height: 100%;
        flex-direction: column-reverse;
    }

    .k-notification-container {
        margin: ($notification-padding-y / 2) 0;
        display: inline-flex;
        vertical-align: top;

        &-animating {
            overflow: hidden;
        }
    }

    .k-notification {
        @include border-radius( $notification-border-radius );
        padding: $notification-padding-y $notification-padding-x;
        border-width: $notification-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $notification-font-family;
        font-size: $notification-font-size;
        line-height: $notification-line-height;
        cursor: default;
        position: relative;
        display: block;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;
    }

    .k-notification-wrap {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        > .k-icon {
            margin-top: $notification-icon-offset;
            margin-right: $notification-icon-spacing;
            flex: 0 0 auto;
        }

        > .k-i-close {
            margin-right: 0;
            margin-left: $notification-icon-spacing;
            flex: 0 0 auto;
            cursor: pointer;
        }

        > .k-notification-content {
            flex: 1 1 auto;
        }
    }

    // RTL
    .k-rtl .k-notification,
    [dir="rtl"] .k-notification {

        .k-notification-wrap {

            > .k-icon {
                margin-right: 0;
                margin-left: $notification-icon-spacing;
            }

            > .k-i-close {
                margin-left: 0;
                margin-right: $notification-icon-spacing;
            }
        }
    }

}




@include exports("notification/layout/ie9") {


    .k-ie9 .k-notification-wrap {
        white-space: nowrap;

        > .k-icon {
            vertical-align: top;
        }

        > .k-notification-content {
            display: inline-block;
            vertical-align: middle;
            white-space: normal;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/notification/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/notification/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/notification/_theme.scss
@include exports("notification/theme") {

    // Theme
    .k-notification {
        @extend .k-text-selection !optional;
        @include fill(
            $notification-text,
            $notification-bg,
            $notification-border
        );
    }
    .k-notification-wrap {
        > .k-i-close {
            color: inherit;
        }
    }
    .k-notification-group .k-notification {
        box-shadow: $notification-shadow;
    }
    .k-notification-info {
        @include fill(
            $notification-info-text,
            $notification-info-bg,
            $notification-info-border
        );
    }
    .k-notification-success {
        @include fill(
            $notification-success-text,
            $notification-success-bg,
            $notification-success-border
        );
    }
    .k-notification-warning {
        @include fill(
            $notification-warning-text,
            $notification-warning-bg,
            $notification-warning-border
        );
    }
    .k-notification-error {
        @include fill(
            $notification-error-text,
            $notification-error-bg,
            $notification-error-border
        );
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "popup/_index.scss"; -> /packages/bootstrap/scss/popup/_index.scss
// #region @import /packages/bootstrap/scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "responsivepanel/_index.scss"; -> /packages/bootstrap/scss/responsivepanel/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/responsivepanel/_variables.scss
// Responsive panel

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/responsivepanel/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/responsivepanel/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/responsivepanel/_layout.scss
@include exports("responsivepanel/layout") {

    .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;
        // sass-lint:disable no-important
        overflow: visible !important;
        // sass-lint:enable no-important
    }

    // Toggle button
    .k-rpanel-toggle {
        touch-action: manipulation;
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/responsivepanel/_theme.scss
@include exports("responsivepanel/theme") {

    .k-rpanel {}

}

// #endregion

// #endregion
// #region @import "tooltip/_index.scss"; -> /packages/bootstrap/scss/tooltip/_index.scss
// #region @import /packages/bootstrap/scss/tooltip/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "window/_index.scss"; -> /packages/bootstrap/scss/window/_index.scss
// #region @import /packages/bootstrap/scss/window/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Navigation
// #region @import "breadcrumb/_index.scss"; -> /packages/bootstrap/scss/breadcrumb/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/breadcrumb/_variables.scss
// Breadcrumb
$breadcrumb-margin-x: null !default;
$breadcrumb-margin-y: null !default;
$breadcrumb-padding-x: null !default;
$breadcrumb-padding-y: null !default;
$breadcrumb-border-width: 0px !default;

$breadcrumb-font-family: $font-family !default;
$breadcrumb-font-size: $font-size !default;
$breadcrumb-line-height: $line-height !default;

$breadcrumb-bg: $breadcrumb-bg !default;
$breadcrumb-text: $component-text !default;
$breadcrumb-border: $component-border !default;

$breadcrumb-delimiter-icon-font-size: $icon-size * .75 !default;
$breadcrumb-delimiter-icon-padding-x: $button-padding-y !default;
$breadcrumb-delimiter-icon-padding-y: 0px !default;

$breadcrumb-link-padding-x: $padding-x-lg / 2 !default;
$breadcrumb-link-padding-y: $padding-y !default;
$breadcrumb-link-border-radius: $border-radius !default;

$breadcrumb-icon-link-padding-x: $breadcrumb-link-padding-x !default;
$breadcrumb-icon-link-padding-y: $breadcrumb-icon-link-padding-x !default;

$breadcrumb-root-link-spacing: $breadcrumb-link-padding-x !default;
$breadcrumb-link-icon-spacing: $icon-spacing !default;

$breadcrumb-link-text: $link-text !default;
$breadcrumb-link-bg: null !default;
$breadcrumb-link-border: null !default;

$breadcrumb-link-hovered-text: $link-hover-text !default;
$breadcrumb-link-hovered-bg: try-darken( $hovered-bg, 1% ) !default;
$breadcrumb-link-hovered-border: null !default;

$breadcrumb-link-focused-text: $link-text !default;
$breadcrumb-link-focused-bg: null !default;
$breadcrumb-link-focused-border: null !default;
$breadcrumb-link-focused-shadow: inset 0 0 0 3px rgba($component-text, .25) !default;

$breadcrumb-root-link-text: inherit !default;
$breadcrumb-root-link-bg: null !default;
$breadcrumb-root-link-border: null !default;

$breadcrumb-root-link-hovered-text: null !default;
$breadcrumb-root-link-hovered-bg: try-darken( $hovered-bg, 1% ) !default;
$breadcrumb-root-link-hovered-border: null !default;

$breadcrumb-root-link-focused-text: null !default;
$breadcrumb-root-link-focused-bg: null !default;
$breadcrumb-root-link-focused-border: null !default;
$breadcrumb-root-link-focused-shadow: $breadcrumb-link-focused-shadow !default;

$breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/breadcrumb/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/breadcrumb/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/breadcrumb/_layout.scss
@include exports( "breadcrumb/layout" ) {

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

        // Items
        .k-breadcrumb-container {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            overflow: hidden;

            &.k-flex-wrap {
                flex-wrap: wrap;
            }
        }

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

        .k-breadcrumb-root-item {
            flex: 1 0 auto;

            &.k-flex-none {
                flex: none;
            }
        }

        .k-breadcrumb-link,
        .k-breadcrumb-root-link {
            @include border-radius( $breadcrumb-link-border-radius );
            padding: $breadcrumb-link-padding-y $breadcrumb-link-padding-x;
            position: relative;
            display: inline-flex;
            align-items: center;
            align-self: stretch;
            overflow: hidden;
            white-space: nowrap;
            text-decoration: none;
            outline: none;
        }

        .k-breadcrumb-root-link {
            margin-right: $breadcrumb-root-link-spacing;
        }

        .k-breadcrumb-link > .k-image,
        .k-breadcrumb-icontext-link .k-icon {
            margin-right: $breadcrumb-link-icon-spacing;
        }

        .k-breadcrumb-icon-link {
            padding: $breadcrumb-icon-link-padding-y $breadcrumb-icon-link-padding-x;
        }

        .k-breadcrumb-delimiter-icon {
            font-size: $breadcrumb-delimiter-icon-font-size;
            opacity: $disabled-opacity;
        }

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

        .k-textbox {
            width: 100%;
            height: 100%;
        }

        &.k-breadcrumb-wrap {
            .k-breadcrumb-root-item-container {
                margin: 0;
                padding: 0;
                list-style: none;
                overflow: hidden;

                display: flex;
                align-items: flex-start;
                flex: 0 0 auto;
            }
        }
    }

    .k-ie9 {
        .k-breadcrumb,
        .k-breadcrumb-container {
            display: block;
        }

        .k-breadcrumb-item {
            display: inline-block;
        }
    }

    @include exports("breadcrumb/layout/rtl") {

        .k-breadcrumb {
            &[dir="rtl"],
            .k-rtl & {
                .k-breadcrumb-root-link {
                    margin-right: 0;
                    margin-left: $breadcrumb-root-link-spacing;
                }

                .k-breadcrumb-link > .k-image,
                .k-breadcrumb-icontext-link .k-icon {
                    margin-right: 0;
                    margin-left: $breadcrumb-link-icon-spacing;
                }
            }
        }

    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/breadcrumb/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/breadcrumb/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/breadcrumb/_theme.scss
@include exports( "breadcrumb/theme" ) {

    // Breadcrumb
    .k-breadcrumb {
        @extend .k-text-selection !optional;
        @include fill(
            $breadcrumb-text,
            $breadcrumb-bg,
            $breadcrumb-border
        );

        &:focus,
        &.k-state-focused {
            box-shadow: $breadcrumb-focused-shadow;
        }

        .k-breadcrumb-link {
            @include fill(
                $breadcrumb-link-text,
                $breadcrumb-link-bg,
                $breadcrumb-link-border
            );
            transition: $transition;

            // Hovered state
            &:hover,
            &.k-state-hover {
                @include fill(
                    $breadcrumb-link-hovered-text,
                    $breadcrumb-link-hovered-bg,
                    $breadcrumb-link-hovered-border
                );
            }

            // Focused state
            &:focus,
            &.k-state-focused {
                @include fill(
                    $breadcrumb-link-focused-text,
                    $breadcrumb-link-focused-bg,
                    $breadcrumb-link-focused-border
                );
                @include box-shadow( $breadcrumb-link-focused-shadow );
            }
        }

        .k-breadcrumb-root-link {
            @include fill(
                $breadcrumb-root-link-text,
                $breadcrumb-root-link-bg,
                $breadcrumb-root-link-border
            );
            transition: $transition;

            // Hovered state
            &:hover,
            &.k-state-hover {
                @include fill(
                    $breadcrumb-root-link-hovered-text,
                    $breadcrumb-root-link-hovered-bg,
                    $breadcrumb-root-link-hovered-border
                );
            }

            // Focused state
            &:focus,
            &.k-state-focused {
                @include fill(
                    $breadcrumb-root-link-focused-text,
                    $breadcrumb-root-link-focused-bg,
                    $breadcrumb-root-link-focused-border
                );
                @include box-shadow( $breadcrumb-root-link-focused-shadow );
            }
        }

        .k-breadcrumb-root-link,
        .k-breadcrumb-delimiter-icon {
            color: inherit;
        }

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

}

// #endregion

// #endregion

// #endregion
// #region @import "pager/_index.scss"; -> /packages/bootstrap/scss/pager/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> /packages/bootstrap/scss/dropdownlist/_index.scss
// #region @import /packages/bootstrap/scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/pager/_variables.scss
// Pager
$pager-padding-x: $toolbar-padding-x !default;
$pager-padding-y: $toolbar-padding-y !default;
$pager-border-width: 1px !default;

$pager-font-family: $font-family !default;
$pager-font-size: $font-size !default;
$pager-line-height: $line-height !default;

$pager-bg: $header-bg !default;
$pager-text: $header-text !default;
$pager-border: $header-border !default;

$pager-section-spacing: $spacer-x !default;

$pager-item-padding-x: $button-padding-y !default;
$pager-item-padding-y: $pager-item-padding-x !default;
$pager-item-border-width: 1px !default;
$pager-item-border-radius: $border-radius !default;
$pager-item-spacing: (-1 * $pager-item-border-width) !default;

$pager-item-bg: $pagination-bg !default;
$pager-item-text: $pagination-color !default;
$pager-item-border: $pagination-border-color !default;

$pager-item-hover-bg: $pagination-hover-bg !default;
$pager-item-hover-text: $pagination-color !default;
$pager-item-hover-border: $pagination-hover-border-color !default;

$pager-item-selected-bg: $pagination-active-bg !default;
$pager-item-selected-text: $pagination-active-color !default;
$pager-item-selected-border: $pagination-active-border-color !default;

$pager-item-focus-opacity: null !default;
$pager-item-focus-bg: $pager-item-bg !default;
$pager-item-focus-shadow: 0 0 0 3px rgba($primary, .25) !default;

$pager-number-padding-x: $pager-item-padding-x !default;
$pager-number-padding-y: $pager-item-padding-y !default;
$pager-number-border-width: $pager-item-border-width !default;
$pager-number-border-radius: 0px !default;
$pager-number-spacing: $pager-item-spacing !default;

$pager-number-bg: $pager-item-bg !default;
$pager-number-text: $pager-item-text !default;
$pager-number-border: $pager-item-border !default;

$pager-number-hover-opacity: null !default;
$pager-number-hover-bg: $pager-item-hover-bg !default;
$pager-number-hover-text: $pager-item-text !default;
$pager-number-hover-border: $pager-item-hover-border !default;

$pager-number-selected-opacity: null !default;
$pager-number-selected-bg: $pager-item-selected-bg !default;
$pager-number-selected-text: $pager-item-selected-text !default;
$pager-number-selected-border: $pager-item-selected-border !default;

$pager-number-focus-opacity: null !default;
$pager-number-focus-bg: $pager-number-bg !default;
$pager-number-focus-shadow: $pager-item-focus-shadow !default;

$pager-input-width: 5em !default;
$pager-dropdown-width: 5em !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/pager/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/pager/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/pager/_layout.scss
@include exports("pager/layout") {

    .k-pager-wrap {
        padding: $pager-padding-y $pager-padding-x;
        border-width: $pager-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $pager-font-family;
        font-size: $pager-font-size;
        line-height: $pager-line-height;
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
        cursor: default;
        flex: 0 0 auto;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-link {
            text-decoration: none;
            outline: 0;
            font: inherit;
            background-color: inherit;

            // Focused state
            &:focus,
            &.k-state-focus {
                z-index: 2;
            }
        }

        .k-widget,
        select.k-dropdown {
            font-size: inherit;
        }

        .k-rtl &,
        &[dir="rtl"],
        [dir="rtl"] & {
            .k-i-arrow-end-left,
            .k-i-arrow-60-left,
            .k-i-arrow-60-right,
            .k-i-arrow-end-right,
            .k-i-seek-w,
            .k-i-arrow-w,
            .k-i-arrow-e,
            .k-i-seek-e {
                transform: scaleX(-1);
            }
        }

    }


    // Base pager section
    %base-pager-section {
        @if ($pager-section-spacing) {
            margin-left: $pager-section-spacing;
            margin-right: $pager-section-spacing;
        }
        display: flex;
        flex-direction: row;
        align-items: center;
    }


    // Base pager item
    %base-pager-item {
        min-width: $button-calc-size;
        height: $button-calc-size;
        box-sizing: border-box;
        color: inherit;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &:hover {
            z-index: 2;
        }
        &.k-state-disabled {
            color: inherit;
        }
    }


    // Pager items
    .k-pager-nav {
        @extend %base-pager-item;
        @include border-radius( $pager-item-border-radius );
        padding: $pager-item-padding-y $pager-item-padding-x;
        border-width: $pager-item-border-width;
        border-style: solid;
    }


    // Pager numbers
    .k-pager-numbers-wrap {
        display: flex;
        flex-direction: row;
        position: relative;

        select.k-dropdown {
            cursor: pointer;
            display: none;
        }
    }
    .k-pager-numbers {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: row;

        li {
            display: inline-flex;
        }


        // Links
        .k-link {
            @extend %base-pager-item;
            @include border-radius( $pager-number-border-radius );
            padding: $pager-number-padding-y $pager-number-padding-x;
            border-width: $pager-number-border-width;
            border-style: solid;
        }

        // Selected state
        .k-state-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,
    .k-pager-numbers > li + li {
        @if ($pager-item-spacing) {
            margin-left: $pager-item-spacing;
        }

        .k-rtl &,
        [dir="rtl"] & {
            @if ($pager-item-spacing) {
                margin-left: 0;
                margin-right: $pager-item-spacing;
            }
        }
    }


    // Pager input
    .k-pager-input {
        @extend %base-pager-section;

        .k-textbox {
            margin: 0 1ex;
            width: $pager-input-width;
        }
    }


    // Pager sizes
    .k-pager-sizes {
        @extend %base-pager-section;

        .k-dropdown,
        > select {
            margin-right: 1ex;
            width: $pager-dropdown-width;
        }

        .k-rtl &,
        [dir="rtl"] & {
            .k-dropdown,
            > select {
                margin-left: 1ex;
                margin-right: 0;
            }
        }
    }


    // Pager info
    .k-pager-info {
        @extend %base-pager-section;
        text-align: right;
        justify-content: flex-end;
        flex: 1 1 0%;
        order: 9;
    }


    // Pager refresh
    .k-pager-refresh {
        @extend %base-pager-item;
        margin-left: auto;
        order: 10;

        .k-rtl &,
        [dir="rtl"] & {
            margin-left: 0;
            margin-right: auto;
        }
    }

    // Responsive
    .k-pager-sm {
        overflow: visible;

        // Show native select
        .k-pager-numbers-wrap {
            select.k-dropdown {
                width: $pager-dropdown-width;
                display: flex;
            }
        }

        .k-pager-numbers-wrap {
            @if ($pager-section-spacing) {
                margin-left: $pager-section-spacing;
                margin-right: $pager-section-spacing;
            }

            height: $button-calc-size;
            box-sizing: border-box;
            border-color: inherit;
        }

        .k-rtl &,
        &[dir="rtl"],
        [dir="rtl"] & {
            .k-pager-numbers-wrap {
                @if ($pager-section-spacing) {
                    margin-left: $pager-section-spacing;
                    margin-right: $pager-section-spacing;
                }
            }
        }

    }

    // Hide components
    .k-pager-md .k-pager-info,
    .k-pager-sm .k-pager-info,
    .k-pager-sm .k-pager-sizes,
    .k-pager-sm .k-pager-numbers {
        display: none;
    }

}

// #endregion

@include exports("pager/layout/bootstrap") {


    // Pager items
    .k-pager-nav { @include border-radius( 0 ); }
    .k-pager-first { @include border-left-radius-only( $pager-item-border-radius ); }
    .k-pager-last { @include border-right-radius-only( $pager-item-border-radius ); }

    .k-rtl,
    [dir="rtl"] {
        .k-pager-first { @include border-right-radius-only( $pager-item-border-radius ); }
        .k-pager-last { @include border-left-radius-only( $pager-item-border-radius ); }
    }


    // Pager refresh
    .k-pager-refresh {
        @include border-radius( $pager-item-border-radius );
        border-width: $pager-item-border-width;
        border-style: solid;
    }

}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/pager/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/pager/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/pager/_theme.scss
@include exports("pager/theme") {

    .k-pager-wrap {
        @extend .k-text-selection !optional;
        @include fill(
            $pager-text,
            $pager-bg,
            $pager-border
        );
    }


    %base-pager-item-theme {
        @include fill(
            $pager-item-text,
            $pager-item-bg,
            $pager-item-border
        );

        &:hover,
        &.k-state-hover {
            @include fill(
                $pager-item-hover-text,
                $pager-item-hover-bg,
                $pager-item-hover-border
            );
        }

        &.k-state-selected {
            @include fill(
                $pager-item-selected-text,
                $pager-item-selected-bg,
                $pager-item-selected-border
            );
        }

        &:focus,
        &.k-state-focus {
            background-color: $pager-item-focus-bg;
            @include box-shadow( $pager-item-focus-shadow );
        }
    }


    // Pager items
    .k-pager-nav.k-link {
        @extend %base-pager-item-theme;
    }


    // Pager numbers
    .k-pager-numbers {
        .k-link {
            @include fill(
                $pager-number-text,
                $pager-number-bg,
                $pager-number-border
            );

            &:hover,
            &.k-state-hover {
                @include fill(
                    $pager-number-hover-text,
                    $pager-number-hover-bg,
                    $pager-number-hover-border
                );
            }

            &:focus,
            &.k-state-focus {
                background-color: $pager-number-focus-bg;
                @include box-shadow( $pager-number-focus-shadow );
            }

            &.k-state-selected {
                @include fill(
                    $pager-number-selected-text,
                    $pager-number-selected-bg,
                    $pager-number-selected-border
                );
            }
        }
    }


    // Pager refresh
    .k-pager-refresh {
        @extend %base-pager-item-theme;
    }




    // Responsive
    .k-pager-md,
    .k-pager-sm {

        .k-pager-numbers {

            .k-current-page .k-link {
                @include fill(
                    $dropdownlist-text,
                    $dropdownlist-bg,
                    $dropdownlist-border
                );

                &:hover,
                &.k-state-hover {
                    @include fill(
                        $dropdownlist-hovered-text,
                        $dropdownlist-hovered-bg,
                        $dropdownlist-hovered-border
                    );
                }
            }

            &.k-state-expanded {
                @include fill(
                    $popup-text,
                    $popup-bg,
                    $popup-border
                );
                @include box-shadow( $popup-shadow );

                .k-link {

                    &:hover,
                    &.k-state-hover {
                        @include fill(
                            $list-item-hovered-text,
                            $list-item-hovered-bg
                        )
                    }

                    &.k-state-selected {
                        @include fill(
                            $list-item-selected-text,
                            $list-item-selected-bg
                        )
                    }

                }
            }

        }

    }

}

// #endregion

@include exports( "pager/theme/bootstrap" ) {


    // Pager
    .k-pager-wrap {

        select.k-dropdown,
        .k-dropdown .k-dropdown-wrap {
            @include fill(
                $pager-text,
                $pager-item-bg,
                $pager-item-border
            );

            &:hover,
            &.k-state-hover {
                @include fill(
                    $pager-text,
                    $pager-item-hover-bg,
                    $pager-item-hover-border
                );
            }
        }

    }


    // Responsive
    .k-pager-md,
    .k-pager-sm {

        .k-pager-numbers {

            .k-current-page .k-link {
                @include fill(
                    $pager-text,
                    $pager-item-bg,
                    $pager-item-border
                );

                &:hover,
                &.k-state-hover {
                    @include fill(
                        $pager-text,
                        $pager-item-hover-bg,
                        $pager-item-hover-border
                    );
                }
            }

        }
    }

}

// #endregion

// #endregion
// #region @import "panelbar/_index.scss"; -> /packages/bootstrap/scss/panelbar/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/panelbar/_variables.scss
// Panelbar
$panelbar-padding-x: 0px !default;
$panelbar-padding-y: 0px !default;
$panelbar-font-family: $font-family !default;
$panelbar-font-size: $font-size !default;
$panelbar-line-height: $line-height !default;
$panelbar-border-width: 1px !default;

$panelbar-header-padding-x: $header-padding-x !default;
$panelbar-header-padding-y: $header-padding-y !default;

$panelbar-item-padding-x: $list-item-padding-x !default;
$panelbar-item-padding-y: $list-item-padding-y !default;

$panelbar-bg: $component-bg !default;
$panelbar-text: $component-text !default;
$panelbar-border: $component-border !default;

$panelbar-header-bg: $header-bg !default;
$panelbar-header-text: $header-text !default;
$panelbar-header-border: $header-border !default;
$panelbar-header-gradient: $header-gradient !default;

$panelbar-header-hovered-bg: try-darken( $panelbar-header-bg, 3 ) !default;
$panelbar-header-hovered-text: null !default;
$panelbar-header-hovered-border: null !default;
$panelbar-header-hovered-gradient: null !default;

$panelbar-header-selected-bg: $selected-bg !default;
$panelbar-header-selected-text: $selected-text !default;
$panelbar-header-selected-border: $selected-border !default;
$panelbar-header-selected-gradient: $selected-gradient !default;

$panelbar-header-focused-shadow: $list-item-focused-shadow !default;

$panelbar-item-hovered-bg: shade($panelbar-bg) !default;
$panelbar-item-hovered-text: null !default;
$panelbar-item-hovered-border: null !default;
$panelbar-item-hovered-gradient: null !default;

$panelbar-item-selected-bg: $selected-bg !default;
$panelbar-item-selected-text: $selected-text !default;
$panelbar-item-selected-border: null !default;
$panelbar-item-selected-gradient: null !default;

$panelbar-item-focused-shadow: $list-item-focused-shadow !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/panelbar/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/panelbar/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/panelbar/_layout.scss
@include exports("panelbar/layout") {

    // Base
    .k-panelbar {
        @include use-background-clip();
        margin: 0;
        padding: 0;
        border-width: $panelbar-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $panelbar-font-family;
        font-size: $panelbar-font-size;
        line-height: $panelbar-line-height;
        list-style: none;
        display: block;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;


        // Root
        > .k-item {
            // TODO
            @include use-background-clip();
            border-width: 0;
            border-style: solid;
            border-color: inherit;
            display: block;

            > .k-link {
                padding: $panelbar-header-padding-y $panelbar-header-padding-x;
                color: inherit;
                background: none;
                text-decoration: none;
                display: flex;
                flex-direction: row;
                align-items: center;
                align-content: center;
                position: relative;
                user-select: none;
                cursor: default;
                transition: $transition;

                .k-ie & {
                    display: block; // TODO: Remove once we drop IE support
                }
            }
        }
        > .k-item + .k-item {
            border-top-width: 1px;
        }


        // Sub
        .k-group {
            margin: 0;
            padding: 0;
            border-width: 0;
            border-color: inherit;
            color: inherit;
            background-color: transparent;
            list-style: none;
        }
        .k-group > .k-item {
            display: block;

            > .k-link {
                padding: $panelbar-item-padding-y $panelbar-item-padding-x;
                color: inherit;
                text-decoration: none;
                display: flex;
                flex-direction: row;
                align-items: center;
                align-content: center;
                position: relative;
                user-select: none;
                cursor: default;
                transition: $transition;
            }
        }


        // Expand collapse
        .k-panelbar-expand,
        .k-panelbar-collapse {
            margin-top: -.5em;
            position: absolute;
            top: 50%;
            right: $panelbar-header-padding-x;
        }

        .k-link > .k-image,
        .k-link > .k-sprite {
            margin-right: $icon-spacing;
        }

        &[dir="rtl"],
        .k-rtl & {
            .k-panelbar-expand,
            .k-panelbar-collapse {
                right: auto;
                left: $panelbar-header-padding-x;
            }

            .k-link > .k-image,
            .k-link > .k-sprite {
                margin-left: $icon-spacing;
                margin-right: 0;
            }
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/panelbar/_theme.scss
@include exports("panelbar/theme") {

    // Appearance
    .k-panelbar {
        @include fill(
            $panelbar-text,
            $panelbar-bg,
            $panelbar-border
        );


        // Root
        > .k-item {
            border-color: $header-border;
        }

        > .k-item > .k-link {
            @include fill(
                $panelbar-header-text,
                $panelbar-header-bg,
                $panelbar-header-border,
                $panelbar-header-gradient
            );
        }

        > .k-item > .k-link:hover,
        > .k-item > .k-link.k-state-hover {
            @include fill(
                $panelbar-header-hovered-text,
                $panelbar-header-hovered-bg,
                $panelbar-header-hovered-border,
                $panelbar-header-hovered-gradient
            );
        }

        > .k-item > .k-link.k-state-selected {
            @include fill(
                $panelbar-header-selected-text,
                $panelbar-header-selected-bg,
                $panelbar-header-selected-border,
                $panelbar-header-selected-gradient
            );
        }

        > .k-item > .k-link.k-state-focused {
            box-shadow: inset 0 0 0 3px try-darken( $panelbar-header-bg, 7 );

            &:hover,
            &.k-state-hover {
                box-shadow: inset 0 0 0 3px try-darken( $panelbar-header-hovered-bg, 7 );
            }

            &.k-state-selected {
                box-shadow: inset 0 0 0 3px try-darken( $panelbar-header-selected-bg , 7 );
            }
        }


        // Sub
        .k-group {

            > .k-item > .k-link:hover,
            > .k-item > .k-link.k-state-hover {
                @include fill(
                    $panelbar-item-hovered-text,
                    $panelbar-item-hovered-bg,
                    $panelbar-item-hovered-border,
                    $panelbar-item-hovered-gradient
                );
            }

            > .k-item > .k-link.k-state-selected {
                @include fill(
                    $panelbar-item-selected-text,
                    $panelbar-item-selected-bg,
                    $panelbar-item-selected-border,
                    $panelbar-item-selected-gradient
                );
            }

            > .k-item > .k-link.k-state-focused {
                box-shadow: inset 0 0 0 3px try-darken( $panelbar-bg, 7 );

                &:hover,
                &.k-state-hover {
                    box-shadow: inset 0 0 0 3px try-darken( $panelbar-item-hovered-bg , 7 );
                }

                &.k-state-selected {
                    box-shadow: inset 0 0 0 3px try-darken( $panelbar-item-selected-bg , 7 );
                }
            }

        }

    }

}

// #endregion

// #endregion
// #region @import "stepper/_index.scss"; -> /packages/bootstrap/scss/stepper/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/stepper/_variables.scss
// Stepper
$stepper-margin-x: null !default;
$stepper-margin-y: null !default;
$stepper-padding-x: null !default;
$stepper-padding-y: null !default;
$stepper-label-margin-x: 12px !default;
$stepper-label-padding-x: 12px !default;
$stepper-label-padding-y: 5px !default;
$stepper-border-width: 0px !default;

$stepper-inline-content-padding-x: 20px !default;
$stepper-inline-content-padding-y: 10px !default;

$stepper-font-size: $font-size !default;
$stepper-line-height: $line-height !default;
$stepper-font-family: $font-family !default;

$stepper-bg: null !default;
$stepper-text: null !default;
$stepper-border: null !default;

$stepper-indicator-width: 28px !default;
$stepper-indicator-height: $stepper-indicator-width !default;
$stepper-indicator-border-radius: 50% !default;
$stepper-indicator-border-width: 1px !default;

$stepper-indicator-focus-border-width: 1px !default;
$stepper-indicator-focus-size: 2px !default;
$stepper-indicator-focus-offset: 3px !default;
$stepper-indicator-focus-calc-offset: calc( #{$stepper-indicator-focus-border-width} + #{$stepper-indicator-focus-offset} ) !default;

$stepper-indicator-bg: $component-bg !default;
$stepper-indicator-text: $component-text !default;
$stepper-indicator-border: $component-border !default;

$stepper-indicator-hover-bg: try-shade( $stepper-indicator-bg ) !default;
$stepper-indicator-hover-text: null !default;
$stepper-indicator-hover-border: null !default;

$stepper-indicator-disabled-bg: $stepper-indicator-bg !default;
$stepper-indicator-disabled-text: mix($stepper-indicator-text, #ffffff, 60%) !default;
$stepper-indicator-disabled-border: $stepper-indicator-border !default;

$stepper-indicator-done-bg: $primary !default;
$stepper-indicator-done-text: contrast-wcag( $stepper-indicator-done-bg ) !default;
$stepper-indicator-done-border: $stepper-indicator-done-bg !default;

$stepper-indicator-done-hover-bg: try-shade( $stepper-indicator-done-bg ) !default;
$stepper-indicator-done-hover-text: null !default;
$stepper-indicator-done-hover-border: null !default;

$stepper-indicator-done-disabled-bg: mix( $stepper-indicator-done-bg, $component-bg, 60%) !default;
$stepper-indicator-done-disabled-text: contrast-wcag( $stepper-indicator-done-bg ) !default;
$stepper-indicator-done-disabled-border: $stepper-indicator-done-disabled-bg !default;

$stepper-indicator-current-bg: $stepper-indicator-done-bg !default;
$stepper-indicator-current-text: $stepper-indicator-done-text !default;
$stepper-indicator-current-border: $stepper-indicator-done-border !default;

$stepper-indicator-current-hover-bg: $stepper-indicator-done-hover-bg !default;
$stepper-indicator-current-hover-text: $stepper-indicator-done-hover-text !default;
$stepper-indicator-current-hover-border: $stepper-indicator-done-hover-border !default;

$stepper-indicator-current-disabled-bg: $stepper-indicator-done-disabled-bg !default;
$stepper-indicator-current-disabled-text: $stepper-indicator-done-disabled-text !default;
$stepper-indicator-current-disabled-border: $stepper-indicator-done-disabled-border !default;

$stepper-label-text: $component-text !default;
$stepper-label-success-text: $success !default;
$stepper-label-error-text: $error !default;
$stepper-label-hover-text: darken($body-text, 13%) !default;
$stepper-label-disabled-text: mix($component-text, #ffffff, 60%) !default;

$stepper-optional-label-opacity: .35 !default;
$stepper-disabled-opacity: .6 !default;

$stepper-progressbar-size: 2px !default;
$stepper-progressbar-bg: null !default;
$stepper-progressbar-text: null !default;
$stepper-progressbar-fill-bg: null !default;
$stepper-progressbar-fill-text: null !default;

$stepper-content-transition-property: height !default;
$stepper-content-transition-duration: 300ms !default;
$stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/stepper/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/stepper/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/stepper/_layout.scss
@include exports("stepper/layout") {

    // Base
    .k-stepper {
        margin: $stepper-margin-y $stepper-margin-x;
        padding: $stepper-padding-y $stepper-padding-x;
        border-width: $stepper-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-size: $stepper-font-size;
        line-height: $stepper-line-height;
        font-family: $stepper-font-family;
        display: block;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-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;


        // Step list
        .k-step-list {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            z-index: 1;
        }


        // Step
        .k-step { }


        // Step link
        .k-step-link {
            outline: none;
            text-decoration: none;
            white-space: nowrap;
            display: flex;
            align-items: center;
            overflow: hidden;
        }
        .k-step-disabled {
            pointer-events: none;

            .k-step-link { cursor: default; }
        }


        // Step indicator
        .k-step-indicator {
            @include border-radius( $stepper-indicator-border-radius );
            margin: if($stepper-indicator-focus-offset > 0, $stepper-indicator-focus-offset, null);
            width: $stepper-indicator-width;
            height: $stepper-indicator-height;
            border-width: $stepper-indicator-border-width;
            border-style: solid;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            overflow: visible;
            transition-property: color, background-color, border-color;
            transition-duration: .4s;
            transition-timing-function: ease-in-out;

            &::after {
                @include border-radius( 100% );
                content: "";
                border-width: $stepper-indicator-focus-border-width;
                border-style: solid;
                border-color: inherit;
                pointer-events: none;
                display: none;
                position: absolute;
                top: calc( -1 * #{$stepper-indicator-focus-calc-offset} );
                right: calc( -1 * #{$stepper-indicator-focus-calc-offset} );
                bottom: calc( -1 * #{$stepper-indicator-focus-calc-offset} );
                left: calc( -1 * #{$stepper-indicator-focus-calc-offset} );
                z-index: 2;
            }
        }
        .k-step-focus,
        .k-step-link:focus {
            .k-step-indicator::after {
                display: block;
            }
        }


        // Step label
        .k-step-label {
            max-width: 10em;
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }
        .k-step-label:only-child {
            @include border-radius( ($stepper-indicator-height + 2 * $stepper-indicator-border-width) / 2 );
            padding: $stepper-label-padding-y $stepper-label-padding-x;
            border-width: 0;
        }
        .k-step-label .k-step-text {
            max-width: calc(10em - (#{$icon-size} + #{$icon-spacing}));
            flex-grow: 1;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .k-step-label .k-icon { margin-left: $icon-spacing; }

        .k-step-current .k-step-label {
            font-weight: bold;
        }

        .k-step-label .k-step-label-optional {
            font-style: italic;
            flex-basis: 100%;
        }

        // Progressbar
        .k-progressbar {
            position: absolute;
            pointer-events: none;
            z-index: 0;
        }
    }


    // Horizontal
    .k-step-list-horizontal {
        flex-direction: row;

        .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($stepper-indicator-focus-offset > 0, calc(8px - #{$stepper-indicator-focus-offset}), 8px);
        }

        // Progressbar
        & ~ .k-progressbar {
            width: 100%;
            height: $stepper-progressbar-size;
            top: calc((#{$stepper-indicator-height} + 2 * #{$stepper-indicator-focus-size}) / 2);
        }
    }


    // Vertical
    .k-step-list-vertical {
        flex-direction: column;

        .k-step {
            min-height: calc((#{$stepper-indicator-width} + 2 * #{$stepper-indicator-border-width} + 2 * #{$stepper-indicator-focus-size}) + 20px);
        }

        // Label
        .k-step-label {
            justify-content: flex-start;
        }
        .k-step-indicator + .k-step-label {
            margin-left: $stepper-label-margin-x;
        }


        // Progressbar
        & ~ .k-progressbar {
            width: $stepper-progressbar-size;
            height: 100%;
            min-height: 20px;
            left: calc((#{$stepper-indicator-width} + 2 * #{$stepper-indicator-border-width} + 2 * #{$stepper-indicator-focus-size}) / 2);
        }

        // Inline content
        .k-step-content {
            height: 0;
            overflow: hidden;
            transition: $stepper-content-transition-property $stepper-content-transition-duration $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: $stepper-indicator-width + 2 * $stepper-indicator-border-width;
            padding: $stepper-inline-content-padding-x $stepper-inline-content-padding-y;
        }
    }
}


@include exports("stepper/layout/rtl") {

    .k-rtl .k-stepper,
    .k-stepper[dir="rtl"] {
        direction: rtl;

        .k-step-label .k-icon {
            margin-left: 0;
            margin-right: $icon-spacing;
        }

        // Horizontal
        .k-step-list-horizontal { }


        // Vertical
        .k-step-list-vertical {
            .k-step-indicator + .k-step-label {
                margin-left: 0;
                margin-right: $stepper-label-margin-x;
            }

            & ~ .k-progressbar {
                left: auto;
                right: calc((#{$stepper-indicator-width} + 2 * #{$stepper-indicator-border-width} + 2 * #{$stepper-indicator-focus-size}) / 2);
            }
        }
    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/stepper/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/stepper/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/stepper/_theme.scss
@include exports("stepper/theme") {

    // Base
    .k-stepper {
        @include fill(
            $stepper-text,
            $stepper-bg,
            $stepper-border
        );


        // Not done steps
        .k-step {
            // Hover
            &:hover,
            &.k-step-hover {
                .k-step-label {
                    color: $stepper-label-hover-text;
                }

                .k-step-indicator {
                    @include fill(
                        $stepper-indicator-hover-text,
                        $stepper-indicator-hover-bg,
                        $stepper-indicator-hover-border
                    );
                }
            }


            // Disabled
            &.k-step-disabled,
            &:disabled {
                .k-step-indicator {
                    @include fill(
                        $stepper-indicator-disabled-text,
                        $stepper-indicator-disabled-bg,
                        $stepper-indicator-disabled-border
                    );
                }
            }
        }
        .k-step-indicator {
            @include fill(
                $stepper-indicator-text,
                $stepper-indicator-bg,
                $stepper-indicator-border
            );
        }
        .k-step-indicator::after {
            @include box-shadow( inset 0 0 0 $stepper-indicator-focus-size $component-bg );
        }
        .k-step-label:only-child {
            @include fill(
                $component-text,
                $component-bg,
                $component-border
            );
        }


        // Done steps
        .k-step-done {

            .k-step-indicator {
                @include fill(
                    $stepper-indicator-done-text,
                    $stepper-indicator-done-bg,
                    $stepper-indicator-done-border
                );
            }


            // Hover
            &:hover,
            &.k-step-hover {
                .k-step-indicator {
                    @include fill(
                        $stepper-indicator-done-hover-text,
                        $stepper-indicator-done-hover-bg,
                        $stepper-indicator-done-hover-border
                    );
                }
            }


            // Disabled
            &.k-step-disabled,
            &:disabled {
                .k-step-indicator {
                    @include fill(
                        $stepper-indicator-done-disabled-text,
                        $stepper-indicator-done-disabled-bg,
                        $stepper-indicator-done-disabled-border
                    );
                }
            }
        }


        // Current
        .k-step-current {

            .k-step-indicator {
                @include fill(
                    $stepper-indicator-current-text,
                    $stepper-indicator-current-bg,
                    $stepper-indicator-current-border
                );
            }


            // Hover
            &:hover,
            &.k-step-hover {
                .k-step-indicator {
                    @include fill(
                        $stepper-indicator-current-hover-text,
                        $stepper-indicator-current-hover-bg,
                        $stepper-indicator-current-hover-border
                    );
                }
            }


            // Disabled
            &.k-step-disabled,
            &:disabled {
                .k-step-indicator {
                    @include fill(
                        $stepper-indicator-current-disabled-text,
                        $stepper-indicator-current-disabled-bg,
                        $stepper-indicator-current-disabled-border
                    );
                }
            }
        }

        // Label
        .k-step-label {
            @include fill( $color: $stepper-label-text );
        }
        .k-step-success .k-step-label .k-icon {
            @include fill( $color: $stepper-label-success-text );
        }
        .k-step-error .k-step-label {
            @include fill( $color: $stepper-label-error-text );
        }

        .k-step-error {
            .k-step-label {
                @include fill( $color: $stepper-label-error-text );
            }

            &:hover,
            &.k-step-hover {
                .k-step-label {
                    @include fill( $color: $stepper-label-error-text );
                }
            }
        }

        .k-step-disabled .k-step-label {
            @include fill( $color: $stepper-label-disabled-text );
        }

        // Labels only
        .k-step-focus .k-step-label:only-child,
        .k-step-link:focus .k-step-label:only-child {
            @include box-shadow( inset 0 0 0 $stepper-indicator-focus-size $component-border );
        }

        // Optional Label
        .k-step-optional .k-step-label-optional {
            opacity: $stepper-optional-label-opacity;
        }

        // Progressbar
        .k-progressbar {
            @include fill(
                $color: $stepper-progressbar-text,
                $bg: $stepper-progressbar-bg
            );

            .k-state-selected {
                @include fill(
                    $color: $stepper-progressbar-fill-text,
                    $bg: $stepper-progressbar-fill-bg
                );
            }
        }
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "wizard/_index.scss"; -> /packages/bootstrap/scss/wizard/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../stepper/_index.scss"; -> /packages/bootstrap/scss/stepper/_index.scss
// #region @import /packages/bootstrap/scss/stepper/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../forms/_index.scss"; -> /packages/bootstrap/scss/forms/_index.scss
// #region @import /packages/bootstrap/scss/forms/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/wizard/_variables.scss
//Wizard
$wizard-padding-x: $padding-x * 1.25 !default;
$wizard-padding-y: $wizard-padding-x !default;
$wizard-content-padding-x: $padding-x * 2 !default;
$wizard-content-padding-y: $padding-y * 4 !default;
$wizard-buttons-margin-x: 10px !default;

$wizard-border-width: 0px !default;
$wizard-font-size: $font-size !default;
$wizard-line-height: $line-height !default;
$wizard-font-family: $font-family !default;

$wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/wizard/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/wizard/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/wizard/_layout.scss
@include exports("wizard/layout") {
    .k-wizard {
        padding: $wizard-padding-y $wizard-padding-x;
        border-width: $wizard-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-size: $wizard-font-size;
        line-height: $wizard-line-height;
        font-family: $wizard-font-family;
        position: relative;
        color: inherit;
        background: none;
        display: flex;
        align-items: stretch;
        overflow: hidden;

        .k-wizard-steps {
            display: flex;
            overflow: hidden;
        }

        .k-wizard-step {
            padding: calc(#{$wizard-content-padding-x / 4} + 2px);
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: space-between;
        }

        .k-wizard-content {
            overflow-y: auto;
        }

        .k-wizard-buttons {
            margin-top: $wizard-content-padding-y;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;

            .k-button {
                margin-right: $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: $wizard-content-padding-y;
        }

        .k-wizard-steps,
        .k-wizard-content {
            flex: 1 1 auto;
        }
    }

    .k-wizard-vertical {

        .k-wizard-steps {
            flex: 1 0 0%;
        }

        .k-wizard-content {
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: auto;
        }

        .k-wizard-steps {
            margin-left: $wizard-content-padding-x;
        }
    }

    .k-wizard-left {
        flex-direction: row-reverse;

        .k-wizard-steps {
            margin-right: $wizard-content-padding-x;
            margin-left: 0;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/wizard/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/wizard/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/wizard/_theme.scss
@include exports("wizard/theme") {
    .k-wizard-step:focus,
    .k-wizard-step.k-state-focused {
        @include box-shadow($wizard-focused-shadow);
        outline: none;
    }
}

// #endregion

// #endregion

// #endregion
// #region @import "tabstrip/_index.scss"; -> /packages/bootstrap/scss/tabstrip/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/tabstrip/_variables.scss
// Tabstrip
$tabstrip-wrapper-padding-x: 0px !default;
$tabstrip-wrapper-padding-y: 0px !default;
$tabstrip-wrapper-border-width: 0px !default;

$tabstrip-font-family: $font-family !default;
$tabstrip-font-size: $font-size !default;
$tabstrip-line-height: $line-height !default;
$tabstrip-border-width: $nav-tabs-border-width !default;

$tabstrip-wrapper-bg: null !default;
$tabstrip-wrapper-text: null !default;
$tabstrip-wrapper-border: null !default;

/// Background color of tabstrip component
/// @group tabstrip
$tabstrip-bg: null !default;
/// Text color of tabstrip component
/// @group tabstrip
$tabstrip-text: $component-text !default;
/// Border color of tabstrip component
/// @group tabstrip
$tabstrip-border: $nav-tabs-border-color !default;

/// Horizontal padding of tabs
/// @group tabstrip
$tabstrip-item-padding-x: $nav-item-padding-x !default;
/// Vertical padding of tabs
/// @group tabstrip
$tabstrip-item-padding-y: $nav-item-padding-y !default;
/// Width of border around tabs
/// @group tabstrip
$tabstrip-item-border-width: $nav-tabs-border-width !default;
/// Border radius of tabs
/// @group tabstrip
$tabstrip-item-border-radius: $nav-tabs-border-radius !default;
/// Spacing between tabs
/// @group tabstrip
$tabstrip-item-gap: $nav-item-margin !default;

/// Background color of tabs
/// @group tabstrip
$tabstrip-item-bg: null !default;
/// Text color of tabs
/// @group tabstrip
$tabstrip-item-text: $link-text !default;
/// Border color of tabs
/// @group tabstrip
$tabstrip-item-border: null !default;
/// Background gradient of tabs
/// @group tabstrip
$tabstrip-item-gradient: null !default;

/// Background color of hovered tabs
/// @group tabstrip
$tabstrip-item-hovered-bg: null !default;
/// Text color of hovered tabs
/// @group tabstrip
$tabstrip-item-hovered-text: $link-hover-text !default;
/// Border color of hovered tabs
/// @group tabstrip
$tabstrip-item-hovered-border: $nav-tabs-link-hover-border-color !default;
/// Background gradient of hovered tabs
/// @group tabstrip
$tabstrip-item-hovered-gradient: null !default;

/// Background color of selected tabs
/// @group tabstrip
$tabstrip-item-selected-bg: $nav-tabs-link-active-bg !default;
/// Text color of selected tabs
/// @group tabstrip
$tabstrip-item-selected-text: $nav-tabs-link-active-color !default;
/// Border color of selected tabs
/// @group tabstrip
$tabstrip-item-selected-border: $nav-tabs-link-active-border-color !default;
/// Background gradient of selected tabs
/// @group tabstrip
$tabstrip-item-selected-gradient: null !default;

$tabstrip-item-focused-shadow: $list-item-focused-shadow !default;

$tabstrip-indicator-size: null !default;
$tabstrip-indicator-color: null !default;

/// Horizontal padding of tabstrip content
/// @group tabstrip
$tabstrip-content-padding-x: $tabstrip-item-padding-x !default;
/// Vertical padding of tabstrip content
/// @group tabstrip
$tabstrip-content-padding-y: $tabstrip-item-padding-y !default;
/// Width of border around tabstrip content
/// @group tabstrip
$tabstrip-content-border-width: $nav-tabs-border-width !default;

/// Background color of tabstrip content
/// @group tabstrip
$tabstrip-content-bg: $component-bg !default;
/// Text color of tabstrip content
/// @group tabstrip
$tabstrip-content-text: $component-text !default;
/// Border color of tabstrip content
/// @group tabstrip
$tabstrip-content-border: $component-border !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/tabstrip/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/tabstrip/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/tabstrip/_layout.scss
@include exports("tabstrip/layout") {

    .k-tabstrip-wrapper {
        padding: $tabstrip-wrapper-padding-y $tabstrip-wrapper-padding-x;
        border-width: $tabstrip-wrapper-border-width;
        border-style: solid;
        display: flex;
        flex-direction: column;
    }

    .k-tabstrip {
        border-width: 0;
        border-color: transparent;
        box-sizing: border-box;
        outline: 0;
        font-family: $tabstrip-font-family;
        font-size: $tabstrip-font-size;
        line-height: $tabstrip-line-height;
        color: inherit;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-tabstrip-wrapper > & {
            flex: 1 1 auto;
        }

        @at-root .k-tabstrip-items {
            border-width: 0;
            border-style: solid;
            border-color: inherit;
            outline: 0;
            display: flex;
            flex-direction: row;
            flex: 0 0 auto;
            position: relative;

            .k-item {
                margin: 0;
                padding: 0;
                border: $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: $tabstrip-item-padding-y $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;
            }

            .k-remove-tab-link,
            .k-link[data-type="remove"] {
                padding: $tabstrip-item-padding-y;
                flex: none;
            }
        }
        @at-root .k-ie11 .k-tabstrip-items {
            white-space: nowrap;
        }

        > .k-content {
            padding: $tabstrip-content-padding-y $tabstrip-content-padding-x;
            border-width: $tabstrip-content-border-width;
            border-style: solid;
            border-color: inherit;
            display: none;
            overflow: auto;
            flex: 1 1 auto;

            &.k-state-active {
                display: block;
            }
        }

        // Loading
        @at-root .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;

            &.k-complete {
                width: 100%;
                border-top-width: 0;
            }
        }

        // Scrolling
        &.k-tabstrip-scrollable {
            position: relative;

            > .k-content {
                border-width: $tabstrip-content-border-width;
            }

            > .k-tabstrip-items {
                border-width: 0;
                white-space: nowrap;
                overflow: hidden;
            }

            > .k-tabstrip-prev {
                position: absolute;
                left: 0;
            }

            > .k-tabstrip-next {
                position: absolute;
                right: 0;
            }

            // Fixes kendo-theme-default#476
            .k-ie11 & {
                > .k-tabstrip-prev,
                > .k-tabstrip-next {
                    top: 0;
                }
            }
        }

    }


    // Tabstrip variants
    .k-tabstrip-top {
        > .k-tabstrip-items {
            border-bottom-width: $tabstrip-border-width;

            .k-item {
                @include border-top-radius( $tabstrip-item-border-radius );
                margin-bottom: -$tabstrip-border-width;
            }

            .k-item + .k-item {
                margin-left: $tabstrip-item-gap;
            }

            .k-item.k-state-active {
                border-bottom-color: transparent;
            }
        }

        > .k-content {
            @include border-bottom-radius( $tabstrip-item-border-radius );
            border-top-width: 0;
        }
    }
    .k-tabstrip-bottom {
        > .k-tabstrip-items {
            border-top-width: $tabstrip-border-width;

            .k-item {
                @include border-bottom-radius( $tabstrip-item-border-radius );
                margin-top: -$tabstrip-border-width;
            }

            .k-item + .k-item {
                margin-left: $tabstrip-item-gap;
            }

            .k-item.k-state-active {
                border-top-color: transparent;
            }
        }

        > .k-content {
            @include border-top-radius( $tabstrip-item-border-radius );
            border-bottom-width: 0;
        }

        &.k-tabstrip-scrollable {
            .k-tabstrip-prev,
            .k-tabstrip-next {
                bottom: 0;

                .k-ie11 & {
                    top: auto;
                }
            }
        }
    }
    .k-tabstrip-left {
        flex-direction: row;

        > .k-tabstrip-items {
            border-right-width: $tabstrip-border-width;
            display: inline-flex;
            flex-direction: column;

            .k-item {
                @include border-left-radius( $tabstrip-item-border-radius );
                margin-right: -$tabstrip-border-width;
            }

            .k-item + .k-item {
                margin-top: $tabstrip-item-gap;
            }

            .k-item.k-state-active {
                border-right-color: transparent;
            }
        }

        > .k-content {
            @include border-right-radius( $tabstrip-item-border-radius );
            // sass-lint:disable no-important
            margin: 0 !important;
            // sass-lint:enable no-important
            border-left-width: 0;
        }

    }
    .k-tabstrip-right {
        flex-direction: row-reverse;

        > .k-tabstrip-items {
            border-left-width: $tabstrip-border-width;
            display: inline-flex;
            flex-direction: column;

            .k-item {
                @include border-right-radius( $tabstrip-item-border-radius );
                margin-left: -$tabstrip-border-width;
            }

            .k-item + .k-item {
                margin-top: $tabstrip-item-gap;
            }

            .k-item.k-state-active {
                border-left-color: transparent;
            }
        }

        > .k-content {
            @include border-left-radius( $tabstrip-item-border-radius );
            // sass-lint:disable no-important
            margin: 0 !important;
            // sass-lint:enable no-important
            border-right-width: 0;
        }
    }


    // Selected indicator
    @if ($tabstrip-indicator-size) {

        .k-tabstrip-items {

            .k-item::after {
                content: "";
                border-width: 0;
                border-style: solid;
                display: none;
                position: absolute;
                z-index: 0;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;

                // Variants
                .k-tabstrip-top > & {
                    border-bottom-width: $tabstrip-indicator-size;
                }
                .k-tabstrip-bottom > & {
                    border-top-width: $tabstrip-indicator-size;
                }
                .k-tabstrip-left > & {
                    border-right-width: $tabstrip-indicator-size;
                }
                .k-tabstrip-right > & {
                    border-left-width: $tabstrip-indicator-size;
                }
            }
            .k-item.k-state-active::after {
                display: block;
            }

            .k-item > .k-link {
                z-index: 1;
            }
        }

    }

}




@include exports("tabstrip/layout/rtl") {
    .k-rtl .k-tabstrip,
    .k-tabstrip[dir="rtl"] {

        &.k-tabstrip-left,
        &.k-tabstrip-right {
            > .k-tabstrip-items { order: 1; }
            > .k-content { order: 0; }
        }

        .k-tabstrip-prev {
            left: auto;
            right: 0;
            transform: scaleX(-1);
        }

        .k-tabstrip-next {
            left: 0;
            right: auto;
            transform: scaleX(-1);
        }

    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/tabstrip/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/tabstrip/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/tabstrip/_theme.scss
@include exports("tabstrip/theme") {

    // Wrapper
    .k-tabstrip-wrapper {
        @include fill(
            $tabstrip-wrapper-text,
            $tabstrip-wrapper-bg,
            $tabstrip-wrapper-border
        );
    }


    // Items
    .k-tabstrip-items {
        @include fill(
            $tabstrip-text,
            $tabstrip-bg,
            $tabstrip-border
        );

        .k-item {
            @include fill(
                $tabstrip-item-text,
                $tabstrip-item-bg,
                $tabstrip-item-border,
                $tabstrip-item-gradient
            );

            &:hover,
            &.k-state-hover {
                @include fill(
                    $tabstrip-item-hovered-text,
                    $tabstrip-item-hovered-bg,
                    $tabstrip-item-hovered-border,
                    $tabstrip-item-hovered-gradient
                );
            }

            &.k-state-active,
            &.k-state-selected {
                @include fill(
                    $tabstrip-item-selected-text,
                    $tabstrip-item-selected-bg,
                    $tabstrip-item-selected-border,
                    $tabstrip-item-selected-gradient
                );
            }

            &.k-state-focused {
                @include box-shadow( $tabstrip-item-focused-shadow );
            }
        }

    }


    // Content
    .k-tabstrip > .k-content {
        @include fill(
            $tabstrip-content-text,
            $tabstrip-content-bg,
            $tabstrip-content-border
        );
    }


    // Selected indicator
    @if ($tabstrip-indicator-size) {

        .k-tabstrip-items {
            .k-item.k-state-active::after {
                border-color: $tabstrip-indicator-color;
            }
        }
    }

}

// #endregion


@include exports("tabstrip/theme/bootstrap") {

    // Tabstrip variants
    .k-tabstrip-top {

        > .k-tabstrip-items .k-item.k-state-hover,
        > .k-tabstrip-items .k-item.k-state-active {
            border-bottom-color: transparent;
        }
    }
    .k-tabstrip-bottom {

        > .k-tabstrip-items .k-item.k-state-hover,
        > .k-tabstrip-items .k-item.k-state-active {
            border-top-color: transparent;
        }
    }
    .k-tabstrip-left {

        > .k-tabstrip-items .k-item.k-state-hover,
        > .k-tabstrip-items .k-item.k-state-active {
            border-right-color: transparent;
        }
    }
    .k-tabstrip-right {

        > .k-tabstrip-items .k-item.k-state-hover,
        > .k-tabstrip-items .k-item.k-state-active {
            border-left-color: transparent;
        }
    }

}

// #endregion

// #endregion
// #region @import "treeview/_index.scss"; -> /packages/bootstrap/scss/treeview/_index.scss
// #region @import /packages/bootstrap/scss/treeview/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "expansion-panel/_index.scss"; -> /packages/bootstrap/scss/expansion-panel/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/expansion-panel/_variables.scss
// Expansion panel
$expander-padding-y: 8px !default;
$expander-font-family: $font-family !default;
$expander-font-size: $font-size !default;
$expander-line-height: $line-height !default;
$expander-border-width: 0 !default;

$expander-header-padding-x: 0 !default;
$expander-header-padding-y: $header-padding-y / 1.5 !default;

$expander-indicator-margin-x: calc(#{$padding-x / 2} * 1.5) !default;

$expander-bg: $component-bg !default;
$expander-text: $component-text !default;
$expander-border: $component-border !default;

$expander-header-border-width: 2px !default;
$expander-header-bg: $expander-bg !default;
$expander-header-text: $expander-text !default;
$expander-header-border: $expander-text !default;

$expander-header-focused-bg: null !default;
$expander-header-focused-shadow: $list-item-focused-shadow !default;

$expander-header-sub-title-opacity: .65 !default;

$expander-content-padding-x: $padding-x * 1.25 !default;
$expander-content-padding-y: $padding-y * 4 !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/expansion-panel/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/expansion-panel/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/expansion-panel/_layout.scss
@include exports("expansion-panel/layout") {

    // Base
    .k-expander {
        @include use-background-clip();

        border-width: $expander-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $expander-font-family;
        font-size: $expander-font-size;
        line-height: $expander-line-height;
        display: flex;
        flex-direction: column;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        &[dir = "rtl"],
        .k-rtl & {
            // Expand / collapse icon
            .k-expander-indicator {
                margin-left: 0;
                margin-right: $expander-indicator-margin-x;
            }
        }
    }

    // Header
    .k-expander-header {
        padding: 0 $expander-header-padding-x $expander-header-padding-y;
        border-width: 0 0 $expander-header-border-width;
        border-style: solid;
        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;
    }

    // Expand / collapse icon
    .k-expander-indicator {
        margin-left: $expander-indicator-margin-x;
    }

    // Expander content
    .k-expander-content {
        padding: $expander-content-padding-y $expander-content-padding-x;
        overflow: auto;
    }

    // Multiple expansion panels immediately one after another
    .k-expander + .k-expander .k-expander-header {
        padding-top: $expander-padding-y;
    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/expansion-panel/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/expansion-panel/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/expansion-panel/_theme.scss
@include exports("expansion-panel/theme") {

    .k-expander {
        @include fill(
            $expander-text,
            $expander-bg,
            $expander-border
        );
    }

    .k-expander-header {
        @include fill(
            $expander-header-text,
            $expander-header-bg,
            $expander-header-border
        );
    }

    .k-expander-header.k-state-focused {
        background-color: $expander-header-focused-bg;
        box-shadow: $expander-header-focused-shadow;
    }

    .k-expander-sub-title {
        opacity: $expander-header-sub-title-opacity;
    }
}

// #endregion

// #endregion

// #endregion


// Layout & containers
// #region @import "card/_index.scss"; -> /packages/bootstrap/scss/card/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../utils/_flex.scss"; -> /packages/bootstrap/scss/utils/_flex.scss
// #region @import /packages/bootstrap/scss/utils/_flex.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../utils/_grid.scss"; -> /packages/bootstrap/scss/utils/_grid.scss
// #region @import /packages/bootstrap/scss/utils/_grid.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../styling/_index.scss"; -> /packages/bootstrap/scss/styling/_index.scss
// #region @import /packages/bootstrap/scss/styling/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../action-buttons/_index.scss"; -> /packages/bootstrap/scss/action-buttons/_index.scss
// #region @import /packages/bootstrap/scss/action-buttons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../typography/_index.scss"; -> /packages/bootstrap/scss/typography/_index.scss
// #region @import /packages/bootstrap/scss/typography/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/card/_variables.scss
// Card
$card-padding-x: $card-spacer-x !default;
$card-padding-y: $card-spacer-y !default;
$card-border-width: 1px !default;
$card-border-radius: $card-border-radius !default;
$card-inner-border-radius: calc( #{$card-border-radius} - #{$card-border-width} ) !default;
$card-font-family: $font-family !default;
$card-font-size: $font-size !default;
$card-line-height: $line-height !default;
$card-box-shadow: null !default;
$card-box-focused-shadow: 0 0 4px 0 rgba(0, 0, 0, .3) !default;

$card-deck-gap: $card-deck-margin !default;

$card-bg: $card-bg !default;
$card-text: $component-text !default;
$card-border: $card-border-color !default;

$card-header-padding-x: $card-padding-x !default;
$card-header-padding-y: $card-padding-y !default;
$card-header-border-width: $card-border-width !default;
$card-header-bg: $card-cap-bg !default;
$card-header-text: $card-text !default;
$card-header-border: $card-border-color !default;

$card-body-padding-x: $card-padding-x !default;
$card-body-padding-y: $card-padding-x !default; // In bootstrap, all card body paddings equal the card-spacer-x var

$card-footer-padding-x: $card-padding-x !default;
$card-footer-padding-y: $card-padding-y !default;
$card-footer-border-width: $card-border-width !default;
$card-footer-bg: $card-cap-bg !default;
$card-footer-text: $card-text !default;
$card-footer-border: $card-border-color !default;

$card-title-margin-bottom: map-get( $spacing, md ) !default;
$card-subtitle-margin-bottom: map-get( $spacing, md ) !default;
$card-subtitle-text: true-mix($card-text, $card-bg, 65%) !default;

$card-img-max-width: 100px !default;
$card-avatar-size: 45px !default;
$card-avatar-spacing:  $card-header-padding-x !default;

$card-actions-padding-x: map-get( $spacing, 2 ) !default;
$card-actions-padding-y: map-get( $spacing, 2 ) !default;
$card-actions-border-width: 1px !default;
$card-actions-gap: map-get( $spacing, 2 ) !default;

$card-deck-scroll-button-radius: 0px !default;
$card-deck-scroll-button-offset: -$button-border-width !default;

$card-callout-width: 1.3em !default;
$card-callout-height: 1.3em !default;

$card-callout-box-shadow-n: null !default;
$card-callout-box-shadow-e: null !default;
$card-callout-box-shadow-s: null !default;
$card-callout-box-shadow-w: null !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/card/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/card/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/card/_layout.scss
@include exports("card/layout") {


    // Angular elements
    kendo-card,
    kendo-card-header,
    kendo-card-body,
    kendo-card-actions,
    kendo-card-footer {
        display: block;
    }


    // Card
    .k-card {
        @include border-radius( $card-border-radius );
        @include box-shadow( $card-box-shadow );
        border-width: $card-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $card-font-family;
        font-size: $card-font-size;
        line-height: $card-line-height;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;
    }
    .k-card > .k-card-inner {
        @include border-radius( $card-inner-border-radius );
        display: flex;
        flex-direction: inherit;
        overflow: hidden;
    }


    // Card orientation
    .k-card-horizontal  { flex-flow: row nowrap; }
    .k-card-vertical    { flex-flow: column nowrap; }


    // Header
    .k-card-header {
        padding: $card-header-padding-y $card-header-padding-x;
        border-width: 0 0 $card-header-border-width;
        border-style: solid;
        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: $card-title-margin-bottom;
        }
    }


    // Footer
    .k-card-footer {
        padding: $card-footer-padding-y $card-footer-padding-x;
        border-width: $card-footer-border-width 0 0;
        border-style: solid;
        flex-shrink: 0;
    }


    // Body
    .k-card-body {
        padding: $card-body-padding-y $card-body-padding-x;
        flex: 1 1 auto;

        p {
            margin: 0 0 $paragraph-margin-bottom;
        }

        > .k-last,
        > :last-child {
            margin-bottom: 0;
        }

        > .k-card-actions {
            padding: 0;
        }
    }


    // Card avatar
    .k-card-avatar,
    .k-card .k-avatar {
        margin-right: $card-avatar-spacing;
        width: $card-avatar-size;
        height: $card-avatar-size;
        flex-basis: $card-avatar-size;
    }


    // Card image
    .k-card-image,
    .k-card-media {
        border: 0;
        max-width: 100%;
        flex-shrink: 0;
        overflow: hidden;

        > img {
            border: 0;
            max-width: 100%;
        }

        .k-card-horizontal & {
            max-width: $card-img-max-width;
            object-fit: cover;
        }
    }


    // Card title
    .k-card-title {
        @include typography( map-get( $typography-config, card-title ) );
        margin: 0 0 $card-title-margin-bottom;
    }


    // Card subtitle
    .k-card-subtitle {
        @include typography( map-get( $typography-config, card-subtitle ) );
        margin: 0 0 $card-subtitle-margin-bottom;
    }


    // 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-vertical,
    .k-card-horizontal > .k-card-separator {
        border-left-width: 1px;
    }
    .k-card-separator.k-separator-horizontal,
    .k-card-vertical > .k-card-separator {
        border-top-width: 1px;
    }

    .k-card > .k-hr {
        margin: 0;
        flex: 0 0 auto;
        border-color: inherit;
    }


    // Card actions
    .k-card-actions {
        padding: $card-actions-padding-y $card-actions-padding-x;
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        overflow: hidden;
        display: flex;
        flex-shrink: 0;
        flex-basis: auto;
        gap: $card-actions-gap;

        > .k-button {
            padding-left: calc( #{$card-body-padding-x} - ( #{$card-actions-padding-x} + #{$button-border-width} ) );
            padding-right: calc( #{$card-body-padding-x} - ( #{$card-actions-padding-x} + #{$button-border-width} ) );
            max-width: 100%;
            white-space: normal;
        }
    }


    // Actions align
    .k-card-actions-start       { justify-content: flex-start; }
    .k-card-actions-end         { justify-content: flex-end; }
    .k-card-actions-center      { justify-content: center; }


    // Actions orientation
    .k-card-actions-horizontal  { flex-flow: row nowrap; }
    .k-card-actions-vertical    { flex-flow: column nowrap; }


    // Streched actions
    .k-card-actions-stretched {
        padding: 0;
        gap: 0;

        > .k-button,
        > .k-card-action {
            flex: 1 1 auto;
        }

        // TODO: refactor once we have button size
        .k-button {
            @include border-radius( 0 );
            padding-top: calc( #{$card-actions-padding-y} + #{$button-padding-y} );
            padding-bottom: calc( #{$card-actions-padding-y} + #{$button-padding-y} );
        }

        .k-card & {
            border-top-width: $card-actions-border-width;
        }
        .k-card-horizontal > & {
            border-top-width: 0;
            border-inline-start-width: $card-actions-border-width;
        }
        .k-card-vertical > & {
            border-top-width: $card-actions-border-width;
        }

        &.k-card-actions-horizontal > .k-card-action + .k-card-action {
            border-inline-start-width: $card-actions-border-width;
        }
        &.k-card-actions-vertical > .k-card-action + .k-card-action {
            border-top-width: $card-actions-border-width;
        }
    }


    // Card action
    .k-card-action {
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        display: inline-flex;

        > .k-button {
            flex: 1 1 auto;
        }
    }


    // List
    .k-card-list {
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;
        gap: $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: $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( $card-deck-scroll-button-radius );
            flex: 0 0 auto;
            position: absolute;
            z-index: 1;

            &:first-child {
                left: $card-deck-scroll-button-offset;
            }

            &:last-child {
                right: $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-direction: row;
        flex-wrap: 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: $card-border-width;
        }


        // Border-radius
        .k-card.k-first {
            @include border-left-radius( $card-border-radius );
        }
        .k-card.k-last {
            @include border-right-radius( $card-border-radius );
        }
        .k-card.k-only {
            @include border-radius( $card-border-radius );
        }
    }


}




@include exports( "card/layout/callout" ) {

    .k-card-with-callout {
        overflow: visible;
    }

    .k-card-callout {
        margin: 0;
        width: $card-callout-width;
        height: $card-callout-height;
        border-width: $card-border-width $card-border-width 0 0;
        border-style: solid;
        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(135deg) scaleX(-1);
    }
    .k-card-callout.k-callout-s {
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%) rotate(135deg);
    }
    .k-card-callout.k-callout-w {
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%) rotate(-135deg);
    }

}




@include exports( "card/layout/fill" ) {


    // Solid card
    .k-card-solid {
        @include box-shadow( $card-box-shadow );
    }


    // Flat card
    .k-card-flat {
        @include box-shadow( none );
    }

}




@include exports("card/layout/rtl") {

    .k-rtl,
    [dir="rtl"] {

        .k-card-actions-stretched {
            .k-card-action + .k-card-action {
                border-right-width: $card-actions-border-width;
                border-left-width: 0;
            }
        }

        .k-card-horizontal {
            > .k-card-actions-stretched,
            .k-card-actions-vertical {
                border-right-width: $card-actions-border-width;
                border-left-width: 0;
            }
        }

    }

}




@include exports("card/layout/ie11") {

    .k-ie11 {

        // IE11 needs units to be added to flex-basis when in shorthand
        // Thus, `flex: x x 0` will be ignored and we need `flex: x x auto`
        // See https://github.com/philipwalton/flexbugs#flexbug-4
        .k-card-body {
            flex: 1 1 auto;
        }

    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/card/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/card/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/card/_theme.scss
@include exports("card/theme") {

    // Card
    .k-card {
        @extend .k-text-selection !optional;
        @include fill( $card-text, $card-bg, $card-border );
    }


    // Card actions
    .k-card-actions {
        border-color: $card-border;
    }


    // Header
    .k-card-header {
        @include fill( $card-header-text, $card-header-bg, $card-header-border );
    }


    // Footer
    .k-card-footer {
        @include fill( $card-footer-text, $card-footer-bg, $card-footer-border );
    }


    // Separator
    .k-card-separator {
        border-color: $card-border;
    }


    // TODO: refactor
    .k-card-subtitle {
        color: $card-subtitle-text;
    }


    // Card theme colors
    @each $name, $color in $theme-colors {
        .k-card-#{$name} {
            background-color: tint($color, 10);
            color: shade($color, 6);
            border-color: tint($color, 9);

            .k-card-subtitle {
                color: inherit;
            }
        }
    }


    .k-card-wrap {
        &.k-state-focused,
        &.k-state-selected {
            > .k-card {
                box-shadow: $card-box-focused-shadow;
            }
        }
    }


    // Card callout
    .k-card-callout {
        @include fill(
            $bg: $card-bg,
            $border: $card-border
        );
    }
    .k-card-callout.k-callout-n { @include box-shadow( $card-callout-box-shadow-n ); }
    .k-card-callout.k-callout-e { @include box-shadow( $card-callout-box-shadow-e ); }
    .k-card-callout.k-callout-s { @include box-shadow( $card-callout-box-shadow-s ); }
    .k-card-callout.k-callout-w { @include box-shadow( $card-callout-box-shadow-w ); }


}

// #endregion

// #endregion

// #endregion
// #region @import "splitter/_index.scss"; -> /packages/bootstrap/scss/splitter/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/splitter/_variables.scss
// Splitter
$splitter-border-width: 1px !default;
$splitter-font-family: $font-family !default;
$splitter-font-size: $font-size !default;
$splitter-line-height: $line-height !default;

$splitter-bg: $component-bg !default;
$splitter-text: $component-text !default;
$splitter-border: $component-border !default;

$splitter-splitbar-size: 8px !default;
$splitter-resize-icon-size: 10px !default;
$splitter-drag-handle-length: 20px !default;
$splitter-drag-handle-thickness: 2px !default;
$splitter-drag-icon-margin: 7px !default;

$splitbar-bg: darken($button-bg, 5) !default;
$splitbar-text: $button-text !default;

$splitbar-hovered-bg: darken($button-hovered-bg, 5) !default;
$splitbar-hovered-text: $button-hovered-text !default;

$splitbar-selected-bg: $selected-bg !default;
$splitbar-selected-text: $selected-text !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/splitter/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/splitter/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/splitter/_layout.scss
@include exports("splitter/layout") {

    // Base
    .k-splitter {
        @include use-background-clip();
        height: 300px;
        border-width: $splitter-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $splitter-font-family;
        font-size: $splitter-font-size;
        line-height: $splitter-line-height;
        display: block;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        // Pane
        .k-pane {
            overflow: hidden;
        }
        .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;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;

        .k-icon {
            font-size: $splitter-resize-icon-size;
            display: block;
            cursor: pointer;
        }
    }

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

    .k-ghost-splitbar-horizontal,
    .k-splitbar-horizontal {
        width: $splitter-splitbar-size;
        border-width: 0;
        background-repeat: repeat-y;
        flex-direction: column;
        top: 0;
    }
    .k-ghost-splitbar-vertical,
    .k-splitbar-vertical {
        height: $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 {
        position: static;
        width: $splitter-drag-handle-thickness;
        height: $splitter-drag-handle-length;
    }

    .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-i-arrow-60-left {
        margin-bottom: $splitter-drag-icon-margin;
    }

    .k-splitbar-horizontal .k-i-arrow-60-right {
        margin-top: $splitter-drag-icon-margin;
    }

    .k-splitbar-vertical .k-i-arrow-60-up {
        margin-right: $splitter-drag-icon-margin;
    }

    .k-splitbar-vertical .k-i-arrow-60-down {
        margin-left: $splitter-drag-icon-margin;
    }

    .k-splitbar-draggable-vertical .k-resize-handle {
        position: static;
        width: $splitter-drag-handle-length;
        height: $splitter-drag-handle-thickness;
    }

    .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;
            display: block; // ie10 + flex
            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-state-hidden,
            &[hidden] {
                // sass-lint:disable-block no-important
                // hidden panes need to be zero-width to allow pane animation
                flex: 0 1 0% !important;
                overflow: hidden !important;
                display: block !important;
            }
        }

        &.k-splitter-horizontal {
            flex-direction: row;

            &[dir="rtl"] {
                > .k-splitbar {
                    > .k-collapse-next,
                    > .k-collapse-prev {
                        transform: scaleX(-1);
                    }
                }
            }
        }
        &.k-splitter-vertical {
            flex-direction: column;
        }
    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/splitter/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/splitter/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/splitter/_theme.scss
@include exports("splitter/theme") {

    .k-splitter {
        @extend .k-text-selection !optional;
        @include fill(
            $splitter-text,
            $splitter-bg,
            $splitter-border
        );
    }

    // Splitbar
    .k-splitbar {
        color: $splitbar-text;
        background-color: $splitbar-bg;

        &:active,
        &.k-state-focused {
            color: $splitbar-selected-text;
            background: $splitbar-selected-bg;
        }
    }
    .k-splitbar-horizontal-hover,
    .k-splitbar-vertical-hover {
        color: $splitbar-hovered-text;
        background-color: $splitbar-hovered-bg;
    }

    .k-ghost-splitbar {
        background-color: $splitbar-hovered-bg;
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "tilelayout/_index.scss"; -> /packages/bootstrap/scss/tilelayout/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../card/_index.scss"; -> /packages/bootstrap/scss/card/_index.scss
// #region @import /packages/bootstrap/scss/card/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/tilelayout/_variables.scss
// TileLayout
$tilelayout-border-width: 0px !default;
$tilelayout-card-border-width: $card-border-width !default;

$tilelayout-hint-border-width: 1px !default;
$tilelayout-hint-border-radius: $card-border-radius !default;

$tilelayout-bg: $gray-100 !default;

$tilelayout-hint-bg: rgba(255, 255, 255, .2) !default;
$tilelayout-hint-border: $component-border !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/tilelayout/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/tilelayout/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/tilelayout/_layout.scss
@include exports("tilelayout/layout") {

    .k-tilelayout {
        @include use-background-clip();
        border-width: $tilelayout-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        display: grid;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-card {
            @include box-shadow( none );
            border-width: $tilelayout-card-border-width;
        }
    }

    .k-layout-item-hint {
        @include border-radius( $tilelayout-hint-border-radius );
        border-width: $tilelayout-hint-border-width;
        border-style: solid;
        position: relative;

        &.k-layout-item-hint-resize {
            z-index: 3;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/tilelayout/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/tilelayout/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/tilelayout/_theme.scss
@include exports("tilelayout/theme") {

    .k-tilelayout {
        @include fill(
            $bg: $tilelayout-bg
        );
    }

    .k-layout-item-hint {
        @include fill(
            $bg: $tilelayout-hint-bg,
            $border: $tilelayout-hint-border
        );
    }

}

// #endregion

// #endregion

// #endregion


// Data management
// #region @import "grid/_index.scss"; -> /packages/bootstrap/scss/grid/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../adaptive/_index.scss"; -> /packages/bootstrap/scss/adaptive/_index.scss
// #region @import /packages/bootstrap/scss/adaptive/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../progressbar/_index.scss"; -> /packages/bootstrap/scss/progressbar/_index.scss
// #region @import /packages/bootstrap/scss/progressbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../action-buttons/_index.scss"; -> /packages/bootstrap/scss/action-buttons/_index.scss
// #region @import /packages/bootstrap/scss/action-buttons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../toolbar/_index.scss"; -> /packages/bootstrap/scss/toolbar/_index.scss
// #region @import /packages/bootstrap/scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../checkbox/_index.scss"; -> /packages/bootstrap/scss/checkbox/_index.scss
// #region @import /packages/bootstrap/scss/checkbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../radio/_index.scss"; -> /packages/bootstrap/scss/radio/_index.scss
// #region @import /packages/bootstrap/scss/radio/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../validator/_index.scss"; -> /packages/bootstrap/scss/validator/_index.scss
// #region @import /packages/bootstrap/scss/validator/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../autocomplete/_index.scss"; -> /packages/bootstrap/scss/autocomplete/_index.scss
// #region @import /packages/bootstrap/scss/autocomplete/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../datetime/_index.scss"; -> /packages/bootstrap/scss/datetime/_index.scss
// #region @import /packages/bootstrap/scss/datetime/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> /packages/bootstrap/scss/dropdownlist/_index.scss
// #region @import /packages/bootstrap/scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../numerictextbox/_index.scss"; -> /packages/bootstrap/scss/numerictextbox/_index.scss
// #region @import /packages/bootstrap/scss/numerictextbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../menu/_index.scss"; -> /packages/bootstrap/scss/menu/_index.scss
// #region @import /packages/bootstrap/scss/menu/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../dialog/_index.scss"; -> /packages/bootstrap/scss/dialog/_index.scss
// #region @import /packages/bootstrap/scss/dialog/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../pager/_index.scss"; -> /packages/bootstrap/scss/pager/_index.scss
// #region @import /packages/bootstrap/scss/pager/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/grid/_variables.scss
// #region @import /packages/bootstrap/scss/grid/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/grid/_layout.scss
$edit-cell-input-space: 0px !default;
$edit-cell-textbox-width: 100% !default;

// #region @import "~@progress/kendo-theme-default/scss/grid/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/grid/_layout.scss
@include exports("grid/layout") {

    $filter-rows-span-size: calc( #{$line-height-em} + #{$input-padding-y * 2} + #{$input-border-width * 2}) !default;

    $grid-group-dropclue-size: 6px;
    $grid-group-dropclue-line-size: $grid-group-dropclue-size / 3;
    $grid-group-dropclue-height: $button-calc-size !default;
    $grid-group-dropclue-top: 3px !default;
    $grid-group-drag-clue-opacity: 1 !default;

    $edit-cell-input-space: calc(-#{$cell-padding} - #{$input-border-width}) !default;
    $edit-cell-textbox-width: calc(100% + ((#{$cell-padding} + #{$input-border-width}) * 2)) !default;

    $grid-row-inner-height: calc( #{$line-height-em} + #{$cell-padding-y * 2} );
    // $grid-row-half-inner-height: calc( #{$line-height-em / 2} + #{$cell-padding-y} );

    // be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
    $grid-command-cell-padding-y: calc( #{$cell-padding-y} - (#{$button-calc-size} - #{$line-height-em}) / 2 ) !default;

    $grid-form-component-vertical-align: middle !default;
    $grid-hierarchy-col-width: ($icon-size * 2) !default;

    $grid-group-indicator-border-radius: $border-radius !default;
    $grid-group-indicator-gap: $cell-padding-y !default;

    $grid-grouping-row-border-top: 1px !default;
    $grid-group-footer-border-y: 1px !default;
    $grid-group-footer-second-cell-border: 1px !default;
    $grid-header-first-border: 1px !default;
    $grid-header-menu-icon-spacing: $icon-spacing !default;
    $grid-sorted-icon-spacing: calc( #{$padding-x} - 1px ) !default;

    // helper variables
    $grid-filterable-icon-spacing: calc( #{$button-calc-size} + #{$grid-header-menu-icon-spacing} );
    $default-scrollbar-width: 17px;

    .k-grid {
        @include use-background-clip();
        border-width: $grid-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $grid-font-family;
        font-size: $grid-font-size;
        line-height: $grid-line-height;
        display: flex;
        flex-direction: column;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-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;
        }

        table {
            margin: 0;
            width: 100%;
            max-width: none;
            border-width: 0;
            border-color: inherit;
            border-collapse: separate;
            border-spacing: 0;
            empty-cells: show;
            outline: 0;
        }
        thead,
        tbody,
        tfoot {
            text-align: left;
            border-color: inherit;
        }
        tr {
            border-color: inherit;
        }
        th,
        td {
            padding: $grid-cell-padding-y $grid-cell-padding-x;
            border-style: solid;
            border-color: inherit;
            outline: 0;
            font-weight: inherit;
            text-align: inherit;
            overflow: hidden;
            text-overflow: ellipsis;

            &:first-child {
                border-left-width: 0;
            }

            &:focus {
                outline: none;
            }

            .k-placeholder-line {
                width: $grid-cell-placeholder-line-width;
            }
        }
        th {
            padding: $grid-header-padding-y $grid-header-padding-x;
            border-width: 0 0 1px $grid-cell-vertical-border-width;
            white-space: nowrap;
        }
        td {
            border-width: 0 0 $grid-cell-horizontal-border-width $grid-cell-vertical-border-width;
            vertical-align: middle;
        }

        a {
            color: inherit;
            text-decoration: none;
        }
        a:hover {
            text-decoration: none;
        }

        table,
        .k-grid-header-wrap {
            box-sizing: content-box;
        }

        // Grouping and hierarcy
        .k-group-col,
        .k-hierarchy-col {
            padding: 0;
            width: $grid-hierarchy-col-width;
        }

        .k-grouping-row p {
            margin: 0;
            display: flex;
            align-items: center;
            align-content: center;
        }
        .k-grouping-row td {
            overflow: visible;
        }
        .k-grouping-row + tr td {
            border-top-width: $grid-grouping-row-border-top;
        }
        .k-grouping-row .k-group-cell,
        .k-grouping-row + tr .k-group-cell {
            border-top-width: 0;
            text-overflow: clip;
        }

        .k-grouping-row .k-icon {
            margin-left: calc( #{$icon-size / 2} - #{$cell-padding-x} );
            margin-right: ($icon-size / 2);
            text-decoration: none;
        }

        .k-group-footer td {
            border-style: solid;
            border-width: $grid-group-footer-border-y 0;
        }
        .k-group-footer .k-group-cell + td {
            border-left-width: $grid-group-footer-second-cell-border;
        }

        .k-hierarchy-cell {
            text-align: center;
            padding: 0;
            overflow: visible;

            > .k-icon {
                padding: $cell-padding-y 0;
                width: 100%;
                height: 100%;
                // That causes an issue with grid material. Commenting it for now
                // -- joneff
                // line-height: $line-height;
                display: inline-block;
                outline: 0;
            }
        }

        .k-hierarchy-cell + td {
            border-left-width: 0;
        }

        .k-hierarchy-cell + .k-grid-content-sticky {
            border-left-width: $grid-cell-vertical-border-width;
        }
        .k-detail-cell {}
        .k-master-row {}
        .k-detail-row {}

        &[dir = "rtl"],
        .k-rtl & {
            thead,
            tbody,
            tfoot {
                text-align: right;
            }

            th {
                white-space: nowrap;
            }

            .k-grid-header-wrap {
                border-width: 0 0 0 $grid-cell-vertical-border-width;
            }

            .k-group-indicator,
            .k-drag-clue {
                .k-button.k-bare {
                    margin-left: -( $icon-spacing / 2 );
                    margin-right: ( 2 * $icon-spacing );
                }

                .k-link .k-icon {
                    margin-left: $icon-spacing;
                    margin-right: -( $icon-spacing / 2);
                }
            }
            .k-group-indicator {
                margin-right: 0;
                margin-left: ( $grid-group-indicator-gap / 2 );
            }

            .k-group-indicator + .k-group-indicator {
                margin-right: ( $grid-group-indicator-gap / 2 );
            }

            .k-grid-content-locked,
            .k-grid-footer-locked,
            .k-grid-header-locked {
                border-left-width: $grid-cell-vertical-border-width;
                border-right-width: 0;
            }

            .k-grid-header-sticky,
            .k-grid-content-sticky,
            .k-grid-footer-sticky {
                border-left-width: $grid-cell-vertical-border-width;
            }

            .k-grid-header-sticky:not([style*="display: none"]) + td,
            .k-grid-header-sticky:not([style*="display: none"]) + th,
            .k-grid-content-sticky:not([style*="display: none"]) + td,
            .k-grid-content-sticky:not([style*="display: none"]) + th {
                border-left-width: $grid-cell-vertical-border-width;
                border-right-width: 0;
            }

            .k-grid-header-sticky.k-header:first-child {
                border-left-width: $grid-cell-vertical-border-width;
            }

            .k-grid-row-sticky {
                border-bottom-width: $grid-border-width;
                border-top-width: $grid-border-width;
            }

            th {
                border-width: 0 $grid-cell-vertical-border-width 1px 0;

                &:first-child {
                    border-right-width: 0;
                }
            }

            td {
                border-width: 0 $grid-cell-vertical-border-width 0 0;

                &:first-child {
                    border-right-width: 0;
                }
            }

            td.k-hierarchy-cell {
                border-right-width: 0;
            }

            .k-hierarchy-cell + td {
                border-right-width: 0;
            }

            .k-grid-header,
            .k-grid-footer {
                padding-left: $default-scrollbar-width;
                padding-right: 0;
            }

            .k-grid-header {
                .k-header {
                    &.k-first {
                        border-left-width: 0;
                        border-right-width: $grid-cell-vertical-border-width;
                    }
                }

                .k-with-icon,
                .k-filterable {
                    padding-left: $grid-filterable-icon-spacing;
                    padding-right: $grid-cell-padding-x;
                }

                .k-grid-filter,
                .k-header-column-menu {
                    right: auto;
                    left: $grid-header-menu-icon-spacing;
                }
            }

            .k-grid-header-sticky.k-header.k-first {
                border-left-width: $grid-cell-vertical-border-width;
            }

            .k-grid-header-sticky.k-header.k-grid-no-left-border.k-first {
                border-left-width: $grid-cell-vertical-border-width;
                border-right-width: 0;
            }

            .k-filtercell-operator {
                margin-left: 0;
                margin-right: $cell-padding-y / 2;
            }

            .k-dirty {
                border-color: currentColor currentColor transparent transparent;
                left: auto;
                right: 0;
            }

            .k-edit-cell,
            .k-grid-edit-row > td {
                >.k-textbox,
                >.k-widget {
                    margin-right: $edit-cell-input-space;
                }
            }

            .k-grid-header-wrap.k-auto-scrollable {
                margin-left: -1px;
                margin-right: 0;
            }

            .k-grid-header-locked + .k-grid-header-wrap.k-auto-scrollable {
                margin-left: 0;
            }

            .k-group-footer td {
                border-width: $grid-group-footer-border-y 0;
            }
            .k-group-footer .k-group-cell + td {
                border-right-width: $grid-group-footer-second-cell-border;
            }

            .k-grid-toolbar {

                .k-button + .k-button {
                    margin: 0 $grid-toolbar-spacing 0 0;
                }
            }

            .k-grouping-row .k-icon {
                margin-left: #{$icon-size / 2};
                margin-right: calc( #{$icon-size / 2} - #{$cell-padding-x} );
            }

            .k-grid-search {
                float: left;
            }

            .k-column-resizer {
                left: 0;
                right: auto;
            }
        }

        .k-dirty-cell {
            position: relative;

            &.k-grid-content-sticky {
                position: sticky;
            }
        }

        .k-dirty {
            border-width: 5px;
            border-color: currentColor transparent transparent currentColor;
            left: 0;
            right: 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-search {
            width: $grid-search-width;
            float: right;
        }

        .k-grid-filter,
        .k-header-column-menu,
        .k-hierarchy-cell .k-icon {
            border-width: 0;
        }
    }

    // Toolbar
    .k-grid-toolbar {
        padding: $grid-toolbar-padding-y $grid-toolbar-padding-x;
        border-width: 0 0 1px;
        border-style: solid;
        border-color: inherit;
        text-overflow: clip;
        cursor: default;
        display: block;

        > * {
            vertical-align: middle;
        }
        > * + * {
            margin-left: $grid-toolbar-spacing;
        }

    }


    // Grouping header
    .k-grouping-header {
        display: block;
        position: relative;
        white-space: normal;
        padding: $grid-grouping-header-padding-y $grid-grouping-header-padding-x;
        border-width: 0 0 1px;
        border-style: solid;
        border-color: inherit;
        line-height: $button-calc-size;
    }

    .k-grouping-header-flex {
        display: flex;
        flex-shrink: 0;
        flex-wrap: wrap;
        // use item padding instead of margin, in order to position the reorder clue correctly
        $header-half-padding-y: $grid-grouping-header-padding-y / 2;
        padding: $header-half-padding-y 0;

        > .k-indicator-container {
            display: inline-flex;
            margin: 0;
            padding: $header-half-padding-y 0 $header-half-padding-y $grid-grouping-header-padding-x;

            &:last-child {
                display: block;
                flex-grow: 1;
                line-height: $button-calc-size;
            }
        }
    }

    .k-group-indicator,
    .k-drag-clue {
        @include border-radius( $grid-group-indicator-border-radius );
        margin: 0;
        padding: $button-padding-y $button-padding-x;
        border-width: 1px;
        border-style: solid;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        align-content: center;
        vertical-align: top;
        opacity: $grid-group-drag-clue-opacity;
        box-sizing: border-box;

        .k-link,
        .k-button.k-bare {
            padding: 0;
            border-width: 0;
            display: inline-flex;
            align-items: center;
        }

        .k-link .k-icon {
            margin-left: -( $icon-spacing / 2);
            margin-right: $icon-spacing;
        }

        .k-button.k-bare {
            margin-left: ( 2 * $icon-spacing );
            margin-right: -( $icon-spacing / 2 );
            padding: 0;
            width: auto;
            height: auto;
            opacity: .5;

            &::before,
            &::after {
                display: none;
            }

            &:hover {
                opacity: 1;
            }
        }
    }

    .k-group-indicator {
        margin-right: ( $grid-group-indicator-gap / 2 );
        line-height: $grid-group-drag-clue-line-height;
    }

    .k-group-indicator + .k-group-indicator {
        margin-left: ( $grid-group-indicator-gap / 2 );
    }

    .k-drag-clue {
        line-height: $line-height-lg;
    }

    .k-grouping-dropclue {
        width: ($grid-group-dropclue-size * 2);
        height: $grid-group-dropclue-height;
        position: absolute;
        top: $grid-group-dropclue-top;
        box-sizing: content-box;

        &::before,
        &::after {
            display: inline-block;
            content: "";
            position: absolute;
        }

        &::before {
            border-width: $grid-group-dropclue-size;
            border-style: solid;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            top: 0;
        }

        &::after {
            width: $grid-group-dropclue-line-size;
            height: calc(100% - #{$grid-group-dropclue-size});
            top: $grid-group-dropclue-size;
            left: calc( #{$grid-group-dropclue-size} - #{$grid-group-dropclue-line-size / 2} );
        }
    }


    // Grid header / footer
    .k-grid-header-wrap,
    .k-grid-footer-wrap {
        width: 100%;
        border-width: 0 1px 0 0;
        border-style: solid;
        border-color: inherit;
        position: relative;
        overflow: hidden;
    }

    .k-grid-header-wrap.k-auto-scrollable,
    .k-grid-footer-wrap {
        margin-right: -1px;
    }

    .k-grid-header-locked + .k-grid-header-wrap.k-auto-scrollable {
        margin-right: 0;

        .k-ie & {
            display: inline-block;
        }
    }

    .k-grid-header,
    .k-grid-footer {
        flex: 0 0 auto;
        padding-right: $default-scrollbar-width;
        border-width: 0;
        border-style: solid;
        border-color: inherit;

        table {
            table-layout: fixed;
        }
    }

    div.k-grid-header,
    div.k-grid-footer {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    .k-ie div.k-grid-header {
        display: block;
    }

    .k-grid-header {
        border-bottom-width: 1px;
        font-size: $grid-header-font-size;

        table {
            margin-bottom: -1px;
        }

        &.k-grid-draggable-header {
            user-select: none;
            touch-action: none;
        }

        .k-header {
            position: relative;
            vertical-align: bottom;
            cursor: default;

            &:first-child {
                border-left-width: 0;
            }

            &.k-first {
                border-left-width: $grid-header-first-border;
            }
        }

        .k-header > .k-link {
            margin: (-$grid-header-padding-y) (-$grid-header-padding-x);
            padding: $grid-header-padding-y $grid-header-padding-x;
            line-height: inherit;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            outline: 0;

            .k-ie &,
            .k-edge & {
                margin: 0;
                padding: 0;
            }

        }

        .k-with-icon,
        .k-filterable {
            padding-right: $grid-filterable-icon-spacing;

            .k-ie &,
            .k-edge & {
                padding-right: calc( #{ $button-calc-size } + #{ $grid-header-menu-icon-spacing });
            }
        }

        .k-header > .k-link:focus {
            text-decoration: none;
        }

        .k-grid-filter,
        .k-header-column-menu {
            padding: $button-padding-y;
            width: $button-calc-size;
            height: $button-calc-size;
            box-sizing: border-box;
            outline: 0;
            line-height: $form-line-height;
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: center;
            position: absolute;
            right: $grid-header-menu-icon-spacing;
            bottom: calc( #{ $grid-header-padding-y } + #{ $line-height-em / 2 } - #{ $button-inner-calc-size / 2 } );
            z-index: 1;

            .k-ie &,
            .k-edge & {
                position: static;
                float: right;
                margin-top: calc( (#{ $button-calc-size } - #{ $form-line-height * 1em}) / -2);
                margin-bottom: calc( (#{ $button-calc-size } - #{ $form-line-height * 1em}) / -2);
                margin-right: calc( -1 * #{ $button-calc-size });
            }

            &:hover {
                cursor: pointer;
            }
        }

        .k-header > .k-link > .k-icon {
            &.k-i-sort-desc-sm,
            &.k-i-sort-asc-sm {
                vertical-align: text-top;
                margin-left: $grid-sorted-icon-spacing;
            }
        }

        .k-sort-order {
            display: inline-block;
            vertical-align: top;
            height: $icon-size;
            font-size: $grid-sorting-index-font-size;
            margin-top: $grid-sorting-index-spacing-y;
            margin-left: $grid-sorting-index-spacing-x;
        }
    }

    .k-column-resizer {
        width: .5em;
        height: 1000%;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        cursor: col-resize;
    }

    .k-grid-footer {
        border-width: 1px 0 0;

        td {
            height: $line-height-em;
        }
    }

    .k-grid-footer td,
    .k-group-footer td,
    .k-grouping-row td {
        font-weight: bold;
    }

    .k-grid-filter-popup {
        min-width: 200px;
    }

    // Standalone column menu
    .k-grid-column-menu-standalone a.k-grid-filter {
        position: initial;
        display: inline-block;
        margin: -4px 0;
        padding: 4px 8px;
    }

    .k-grid-columnmenu-popup {
        width: 230px;
    }

    // Filter row
    .k-filter-row {
        line-height: $form-line-height;

        td,
        th {
            border-width: 0 0 1px $grid-cell-vertical-border-width;
            white-space: nowrap;
            padding: $grid-filter-cell-padding-y $grid-filter-cell-padding-x;
        }

        td:first-child {
            border-left-width: 0;
        }

        .k-multiselect {
            height: auto;
        }

        .k-filtercell .k-widget.k-sized-input {
            flex: 0 1 auto;
        }
    }

    .k-filtercell {
        width: auto;
        display: flex;

        > span,
        .k-filtercell-wrapper {
            display: flex;
            flex: 1 1 auto;

            > label {
                vertical-align: middle;
            }
        }

        .k-filtercell-wrapper > .k-widget {
            width: 100%;
        }

        > span {
            .k-button {
                visibility: visible;
                pointer-events: all;
            }

            .k-button,
            .k-dropdown-operator {
                margin-left: $grid-cell-padding-y / 2;
            }

            .k-widget {
                width: auto;
            }
        }

        .k-filtercell-operator {
            > .k-button.k-clear-button-visible {
                visibility: visible;
                height: $button-calc-size;
            }

            > .k-button:not(.k-clear-button-visible) {
                visibility: hidden;
                pointer-events: none;
            }
        }

        .k-filtercell-operator {
            margin-left: $grid-cell-padding-y / 2;
        }

        .k-widget:not(.k-dropdown-operator),
        .k-filtercell-wrapper > .k-textbox {
            display: flex;
            flex: 1 1 auto;
        }

        .k-filtercell-wrapper > .k-textbox {
            width: 100%;
            min-width: 0;
        }

    }

    // Grid content
    .k-grid-content,
    .k-grid-content-locked {
        border-color: inherit;
        outline: 0;

        table {
            table-layout: fixed;
        }
        tr:last-child > 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-edit-row {

        td {
            text-overflow: clip;
        }

        .k-widget,
        .k-button,
        .k-textbox {
            height: auto;
            // Commented out pending a better approach
            //     margin-top: -$input-padding-y;
            //     margin-bottom: -$input-padding-y;
        }

        .k-edit-cell {
            padding-top: 0;
            padding-bottom: 0;
        }

        .k-dirty-cell {
            overflow: visible;
        }
    }

    .k-edit-cell,
    .k-grid-edit-row > td {
        > .k-textbox,
        > .k-widget:not(.k-switch) {
            margin-left: $edit-cell-input-space;
        }
    }

    .k-grid-edit-row td,
    .k-edit-cell {
        > .k-textbox,
        > .k-widget:not(.k-switch) {
            width: $edit-cell-textbox-width;
        }
    }

    .k-grid-edit-row td > .k-textbox,
    .k-grid-edit-row td > .k-widget,
    .k-command-cell > .k-button,
    .k-edit-cell > .k-textbox,
    .k-edit-cell > .k-widget {
        vertical-align: $grid-form-component-vertical-align;
    }

    .k-grid .k-grid-edit-row td,
    .k-grid .k-command-cell,
    .k-grid .k-edit-cell {
        padding: $grid-command-cell-padding-y $grid-cell-padding-x;
    }

    .k-command-cell > .k-button {
        margin-left: $grid-command-cell-button-spacing;
        margin-right: $grid-command-cell-button-spacing;
    }

    // Resize handle
    .k-grid > .k-resize-handle,
    .k-grid-header .k-resize-handle {
        height: 25px;
        cursor: col-resize;
        position: absolute;
        z-index: 2;
    }


    // 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-pager-input {
        .k-numerictextbox {
            margin: 0 $font-size / 2;
            width: 3em;
        }
    }

    .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-virtual[dir="rtl"],
    .k-grid-virtual.k-rtl {
        .k-grid-content .k-grid-table {
            float: right;
        }
    }

    .k-grid-add-row td {
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }


    // Locked columns
    .k-grid-lockedcolumns {
        white-space: nowrap;
    }

    .k-grid-content,
    .k-grid-content-locked,
    .k-pager-wrap {
        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 1px 0 0;

        & + .k-grid-content.k-auto-scrollable {
            display: inline-block;
        }
    }

    .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>table,
    .k-grid-header-wrap>table {
        margin-bottom: -1px;
    }

    .k-grid-header .k-header.k-grid-header-sticky,
    .k-grid-header .k-filter-row .k-grid-header-sticky,
    .k-grid-content-sticky,
    .k-grid-row-sticky,
    .k-grid-footer-sticky {
        position: sticky;
        z-index: 2;

        &.k-edit-cell {
            overflow: visible;
            z-index: 3;
        }
    }

    .k-grid-content-sticky.k-grid-row-sticky {
        z-index: 3;
    }

    .k-grid .k-grid-header-sticky,
    .k-grid .k-grid-content-sticky,
    .k-grid .k-grid-footer-sticky {
        border-right-width: $grid-cell-vertical-border-width;

        &:not([style*="display: none"]) + td,
        &:not([style*="display: none"]) + th {
            border-left-width: 0;
        }
    }

    .k-grid .k-grid-row-sticky {
        border-bottom-width: $grid-border-width;
        border-top-width: $grid-border-width;
    }

    .k-grid-header-sticky.k-header.k-grid-no-left-border.k-first {
        border-left-width: 0;
    }

    .k-header.k-drag-clue {
        overflow: hidden;
    }

    .k-grid.k-grid-no-scrollbar {
        .k-grid-header {
            padding: 0;
        }

        .k-grid-header-wrap {
            border-width: 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 {
        width: 20em;
        height: 4em;
        line-height: 4em;
        margin: 0 auto;
        border: 1px solid;
    }
}

@include exports( "grid/pdf-export" ) {
    // 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
    .k-pdf-export-shadow {
        .k-grid {
            float: left;
            width: auto !important; // sass-lint:disable-line no-important
        }

        // Remove all sizes and scrolling
        .k-grid,
        .k-grid-content,
        .k-grid-content-locked {
            height: auto !important; // sass-lint:disable-line no-important
            overflow: visible;
        }

        .k-grid-header-locked {
            & + .k-grid-header-wrap,
            & + .k-grid-content,
            & + .k-grid-footer-wrap {
                width: auto !important; // sass-lint:disable-line no-important
            }
        }

        // Remove empty space reserved above the scrollbar
        .k-grid-header,
        .k-grid[data-role="grid"] .k-grid-footer {
            padding: 0 !important; // sass-lint:disable-line no-important
        }
    }
}

@include exports( "filtermenu/layout" ) {

    .k-filter-menu {
        $item-spacing: $spacer-y / 2;
        $form-padding: $spacer-y;
        $form-padding-y: $form-padding - $item-spacing;

        .k-filter-menu-container {
            padding: $form-padding-y $form-padding;
        }

        .k-widget,
        .k-radio-list,
        .k-textbox {
            margin: $item-spacing 0;
            width: 100%;
            display: block;
        }

        .k-widget.k-filter-and {
            width: 6em;
            margin: (2 * $item-spacing) 0;
        }

        .k-switch {
            width: $switch-size;
            display: inline-flex;
        }

        .k-actions,
        .k-action-buttons,
        .k-columnmenu-actions {
            margin-left: -$form-padding;
            margin-right: -$form-padding;
            margin-bottom: -$form-padding;
            padding: $form-padding;

            .k-button {
                flex: 1 1 50%;
            }
        }

        .k-actions {
            &.k-actions-start,
            &.k-actions-center,
            &.k-actions-end {
                .k-button {
                    flex: 0 1 auto;
                }
            }
        }
    }

    .k-multicheck-wrap {
        max-height: 300px;
        overflow: auto;
        overflow-x: hidden;
        white-space: nowrap;
    }
    .k-filter-selected-items {
        font-weight: bold;
        line-height: normal;
        white-space: nowrap;
        margin: $spacer-y 0 ($spacer / 2);
    }

    // autofitting requires automatic table layout to measure sizes
    .k-autofitting {
        // sass-lint:disable-block no-important

        width: auto !important;
        table-layout: auto !important;

        th.k-header,
        td {
            white-space: nowrap !important;
        }

        .k-detail-row {
            display: none !important;
        }
    }

}

@include exports("columnmenu/layout") {
    .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: $list-item-padding-y $list-item-padding-x;
        padding-right: calc( #{$list-item-padding-x * 2} + #{$icon-size} );
    }

    .k-column-list-item {
        position: relative;
        display: block;
        margin: 0;
        cursor: pointer;
    }

    .k-columnmenu-item {
        padding: $nav-item-padding-y $nav-item-padding-x;
        outline: 0;
        cursor: pointer;

        > .k-icon {
            margin-right: $icon-spacing;
        }
    }

    .k-columnmenu-item-wrapper {
        border-bottom: 1px solid;
        border-bottom-color: $popup-border;

        &:last-child {
            border-bottom-width: 0;
        }
    }

    .k-columnmenu-item-content {
        overflow: hidden;

        .k-column-list-item {
            padding-left: calc( #{$nav-item-padding-x} + #{$icon-size} + #{$icon-spacing} );
        }

        .k-filter-menu .k-filter-menu-container {
            padding: $spacer-y $spacer-x;
        }
    }

    .k-column-list-wrapper,
    .k-columnmenu-item-content {

        .k-actions,
        .k-action-buttons,
        .k-columnmenu-actions {
            .k-button {
                flex: 1 1 50%;
            }
        }

        .k-actions {
            &.k-actions-start,
            &.k-actions-center,
            &.k-actions-end {
                .k-button {
                    flex: 0 1 auto;
                }
            }
        }
    }

    .k-column-menu {
        .k-menu:not(.k-context-menu) {
            font-weight: 400;
        }
    }

    [dir = "rtl"],
    .k-rtl {
        .k-columnmenu-item  > .k-icon {
            margin-left: $icon-spacing;
            margin-right: 0;
        }
    }
}

// #endregion

@include exports("grid/layout/bootstrap") {

    // Grouping header
    .k-grouping-header .k-group-indicator {
        @include border-radius( $border-radius );
    }
}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/grid/_theme.scss
@include exports("grid/theme") {

    // Theme
    .k-grid {
        @include fill( $grid-text, $grid-bg, $grid-border );

        td,
        .k-grid-content,
        .k-grid-header-locked,
        .k-grid-content-locked {
            border-color: $grid-border;
        }

        // Alt row
        .k-alt {
            color: $grid-alt-text;
            background-color: $grid-alt-bg;
        }

        // Hover state
        tbody tr:hover,
        tbody tr.k-state-hover {
            color: $grid-hovered-text;
            background-color: $grid-hovered-bg;
        }

        // Selected state
        th.k-state-selected,
        td.k-state-selected,
        tr.k-state-selected > td {
            color: $grid-selected-text;
            background-color: $grid-selected-bg;
        }

        // Focused state
        td.k-state-focused,
        th.k-state-focused {
            box-shadow: $grid-focused-shadow;
        }

        col.k-sorted,
        th.k-sorted {
            background-color: $grid-sorted-bg;
        }

        // Locked

        .k-grid-header-locked,
        .k-grid-content-locked,
        .k-grid-header-locked .k-header,
        .k-grid-content-locked td {
            border-color: $grid-sticky-header-border;
        }

        .k-grid-header-locked .k-header {
            border-bottom-color: $grid-header-border;
        }

        .k-grid-content-locked {
            .k-group-footer td,
            .k-group-cell {
                @include fill( $border: $grid-header-border );
            }

            .k-grouping-row + tr td {
                border-top-color: $grid-header-border;
            }

            // Selected state
            .k-state-selected td {
                @include fill( $bg: $grid-sticky-selected-bg );
            }

            .k-state-selected.k-alt td {
                @include fill( $bg: $grid-sticky-selected-alt-bg );
            }

            // Hovered state
            .k-state-hover td,
            tr:hover td {
                @include fill( $bg: $grid-sticky-hovered-bg );
            }

            // Selected hover
            .k-state-selected:hover td,
            .k-state-selected.k-state-hover td {
                @include fill( $bg: $grid-sticky-selected-hovered-bg );
            }
        }

        &[dir="rtl"],
        &.k-rtl {
            th.k-hierarchy-cell,
            td.k-hierarchy-cell {
                border-left-color: transparent;
            }
        }
    }


    // Toolbar
    .k-grid-toolbar {
        @include fill(
            $toolbar-text,
            $toolbar-bg,
            inherit,
            $toolbar-gradient
        );
    }


    // Grouping header
    .k-grouping-header {
        @include fill( $grid-header-text, $grid-header-bg, $grid-header-border );
    }
    .k-grouping-header .k-group-indicator {
        @include fill(
            $button-text,
            $button-bg,
            $button-border,
            $button-gradient
        );
    }


    // Header
    .k-grid-header {
        @include fill( $grid-header-text, $grid-header-bg, $grid-header-border );

        .k-i-sort-asc-sm,
        .k-i-sort-desc-sm,
        .k-sort-order {
            color: $grid-sorting-indicator-text;
        }

        .k-grid-filter,
        .k-header-column-menu,
        .k-hierarchy-cell .k-icon {
            &:focus {
                box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
            }
            &.k-state-active {
                color: $selected-text;
                background-color: $selected-bg;
            }
        }

        .k-grid-header-sticky,
        .k-grid-header-sticky.k-sorted {
            @include fill(
                $color: $grid-sticky-header-text,
                $bg: $grid-sticky-header-bg
            );

            border-right-color: $grid-sticky-header-border;
            border-left-color: $grid-sticky-header-border;
        }
    }

    // Grid footer
    .k-grid-footer {
        .k-grid-footer-sticky {
            @include fill(
                $bg: $grid-sticky-footer-bg
            );
        }
    }


    // Content
    .k-master-row {
        .k-grid-content-sticky {
            @include fill(
                $grid-sticky-text,
                $grid-sticky-bg,
                $grid-sticky-border
            );
            border-top-color: $grid-border;
        }

        .k-grid-row-sticky {
            border-top-color: $grid-sticky-border;
            border-bottom-color: $grid-sticky-border;
            background-color: $grid-sticky-bg;
        }

        &.k-alt {
            .k-grid-content-sticky,
            .k-grid-row-sticky {
                @include fill( $bg: $grid-sticky-alt-bg );
            }
        }

        // Selected state
        &.k-state-selected .k-grid-content-sticky,
        &.k-state-selected .k-grid-row-sticky {
            @include fill( $bg: $grid-sticky-selected-bg );
        }

        &.k-state-selected.k-alt .k-grid-content-sticky,
        &.k-state-selected.k-alt .k-grid-row-sticky {
            @include fill( $bg: $grid-sticky-selected-alt-bg );
        }


        // Hovered state
        &:hover .k-grid-content-sticky,
        &:hover .k-grid-row-sticky,
        &.k-state-hover .k-grid-content-sticky,
        &.k-state-hover .k-grid-row-sticky {
            background-color: $grid-sticky-hovered-bg;
        }


        // Selected hover
        &.k-state-selected:hover .k-grid-content-sticky,
        &.k-state-selected:hover .k-grid-row-sticky,
        &.k-state-selected.k-state-hover .k-grid-content-sticky,
        &.k-state-selected.k-state-hover .k-grid-row-sticky {
            background-color: $grid-sticky-selected-hovered-bg;
        }
    }

    .k-grouping-row {
        .k-grid-content-sticky {
            @include fill( $bg: $grid-sticky-header-bg );
        }

        &:hover .k-grid-content-sticky,
        &.k-state-hover .k-grid-content-sticky {
            @include fill( $bg: $grid-sticky-hovered-bg );
        }
    }

    .k-group-footer {
        td,
        .k-grid-footer-sticky {
            @include fill( $bg: $grid-sticky-footer-bg );
        }

        &:hover .k-grid-footer-sticky,
        &.k-state-hover .k-grid-footer-sticky {
            @include fill( $bg: $grid-sticky-footer-hovered-bg );
        }
    }

    // Footer
    .k-grid-footer {
        @include fill(
            $grid-footer-text,
            $grid-footer-bg,
            $grid-footer-border
        );
        .k-grid-footer-locked {
            border-color: inherit;
        }
        .k-grid-footer-sticky {
            border-color: $grid-sticky-border;
            background-color: $grid-sticky-footer-bg;
        }
    }


    // Pager
    .k-grid-pager {
        @include fill( $grid-header-text, $grid-header-bg, $grid-header-border );
    }


    // Grouping
    .k-grouping-row,
    .k-group-cell {
        @include fill( $grid-header-text, $grid-header-bg, $grid-header-border );
    }

    .k-column-list-item:hover,
    .k-columnmenu-item:hover {
        @include fill(
            $list-item-hovered-text,
            $list-item-hovered-bg
        );
    }
    .k-columnmenu-item:focus,
    .k-columnmenu-item.k-state-focus {
        @include box-shadow( $list-item-focused-shadow );
    }

    .k-column-list-wrapper {
        border-color: inherit;
    }

    .k-columnmenu-item {
        &.k-state-selected {
            @include fill(
                $list-item-selected-text,
                $list-item-selected-bg
            );
        }
    }

    .k-column-menu {

        .k-menu:not(.k-context-menu) {

            @include fill(
                $popup-text,
                $popup-bg,
                $popup-border
            );

            .k-item {
                @include fill(
                    $list-item-text,
                    $list-item-bg
                );

                &:hover,
                &.k-state-hover {
                    @include fill(
                        $list-item-hovered-text,
                        $list-item-hovered-bg
                    );
                }

                &.k-state-selected {
                    @include fill(
                        $list-item-selected-text,
                        $list-item-selected-bg
                    );
                }

                &:focus,
                &.k-state-focused {
                    @include box-shadow( $list-item-focused-shadow );
                }
            }
        }
    }

    .k-grid-norecords-template {
        background-color: $grid-bg;
        border-color: $grid-border;
    }
}

// #endregion

// #endregion
// #region @import "listview/_index.scss"; -> /packages/bootstrap/scss/listview/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../utils/_flex.scss"; -> /packages/bootstrap/scss/utils/_flex.scss
// #region @import /packages/bootstrap/scss/utils/_flex.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../utils/_grid.scss"; -> /packages/bootstrap/scss/utils/_grid.scss
// #region @import /packages/bootstrap/scss/utils/_grid.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../pager/_index.scss"; -> /packages/bootstrap/scss/pager/_index.scss
// #region @import /packages/bootstrap/scss/pager/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/listview/_variables.scss
// Listview
$listview-padding-x: map-get( $spacing, 1 ) !default;
$listview-padding-y: map-get( $spacing, 1 ) !default;
$listview-border-width: 1px !default;
$listview-font-family: $font-family !default;
$listview-font-size: $font-size !default;
$listview-line-height: $line-height !default;

$listview-bg: $component-bg !default;
$listview-text: $component-text !default;
$listview-border: $component-border !default;

$listview-grid-gap: 10px !default;

$listview-item-padding-x: map-get( $spacing, 1 ) !default;
$listview-item-padding-y: map-get( $spacing, 1 ) !default;

$listview-item-selected-bg: rgba( $selected-bg, .25 ) !default;
$listview-item-selected-text: null !default;
$listview-item-selected-border: null !default;

$listview-item-focus-bg: null !default;
$listview-item-focus-text: null !default;
$listview-item-focus-border: null !default;
$listview-item-focus-shadow: inset 0 0 0 3px rgba( $listview-text, .15 ) !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/listview/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/listview/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/listview/_layout.scss
@include exports( "listview/layout" ) {

    .k-listview {
        margin: 0;
        padding: 0;
        border-width: $listview-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $listview-font-family;
        font-size: $listview-font-size;
        line-height: $listview-line-height;
        flex-flow: column nowrap;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }
    .k-listview-bordered {
        border-width: $listview-border-width;
    }


    // Header
    .k-listview-header {
        border-width: 0;
        border-bottom-width: $listview-border-width;
        border-style: solid;
        border-color: inherit;
    }
    .k-listview-bordered > .k-listview-header {
        border-bottom-width: $listview-border-width;
    }


    // Listview contnet
    .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: $listview-padding-y $listview-padding-x;
    }
    .k-listview-content-padding-square {
        padding: $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: $listview-item-padding-y $listview-item-padding-x;
    }
    .k-listview-item-padding-rectangle .k-listview-link {
        margin: (-$listview-item-padding-y) (-$listview-item-padding-x);
        padding: $listview-item-padding-y $listview-item-padding-x;
    }
    .k-listview-item-padding-square {
        padding: $listview-item-padding-y;
    }
    .k-listview-item-padding-square .k-listview-link {
        margin: (-$listview-item-padding-y);
        padding: $listview-item-padding-y;
    }


    // Listview footer
    .k-listview-footer {
        border-width: 0;
        border-top-width: $listview-border-width;
        border-style: solid;
        border-color: inherit;
    }
    .k-listview-bordered > .k-listview-footer {
        border-top-width: $listview-border-width;
    }


    // Listview pager
    .k-listview-pager {
        border-width: 0;
        border-top-width: $listview-border-width;
        border-color: inherit;
        font: inherit;
    }
    .k-listview-pager-top {
        border-top-width: 0;
        border-bottom-width: $listview-border-width;
    }
    .k-listview-bordered > .k-listview-pager-top {
        border-bottom-width: $listview-border-width;
    }
    .k-listview-bordered > .k-listview-pager-bottom {
        border-top-width: $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;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/listview/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/listview/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/listview/_theme.scss
@include exports( "listview/theme" ) {

    // Listview
    .k-listview {
        @include fill(
            $listview-text,
            $listview-bg,
            $listview-border
        );
    }


    // Listview content
    .k-listview-content {

        > .k-state-focused {
            @include fill(
                $listview-item-focus-text,
                $listview-item-focus-bg,
                $listview-item-focus-border
            );
            @include box-shadow( $listview-item-focus-shadow );
        }

        > .k-state-selected {
            @include fill(
                $listview-item-selected-text,
                $listview-item-selected-bg,
                $listview-item-selected-border
            );
        }

    }

}

// #endregion

// #endregion

// #endregion
// #region @import "spreadsheet/_index.scss"; -> /packages/bootstrap/scss/spreadsheet/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../checkbox/_index.scss"; -> /packages/bootstrap/scss/checkbox/_index.scss
// #region @import /packages/bootstrap/scss/checkbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../radio/_index.scss"; -> /packages/bootstrap/scss/radio/_index.scss
// #region @import /packages/bootstrap/scss/radio/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../colorpicker/_index.scss"; -> /packages/bootstrap/scss/colorpicker/_index.scss
// #region @import /packages/bootstrap/scss/colorpicker/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../combobox/_index.scss"; -> /packages/bootstrap/scss/combobox/_index.scss
// #region @import /packages/bootstrap/scss/combobox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../datetime/_index.scss"; -> /packages/bootstrap/scss/datetime/_index.scss
// #region @import /packages/bootstrap/scss/datetime/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> /packages/bootstrap/scss/dropdownlist/_index.scss
// #region @import /packages/bootstrap/scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../upload/_index.scss"; -> /packages/bootstrap/scss/upload/_index.scss
// #region @import /packages/bootstrap/scss/upload/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../menu/_index.scss"; -> /packages/bootstrap/scss/menu/_index.scss
// #region @import /packages/bootstrap/scss/menu/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../toolbar/_index.scss"; -> /packages/bootstrap/scss/toolbar/_index.scss
// #region @import /packages/bootstrap/scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../window/_index.scss"; -> /packages/bootstrap/scss/window/_index.scss
// #region @import /packages/bootstrap/scss/window/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../tabstrip/_index.scss"; -> /packages/bootstrap/scss/tabstrip/_index.scss
// #region @import /packages/bootstrap/scss/tabstrip/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../treeview/_index.scss"; -> /packages/bootstrap/scss/treeview/_index.scss
// #region @import /packages/bootstrap/scss/treeview/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/spreadsheet/_variables.scss
// Spreadsheet
$spreadsheet-border-width: 1px !default;
$spreadsheet-font-family: $font-family !default;
$spreadsheet-font-size: $font-size !default;
$spreadsheet-line-height: $line-height !default;

$spreadsheet-bg: $component-bg !default;
$spreadsheet-text: $component-text !default;
$spreadsheet-border: $component-border !default;

$spreadsheet-insert-image-dialog-border-style: dashed !default;
$spreadsheet-insert-image-dialog-border-width: 2px !default;
$spreadsheet-insert-image-dialog-text-margin-bottom: 30px !default;
$spreadsheet-insert-image-dialog-preview-width: 355px !default;
$spreadsheet-insert-image-dialog-preview-height: 230px !default;
$spreadsheet-insert-image-dialog-preview-img: "image-default.png" !default;
$spreadsheet-insert-image-dialog-preview-border: $component-border !default;
$spreadsheet-insert-image-dialog-preview-border-radius: $border-radius !default;
$spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px rgba(0, 0, 0, .5) !default;
$spreadsheet-insert-image-dialog-preview-overlay-border-radius: $border-radius !default;
$spreadsheet-insert-image-dialog-overlay-hovered-text: $body-bg !default;

$spreadsheet-drawing-handle-width: 6px !default;
$spreadsheet-drawing-handle-height: 6px !default;
$spreadsheet-drawing-handle-border-style: solid !default;
$spreadsheet-drawing-handle-border-width: 1px !default;
$spreadsheet-drawing-handle-outline-color: $primary !default;
$spreadsheet-drawing-handle-border-color: $selected-bg !default;
$spreadsheet-drawing-handle-bg: $primary !default;
$spreadsheet-drawing-handle-border-radius: $border-radius-lg !default;

$spreadsheet-drawing-outline-style: solid !default;
$spreadsheet-drawing-outline-width: 2px !default;

$spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;

// #endregion
// #region @import "images/image-default.scss"; -> /packages/bootstrap/scss/spreadsheet/images/image-default.scss
// #region @import "../../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion

@include exports("image-default.png") {
    @include register-data-uri("image-default.png", "data:image/png;base64, ")
}

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/spreadsheet/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/spreadsheet/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/spreadsheet/_layout.scss
@include exports("spreadsheet/layout") {

    // Spreadsheet
    .k-spreadsheet {
        @include use-background-clip();
        width: 800px;
        height: 600px;
        border-width: $spreadsheet-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $spreadsheet-font-family;
        font-size: $spreadsheet-font-size;
        line-height: $spreadsheet-line-height;
        display: flex;
        flex-direction: column;
        cursor: default;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-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% );
        }

    }


    // Header
    .k-spreadsheet .k-tabstrip-wrapper {
        border-width: 0 0 1px;
        border-style: solid;
        border-color: inherit;
        position: relative;
    }


    // Quick access toolbar
    .k-spreadsheet-quick-access-toolbar {
        padding: $toolbar-padding-y;
        display: inline-flex;
        flex-direction: row;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;

        .k-button {}
        .k-button:not(:hover) {
            border-color: transparent;
            color: inherit;
            background-color: transparent;
            background-image: none;
        }
    }


    // Tabstrip
    .k-spreadsheet-tabstrip {
        padding-top: $toolbar-padding-y;
    }
    .k-spreadsheet-tabstrip .k-loading {
        display: none;
    }
    .k-spreadsheet-tabstrip .k-content {
        @include border-radius( 0 );
        padding: 0;
        border-width: 0;
        overflow: hidden;
    }


    // Toolbar
    .k-spreadsheet-toolbar {
        border-width: 0;


        // Tools
        [data-tool="backgroundColor"],
        [data-tool="textColor"],
        [data-tool="borders"],
        [data-tool="alignment"],
        [data-tool="merge"],
        [data-tool="freeze"] {
            width: auto;
            min-width: $form-line-height * 1em;
        }
        [data-tool="fontSize"] {
            width: 5 * $spacer;
        }
        [data-tool="fontFamily"] {
            width: 6 * $spacer;
        }
        [data-tool="format"] {
            width: 4 * $spacer;
        }
    }


    // Action bar
    .k-spreadsheet-action-bar {
        border-width: 0 0 1px;
        border-style: solid;
        border-color: inherit;
        font-size: 12px;
        font-family: Arial, Verdana, sans-serif;
        position: relative;
        display: flex;
        flex-direction: row;
    }
    .k-spreadsheet-name-editor {
        width: 10em;
        border-width: 0 1px 0 0;
        border-style: solid;
        border-color: inherit;

        .k-combobox {
            width: 100%;
            font-size: inherit;
        }
        .k-combobox .k-dropdown-wrap {
            @include border-radius( 0 );
            border-width: 0;
        }
        .k-combobox .k-select {
            @include border-radius( 0 );
        }
    }
    .k-spreadsheet-formula-bar {
        border-color: inherit;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 1;

        &::before {
            @extend .k-i-formula-fx;
            font-size: $icon-size;
            font-family: "WebComponentsIcons";
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            line-height: 1;

            padding: 0 $padding-y;
            border-width: 0 1px 0 0;
            border-style: solid;
            border-color: inherit;
        }

        .k-tooltip,
        .k-group-header,
        .k-list-scroller {
            display: none;
        }

        .k-spreadsheet-formula-input {
            padding: $input-padding-y $input-padding-x;
            line-height: $input-line-height;

            &.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: $list-item-padding-y $list-item-padding-x;
        }
    }
    .k-syntax-func,
    .k-syntax-startexp {
        font-weight: bold;
    }


    // Cell editor
    .k-spreadsheet-cell-editor {
        padding: 0 3px;
        line-height: 20px;
        display: none;
        overflow: hidden;
        position: absolute;
        z-index: 2000;
    }


    // Sheets bar
    .k-spreadsheet-sheets-bar {
        padding: 0 $padding-y $padding-y;
        border-width: 1px 0 0;
        border-style: solid;
        border-color: inherit;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
    }
    .k-spreadsheet-sheets-bar-add {
        margin-right: $padding-y;

        &:not(:hover) {
            border-color: transparent;
            color: inherit;
            background: none;
        }
    }
    .k-spreadsheet-sheets-items {
        margin-top: -1px;
        flex: 1;
        overflow: hidden;

        // sass-lint:disable no-important
        .k-tabstrip-items {
            margin: 0 $button-calc-size !important;
            border-width: 0;
        }
        .k-tabstrip-prev {
            left: 0 !important;
        }
        .k-tabstrip-next {
            right: 0 !important;
        }
        // sass-lint:enable no-important

        .k-item  {
            .k-link {
                display: inline-block;
            }

            .k-spreadsheet-sheets-remove {
                margin-right: $spacer / 2;
                margin-left: -$spacer / 2;
                padding: 0;
                line-height: 1;
                display: inline-flex;
                flex-direction: row;
                vertical-align: middle;
            }
        }
    }


    // Spreadsheet view
    // sass-lint:disable no-important
    .k-spreadsheet-view {
        height: auto !important;
        border-color: inherit;
        font-size: 12px;
        font-family: Arial, Verdana, Sans-serif;
        flex: 1;
        position: relative;

        // disabled cells in the Spreadsheet should allow navigation if link is used
        .k-state-disabled {
            pointer-events: auto;
        }
    }
    // sass-lint:enable no-important
    .k-spreadsheet-fixed-container {
        width: 100%;
        height: 100%;
        border-color: inherit;
        box-sizing: border-box;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        position: absolute;
        z-index: 2;
    }
    .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;
        -webkit-overflow-scrolling: touch;
        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: 1px;
        box-sizing: border-box;
        position: absolute;
        line-height: normal;
        background-clip: padding-box;
        white-space: pre;
        overflow: hidden;
    }
    .k-spreadsheet-merged-cells-wrapers {
        position: relative;
    }


    // 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: 1px;
        border-style: solid;
        box-sizing: border-box;
        position: absolute;
    }
    .k-spreadsheet .k-selection-wrapper .k-spreadsheet-editor-button {
        position: absolute;
        padding: 0;
        z-index: 60;
    }

    .k-spreadsheet-active-cell {
        // sass-lint:disable-block no-important
        // always show exact active cell border, regardless of inline cell styles
        outline-color: transparent !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: 100;
        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;
        right: 0;
        left: auto;
        border-width: 3px;
        border-style: solid;
    }

    // Validation
    .k-dirty {
        left: 0;
        right: auto;
    }
}



@include exports( "spreadsheet/filter/layout" ) {

    $filter-menu-padding-left: calc( #{$icon-size} + #{2 * $padding-y} );

    // Filter button
    .k-spreadsheet .k-filter-wrapper {
        position: relative;
        z-index: 50;
    }
    .k-spreadsheet .k-filter-range {
        border-width: 1px;
        border-style: solid;
        position: absolute;
        box-sizing: border-box;
    }
    .k-spreadsheet-filter {
        @include border-radius( $border-radius );
        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: $filter-menu-padding-left;
            }
            .k-icon {
                margin-left: calc(-1 * ( #{$icon-size} + #{$padding-y} ) );
                margin-right: $padding-y;
            }

        }

        .k-spreadsheet-value-treeview-wrapper {
            height: 200px;
            border-width: 1px;
            border-style: solid;
            overflow-y: scroll;
            overflow-x: auto;

            .k-treeview {
                padding: $padding-y;
                overflow: visible;
            }
        }

        // Details
        .k-details {
            padding: 0;
            border-width: 1px 0 0;
            border-style: solid;
            border-color: inherit;
        }
        .k-details-summary {
            padding: $padding-y;
            cursor: pointer;

            > .k-icon {
                margin-right: $padding-y;
            }
        }
        .k-details-content {
            padding: $padding-y $padding-x $padding-y $filter-menu-padding-left;

            > .k-textbox,
            > .k-widget {
                width: 100%;
                margin-bottom: 3px;
            }

            .k-space-right {
                background-image: none;
            }

            .k-filter-and {
                width: 75px;
                margin: 8px 0;
            }
        }

        .k-actions,
        .k-action-buttons,
        .k-columnmenu-actions {
            .k-button {
                flex: 1 1 50%;
            }
        }

        .k-actions {
            &.k-actions-start,
            &.k-actions-center,
            &.k-actions-end {
                .k-button {
                    flex: 0 1 auto;
                }
            }
        }
    }

}




@include exports( "spreadsheet/tools/layout" ) {

    .k-spreadsheet-popup {
        padding: 0;

        .k-separator {
            display: block;
        }

        .k-button {
            @include border-radius( 0 );
            border-width: 0;
            color: inherit;
            background: none;
        }
        .k-button-icontext {
            display: flex;
            justify-content: flex-start;
        }

        .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-color-palette {
            padding: $popup-padding-y;
        }
        .k-spreadsheet-border-type-palette {
            width: 12.5rem;
            height: 5rem;
            display: flex;
            flex-flow: row wrap;
            align-content: space-around;
            justify-content: space-around;
        }

    }

    .k-spreadsheet-format-popup {
        .k-item { justify-content: space-between; }
        .k-spreadsheet-sample { order: 1; }
    }
    .k-spreadsheet-sample {
        opacity: .7;
    }
}




@include exports( "spreadsheet/clipboard/layout" ) {

    .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;
    }

}




@include exports( "spreadsheet/window/layout" ) {

    .k-spreadsheet-window {}
    .k-spreadsheet-window .k-edit-form-container {
        width: auto;
        min-width: 0;
    }


    // Format preview window
    .k-spreadsheet-format-cells {

        .k-spreadsheet-preview {
            margin-top: ($spacer / 2);
            text-align: center;
        }

        .k-list-scroller {
            margin-top: ($spacer / 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: ($spacer-y / 2);

            .k-icon {
                font-size: 6em;
            }
        }
    }


    // Insert comment dialog
    .k-spreadsheet-insert-comment textarea {
        height: auto;
    }

    // Insert image dialog
    .k-spreadsheet-insert-image-dialog {
        @include border-radius( $spreadsheet-insert-image-dialog-preview-border-radius );
        border-style: $spreadsheet-insert-image-dialog-border-style;
        border-width: $spreadsheet-insert-image-dialog-border-width;

        label {
            display: flex;
            justify-content: center;
            min-width: 100%;
            width: $spreadsheet-insert-image-dialog-preview-width;
            height: $spreadsheet-insert-image-dialog-preview-height;
            background-image: url(map-get($data-uris, $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: $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-state-hovered div {
                margin: 0;
                align-self: center;
                opacity: 1;
            }

            div {
                opacity: 0;
            }
        }
    }

}




@include exports("spreadsheet/layout/images") {

    .k-spreadsheet-drawing {
        position: absolute;
        box-sizing: border-box;
        z-index: 101;

        &.k-spreadsheet-active-drawing {
            outline-style: $spreadsheet-drawing-outline-style;
            outline-width:  $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: $spreadsheet-drawing-handle-width;
            height: $spreadsheet-drawing-handle-height;
            border-style: $spreadsheet-drawing-handle-border-style;
            border-width: $spreadsheet-drawing-handle-border-width;
            border-radius: $spreadsheet-drawing-handle-border-radius;
            position: absolute;
            transform: translate(-50%, -50%);

            // sass-lint:disable class-name-format, one-declaration-per-line
            &.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; }
            // sass-lint:enable class-name-format, one-declaration-per-line
        }

        .k-spreadsheet-insert-image-dialog {
            .k-spreadsheet-has-image {
                &:hover,
                &.k-state-hovered {
                    border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
                }
            }
        }
    }

}




@include exports("spreadsheet/layout/rtl") {
    .k-rtl .k-spreadsheet,
    .k-spreadsheet[dir="rtl"] {

        .k-dirty {
            right: 0;
            left: auto;
        }

        .k-spreadsheet-has-comment::after {
            left: 0;
            right: auto;
        }

    }

}

// #endregion

@include exports("spreadsheet/filter/layout/bootstrap") {

    // Filter menu
    .k-spreadsheet-filter-menu {
        > .k-menu,
        > .k-menu:not(.k-context-menu) {
            background: none;
            color: inherit;
            font-weight: inherit;
            font-size: inherit;
        }
    }

}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/spreadsheet/_theme.scss
@include exports("sreadsheet/theme") {

    // Spreadsheet
    .k-spreadsheet {
        @extend .k-text-selection !optional;
        @include fill(
            $spreadsheet-text,
            $spreadsheet-bg,
            $spreadsheet-border
        );
    }


    // Row / column headers
    .k-spreadsheet-top-corner,
    .k-spreadsheet-row-header,
    .k-spreadsheet-column-header {
        @include fill(
            $header-text,
            $header-bg,
            $header-border,
            $header-gradient
        );
    }


    // 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; }


    // Cell editor
    .k-spreadsheet-cell-editor {
        color: $panel-text;
        background-color: $panel-bg;
    }


    // Cells
    .k-spreadsheet-merged-cell {
        background-color: $panel-bg;
    }


    // Selection
    .k-spreadsheet .k-selection-full,
    .k-spreadsheet .k-selection-partial {
        background-color: rgba( $selected-bg, .25 );
    }
    .k-spreadsheet-selection {
        border-color: $selected-bg;
        background-color: rgba( $selected-bg, .25 );
        box-shadow: inset 0 0 0 1px $selected-bg;
    }

    .k-spreadsheet .k-single-selection::after {
        border-color: $panel-bg;
        background-color: $selected-bg;
    }
    .k-spreadsheet-active-cell {
        box-shadow: inset 0 0 0 1px $selected-bg;
        background-color: $panel-bg;

        &.k-right {
            box-shadow: inset 0 0 0 1px $selected-bg, inset -1px 0 0 1px $selected-bg;
        }

        &.k-bottom {
            box-shadow: inset 0 0 0 1px $selected-bg, inset 0 -1px 0 1px $selected-bg;
        }

        &.k-bottom.k-right {
            box-shadow: inset 0 0 0 1px $selected-bg, inset -1px -1px 0 1px $selected-bg;
        }
    }

    .k-spreadsheet .k-auto-fill {
        border-color: $selected-bg;
        background-color: rgba( $selected-bg, .25 );
        box-shadow: inset 0 0 0 1px $selected-bg;
    }
    .k-spreadsheet .k-auto-fill-punch {
        background-color: rgba( $panel-bg, .5 );
    }


    // Resize handle
    .k-spreadsheet .k-resize-handle,
    .k-spreadsheet .k-resize-hint-handle,
    .k-spreadsheet .k-resize-hint-marker {
        background-color: $primary;
    }

    // Comments
    .k-spreadsheet-has-comment::after {
        border-color: $primary $primary transparent transparent;
    }

    // Validation
    .k-dirty {
        border-color: $error transparent transparent $error;
    }

}




@include exports( "spreadsheet/filter/theme" ) {

    // Filter button
    .k-spreadsheet .k-filter-range {
        border-color: $primary;
    }
    .k-spreadsheet-filter {
        @include fill(
            $button-text,
            $button-bg,
            $button-border,
            $button-gradient
        );
        box-shadow: inset 0 0 0 1px $button-border;

        &.k-state-active {
            @include fill(
                $button-pressed-text,
                $button-pressed-bg,
                $button-pressed-border,
                $button-pressed-gradient
            );
            @include box-shadow( $button-pressed-shadow );
        }

        &:hover {
            @include fill(
                $button-hovered-text,
                $button-hovered-bg,
                $button-hovered-border,
                $button-hovered-gradient
            );
        }
    }


    // Filter menu
    .k-spreadsheet-filter-menu {

        > .k-menu,
        > .k-menu:not(.k-context-menu) {
            .k-item {
                &.k-state-hover {
                    @include fill(
                        $list-item-hovered-text,
                        $list-item-hovered-bg
                    );
                }
            }
        }

        .k-spreadsheet-value-treeview-wrapper {
            @include fill(
                $panel-text,
                $panel-bg,
                $panel-border
            );
        }
    }

}




@include exports( "spreadsheet/drawing/theme" ) {

    .k-spreadsheet-insert-image-dialog {
        border-color: $spreadsheet-insert-image-dialog-preview-border;

        .k-spreadsheet-has-image {
            &:hover,
            &.k-state-hovered {
                box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
            }

            &:hover div,
            &.k-state-hovered div {
                color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
            }
        }
    }

    .k-spreadsheet-drawing {
        &.k-spreadsheet-active-drawing {
            outline-color: $spreadsheet-drawing-handle-outline-color;
        }

        .k-spreadsheet-drawing-handle {
            border-color: $spreadsheet-drawing-handle-border-color;
            background-color: $spreadsheet-drawing-handle-bg;
        }
    }

    .k-spreadsheet-drawing-anchor-cell {
        background: $spreadsheet-drawing-anchor-bg;
    }

}




@include exports( "spreadsheet/tools/theme" ) {

    .k-spreadsheet-popup {

        // Buttons
        .k-button {}

        .k-button:hover,
        .k-button.k-state-hover {
            @include fill(
                $list-item-hovered-text,
                $list-item-hovered-bg
            );
        }
        .k-button:active,
        .k-button.k-state-active,
        .k-button.k-state-selected {
            @include fill(
                $list-item-selected-text,
                $list-item-selected-bg
            );
        }

    }

}




@include exports("spreadsheet/rtl/theme") {

    .k-rtl .k-spreadsheet,
    .k-spreadsheet[dir="rtl"],
    [dir="rtl"] .k-spreadsheet {

        .k-spreadsheet-has-comment::after {
            border-color: $primary transparent transparent $primary;
        }

        .k-dirty {
            border-color: $error $error transparent transparent;
        }

    }

}

// #endregion

// #endregion
// #region @import "pivotgrid/_index.scss"; -> /packages/bootstrap/scss/pivotgrid/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../dialog/_index.scss"; -> /packages/bootstrap/scss/dialog/_index.scss
// #region @import /packages/bootstrap/scss/dialog/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../treeview/_index.scss"; -> /packages/bootstrap/scss/treeview/_index.scss
// #region @import /packages/bootstrap/scss/treeview/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../grid/_index.scss"; -> /packages/bootstrap/scss/grid/_index.scss
// #region @import /packages/bootstrap/scss/grid/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/pivotgrid/_variables.scss
// Pivot grid
$pivotgrid-font-family: $font-family !default;
$pivotgrid-font-size: $font-size !default;
$pivotgrid-line-height: $line-height !default;

$pivotgrid-border-width: 1px !default;

$pivotgrid-alt-bg: $header-bg !default;
$pivotgrid-alt-color: null !default;
$pivotgrid-alt-text: null !default;
$pivotgrid-border: $component-border !default;
$pivotgrid-chrome-border: $component-border !default;

$pivotgrid-setting-delete-color: null !default;

$pivotgrid-container-bg: $header-bg !default;
$pivotgrid-row-headers-bg: darken( $header-bg, 3 ) !default;

$pivotgrid-button-bg: null !default;
$pivotgrid-button-text: null !default;
$pivotgrid-button-hover-bg: null !default;
$pivotgrid-button-hover-text: null !default;
$pivotgrid-button-active-bg: null !default;
$pivotgrid-button-active-text: null !default;

$pivotgrid-remove-bg: null !default;
$pivotgrid-remove-text: null !default;

$pivotgrid-configurator-text: $component-text !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/pivotgrid/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/pivotgrid/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/pivotgrid/_layout.scss
@include exports("pivotgrid/layout") {

    .k-pivot {
        border-width: $pivotgrid-border-width;
        border-style: solid;
        position: relative;

        .k-grid td {
            white-space: nowrap;
        }

        .k-grid-content {
            flex: 1 1 auto;
        }
    }

    .k-pivot-toolbar {
        padding: $cell-padding-y;
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }

    .k-pivot-toolbar .k-button,
    .k-fieldselector .k-list li.k-item {
        @include use-background-clip();
        @include border-radius( $border-radius );
        padding: $button-padding-y $button-padding-x;
        padding-right: calc( #{$button-padding-x} + #{$icon-size * 3} );
        min-height: auto;
        font-size: $font-size;
        line-height: $button-line-height;
        text-align: left;
        white-space: normal;
        word-break: break-word;
        position: relative;
        cursor: move;

        .k-field-actions .k-setting-delete {
            box-sizing: content-box;
        }
    }

    .k-settings-rows .k-button,
    .k-settings-columns .k-button,
    .k-settings-measures .k-button {
        margin-right: $cell-padding-y;
        margin-bottom: $button-padding-y-sm;
    }

    .k-field-actions {
        position: absolute;
        right: $button-padding-y;
        top: $button-padding-y;
        line-height: 1;
        cursor: pointer;
    }

    .k-pivot-layout {
        border-spacing: 0;
        table-layout: auto;

        .k-grid-footer,
        .k-grid .k-alt {
            font-weight: bold;
        }
    }

    .k-pivot-layout > tbody,
    .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;
    }

    .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;
    }

}




@include exports("pivotgrid/configurator/layout") {


    .k-fieldselector {
        border-width: 1px;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $pivotgrid-font-family;
        font-size: $pivotgrid-font-size;
        line-height: $pivotgrid-line-height;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-columns {
            display: flex;
            align-items: stretch;

            > div {
                padding: $cell-padding-y;
                width: 50%;
                box-sizing: border-box;
                border-width: 0;
                border-style: solid;
                float: left;
                overflow: auto;
            }
            > div + div {
                border-left-width: 1px;
            }
        }


        p {
            margin: 0 0 $padding-y-sm;
            text-transform: uppercase;
        }
        p .k-icon {
            margin: 0 $icon-spacing 0 0;
        }


        // Treeview
        .k-treeview {
            border-width: 0;
            overflow: visible;
        }

        .k-edit-label {
            width: 16%;
        }
        .k-edit-field {
            width: 77%;
        }

        .k-edit-buttons {
            > input,
            > label {
                float: left;
                margin-top: .4em;
            }
        }


        // List container
        .k-list-container {
            margin-bottom: $spacer;
            padding: $padding-y-sm;
            border-width: 1px;
            border-style: solid;
        }
        .k-list {
            padding-bottom: $spacer;
        }
        .k-list .k-item {
            border-width: 1px;
            border-style: solid;
        }
        .k-list .k-item + .k-item {
            margin-top: ($spacer / 2);
        }

    }

}



@include exports("pivotgrid/layout/ie11-fixes") {

    // Pivotgrid is stretched beyond container in IE 11
    // see https://github.com/telerik/kendo-theme-default/issues/647
    // see https://github.com/telerik/kendo-themes/issues/1880
    .k-ie11 {
        .k-pivot .k-grid {
            display: block;
        }
    }

}

// #endregion

@include exports ("pivotgrid/layout/bootstrap") {

    .k-pivot-toolbar {
        padding: $toolbar-padding-y;
    }

}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/pivotgrid/_theme.scss
@include exports("pivotgrid/theme") {

    .k-pivot {
        border-color: $pivotgrid-border;
    }

    //.k-alt,
    .k-pivot-toolbar,
    .k-pivot-layout > tbody > tr:first-child > td:first-child {
        background-color: $pivotgrid-alt-bg;
    }

    .k-fieldselector {
        color: $pivotgrid-configurator-text;
        background-color: $pivotgrid-container-bg;
    }
    .k-fieldselector .k-list-container {
        background-color: $panel-bg;
    }

    .k-pivot-toolbar,
    .k-fieldselector {
        border-color: $grid-header-border;
    }
    .k-pivot-table,
    .k-fieldselector .k-list-container,
    .k-fieldselector .k-columns > div,
    .k-pivot-rowheaders > .k-grid td:first-child,
    .k-pivot-table .k-grid-header .k-header.k-first {
        border-color: $pivotgrid-chrome-border;
    }

    .k-pivot-rowheaders .k-alt .k-alt,
    .k-header.k-alt {
        background-color: $pivotgrid-row-headers-bg;
    }

    .k-pivot-toolbar .k-button,
    .k-fieldselector .k-list li.k-item {
        @include fill(
            $button-text,
            $button-bg,
            $button-border,
            $button-gradient
        );

        &:hover,
        &.k-state-hover {
            @include fill(
                $button-hovered-text,
                $button-hovered-bg,
                $button-hovered-border,
                $button-hovered-gradient
            );
        }

        // Pressed state
        &:active,
        &.k-state-active {
            @include fill(
                $button-pressed-text,
                $button-pressed-bg,
                $button-pressed-border,
                $button-pressed-gradient
            );
            @include box-shadow( $button-pressed-shadow );
        }

        // Focused state
        &:focus,
        &.k-state-focused {
            box-shadow: $button-focused-shadow;
        }
    }

    // Loading indicator
    .k-fieldselector {
        .k-i-loading {
            border-color: $header-bg;
        }

        .k-i-loading::before,
        .k-i-loading::after {
            background-color: $header-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: $warning;
    }

    .k-i-kpi-status-deny {
        color: $error;
    }

    .k-i-kpi-status-open {
        color: $success;
    }
}

// #endregion

// #endregion
// #region @import "treelist/_index.scss"; -> /packages/bootstrap/scss/treelist/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../grid/_index.scss"; -> /packages/bootstrap/scss/grid/_index.scss
// #region @import /packages/bootstrap/scss/grid/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/treelist/_variables.scss
// Treelist
$treelist-footer-row-bg: $grid-header-bg !default;
$treelist-footer-row-border-width: 1px !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/treelist/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/treelist/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/treelist/_layout.scss
@include exports("treelist/layout") {

    // Base
    .k-treelist {
        &.k-grid-display-block.k-grid-lockedcolumns {
            display: block;
        }

        .k-status {
            padding: .4em .6em;
            line-height: 1.6em;

            .k-loading {
                vertical-align: baseline;
                margin-right: 5px;
            }
        }

        tr.k-hidden {
            display: none;
        }

        .k-treelist-dragging,
        .k-treelist-dragging .k-state-hover {
            cursor: default;
        }

        .k-drop-hint {
            transform: translate(0, -50%);
        }

        tr.k-footer td,
        tr.k-footer-template td {
            border-width: $treelist-footer-row-border-width 0;
            border-style: solid;
            font-weight: bold;
        }

        tr.k-footer + tr.k-footer td {
            border-top-width: 0;
        }
    }


    // Sticky headers
    .k-treelist-scrollable {
        > table,
        .k-grid-header tr,
        .k-grid-header th {
            background-color: inherit;
        }

        .k-grid-toolbar {
            position: sticky;
            z-index: 3;
        }

        .k-grid-header th {
            position: sticky;
            z-index: 1;
        }

        .k-grid-header th.k-grid-header-sticky {
            z-index: 3;
        }

        .k-grid-toolbar {
            top: 0;
            left: 0;
        }

        thead.k-grid-header {
            padding-right: 0;
        }

        tr.k-group-footer + tr.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: 0 .5em;
    }

}

// #endregion

@include exports("treelist/layout/bootstrap") {
    .k-treelist {
        tr.k-footer td,
        tr.k-footer-template td {
            font-weight: normal;
        }
    }

    .k-treelist-scrollable {
        .k-group-footer td {
            font-weight: normal;
        }
    }
}


// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/treelist/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/treelist/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/treelist/_theme.scss
@include exports("treelist/theme") {

    // Theme
    .k-treelist {
        tr.k-footer,
        tr.k-footer-template {
            background-color: $treelist-footer-row-bg;
        }
    }

}

// #endregion

@include exports("treelist/theme/bootstrap") {
    .k-treelist {
        tr.k-footer,
        tr.k-footer-template {
            &:hover {
                background-color: $treelist-footer-row-bg;
            }
        }
    }

    .k-treelist-scrollable {
        .k-group-footer td,
        .k-grouping-row td,
        tbody .k-group-cell {
            background-color: $treelist-footer-row-bg;
        }
    }
}

// #endregion

// #endregion
// #region @import "filter/_index.scss"; -> /packages/bootstrap/scss/filter/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../checkbox/_index.scss"; -> /packages/bootstrap/scss/checkbox/_index.scss
// #region @import /packages/bootstrap/scss/checkbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../datetime/_index.scss"; -> /packages/bootstrap/scss/datetime/_index.scss
// #region @import /packages/bootstrap/scss/datetime/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> /packages/bootstrap/scss/dropdownlist/_index.scss
// #region @import /packages/bootstrap/scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../numerictextbox/_index.scss"; -> /packages/bootstrap/scss/numerictextbox/_index.scss
// #region @import /packages/bootstrap/scss/numerictextbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../toolbar/_index.scss"; -> /packages/bootstrap/scss/toolbar/_index.scss
// #region @import /packages/bootstrap/scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/filter/_variables.scss
// Filter expression builder
$filter-padding-x: $padding-x !default;
$filter-padding-y: $padding-y !default;

$filter-bottom-margin: 2.1em !default;
$filter-line-size: 1px !default;

$filter-operator-dropdown-width: 15em !default;

$filter-preview-field-text: $primary !default;
$filter-preview-operator-text: rgba($body-text, .6) !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/filter/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/filter/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/filter/_layout.scss
@include exports("filter/layout") {
    .k-filter {
        border-width: 0;
        display: inline-block;
        background-color: transparent;

        ul {
            padding: 0;

            li {
                list-style-type: none;
            }
        }

        .k-filter-container,
        .k-filter-preview {
            margin-bottom: $filter-bottom-margin;
        }

        .k-filter-lines,
        .k-filter-item {
            padding-left: $filter-padding-x;
        }

        .k-filter-toolbar {
            display: inline-flex;
            position: relative;
            padding: $filter-padding-y 0;

            &::before {
                content: "";
                position: absolute;
                width: $filter-padding-x;
                height: $filter-line-size;
                top: 50%;
                left: -$filter-padding-x;
            }

            .k-toolbar {
                border-style: solid;
            }

            .k-filter-operator .k-dropdown  {
                width: $filter-operator-dropdown-width;
            }
        }

        .k-filter-item {
            position: relative;

            &::before {
                content: "";
                position: absolute;
                width: $filter-line-size;
                height: 100%;
                top: -$filter-padding-y;
                left: 0;
            }
        }

        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after {
            content: "";
            position: absolute;
            width: $filter-line-size;
            top: calc(-#{$filter-padding-y} - #{$filter-line-size});
            bottom: 50%;
            left: -$filter-padding-x;
        }

        .k-filter-group-main::before,
        .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;
        }

        .k-rtl &,
        &[dir="rtl"],
        [dir="rtl"] & {
            .k-filter-lines,
            .k-filter-item {
                padding-left: 0;
                padding-right: $filter-padding-x;
            }

            .k-filter-toolbar {

                &::before {
                    left: auto;
                    right: -$filter-padding-x;
                }
            }

            .k-filter-item {

                &::before {
                    left: auto;
                    right: 0;
                }
            }

            .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after {
                left: auto;
                right: -$filter-padding-x;
            }
        }
    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/filter/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/filter/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/filter/_theme.scss
@include exports("filter/theme") {

    .k-filter {
        color: $component-text;

        .k-filter-preview-field {
            color: $filter-preview-field-text;
        }

        .k-filter-preview-operator {
            color: $filter-preview-operator-text;
        }

        .k-filter-item::before,
        .k-filter-toolbar::before,
        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after {
            background-color: $border-color;
        }
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "filemanager/_index.scss"; -> /packages/bootstrap/scss/filemanager/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../upload/_index.scss"; -> /packages/bootstrap/scss/upload/_index.scss
// #region @import /packages/bootstrap/scss/upload/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../switch/_index.scss"; -> /packages/bootstrap/scss/switch/_index.scss
// #region @import /packages/bootstrap/scss/switch/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../menu/_index.scss"; -> /packages/bootstrap/scss/menu/_index.scss
// #region @import /packages/bootstrap/scss/menu/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../toolbar/_index.scss"; -> /packages/bootstrap/scss/toolbar/_index.scss
// #region @import /packages/bootstrap/scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../dialog/_index.scss"; -> /packages/bootstrap/scss/dialog/_index.scss
// #region @import /packages/bootstrap/scss/dialog/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../breadcrumb/_index.scss"; -> /packages/bootstrap/scss/breadcrumb/_index.scss
// #region @import /packages/bootstrap/scss/breadcrumb/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../treeview/_index.scss"; -> /packages/bootstrap/scss/treeview/_index.scss
// #region @import /packages/bootstrap/scss/treeview/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../splitter/_index.scss"; -> /packages/bootstrap/scss/splitter/_index.scss
// #region @import /packages/bootstrap/scss/splitter/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../grid/_index.scss"; -> /packages/bootstrap/scss/grid/_index.scss
// #region @import /packages/bootstrap/scss/grid/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../listview/_index.scss"; -> /packages/bootstrap/scss/listview/_index.scss
// #region @import /packages/bootstrap/scss/listview/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/filemanager/_variables.scss
// File manager
$filemanager-spacer: map-get( $spacing, 4 ) !default;
$filemanager-border-width: 1px !default;
$filemanager-font-family: $font-family !default;
$filemanager-font-size: $font-size !default;
$filemanager-line-height: $line-height !default;
$filemanager-bg: $component-bg !default;
$filemanager-text: $component-text !default;
$filemanager-border: $component-border !default;

$filemanager-toolbar-border-width: $filemanager-border-width !default;
$filemanager-toolbar-bg: null !default;
$filemanager-toolbar-text: null !default;
$filemanager-toolbar-border: null !default;
$filemanager-toolbar-gradient: null !default;

$filemanager-navigation-padding-x: $filemanager-spacer !default;
$filemanager-navigation-padding-y: $filemanager-spacer !default;
$filemanager-navigation-width: 20% !default;
$filemanager-navigation-border-width: $filemanager-border-width !default;
$filemanager-navigation-bg: null !default;
$filemanager-navigation-text: null !default;
$filemanager-navigation-border: null !default;

$filemanager-breadcrumb-padding-x: map-get( $spacing, 2 ) !default;
$filemanager-breadcrumb-padding-y: map-get( $spacing, 2 ) !default;
$filemanager-breadcrumb-border-width: $filemanager-border-width !default;
$filemanager-breadcrumb-bg: $toolbar-bg !default;
$filemanager-breadcrumb-text: null !default;
$filemanager-breadcrumb-border: null !default;

$filemanager-listview-bg: null !default;
$filemanager-listview-text: null !default;
$filemanager-listview-border: null !default;

$filemanager-listview-item-padding-x: map-get( $spacing, 4 ) !default;
$filemanager-listview-item-padding-y: map-get( $spacing, 4 ) !default;
$filemanager-listview-item-width: 120px !default;
$filemanager-listview-item-height: 120px !default;
$filemanager-listview-item-bg: null !default;
$filemanager-listview-item-text: null !default;
$filemanager-listview-item-border: null !default;

$filemanager-listview-item-icon-size: ($icon-size * 3) !default;
$filemanager-listview-item-icon-bg: null !default;
$filemanager-listview-item-icon-text: try-tint($filemanager-text, 4) !default;
$filemanager-listview-item-icon-border: null !default;
$filemanager-listview-item-icon-selected-bg: null !default;
$filemanager-listview-item-icon-selected-text: inherit !default;
$filemanager-listview-item-icon-selected-border: null !default;

$filemanager-grid-bg: null !default;
$filemanager-grid-text: null !default;
$filemanager-grid-border: null !default;

$filemanager-preview-padding-x: $filemanager-spacer !default;
$filemanager-preview-padding-y: $filemanager-spacer !default;
$filemanager-preview-width: 20% !default;
$filemanager-preview-border-width: $filemanager-border-width !default;
$filemanager-preview-spacing: $filemanager-spacer !default;
$filemanager-preview-bg: null !default;
$filemanager-preview-text: null !default;
$filemanager-preview-border: null !default;

$filemanager-preview-icon-size: ($icon-size * 6) !default;
$filemanager-preview-icon-bg: null !default;
$filemanager-preview-icon-text: try-tint($filemanager-text, 4) !default;
$filemanager-preview-icon-border: null !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/filemanager/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/filemanager/_layout"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/filemanager/_layout.scss
@include exports( "filemanager/layout" ) {

    // File Manager
    .k-filemanager {
        border-width: $filemanager-border-width;
        border-style: solid;
        box-sizing: border-box;
        font-family: $filemanager-font-family;
        font-size: $filemanager-font-size;
        line-height: $filemanager-line-height;
        display: flex;
        flex-flow: column nowrap;
    }


    // Toolbar
    .k-filemanager-header {
        border-color: inherit;
    }
    .k-filemanager-toolbar {
        border-width: 0;
        border-bottom-width: $filemanager-toolbar-border-width;
        border-color: inherit;
        flex-shrink: 0;
    }


    // 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;
    }


    // Navigation
    .k-filemanager-navigation {
        padding: $filemanager-navigation-padding-y $filemanager-navigation-padding-x;
        width: $filemanager-navigation-width;
        border-width: 0;
        border-right-width: $filemanager-navigation-border-width;
        border-style: solid;
        border-color: inherit;
        box-sizing: border-box;
        flex-shrink: 0;
    }


    // 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: $filemanager-breadcrumb-border-width;
        padding: $filemanager-breadcrumb-padding-y $filemanager-breadcrumb-padding-x;
        flex-shrink: 0;
    }


    // Filemanager listview
    .k-filemanager-listview {
        border-width: 0;
        flex: 1 1 0%;

        // Listview item
        .k-listview-item {
            padding: $filemanager-listview-item-padding-y $filemanager-listview-item-padding-x;
            width: $filemanager-listview-item-width;
            height: $filemanager-listview-item-height;
            text-align: center;
        }

        // File preview
        .k-file-preview {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        // File icon
        .k-file-icon {
            font-size: $filemanager-listview-item-icon-size;
        }

        // File name
        .k-file-name {
            margin-top: ($filemanager-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: $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: ($filemanager-preview-padding-y * 3) $filemanager-preview-padding-x $filemanager-preview-padding-y;
        width: $filemanager-preview-width;
        min-height: calc( #{$filemanager-preview-padding-y * 4} + #{$filemanager-preview-icon-size * 2} + #{$filemanager-preview-spacing * 3} );
        border-width: 0;
        border-left-width: $filemanager-preview-border-width;
        border-style: solid;
        border-color: inherit;
        box-sizing: border-box;
        text-align: center;
        overflow-x: auto;
        flex-shrink: 0;

        // File preview
        .k-file-preview {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        // File icon
        .k-file-icon {
            font-size: $filemanager-preview-icon-size;
        }

        // File name
        .k-file-name {
            margin-top: $filemanager-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: $filemanager-preview-spacing 0 0;
            box-sizing: border-box;
            text-align: start;
            display: flex;
            flex-flow: row wrap;
        }
        .k-file-meta-label {
            display: inline-block;
        }
        .k-file-meta-value {
            margin: 0;
        }
        .k-file-type {
            text-transform: capitalize;
        }
        .k-line-break {
            margin: $filemanager-preview-spacing 0 0;
            width: 100%;
            flex: 1 1 100%;
            flex-direction: row;
            flex-wrap: nowrap;
        }
    }


    // Resizing Handle
    .k-filemanager .k-splitbar {
        flex-shrink: 0;
        display: inline-flex;
        position: relative;
    }


    // 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;
    }
    .k-filemanager-drag-hint .k-icon {
        margin-right: $icon-spacing;
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/filemanager/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/filemanager/_theme"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/filemanager/_theme.scss
@include exports( "filemanager/theme") {

    // Filemanager
    .k-filemanager {
        @include fill(
            $filemanager-text,
            $filemanager-bg,
            $filemanager-border
        );
    }


    // Filemanager toolbar
    .k-filemanager-toolbar {
        @include fill(
            $filemanager-toolbar-text,
            $filemanager-toolbar-bg,
            $filemanager-toolbar-border,
            $filemanager-toolbar-gradient
        );
    }


    // Filemanager navigation
    .k-filemanager-navigation {
        @include fill(
            $filemanager-navigation-text,
            $filemanager-navigation-bg,
            $filemanager-navigation-border
        );
    }


    // Filemanager breadcrumb
    .k-filemanager-breadcrumb {
        @include fill(
            $filemanager-breadcrumb-text,
            $filemanager-breadcrumb-bg,
            $filemanager-breadcrumb-border
        );
    }


    // Filemanager listview
    .k-filemanager-listview {
        @include fill(
            $filemanager-listview-text,
            $filemanager-listview-bg,
            $filemanager-listview-border
        );

        .k-listview-item {
            @include fill(
                $filemanager-listview-item-text,
                $filemanager-listview-item-bg,
                $filemanager-listview-item-border
            );

            .k-file-icon {
                @include fill(
                    $filemanager-listview-item-icon-text,
                    $filemanager-listview-item-icon-bg,
                    $filemanager-listview-item-icon-border
                );
            }

            &.k-state-selected .k-file-icon {
                @include fill(
                    inherit,
                    none,
                    transparent
                );
            }
        }

    }


    // Filemanager grid
    .k-filemanager-grid {

        @include fill(
            $filemanager-grid-text,
            $filemanager-grid-bg,
            $filemanager-grid-border
        );

    }


    // Filemanager preview
    .k-filemanager-preview {
        @include fill(
            $filemanager-preview-text,
            $filemanager-preview-bg,
            $filemanager-preview-border
        );

        .k-file-icon {
            @include fill(
                $filemanager-preview-icon-text,
                $filemanager-preview-icon-bg,
                $filemanager-preview-icon-border
            );
        }

    }

}

// #endregion

// #endregion

// #endregion


// Editor
// #region @import "editor/_index.scss"; -> /packages/bootstrap/scss/editor/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../checkbox/_index.scss"; -> /packages/bootstrap/scss/checkbox/_index.scss
// #region @import /packages/bootstrap/scss/checkbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../colorpicker/_index.scss"; -> /packages/bootstrap/scss/colorpicker/_index.scss
// #region @import /packages/bootstrap/scss/colorpicker/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../combobox/_index.scss"; -> /packages/bootstrap/scss/combobox/_index.scss
// #region @import /packages/bootstrap/scss/combobox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> /packages/bootstrap/scss/dropdownlist/_index.scss
// #region @import /packages/bootstrap/scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../upload/_index.scss"; -> /packages/bootstrap/scss/upload/_index.scss
// #region @import /packages/bootstrap/scss/upload/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../toolbar/_index.scss"; -> /packages/bootstrap/scss/toolbar/_index.scss
// #region @import /packages/bootstrap/scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../window/_index.scss"; -> /packages/bootstrap/scss/window/_index.scss
// #region @import /packages/bootstrap/scss/window/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/editor/_variables.scss
// Editor
$editor-border-width: 1px !default;
$editor-font-family: $font-family !default;
$editor-font-size: $font-size !default;
$editor-line-height: $line-height !default;

$editor-placeholder-text: $input-placeholder-text !default;
$editor-placeholder-opacity: $input-placeholder-opacity !default;

$editor-selected-text: $primary-contrast !default;
$editor-selected-bg: $primary !default;

$editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;

$editor-find-line-bg: $secondary;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/editor/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/editor/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/editor/_layout.scss
@include exports("editor/layout") {

    // Base
    .k-editor {
        @include use-background-clip();
        border-width: $editor-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $editor-font-family;
        font-size: $editor-font-size;
        line-height: $editor-line-height;
        display: flex;
        flex-flow: column nowrap;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;
    }
    table.k-editor {
        width: 100%;
        display: table;
        vertical-align: top;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;

        tbody,
        tr,
        td {
            border-color: inherit;
        }
    }

    kendo-editor {
        &.k-readonly {
            @include disabled( $disabled-styling );
            > .k-content,
            .k-editor-content {
                pointer-events: auto;
            }
        }
    }

    // Inline editor
    .k-editor-inline {
        @include border-radius( $border-radius );
        padding: $padding-y-sm $padding-x-sm;
        border: 1px solid transparent;
        word-wrap: break-word;
        overflow: auto;
        background: none;
    }
    .k-window.k-editor-widget {
        padding: 0;
    }
    // sass-lint:disable class-name-format
    .editorToolbarWindow {
        padding: 0;
        display: flex;
        align-items: stretch;
    }
    .k-editortoolbar-dragHandle {
        margin: $toolbar-padding-y;
        padding: 0;
        cursor: move;
    }
    // sass-lint:enable class-name-format


    // Toolbar
    .k-editor > .k-toolbar {
        border-width: 0 0 $toolbar-border-width 0;
        flex-shrink: 0;
    }


    // jQuery toolbar
    .k-editor-toolbar {
        border-width: 0 0 $toolbar-border-width 0;

        // Group
        .k-tool-group {
            .k-widget ~ .k-widget {
                margin-inline-start: $toolbar-spacing;
            }
        }

        // Tool
        .k-tool {
            padding: $button-padding-y;
            width: $button-calc-size;
            height: $button-calc-size;
        }
        .k-tool-text {
            display: none;
        }

        // Overflow tools
        .k-overflow-tools {
            margin: 0;
            position: absolute;
            top: 0;
            right: 0;
            visibility: hidden;
        }
        .k-overflow-anchor {
            border-width: 0;
            padding: $toolbar-padding-y;
            width: $toolbar-inner-calc-size;
            height: $toolbar-inner-calc-size;
            position: relative;
        }

    }


    // Editor content
    .k-editor-content {
        flex: 1 1 auto;
        overflow-y: auto;

        > .k-iframe {
            width: 100%;
            height: 100%;
            border-width: 0;
            display: block;
        }

        > .ProseMirror { // sass-lint:disable-line class-name-format
            padding: $padding-x;
            width: 100%;
            height: 100%;
            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: $editor-placeholder-text;
                font-style: italic;
                float: left;
                opacity: $editor-placeholder-opacity;
                cursor: text;
                user-select: none;
            }
        }
    }


    // Editable area
    .k-editable-area {
        padding: $input-padding-y;
        width: 100%;
        height: 100%;
        border-width: 0;
        outline: 0;

        iframe.k-content {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            border-width: 0;
            background: none;
            display: block;
        }

        .k-resizable & {
            padding: $input-padding-y $input-padding-y 16px;
        }
    }

    .k-edit-form-content {
        flex: 1 1 auto;
        overflow: auto;
        margin: (-$window-inner-padding-y) (-$window-inner-padding-x);
        padding: $window-inner-padding-y $window-inner-padding-x;
    }


    $ct-cell-size: 20px;

    // Insert table
    .k-ct-popup {
        box-sizing: border-box;
        width: $ct-cell-size * 10 - ($ct-cell-size / 2);
        padding: $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 {
            display: none;
        }
    }

    .k-editor-widget .k-colorpicker {}

    .k-rtl .k-editor .k-editor-widget .k-dropdown-wrap {
        padding-left: 0;

        .k-select {
            border-width: 0;
        }
    }

    // Find and replace dialog
    .k-editor-find-replace {
        .k-content {
            position: relative;
        }

        .k-edit-form-container {
            display: inline-block;

            .k-edit-label {
                text-align: left;
            }
        }

        .k-action-buttons {
            padding: 0;
        }

        .k-search-options {
            display: flex;
            flex-direction: column;
            padding: 10px 0 40px 0;

            > span {
                padding-bottom: $padding-y;
            }
        }

        .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;
        }
    }
}

@include exports( "editor/dialog/layout" ) {


    .k-editor-dialog {
        box-sizing: border-box;

        .k-edit-form-container {
            width: auto;
        }

        .k-edit-label {
            width: 30%;
            padding: calc( #{$padding-y} + #{$input-border-width} ) 0;
        }

        .k-edit-field {
            width: 66%;
        }

        .k-edit-buttons {}
    }

    // Text area in editor dialog
    .k-textarea.k-editor-textarea {
        width: 100%;
        height: 100%;
        resize: none;
    }

}




@include exports( "editor/filebrowser/layout" ) {


    .k-filebrowser-dialog {
        display: flex;

        .k-edit-form-container {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;

        }

        .k-edit-label {
            width: 18%;
        }

        .k-edit-field {
            width: 75%;
        }
    }

    .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 $spacer-x;
            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: $spacer-y 0 0 0;
            padding: $toolbar-padding-y $toolbar-padding-x;
            display: flex;
            justify-content: space-between;
        }
        .k-toolbar-wrap {
            display: flex;

            > * + * {
                margin-left: $toolbar-spacing;
            }

            .k-state-disabled {
                display: none;
            }
        }

        .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-direction: row;
            flex-wrap: wrap;
            height: 390px;
            max-height: 50vh;
            margin: 0 0 $spacer-y 0;
            padding: $padding-y $padding-x;
            border-top-width: 0;
            overflow: auto;
        }

        .k-tile {
            width: 33%;
            height: 90px;
            padding: $padding-y $padding-x;
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            cursor: pointer;
            @include border-radius( $border-radius );

            .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-state-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: $padding-x-sm;
        }

        .k-breadcrumbs-wrap {
            position: absolute;
            left: $input-padding-x;
            top: $input-padding-y;

            .k-icon {
                position: static;
                margin-top: 0;
            }
        }
    }

}




@include exports( "editor/table-wizard/layout" ) {

    .k-editor-table-wizard-dialog {
        display: flex;

        // Edit form
        .k-edit-form-container {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
        }

        // 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;
            }
        }

        // Generic widgets
        .k-numerictextbox {
            width: 10em;

            & + .k-dropdown {
                width: 4em;
            }

            & + .k-colorpicker,
            & + .k-dropdown {
                margin-left: $padding-x-sm;
            }
        }

        .k-colorpicker {
            vertical-align: middle;
        }

        .k-edit-field > .k-checkbox {
            position: relative; // fix scrolling
        }

        // Align
        .k-dropdown.k-align {
            width: auto;
        }

        // Summary textarea
        .k-textbox.k-editor-accessibility-summary {
            height: auto;
        }
    }


    .k-popup.k-align {

        .k-list {
            display: flex;
            flex-flow: row wrap;
        }
        .k-list .k-item {
            padding: $button-padding-y;
            height: $button-calc-size;
            box-sizing: border-box;
            justify-content: center;
            flex: 1 0 33%;

            .k-icon {
                margin: 0;
            }
        }
        .k-list .k-item:last-child {
            flex: 1 0 100%;
        }

    }

    .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: $padding-y-sm $padding-x-sm;
            }
        }

        .k-table-resize-handle-wrapper {
            position: absolute;
            width: 5px;
            height: 5px;
            border-width: 1px;
            border-style: solid;
            z-index: 100;

            .k-table-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: 0 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;
            }
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/editor/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/editor/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/editor/_theme.scss
@include exports("editor/theme") {


    .k-editor {
        @include fill(
            $panel-text,
            $panel-bg,
            $panel-border
        );
    }

    // Inline Editor
    .k-editor-inline {

        .k-table {
            &,
            & td {
                border-color: #cccccc;
            }
        }

        .k-table-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 & Actve state
        &:hover,
        &.k-state-active {
            border-color: $panel-border;
        }
    }

    // sass-lint:disable class-name-format
    .editorToolbarWindow.k-header.k-window-content {
        @include fill(
            $toolbar-text,
            $toolbar-bg,
            $toolbar-border,
            $toolbar-gradient
        );
    }
    // sass-lint:enable class-name-format


    // Insert table
    .k-ct-popup {
        .k-state-selected {
            @include fill( $selected-text, $selected-bg, $selected-border, none );
        }
    }

    // Content
    .k-editor-content {

        // Selection
        .k-text-selected,
        &::selection {
            @include fill (
                $color: $editor-selected-text,
                $bg: $editor-selected-bg
            );
        }

        .k-text-highlighted {
            @include fill (
                $bg: $editor-highlighted-bg
            );
        }
    }

    // Find and replace dialog
    .k-editor-find-replace {
        .k-matches-container {
            @include fill (
                $bg: $editor-find-line-bg
            );
        }

    }

}

// #endregion

// #endregion

// #endregion


// Image Editor
// #region @import "imageeditor/_index.scss"; -> /packages/bootstrap/scss/imageeditor/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../toolbar/_index.scss"; -> /packages/bootstrap/scss/toolbar/_index.scss
// #region @import /packages/bootstrap/scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../forms/_index.scss"; -> /packages/bootstrap/scss/forms/_index.scss
// #region @import /packages/bootstrap/scss/forms/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> /packages/bootstrap/scss/dropdownlist/_index.scss
// #region @import /packages/bootstrap/scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../numerictextbox/_index.scss"; -> /packages/bootstrap/scss/numerictextbox/_index.scss
// #region @import /packages/bootstrap/scss/numerictextbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../checkbox/_index.scss"; -> /packages/bootstrap/scss/checkbox/_index.scss
// #region @import /packages/bootstrap/scss/checkbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/imageeditor/_variables.scss
// Imageeditor
$imageeditor-margin-y: null !default;
$imageeditor-margin-x: null !default;
$imageeditor-padding-y: null !default;
$imageeditor-padding-x: null !default;

$imageeditor-border-width: 0px !default;
$imageeditor-font-size: $font-size !default;
$imageeditor-line-height: $line-height !default;
$imageeditor-font-family: $font-family !default;

$imageeditor-content-border-width: 1px !default;

$imageeditor-action-pane-padding-y: map-get( $spacing, 8 ) !default;
$imageeditor-action-pane-padding-x: map-get( $spacing, 4 ) !default;

$imageeditor-crop-border-width: 1px !default;
$imageeditor-crop-border-style: dashed !default;

$imageeditor-resize-handle-margin-x: 1px !default;
$imageeditor-resize-handle-margin-y: 1px !default;
$imageeditor-resize-handle-border-width: 0 2px 2px 0 !default;
$imageeditor-resize-handle-size: 15px !default;

$imageeditor-bg: $component-bg !default;
$imageeditor-text: $component-text !default;
$imageeditor-border: $component-border !default;

$imageeditor-content-bg: darken($component-bg, 22.5%) !default;
$imageeditor-content-text: null !default;
$imageeditor-content-border: null !default;

$imageeditor-action-pane-text: null !default;
$imageeditor-action-pane-bg: $component-bg !default;
$imageeditor-action-pane-border: $component-border !default;

$imageeditor-crop-text: null !default;
$imageeditor-crop-bg: null !default;
$imageeditor-crop-border: white !default;

$imageeditor-crop-overlay-bg: rgba(black, .3) !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/imageeditor/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/imageeditor/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/imageeditor/_layout.scss
@include exports("imageeditor/layout") {

    // Image Editor
    .k-imageeditor {
        @include use-background-clip();
        margin: $imageeditor-margin-y $imageeditor-margin-x;
        padding: $imageeditor-padding-y $imageeditor-padding-x;
        border-width: $imageeditor-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $imageeditor-font-family;
        font-size: $imageeditor-font-size;
        line-height: $imageeditor-line-height;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;
    }

    // Content
    .k-imageeditor-content {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    // Canvas
    .k-imageeditor-canvas-container {
        flex: 1 1 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow: auto;
    }

    .k-imageeditor-canvas {
        margin: auto;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    // Action Pane
    .k-imageeditor-action-pane {
        border-width: $imageeditor-content-border-width;
        border-top-width: 0;
        border-style: solid;
        flex-shrink: 0;
        overflow-y: auto;
    }
    .k-imageeditor-action-pane > .k-form {
        padding: $imageeditor-action-pane-padding-y $imageeditor-action-pane-padding-x;
    }

    // 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: $imageeditor-crop-border-width;
        border-style: $imageeditor-crop-border-style;
        box-sizing: border-box;
        position: absolute;

        .k-resize-handle {
            margin: $imageeditor-resize-handle-margin-y $imageeditor-resize-handle-margin-x;
            border-style: solid;
            border-width: $imageeditor-resize-handle-border-width;
        }

        .k-resize-sw,
        .k-resize-se,
        .k-resize-nw,
        .k-resize-ne {
            width: $imageeditor-resize-handle-size;
            height: $imageeditor-resize-handle-size;
        }

        .k-resize-n,
        .k-resize-s {
            left: calc( 50% - (#{$imageeditor-resize-handle-size / 2}) );
            width: $imageeditor-resize-handle-size;
            height: 0;
        }

        .k-resize-w,
        .k-resize-e {
            top: calc( 50% - (#{$imageeditor-resize-handle-size / 2}) );
            width: 0;
            height: $imageeditor-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;
        }
    }

}

@include exports("imageeditor/layout/IE") {
    .k-ie {
        .k-imageeditor-canvas {
            flex-direction: row;
            align-self: flex-start;
        }

        .k-imageeditor-action-pane {
            flex: 0 0 auto;
        }
    }
}


// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/imageeditor/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/imageeditor/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/imageeditor/_theme.scss
@include exports("imageeditor/theme") {

    // Image Editor
    .k-imageeditor {
        @include fill(
            $imageeditor-text,
            $imageeditor-bg,
            $imageeditor-border
        );
    }

    // Content
    .k-imageeditor-content {
        @include fill(
            $imageeditor-content-text,
            $imageeditor-content-bg,
            $imageeditor-content-border
        );
    }

    // Canvas
    .k-imageeditor-canvas {
        @include checkerboard-gradient();
    }

    // Action Pane
    .k-imageeditor-action-pane {
        @include fill(
            $imageeditor-action-pane-text,
            $imageeditor-action-pane-bg,
            $imageeditor-action-pane-border
        );
    }

    // Crop Tool
    .k-imageeditor-crop {
        @include fill(
            $imageeditor-crop-text,
            $imageeditor-crop-bg,
            $imageeditor-crop-border
        );
    }

    // Crop Overlay
    .k-imageeditor-crop-overlay {
        @include fill (
            $bg: $imageeditor-crop-overlay-bg
        );
    }

}

// #endregion

// #endregion

// #endregion


// Scheduling
// #region @import "gantt/_index.scss"; -> /packages/bootstrap/scss/gantt/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../validator/_index.scss"; -> /packages/bootstrap/scss/validator/_index.scss
// #region @import /packages/bootstrap/scss/validator/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../datetime/_index.scss"; -> /packages/bootstrap/scss/datetime/_index.scss
// #region @import /packages/bootstrap/scss/datetime/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../numerictextbox/_index.scss"; -> /packages/bootstrap/scss/numerictextbox/_index.scss
// #region @import /packages/bootstrap/scss/numerictextbox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../window/_index.scss"; -> /packages/bootstrap/scss/window/_index.scss
// #region @import /packages/bootstrap/scss/window/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../splitter/_index.scss"; -> /packages/bootstrap/scss/splitter/_index.scss
// #region @import /packages/bootstrap/scss/splitter/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../treelist/_index.scss"; -> /packages/bootstrap/scss/treelist/_index.scss
// #region @import /packages/bootstrap/scss/treelist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/gantt/_variables.scss
// Gantt
$gantt-border-width: 1px !default;
$gantt-font-family: $font-family !default;
$gantt-font-size: $font-size !default;
$gantt-line-height: $line-height !default;

$gantt-bg: $component-bg !default;
$gantt-text: $component-text !default;
$gantt-border: $component-border !default;

$gantt-treelist-bg: null !default;
$gantt-treelist-text: null !default;
$gantt-treelist-border: null !default;

$gantt-nonwork-bg: rgba( contrast-wcag( $gantt-bg ), .025 ) !default;
$gantt-nonwork-text: null !default;
$gantt-nonwork-border: null !default;

$gantt-line-size: 2px !default;
$gantt-line-fill: mix( $panel-text, $panel-bg ) !default;
$gantt-line-selected-fill: $selected-bg !default;

$gantt-dot-size: 8px !default;
$gantt-dot-spacing: 4px !default;
$gantt-dot-bg: $gantt-text !default;
$gantt-dot-border: null !default;
$gantt-dot-hover-bg: $gantt-bg !default;
$gantt-dot-hover-border: $gantt-text !default;

$gantt-milestone-bg: if( is-light($gantt-bg), $gray-300, $gray-700 ) !default;
$gantt-milestone-border: try-shade( $gantt-milestone-bg, 2 ) !default;
$gantt-milestone-selected-bg: $selected-bg !default;
$gantt-milestone-selected-border: $selected-border !default;

$gantt-summary-bg: mix( $gantt-text, $gantt-bg ) !default;
$gantt-summary-progress-bg: $gantt-text !default;
$gantt-summary-selected-bg: mix( $selected-bg, $gantt-bg ) !default;
$gantt-summary-progress-selected-bg: $selected-bg !default;

$gantt-task-padding-x: map-get( $spacing, 2 ) !default;
$gantt-task-padding-y: map-get( $spacing, 1 ) !default;
$gantt-task-border-width: 1px !default;
$gantt-task-bg: if( is-light($gantt-bg), $gray-300, $gray-700 ) !default;
$gantt-task-text: contrast-wcag( $gantt-task-bg ) !default;
$gantt-task-border: if( is-light($gantt-bg), $gray-400, $gray-600 ) !default;
$gantt-task-progress-bg: if( is-light($gantt-bg), $gray-400, $gray-600 ) !default;
$gantt-task-selected-bg: mix( $selected-bg, $gantt-bg ) !default;
$gantt-task-selected-text: $selected-text !default;
$gantt-task-selected-border: $selected-bg !default;
$gantt-task-progress-selected-bg: $selected-bg !default;

$gantt-planned-margin-y: .35em !default;
$gantt-planned-border-width: 2px !default;
$gantt-planned-line-height: .75em !default;

$gantt-planned-dependency-margin-y: .6em !default;

$gantt-planned-moment-width: 6px !default;
$gantt-planned-moment-height: $gantt-planned-moment-width !default;
$gantt-planned-moment-border-radius: calc( ( #{$gantt-planned-border-width * 2} + #{$gantt-planned-moment-width} ) / 2 ) !default;
$gantt-planned-moment-left-margin-x: calc( #{$gantt-planned-border-width} / 2 - #{$gantt-planned-moment-border-radius} ) !default;
$gantt-planned-milestone-moment-margin-x: $gantt-planned-moment-width !default;

$gantt-planned-duration-height: $gantt-planned-border-width !default;
$gantt-planned-duration-hover-height: calc( #{$gantt-planned-border-width} + 1px ) !default;

$gantt-planned-single-drag-hint-top: .35em !default;
$gantt-planned-summary-drag-hint-top: 1em !default;
$gantt-planned-milestone-drag-hint-top: .85em !default;

$gantt-rtl-milestone-wrap-margin-x: -2.3em !default;
$gantt-rtl-milestone-planned-moment-margin-x: .2em !default;
$gantt-rtl-milestone-dot-start-margin-x: -.1em !default;

$gantt-planned-offset-resize-handler-margin-x: 1.2em !default;

$gantt-planned-bg: $primary !default;
$gantt-planned-border: $gantt-planned-bg !default;

$gantt-delayed-bg: $error !default;
$gantt-delayed-bg-lighter: tint($gantt-delayed-bg, 5) !default;

$gantt-advanced-bg: $success !default;
$gantt-advanced-bg-lighter: tint($gantt-advanced-bg, 5) !default;

$gantt-action-on-offset-text: #000000 !default;
$gantt-offset-resize-handler-top: 45% !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/gantt/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/gantt/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/gantt/_layout.scss
@include exports("gantt/layout") {

    $row-height: #{$line-height-em} + #{2 * $cell-padding} + #{$grid-cell-horizontal-border-width};

    .k-gantt {
        @include use-background-clip();
        border-width: $gantt-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $gantt-font-family;
        font-size: $gantt-font-size;
        line-height: $gantt-line-height;
        display: flex;
        flex-flow: column nowrap;
        position: relative;
        white-space: nowrap;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        // other
        td {
            overflow: hidden;
            white-space: nowrap;
            vertical-align: top;
        }
        .k-grid-header tr {
            height: calc( #{$line-height-em} + #{$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( #{$line-height-em} + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
        }

        &.k-gantt-planned .k-grid-content tr {
            height: calc( #{$line-height-em * 1.7} + #{$grid-cell-padding-y * 2} + #{$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;
        }

        // 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;
            }
            .k-grid-header th:last-child {
                .k-header {
                    padding: $grid-header-padding-y $grid-header-padding-x;
                    border-width: 0 0 1px $grid-cell-vertical-border-width;
                    white-space: nowrap;
                }
            }

            tr.k-state-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: $gantt-task-padding-y $gantt-task-padding-x;
                display: block;
                line-height: normal;
                flex: 1 1 auto;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .k-task-actions {
                flex-shrink: 0;
            }

            // Milestone
            .k-task-milestone {
                border: 0;
                transform: none;
                background: none;

                .k-task-milestone-content {
                    width: .875em;
                    height: .875em;
                    border-width: 1px;
                    border-style: solid;
                    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;
            }

            // Dependency lines SVG
            .k-gantt-dependencies-svg {
                position: absolute;
                overflow: visible;
                pointer-events: none;
                z-index: 2;

                polyline {
                    stroke-width: $gantt-line-size;
                }
            }

            // Table with columns borders
            .k-gantt-columns {
                background: transparent;
                pointer-events: none;
                table-layout: fixed;
            }
        }
    }

    // Header and footer
    .k-gantt-header {
        border-width: 0 0 $toolbar-border-width;
        flex-shrink: 0;
        z-index: 6;
    }
    .k-gantt-footer {
        border-width: $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) {

        .k-gantt-toolbar {
            .k-gantt-toggle {
                display: inline-flex;
            }
            .k-gantt-pdf,
            .k-gantt-create {
                padding: $button-padding-y;
                width: $button-calc-size;
                height: $button-calc-size;

                .k-button-icon {
                    margin: 0;
                }
                .k-button-text {
                    display: none;
                }
            }
        }

    }

    @media (max-width: 1024px) {
        .k-gantt-views-wrapper .k-gantt-views { display: none; }
        .k-gantt-views-wrapper .k-views-dropdown { display: flex; }
    }


    // Gant 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 {
            padding: 0 !important; // sass-lint:disable-line no-important
        }
        .k-grid-header tr {
            height: calc( #{$line-height-em * 2} + #{$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( #{$line-height-em} + #{$grid-header-padding-y * 2} + 1px );
        }
    }


    // Timeline
    .k-gantt-timeline {

        .k-timeline {
            height: 100%;
            border-width: 0;
            display: flex;
        }
        .k-grid-header {}
        .k-grid-content {
            overflow-x: scroll;
        }
        .k-header {
            padding: $grid-header-padding-y $grid-header-padding-x;
            border-width: 0 0 1px $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-state-selected {
        z-index: 3;
    }

    .k-gantt-line-h {
        height: $gantt-line-size;
    }

    .k-gantt-line-v {
        width: $gantt-line-size;
    }

    .k-gantt-dependency-hint {
        z-index: 4;
    }


    // Tasks
    .k-gantt-tasks {
        position: relative;

        td {
            padding: 0;
            border-width: 0;
            position: relative;
            vertical-align: middle;
        }
        td::after { content: "\a0"; }
    }
    .k-task-wrap {
        margin: 0 -21px;
        padding: 5px 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( #{$gantt-dot-size} + #{$gantt-dot-spacing * 2} );
        height: calc( #{$gantt-dot-size} + #{$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: $gantt-dot-size;
        height: $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-state-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: 0 -2em;
    }
    .k-task-milestone {
        width: 1em;
        height: 1em;
        border-width: 1px;
        border-style: solid;
        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( $border-radius );
        border-width: $gantt-task-border-width;
        border-style: solid;
        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( $border-radius );
        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;
    }
    .k-task-template {
        padding: $gantt-task-padding-y $gantt-task-padding-x;
        line-height: normal;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .k-task-actions {
        padding: $padding-y-sm;
        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: 0 5px;
        }
    }


    // Task tooltip
    .k-task-details {
        padding: $padding-y $padding-x;

        strong {
            font-size: $font-size-lg;
            font-weight: normal;
            display: block;
        }
        .k-task-pct {
            font-size: $icon-size-lg;
        }
        ul {
            line-height: normal;
        }
    }

    // Planned position

    .k-gantt-planned {
        .k-gantt-dependencies,
        .k-task-dot,
        .k-resources-wrap {
            margin-top: $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: $gantt-planned-single-drag-hint-top;
        }

        .k-summary-wrap.k-drag-hint {
            top: $gantt-planned-summary-drag-hint-top;
        }

        .k-milestone-wrap.k-drag-hint {
            top: $gantt-planned-milestone-drag-hint-top;
        }
    }

    // Planned element

    .k-task-planned {
        margin: 0 0 $gantt-planned-margin-y;
        line-height: $gantt-planned-line-height;
        display: flex;
        align-items: center;

        .k-task-moment {
            border-width: $gantt-planned-border-width;
            border-radius: $gantt-planned-moment-border-radius;
            border-style: solid;
            height: $gantt-planned-moment-height;
            width: $gantt-planned-moment-width;
        }

        .k-task-duration {
            height: $gantt-planned-duration-height;
        }

        .k-task-moment.k-moment-left {
            margin-left: $gantt-planned-moment-left-margin-x;
        }

        &:hover .k-task-duration {
            height: $gantt-planned-duration-hover-height;
        }
    }

    .k-milestone-wrap .k-task-moment {
        margin-left: $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: $gantt-planned-offset-resize-handler-margin-x;
        }

        .k-resize-handle::before {
            border-left-width: 1px;
            position: absolute;
            top: $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;
    }
}

@include exports("gantt/export") {

    .k-pdf-export-shadow {
        .k-gantt {
            float: left;
        }

        .k-gantt,
        .k-gantt-timeline,
        .k-gantt-dependencies {
            width: auto !important; // sass-lint:disable-line no-important
            height: auto !important; // sass-lint:disable-line no-important
            overflow: visible !important; // sass-lint:disable-line no-important
        }

        .k-gantt-treelist .k-treelist {
            display: block;
        }

        .k-gantt-layout.k-splitbar {
            display: none;
        }
    }

}


@include exports("gantt-edit-form/layout") {


    .k-gantt-edit-form {}

    .k-gantt-edit-form .k-edit-buttons {}
    .k-gantt-edit-form .k-gantt-update {}
    .k-gantt-edit-form .k-gantt-cancel {}
    .k-gantt-edit-form .k-gantt-delete {
        float: left;
    }

}


@include exports("gantt/rtl") {

    .k-rtl {

        .k-gantt-rows,
        .k-gantt-columns {
            left: auto;
            right: 0;
        }

        .k-task-wrap:not(.k-milestone-wrap) {
            margin: 0 -26px;
        }

        .k-gantt-timeline {

            .k-gantt-tasks tbody {
                text-align: left;
            }
            .k-header {
                border-width: 0 $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: right;
        }

        .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: $gantt-rtl-milestone-wrap-margin-x;
        }

        .k-milestone-wrap .k-task-moment {
            margin-right: $gantt-rtl-milestone-planned-moment-margin-x;
        }

        .k-gantt-timeline .k-milestone-wrap .k-task-start {
            right: $gantt-rtl-milestone-dot-start-margin-x;
        }
    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/gantt/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/gantt/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/gantt/_theme.scss
@include exports("gantt/theme") {

    .k-gantt {
        @include fill(
            $gantt-text,
            $gantt-bg,
            $gantt-border
        );

        // React gantt
        .k-treelist-scrollable {
            .k-task-milestone .k-task-milestone-content {
                @include fill(
                    $bg: $gantt-milestone-bg,
                    $border: $gantt-milestone-border
                );
            }
            .k-task-milestone.k-state-selected .k-task-milestone-content {
                @include fill(
                    $bg: $gantt-milestone-selected-bg,
                    $border: $gantt-milestone-selected-border
                );
            }
            .k-gantt-dependencies-svg {
                polyline {
                    fill: none;
                    stroke: $gantt-line-fill;
                }

                polyline.k-state-selected {
                    stroke: $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(
            $gantt-treelist-text,
            $gantt-treelist-bg,
            $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(
            $gantt-nonwork-text,
            $gantt-nonwork-bg,
            $gantt-nonwork-border
        );
    }


    // Task dot
    .k-task-dot {}
    .k-task-dot::before {
        @include fill(
            $bg: $gantt-dot-bg,
            $border: $gantt-dot-border
        );
    }
    .k-task-dot:hover::before,
    .k-task-dot.k-state-hover::before {
        @include fill(
            $bg: $gantt-dot-hover-bg,
            $border: $gantt-dot-hover-border
        );
    }


    // Milestone
    .k-task-milestone {
        @include fill(
            $bg: $gantt-milestone-bg,
            $border: $gantt-milestone-border
        );

        &.k-task-delayed {
            @include repeating-striped-gradient($gantt-delayed-bg, $bg-color, 90deg, 4px, 2px);
        }

        &.k-task-advanced {
            @include fill(
                $bg: $gantt-advanced-bg
            );
        }
    }
    .k-task-milestone.k-state-selected {
        background-image: none;
        @include fill(
            $bg: $gantt-milestone-selected-bg,
            $border: $gantt-milestone-selected-border
        );
    }


    // Summary
    .k-task-summary {
        color: $gantt-summary-bg;

        &.k-task-delayed {
            color: $gantt-delayed-bg-lighter;
        }

        &.k-task-advanced {
            color: $gantt-advanced-bg-lighter;
        }
    }
    .k-task-summary-complete {
        color: $gantt-summary-progress-bg;
    }
    .k-task-delayed .k-task-summary-complete {
        color: $gantt-delayed-bg;
    }
    .k-task-advanced .k-task-summary-complete {
        color: $gantt-advanced-bg;
    }
    .k-task-summary.k-state-selected {
        color: $gantt-summary-selected-bg;

        .k-task-summary-complete {
            color: $gantt-summary-progress-selected-bg;
        }
    }


    // Tasks
    .k-task-single {
        @include fill(
            $gantt-task-text,
            $gantt-task-bg,
            $gantt-task-border
        );

        &.k-task-delayed {
            @include fill(
                $bg: $gantt-delayed-bg-lighter
            );
        }

        &.k-task-advanced {
            @include fill(
                $bg: $gantt-advanced-bg-lighter
            );
        }

        .k-task-complete {
            background-color: $gantt-task-progress-bg;
        }
    }
    .k-task-delayed .k-task-complete {
        @include fill(
            $bg: $gantt-delayed-bg
        );
    }
    .k-task-advanced .k-task-complete {
        @include fill(
            $bg: $gantt-advanced-bg
        );
    }
    .k-task-single.k-state-selected {
        @include fill(
            $gantt-task-selected-text,
            $gantt-task-selected-bg,
            $gantt-task-selected-border
        );

        .k-task-complete {
            background-color: $gantt-task-progress-selected-bg;
        }
    }

    // Dependency Lines
    .k-gantt-line {
        color: $gantt-line-fill;
    }
    .k-gantt-line.k-state-selected {
        color: $gantt-line-selected-fill;
    }

    // Planned element
    .k-task-planned {
        .k-task-moment {
            @include fill(
                $bg: transparent,
                $border: $gantt-planned-border
            );
        }
        .k-task-duration {
            @include fill(
                $bg: $gantt-planned-bg
            );
        }
        &:hover .k-task-moment {
            @include fill(
                $bg: $gantt-planned-bg
            );
        }
    }

    // Delay offset
    .k-task-offset {
        @include repeating-striped-gradient($gantt-delayed-bg, $bg-color, 135deg, 4px, 2px);

        .k-resize-e::before {
            @include fill(
                $border: $gantt-action-on-offset-text
            );
        }

        .k-task-actions {
            color: $gantt-action-on-offset-text;
        }
    }

    .k-task-offset:hover {
        @include repeating-striped-gradient($gantt-delayed-bg-lighter, $bg-color, 135deg, 4px, 2px);
    }

    .k-pdf-export .k-task-offset {
        background-color: $gantt-delayed-bg;
    }

    // Tooltips

    .k-offset-tooltip-delayed {
        @include fill(
            $bg: $gantt-delayed-bg
        );
    }

    .k-planned-tooltip {
        @include fill(
            $bg: $gantt-planned-bg
        );
    }
}

// #endregion

// #endregion

// #endregion
// #region @import "scheduler/_index.scss"; -> /packages/bootstrap/scss/scheduler/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../adaptive/_index.scss"; -> /packages/bootstrap/scss/adaptive/_index.scss
// #region @import /packages/bootstrap/scss/adaptive/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../datetime/_index.scss"; -> /packages/bootstrap/scss/datetime/_index.scss
// #region @import /packages/bootstrap/scss/datetime/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../dropdownlist/_index.scss"; -> /packages/bootstrap/scss/dropdownlist/_index.scss
// #region @import /packages/bootstrap/scss/dropdownlist/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../dialog/_index.scss"; -> /packages/bootstrap/scss/dialog/_index.scss
// #region @import /packages/bootstrap/scss/dialog/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/scheduler/_variables.scss
// Scheduler
$scheduler-border-width: 1px !default;
$scheduler-font-family: $font-family !default;
$scheduler-font-size: $font-size !default;
$scheduler-line-height: $line-height !default;

$scheduler-bg: $component-bg !default;
$scheduler-text: $component-text !default;
$scheduler-border: $component-border !default;

$scheduler-toolbar-bg: $toolbar-bg !default;
$scheduler-toolbar-text: $toolbar-text !default;
$scheduler-toolbar-border: $toolbar-border !default;
$scheduler-toolbar-gradient: $toolbar-gradient !default;

$scheduler-footer-bg: $toolbar-bg !default;
$scheduler-footer-text: $toolbar-text !default;
$scheduler-footer-border: $toolbar-border !default;
$scheduler-footer-gradient: $toolbar-gradient !default;

$scheduler-event-min-height: 25px !default;
$scheduler-event-border-radius: $border-radius !default;
$scheduler-event-line-height: calc( #{$scheduler-event-min-height} - (2 * #{$padding-y-sm}) ) !default;

$scheduler-event-bg: tint( $selected-bg, 2 ) !default;
$scheduler-event-text: $selected-text !default;
$scheduler-event-border: null !default;
$scheduler-event-gradient: null !default;
$scheduler-event-shadow: null !default;

$scheduler-event-hover-bg: null !default;
$scheduler-event-hover-text: null !default;
$scheduler-event-hover-border: null !default;
$scheduler-event-hover-gradient: null !default;
$scheduler-event-hover-shadow: null !default;

$scheduler-event-selected-bg: $selected-bg !default;
$scheduler-event-selected-text: $selected-text !default;
$scheduler-event-selected-border: null !default;
$scheduler-event-selected-gradient: null !default;
$scheduler-event-selected-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5) !default;

$scheduler-cell-height: $line-height-em !default;
$scheduler-datecolumn-width: 12em !default;
$scheduler-timecolumn-width: 11em !default;

$scheduler-current-time-color: #ff0000 !default;

$scheduler-nonwork-bg: try-shade( $scheduler-bg, .5 ) !default;
$scheduler-nonwork-text: null !default;

$scheduler-weekend-bg: null !default;
$scheduler-weekend-text: null !default;

$scheduler-othermonth-bg: try-shade( $scheduler-bg, .5 ) !default;
$scheduler-othermonth-text: null !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/scheduler/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/scheduler/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/scheduler/_layout.scss
// TODO: modal variables
@include exports("scheduler/layout") {

    // Layout
    .k-scheduler {
        @include use-background-clip();
        border-width: $scheduler-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $scheduler-font-family;
        font-size: $scheduler-font-size;
        line-height: $scheduler-line-height;
        display: flex;
        flex-direction: column;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        table,
        thead,
        tfoot,
        tbody,
        tr,
        th,
        td,
        div,
        > * {
            border-color: inherit;
        }
    }

    kendo-scheduler.k-scheduler {
        overflow: hidden;

        &.k-readonly-scheduler .k-event-delete {
            display: none;
        }
    }

    // Commmon
    .k-scheduler-table {
        width: 100%;
        max-width: none;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: fixed;

        td,
        th {
            padding: $cell-padding;
            height: $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-more-events {
            bottom: 2px;
            left: 0;
            width: 100%;
        }

        .k-scheduler-cell {
            display: flex;
            flex: 1 1 100%;
            padding: $cell-padding;
            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 {
            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: $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;
            text-decoration: none;
            display: inline-flex;
            flex-flow: row nowrap;
            align-items: center;
            cursor: pointer;

            .k-icon {
                margin-right: $icon-spacing;
            }

            .k-sm-date-format,
            .k-lg-date-format {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .k-sm-date-format { display: none; }
        }


        // Scheduler search
        .k-scheduler-search {
            display: inline-flex;
            flex-flow: row nowrap;
        }


        // Scheduler views
        .k-scheduler-views-wrapper {
            margin-left: auto;

            .k-views-dropdown {
                width: auto;
                font: inherit;
                display: none;
            }
        }


        // Responsive scheduler toolbar
        @media (max-width: 1400px) {
            .k-nav-current .k-lg-date-format { max-width: 200px; }
        }

        @media (max-width: 1024px) {

            .k-nav-current .k-lg-date-format { display: none; }
            .k-nav-current .k-sm-date-format { display: inline-block; }

            .k-scheduler-views-wrapper .k-scheduler-views { display: none; }
            .k-scheduler-views-wrapper .k-views-dropdown { display: inline-block; }
        }
    }
    kendo-scheduler .k-scheduler-toolbar {
        @include use-background-clip();
        padding: $toolbar-padding-y $toolbar-padding-x;
        border-style: solid;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }


    // Scheduler navigation
    ul.k-scheduler-navigation {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 1;

        li {
            @include use-background-clip();
            border-width: $button-border-width;
            border-style: solid;
            position: relative;
            z-index: 1;
        }
        li + li {
            margin-left: -$button-border-width;
        }
        .k-state-hover,
        .k-state-selected {
            z-index: 2;
        }


        .k-link {
            padding: $button-padding-y $button-padding-x;
            box-sizing: border-box;
            color: inherit;
            text-decoration: none;
            display: flex;
            flex-direction: row;
            align-items: center;
            align-content: center;
            justify-content: center;
        }


        // Prev / next
        .k-nav-prev,
        .k-nav-next {
            .k-link {
                padding: $button-padding-y;
                width: $button-inner-calc-size;
                height: $button-inner-calc-size;
            }
        }


        // Exception
        .k-nav-current {
            border: 0;
            margin-left: 0;
        }
        .k-nav-today { @include border-left-radius-only( $border-radius ); }
        .k-nav-next { @include border-right-radius-only( $border-radius ); }
    }


    // View switcher
    ul.k-scheduler-views {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: auto;

        li {
            @include use-background-clip();
            border-width: $button-border-width;
            border-style: solid;
            position: relative;
            z-index: 1;
        }
        li + li {
            margin-left: -$button-border-width;
        }
        .k-state-hover,
        .k-state-selected {
            z-index: 2;
        }


        .k-link {
            padding: $button-padding-y $button-padding-x;
            box-sizing: border-box;
            color: inherit;
            text-decoration: none;
            display: flex;
            flex-direction: row;
            align-items: center;
            align-content: center;
            justify-content: center;
        }

        li:first-child { @include border-radius( $border-radius ); }
        li:first-child + li { @include border-left-radius-only( $border-radius ); }
        li:last-child { @include border-right-radius-only( $border-radius ); }

        &.k-state-expanded {
            li {
                @include border-radius( 0 );
                margin: 0;
            }
            li + li { margin-top: -1px; }
            li:first-child { @include border-top-radius-only( $border-radius ); }
            li:first-child + li { @include border-radius( 0 ); }
            li:last-child { @include border-bottom-radius-only( $border-radius ); }
        }

        .k-current-view { display: none; }
        .k-current-view .k-link::after {
            content: "";
            margin: 0 0 0 1ex;
            border: .25em solid transparent;
            border-top: .5em solid currentColor;
            border-bottom-width: 0;
            display: inline-block;
        }

        @media (max-width: 1024px) {
            flex-direction: column;
            align-items: stretch;
            position: absolute;
            right: $toolbar-padding-x;
            top: $toolbar-padding-y;
            z-index: 1000;

            li { display: none; }
            .k-current-view { display: block; }


            &.k-state-expanded {
                li { display: block; }
            }

            .k-rtl & {
                left: $toolbar-padding-x;
                right: auto;
            }
        }
    }


    // Scheduler footer
    .k-scheduler-footer {
        @include box-shadow( none );
        border-width: 0;
        border-top-width: $toolbar-border-width;
        white-space: nowrap;
        flex-shrink: 0;
        position: relative;

        .k-widget {
            font-size: inherit;
        }

        li {
            @include use-background-clip();
            border-width: $button-border-width;
            border-style: solid;
            position: relative;
            z-index: 1;
        }
        li + li {
            margin-left: -$button-border-width;
        }
        .k-state-hover,
        .k-state-selected {
            z-index: 2;
        }


        .k-link {
            padding: $button-padding-y $button-padding-x;
            box-sizing: border-box;
            color: inherit;
            text-decoration: none;
            display: flex;
            flex-direction: row;
            align-items: center;
            align-content: center;
            justify-content: center;
        }

        li {
            @include border-radius( $border-radius );
        }
    }
    kendo-scheduler .k-scheduler-footer {
        @include use-background-clip();
        padding: $toolbar-padding-y $toolbar-padding-x;
        border-style: solid;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
    .k-scheduler-fullday {
        .k-icon {
            margin-right: $icon-spacing;
        }
    }


    // 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;
        }

        // 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;
            }
        }
    }

    .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: right;
        }

        .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: $scheduler-datecolumn-width;
    }
    .k-scheduler-timecolumn {
        width: $scheduler-timecolumn-width;
        white-space: nowrap;
    }


    // Scheduler content
    .k-scheduler-content {
        border-color: inherit;
        position: relative;
        overflow: auto;
    }


    // Appointments
    kendo-scheduler .k-event,
    .k-event {
        @include border-radius( $border-radius );
        min-height: $scheduler-event-min-height;
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        border-radius: $scheduler-event-border-radius;
        text-align: left;
        outline: 0;
        cursor: default;
        position: absolute;
        overflow: hidden;
        padding-right: $padding-x;

        > div {
            position: relative;
            z-index: 2;
        }

        // Template
        .k-event-template {
            line-height: $scheduler-event-line-height;
            padding: $padding-y $padding-x;
            // TODO: incompatible units
            // padding-right: $padding-x-sm + $spacer;
        }
        .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: $padding-x;
            z-index: 2;

            .k-event-delete {
                opacity: .5;
                visibility: hidden;
            }

            &:hover,
            &.k-state-hover {
                .k-event-delete {
                    opacity: 1;
                }
            }

            .k-icon {
                line-height: normal;
                font-size: inherit;
            }

            a { color: inherit; }
        }


        // Indicators
        .k-event-actions:first-child {
            margin: $padding-y-sm .4ex 0 $padding-x-sm;
            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: $spacer * 2;
            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: $spacer * 2;
            border-left-width: 1px;
        }


        // Hover
        &:hover,
        &.k-state-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%);
        }
    }

    // Current time
    .k-current-time {
        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;
        }
    }

    // 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: $padding-x-sm;
            top: $padding-y-sm;
        }
        .k-label-bottom {
            right: $padding-x-sm;
            bottom: $padding-y-sm;
        }

        // 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;
        }
    }

    // sass-lint:disable no-important
    // remove scrollbars during PDF export
    .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;
        }
    }
    // sass-lint:enable no-important


    // TODO: add this class to jQuery rendering
    // after refactoring jQuery scheduler layout to be flex
    .k-recurrence-editor {
        display: inline-flex;
        flex-direction: column;
    }
    kendo-scheduler .k-recurrence-editor {
        display: block;
    }
}




@include exports("scheduler-views/layout") {

    // Day view
    .k-scheduler-dayview {}


    // Workweek view
    // sass-lint:disable class-name-format
    .k-scheduler-workWeekview {}
    // sass-lint:enable class-name-format


    // Week view
    .k-scheduler-weekview {}


    // Month view
    .k-scheduler-monthview {

        .k-scheduler-table {
            height: 100%;
        }
        .k-scheduler-table td {
            height: 80px;
            text-align: right;
        }
        .k-scheduler-body .k-scheduler-cell {
            min-height: 80px;
        }

        // sass-lint:disable no-important
        // hidden cells must have no layout
        .k-hidden {
            padding-left: 0 !important;
            padding-right: 0 !important;
            border-right-width: 0 !important;
        }
        // sass-lint:enable 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-scheduler-datecolumn:first-child {
                border-left-width: 0 !important; // sass-lint:disable-line no-important
            }
        }

        .k-task > .k-event-delete {
            color: inherit;
            position: absolute;
            top: $padding-y-sm;
            right: $padding-y-sm;
            opacity: .5;
            visibility: hidden;
        }
        .k-state-hover .k-task > .k-event-delete,
        .k-scheduler-content tr:hover .k-event-delete,
        .k-scheduler-content .k-scheduler-row: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;
    }
}


@include exports("scheduler-edit-form/layout") {

    .k-scheduler-edit-dialog {
        .k-dialog {
            max-height: 100vh;
        }
    }

    .k-scheduler-edit-form {

        .k-edit-form-container { width: 620px; }
        .k-edit-label { width: 17%; }
        .k-edit-field { width: 77%; }

        .k-scheduler-delete {
            float: left;
        }


        .k-widget.k-recur-interval,
        .k-widget.k-recur-count,
        .k-widget.k-recur-monthday {
            width: 5em;
        }
        .k-widget.k-recur-until,
        .k-widget.k-recur-month,
        .k-widget.k-recur-weekday,
        .k-widget.k-recur-weekday-offset {
            width: 9em;
        }

    }

}




@include exports("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 {
            text-align: right;
            padding-right: 0;
            padding-left: $padding-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: $padding-y-sm $padding-x-sm 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-views {
            margin-left: 0;
            margin-right: auto;

            li:first-child + li { @include border-right-radius-only( $border-radius ); }
            li:last-child { @include border-left-radius-only( $border-radius ); }

            .k-current-view .k-link::after {
                margin: 0 1ex 0 0;
            }
        }

        .k-scheduler-navigation  {

            .k-nav-today {
                @include border-right-radius-only( $border-radius );
            }

            .k-nav-next {
                @include border-left-radius-only( $border-radius );
            }

            li + li {
                margin-left: 0;
                margin-right: -1px;
            }
        }

        .k-nav-current .k-icon {
            margin-right: 0;
            margin-left: .4ex;
        }


        .k-scheduler-fullday {
            .k-icon {
                margin-right: 0;
                margin-left: $icon-spacing;
            }
        }

        .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-i-arrow-60-left,
            .k-i-arrow-60-right,
            .k-current-time-arrow-right {
                transform: scaleX(-1);
            }

            .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-scheduler-datecolumn:first-child {
                    border-right-width: 0 !important; // sass-lint:disable-line no-important
                }
            }
        }
    }
}


// #endregion

@include exports("scheduler/layout/bootstrap") {

    // Appointments
    kendo-scheduler .k-event,
    .k-event {
        &::before {
            display: none;
            left: 0;

            .k-rtl & {
                right: 0;
            }
        }

        .k-event-template {
            // Angular fix for stronger selector and smaller padding
            & {
                padding: $padding-y-sm $padding-x-sm;
                font-size: $font-size-sm;
            }
        }

        .k-event-actions {
            right: $padding-x-sm;
            font-size: $font-size-sm;
        }
    }

}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/scheduler/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/scheduler/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/scheduler/_theme.scss
@include exports("scheduler/theme") {

    // Appearance
    .k-scheduler {
        @extend .k-text-selection !optional;
        @include fill(
            $scheduler-text,
            $scheduler-bg,
            $scheduler-border
        );
    }

    // Current time
    .k-current-time {
        background: $scheduler-current-time-color;

        &.k-current-time-arrow-left {
            border-right-color: $scheduler-current-time-color;
        }

        &.k-current-time-arrow-right {
            border-left-color: $scheduler-current-time-color;
        }

        &.k-current-time-arrow-down {
            border-top-color: $scheduler-current-time-color;
        }
    }

    // Header and footer
    .k-scheduler-toolbar {
        @include fill(
            $scheduler-toolbar-text,
            $scheduler-toolbar-bg,
            $scheduler-toolbar-border,
            $scheduler-toolbar-gradient
        );
    }
    .k-scheduler-footer {
        @include fill(
            $scheduler-footer-text,
            $scheduler-footer-bg,
            $scheduler-footer-border,
            $scheduler-footer-gradient
        );
    }

    .k-scheduler-header {
        background-color: $base-bg;
    }

    .k-scheduler-header-wrap {
        background-color: $component-bg;
    }


    //Scheduler navigation
    ul.k-scheduler-navigation {

        li {
            &.k-state-focused {
                @include box-shadow( $list-item-focused-shadow );
            }
        }

        .k-nav-today,
        .k-nav-prev,
        .k-nav-next {
            @include fill(
                $button-text,
                $button-bg,
                $button-border,
                $button-gradient
            );

            &:hover,
            &.k-state-hover {
                @include fill(
                    $button-hovered-text,
                    $button-hovered-bg,
                    $button-hovered-border,
                    $button-hovered-gradient
                );
             }
        }
    }


    // View switcher
    ul.k-scheduler-views {
        &.k-state-expanded { background-color: $base-bg; }

        li {
            @include fill(
                $button-text,
                $button-bg,
                $button-border,
                $button-gradient
            );

            &:hover,
            &.k-state-hover {
                @include fill(
                    $button-hovered-text,
                    $button-hovered-bg,
                    $button-hovered-border,
                    $button-hovered-gradient
                );
            }
            &.k-state-selected {
                @include fill(
                    $primary-button-pressed-text,
                    $primary-button-pressed-bg,
                    $primary-button-pressed-border,
                    $primary-button-pressed-gradient
                );
                @include box-shadow( $primary-button-pressed-shadow );
            }
            &.k-state-focus,
            &.k-state-focused {
                @include box-shadow( $button-focused-shadow );
            }
        }
    }


    // Scheduler footer
    .k-scheduler-footer {

        li {
            @include fill(
                $button-text,
                $button-bg,
                $button-border,
                $button-gradient
            );

            &:hover {
                @include fill(
                    $button-hovered-text,
                    $button-hovered-bg,
                    $button-hovered-border,
                    $button-hovered-gradient
                );
            }
        }
    }


    // Scheduler content
    .k-scheduler-content {}
    .k-scheduler-nonwork,
    .k-scheduler .k-nonwork-hour {
        @include fill(
            $scheduler-nonwork-text,
            $scheduler-nonwork-bg
        );
    }
    .k-scheduler-other-month,
    .k-scheduler .k-other-month {
        @include fill(
            $scheduler-othermonth-text,
            $scheduler-othermonth-bg
        );
    }

    .k-scheduler-layout td.k-state-selected,
    .k-scheduler-layout .k-scheduler-cell.k-state-selected {
        background-color: rgba($selected-bg, .25);
    }

    .k-scheduler-layout-flex {
        .k-scheduler-head,
        .k-sticky-cell {
            background-color: $component-bg;
        }
    }


    // Events
    .k-event {
        @include fill(
            $scheduler-event-text,
            $scheduler-event-bg,
            $scheduler-event-border,
            $scheduler-event-gradient
        );
        @include box-shadow( $scheduler-event-shadow );

        &.k-state-hover {
            @include fill(
                $scheduler-event-hover-text,
                $scheduler-event-hover-bg,
                $scheduler-event-hover-border,
                $scheduler-event-hover-gradient
            );
            @include box-shadow( $scheduler-event-hover-shadow );
        }

        &.k-state-selected {
            @include fill(
                $scheduler-event-selected-text,
                $scheduler-event-selected-bg,
                $scheduler-event-selected-border,
                $scheduler-event-selected-gradient
            );
            @include box-shadow( $scheduler-event-selected-shadow );
        }
    }
    .k-event-inverse {
        color: contrast-wcag( $scheduler-event-text );
    }


    // Drag hint
    .k-event-drag-hint {}


    // Resizing
    .k-scheduler-marquee {}
    .k-scheduler-marquee::before,
    .k-scheduler-marquee::after {
        border-color: $primary-button-border;
    }

    // Edit dialog
    .k-scheduler-edit-dialog {
        .k-dialog-buttongroup {
            border-color: $border-color;
        }
    }

}




@include exports("scheduler-views/theme") {

    // Day view
    .k-scheduler-dayview {}


    // Workweek view
    // sass-lint:disable class-name-format
    .k-scheduler-workWeekview {}
    // sass-lint:enable class-name-format


    // 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-state-hover,
        .k-scheduler-content .k-scheduler-row:hover {
            @include fill(
                $node-hovered-text,
                $node-hovered-bg,
                $node-hovered-border,
                $node-hovered-gradient
            );
        }

        .k-scheduler-content tr:hover .k-scheduler-datecolumn,
        .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
        .k-scheduler-content tr.k-state-hover .k-scheduler-datecolumn,
        .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn {
            @include fill(
                $component-text,
                $component-bg,
                $component-border
            );
        }

        // Selected
        .k-scheduler-content tr.k-state-selected {
            background-color: rgba($selected-bg, .25);
        }
        .k-scheduler-content tr.k-state-selected .k-scheduler-datecolumn,
        .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn {
            background-color: $component-bg;
        }
    }


    // Timeline view
    .k-scheduler-timelineview {}

}




@include exports("scheduler-edit-form/theme") {

    .k-scheduler-edit-form {}

}

// #endregion

// #endregion

// #endregion


// Misc
// #region @import "chat/_index.scss"; -> /packages/bootstrap/scss/chat/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../input/_index.scss"; -> /packages/bootstrap/scss/input/_index.scss
// #region @import /packages/bootstrap/scss/input/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../card/_index.scss"; -> /packages/bootstrap/scss/card/_index.scss
// #region @import /packages/bootstrap/scss/card/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/chat/_variables.scss
// Chat
$chat-padding-x: 16px !default;
$chat-padding-y: 16px !default;
$chat-border-width: 1px !default;
$chat-font-family: $font-family !default;
$chat-font-size: $font-size !default;
$chat-line-height: $line-height !default;

$chat-item-spacing-x: 8px !default;
$chat-item-spacing-y: 16px !default;

$chat-message-list-padding-x: $chat-padding-x !default;
$chat-message-list-padding-y: $chat-padding-y !default;
$chat-message-list-spacing: $chat-item-spacing-y !default;

$chat-bubble-padding-x: 16px !default;
$chat-bubble-padding-y: 8px !default;
$chat-bubble-spacing: 2px !default;
$chat-bubble-line-height: 1.25 !default;

$chat-bubble-border-radius: 12px !default;
$chat-bubble-border-radius-sm: 2px !default;

$chat-avatar-size: 32px !default;
$chat-avatar-spacing: $chat-item-spacing-x !default;

$chat-message-box-padding-x: $chat-padding-x !default;
$chat-message-box-padding-y: 10px !default;

$chat-toolbar-padding-x: $chat-padding-x !default;
$chat-toolbar-padding-y: 10px !default;
$chat-toolbar-spacing: 20px !default;
$chat-toolbar-bg: $toolbar-bg !default;
$chat-toolbar-text: $toolbar-text !default;
$chat-toolbar-border: inherit !default;

$chat-quick-reply-padding-x: 12px !default;
$chat-quick-reply-padding-y: 8px !default;
$chat-quick-reply-spacing: 8px !default;
$chat-quick-reply-line-height: $chat-bubble-line-height !default;


$chat-bg: $app-bg !default;
$chat-text: $app-text !default;
$chat-border: $app-border !default;

$chat-bubble-bg: $button-bg !default;
$chat-bubble-text: $button-text !default;
$chat-bubble-border: $chat-bubble-bg !default;
$chat-bubble-shadow: none !default;
$chat-bubble-hover-shadow: none !default;
$chat-bubble-selected-shadow: none !default;

$chat-alt-bubble-bg: $primary !default;
$chat-alt-bubble-text: contrast-wcag( $chat-alt-bubble-bg ) !default;
$chat-alt-bubble-border: $chat-alt-bubble-bg !default;
$chat-alt-bubble-shadow: none !default;
$chat-alt-bubble-hover-shadow: none !default;
$chat-alt-bubble-selected-shadow: none !default;

$chat-quick-reply-bg: transparent !default;
$chat-quick-reply-text: $primary !default;
$chat-quick-reply-border: $primary !default;

$chat-quick-reply-hover-bg: $primary !default;
$chat-quick-reply-hover-text: $primary-contrast !default;
$chat-quick-reply-hover-border: $primary !default;

$chat-message-box-bg: $input-bg !default;
$chat-message-box-text: $input-text !default;
$chat-message-box-border: inherit !default;
$chat-message-box-focus-shadow: 0 0 40px rgba( $input-text, .1 ) !default;

$chat-message-box-button-hover-text: $primary !default;

$chat-toolbar-box-button-hover-text: $primary !default;
$chat-toolbar-box-button-hover-bg: none !default;

$chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/chat/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/chat/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/chat/_layout.scss
@include exports("chat/layout") {

    .k-chat {
        border-width: $chat-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $chat-font-family;
        font-size: $chat-font-size;
        line-height: $chat-line-height;
        height: 600px;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;


        max-width: 500px;
        margin: auto;


        // 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: $chat-message-list-padding-y $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: $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: left;

            .k-message-time {
                margin-left: $chat-item-spacing-x;
                left: 100%;
            }
            .k-message-status {
                left: 0;
            }

            .k-first .k-bubble,
            .k-only .k-bubble {
                border-bottom-left-radius: $chat-bubble-border-radius-sm;
            }
            .k-middle .k-bubble,
            .k-last .k-bubble {
                @include border-left-radius( $chat-bubble-border-radius-sm );
            }
        }
        .k-message-group.k-alt {
            align-self: flex-end;
            align-items: flex-end;
            text-align: right;

            .k-message-time {
                margin-right: $chat-item-spacing-x;
                right: 100%;
            }
            .k-message-status {
                right: 0;
            }

            .k-first .k-bubble,
            .k-only .k-bubble {
                border-bottom-right-radius: $chat-bubble-border-radius-sm;
            }
            .k-middle .k-bubble,
            .k-last .k-bubble {
                @include border-right-radius( $chat-bubble-border-radius-sm );
            }
        }


        // Message
        .k-message {
            max-width: 100%;
            margin: $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: smaller;
            line-height: normal;
            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: $chat-bubble-spacing;
            height: 0;
            overflow: hidden;
            top: 100%;
            transition: height .2s ease-in-out;
        }


        // Bubble
        .k-bubble {
            @include border-radius( $chat-bubble-border-radius );
            padding: $chat-bubble-padding-y $chat-bubble-padding-x;
            border-width: 1px;
            border-style: solid;
            line-height: $chat-bubble-line-height;
            word-wrap: break-word;
        }


        // Message states
        .k-message.k-state-selected {
            margin-bottom: $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: $chat-item-spacing-y;

            .k-message-status { height: 1.2em; }
        }

        // Avatar
        .k-avatar {
            @include border-radius( 100% );
            margin: 0;
            width: $chat-avatar-size;
            height: $chat-avatar-size;
            position: absolute;

            @at-root .k-message-group:not(.k-alt) > .k-avatar {
                left: 0;
                bottom: 0;
            }
            @at-root .k-message-group.k-alt > .k-avatar {
                right: 0;
                bottom: 0;
            }
        }
        .k-avatars {
            .k-message-group:not(.k-alt):not(.k-no-avatar) {
                padding-left: calc( #{$chat-avatar-size} + #{$chat-avatar-spacing} );
            }
            .k-message-group.k-alt:not(.k-no-avatar) {
                padding-right: calc( #{$chat-avatar-size} + #{$chat-avatar-spacing} );
            }
        }
    }

    // Author
    .k-author {
        margin: 0;
        font-size: smaller;
        line-height: normal;
    }
    .k-chat .k-author {
        margin: 0; // Duplicate styles because of typography module
    }


    // Timestamp
    .k-timestamp {
        font-size: smaller;
        line-height: normal;
        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-right: $chat-quick-reply-spacing;
        margin-bottom: ($chat-quick-reply-spacing / 2);
        padding: $chat-quick-reply-padding-y $chat-quick-reply-padding-x;
        border-width: 1px;
        border-style: solid;
        line-height: $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-left: -$chat-message-list-padding-y;
        margin-right: -$chat-message-list-padding-y;
        padding-left: $chat-message-list-padding-y;
        padding-right: $chat-message-list-padding-y;
        display: flex;
        flex-direction: row;
        flex-wrap: 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-left: $chat-quick-reply-spacing;
        }
    }


    // Message box
    .k-message-box {
        padding: $chat-message-box-padding-y $chat-message-box-padding-x;
        border-width: 1px 0 0;
        border-style: solid;
        flex: 0 0 auto;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        // Input
        .k-input {
            padding: 0;
        }

        .k-button {
            padding: 0;
            flex-shrink: 0;

            svg {
                width: 20px;
                height: 20px;
                fill: currentColor;
                display: inline-block;
            }

            &::before,
            &::after {
                display: none;
            }

            .k-rtl &,
            &[dir="rtl"] {
                transform: scaleX(-1);
            }
        }
    }

}




@include exports( "chat/cards/layout" ) {

    .k-chat .k-card-list {
        margin: $chat-bubble-spacing 0 0;
    }

    .k-chat .k-card-deck {
        max-width: calc(100% + #{$chat-message-list-padding-y * 2}); // prevent overflowing in the parent element
        box-sizing: border-box;
        margin-left: -$chat-message-list-padding-y;
        margin-right: -$chat-message-list-padding-y;
        padding: $chat-message-list-padding-y $chat-message-list-padding-y $chat-message-list-padding-x;
        overflow: hidden;
        overflow-x: auto;
        scroll-behavior: smooth;
    }
    .k-chat .k-card-deck .k-card,
    .k-chat .k-card-deck .k-card-wrap {
        width: 200px;
    }

    .k-chat .k-card-deck-scrollwrap {
        margin-right: -$chat-message-list-padding-y;
        margin-left: -$chat-message-list-padding-y;
        padding-left: $chat-message-list-padding-y;
        padding-right: $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-direction: row;
        flex-wrap: 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-state-selected {
            background: none;
        }
    }
}




@include exports( "chat/typingindicator/layout" ) {

    // Local variables
    $chat-typing-indicator-dot-size: 8px !default;
    $chat-typing-indicator-dot-spacing: 5px !default;

    // Typing indicator
    .k-typing-indicator {
        padding: 0;
        border-radius: 50px;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;

        span {
            width: $chat-typing-indicator-dot-size;
            height: $chat-typing-indicator-dot-size;
            border-radius: 50%;
            flex: 0 0 $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: $chat-typing-indicator-dot-spacing;
        }

        @keyframes k-animation-blink {
            50% {
                opacity: 1;
            }
        }

    }

}




@include exports( "chat/toolbar/layout" ) {

    .k-chat-toolbar,
    .k-chat .k-toolbar-box {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        flex: 0 0 auto;

        .k-button-list {
            // Needed for native scrolling. Will uncoment when it's implemented.
            // margin-bottom: -20px;
            // padding-bottom: 20px;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            overflow: hidden;
            // overflow-x: auto;
            scroll-behavior: smooth;
            padding: $chat-toolbar-padding-y $chat-toolbar-padding-x;

            // fix for flex container disregarding the right padding
            &::after {
                content: "";
                padding-right: $chat-toolbar-padding-x;
            }

            .k-button + .k-button {
                margin-left: $chat-toolbar-spacing;
                flex-shrink: 0;
            }
        }


        .k-scroll-button {
            position: absolute;
            z-index: 2;
            top: 50%;
            transform: translateY(-50%);
        }
        .k-scroll-button-left {
            left: 0;
        }
        .k-scroll-button-right {
            right: 0;
        }

        .k-button {
            border-width: 0;
            color: inherit;
            background: none;
            flex-shrink: 0;
        }


    }

}




@include exports( "chat/layout/rtl" ) {


    // Quick replies
    .k-rtl,
    [dir="rtl"] {


        // Text align
        .k-message-group:not(.k-alt) {
            text-align: right;

            .k-message-time {
                margin-left: 0;
                margin-right: $chat-item-spacing-x;
                left: auto;
                right: 100%;
            }
            .k-message-status {
                left: auto;
                right: 0;
            }
        }
        .k-message-group.k-alt {
            text-align: left;

            .k-message-time {
                margin-right: 0;
                margin-left: $chat-item-spacing-x;
                right: auto;
                left: 100%;
            }
            .k-message-status {
                right: auto;
                left: 0;
            }
        }


        // Avatar
        .k-message-group:not(.k-alt) > .k-avatar {
            left: auto;
            right: 0;
        }
        .k-message-group.k-alt > .k-avatar {
            right: auto;
            left: 0;
        }
        .k-avatars {
            .k-message-group:not(.k-alt):not(.k-no-avatar) {
                padding-left: 0;
                padding-right: calc( #{$chat-avatar-size} + #{$chat-avatar-spacing} );
            }
            .k-message-group.k-alt:not(.k-no-avatar) {
                padding-right: 0;
                padding-left: calc( #{$chat-avatar-size} + #{$chat-avatar-spacing} );
            }
        }

        .k-chat .k-card-deck {
            .k-card-wrap + .k-card-wrap {
                margin-left: 0;
                margin-right: $card-deck-gap;
            }
        }


        // Quick replies
        .k-quick-reply {
            margin-right: 0;
            margin-left: $chat-quick-reply-spacing;
        }

    }


}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/chat/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/chat/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/chat/_theme.scss
@include exports("chat/theme") {

    // Chat
    .k-chat {
        @extend .k-text-selection !optional;
        @include fill(
            $chat-text,
            $chat-bg,
            $chat-border
        );


        // Message meta
        .k-timestamp {
            text-transform: uppercase;
            opacity: .7;
        }
        .k-author {
            font-weight: bold;
        }


        // Bubbles
        .k-bubble {
            @include fill(
                $chat-bubble-text,
                $chat-bubble-bg,
                $chat-bubble-border
            );
            @include box-shadow( $chat-bubble-shadow );
            transition: $transition;
            order: -1;
        }
        .k-bubble:hover {
            @include box-shadow( $chat-bubble-hover-shadow );
        }
        .k-state-selected .k-bubble {
            @include box-shadow( $chat-bubble-selected-shadow );
        }

        .k-alt .k-bubble {
            @include fill(
                $chat-alt-bubble-text,
                $chat-alt-bubble-bg,
                $chat-alt-bubble-border
            );
            @include box-shadow( $chat-alt-bubble-shadow );
        }
        .k-alt .k-bubble:hover {
            @include box-shadow( $chat-alt-bubble-hover-shadow );
        }
        .k-alt .k-state-selected .k-bubble {
            @include box-shadow( $chat-alt-bubble-selected-shadow );
        }


        // Quick replies
        .k-quick-reply {
            @include fill(
                $chat-quick-reply-text,
                $chat-quick-reply-bg,
                $chat-quick-reply-border
            );
        }
        .k-quick-reply:hover {
            @include fill(
                $chat-quick-reply-hover-text,
                $chat-quick-reply-hover-bg,
                $chat-quick-reply-hover-border
            );
        }


        // Message box
        .k-message-box {
            @include fill(
                $chat-message-box-text,
                $chat-message-box-bg,
                $chat-message-box-border
            );
        }
        .k-message-box.k-state-focused {
            @include box-shadow( $chat-message-box-focus-shadow );
        }
        .k-message-box .k-button:hover {
            @include fill( $chat-message-box-button-hover-text );
        }

    }


    // Toolbar
    .k-chat-toolbar,
    .k-chat .k-toolbar-box {
        @include fill(
            $chat-toolbar-text,
            $chat-toolbar-bg,
            $chat-toolbar-border
        );

        .k-button:hover {
            @include fill(
                $chat-toolbar-box-button-hover-text,
                $chat-toolbar-box-button-hover-bg
            );
        }

        .k-scroll-button {
            @include fill( $bg: $chat-bg );
            @include box-shadow( $chat-toolbar-box-scroll-button-shadow );
        }
        .k-scroll-button:hover {
            @include fill( $bg: $chat-bg );
        }
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "mediaplayer/_index.scss"; -> /packages/bootstrap/scss/mediaplayer/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../slider/_index.scss"; -> /packages/bootstrap/scss/slider/_index.scss
// #region @import /packages/bootstrap/scss/slider/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../toolbar/_index.scss"; -> /packages/bootstrap/scss/toolbar/_index.scss
// #region @import /packages/bootstrap/scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/mediaplayer/_variables.scss
// Media player
$mediaplayer-border-width: 1px !default;
$mediaplayer-font-family: $font-family !default;
$mediaplayer-font-size: $font-size !default;
$mediaplayer-line-height: $line-height !default;

$mediaplayer-bg: $component-bg !default;
$mediaplayer-text: $component-text !default;
$mediaplayer-border: $component-border !default;

$mediaplayer-titlebar-padding-x: $header-padding-x !default;
$mediaplayer-titlebar-padding-y: $header-padding-y !default;
$mediaplayer-titlebar-bg: null !default;
$mediaplayer-titlebar-text: $mediaplayer-bg !default;
$mediaplayer-titlebar-border: null !default;
$mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplayer-text, 0 ) !default;

$mediaplayer-toolbar-padding-x: $toolbar-padding-x !default;
$mediaplayer-toolbar-padding-y: $toolbar-padding-y !default;
$mediaplayer-toolbar-spacing: $padding-x !default;
$mediaplayer-toolbar-bg: rgba( $toolbar-bg, .85 ) !default;
$mediaplayer-toolbar-text: $toolbar-text !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/mediaplayer/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/mediaplayer/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mediaplayer/_layout.scss
@include exports("mediaplayer/layout") {

    // Base
    .k-mediaplayer {
        border-width: $mediaplayer-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $mediaplayer-font-family;
        font-size: $mediaplayer-font-size;
        line-height: $mediaplayer-line-height;
        display: block;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        > iframe {
            width: 100%;
            height: 100%;
            border: 0;
            vertical-align: top;
        }
    }


    // Title bar
    .k-mediaplayer-titlebar {
        padding: $mediaplayer-titlebar-padding-y $mediaplayer-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 {
        padding: $mediaplayer-toolbar-padding-y $mediaplayer-toolbar-padding-x;
        border-width: 0;
        // sass-lint:disable no-important
        width: 100% !important;
        // sass-lint:enable no-important
        box-shadow: none;


        > * {
            margin: 0;
            align-items: center;
            align-content: center;
        }
        > * + * { margin-left: $mediaplayer-toolbar-spacing; }

        .k-toolbar-spacer {
            margin-top: 0;
            margin-bottom: 0;
            border-width: 0;
            flex: 1;
        }

        .k-align-right {
            & > * + * { margin-left: $mediaplayer-toolbar-spacing; }
        }

    }
    .k-mediaplayer-time-wrap {
        flex: 1;
    }
    .k-mediaplayer-volume-wrap {
        // TODO: When slider draghandle size is exposed, use it instead
        padding: 0 (14px / 2);
        align-items: center;
    }


    // Seekbar
    .k-slider.k-mediaplayer-seekbar {
        width: 100%;
        position: absolute;
        z-index: 3;
        top: -17px;
        left: 0;
    }
    .k-mediaplayer-seekbar .k-slider-track {
        // sass-lint:disable no-important
        width: 100% !important;
        // sass-lint:enable no-important
        border-radius: 0;
    }

    .k-mediaplayer-fullscreen {
        z-index: 10000;
        position: fixed;
        top: 0;
        left: 0;
        // sass-lint:disable no-important
        width: 100% !important;
        height: 100% !important;
        // sass-lint:enable no-important
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/mediaplayer/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/mediaplayer/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/mediaplayer/_theme.scss
@include exports("mediaplayer/theme") {

    // Theme
    .k-mediaplayer {
        @extend .k-text-selection !optional;
        @include fill( $mediaplayer-text, $mediaplayer-bg, $mediaplayer-border );
    }


    // Title bar
    .k-mediaplayer-titlebar {
        color: $mediaplayer-titlebar-text;
        background-image: linear-gradient( $mediaplayer-titlebar-gradient );
        text-shadow: 0 0 2px rgba( $mediaplayer-text, .5 );
    }


    .k-mediaplayer-toolbar {
        @include fill( $mediaplayer-toolbar-text, $mediaplayer-toolbar-bg );
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "timeline/_index.scss"; -> /packages/bootstrap/scss/timeline/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../card/_index.scss"; -> /packages/bootstrap/scss/card/_index.scss
// #region @import /packages/bootstrap/scss/card/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/timeline/_variables.scss
// Timeline
$timeline-spacing-x: 40px !default;
$timeline-spacing-y: 40px !default;
$timeline-items-padding: $padding-x !default;

$timeline-font-family: $font-family !default;
$timeline-font-size: $font-size !default;
$timeline-line-height: $line-height !default;

$timeline-mobile-spacing-x: $padding-x !default;
$timeline-mobile-spacing-y: $padding-x !default;

$timeline-track-arrow-width: 38px !default;
$timeline-track-arrow-height: 38px !default;

$timeline-track-arrow-disabled-text: true-mix($button-text, $body-bg, 65%) !default;
$timeline-track-arrow-disabled-bg: true-mix($button-bg, $body-bg, 65%) !default;
$timeline-track-arrow-disabled-border: true-mix($button-border, $body-bg, 65%) !default;

$timeline-track-size: 6px !default;
$timeline-track-border-width: 1px !default;
$timeline-track-margin-bottom: $spacer !default;
$timeline-track-start-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
$timeline-track-end-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
$timeline-track-bg: $button-bg !default;
$timeline-track-border-color: $timeline-track-bg !default;

$timeline-track-event-offset: 36px !default;

$timeline-flag-padding-x: $button-padding-x !default;
$timeline-flag-padding-y: $button-padding-y !default;
$timeline-flag-line-height: $button-line-height !default;
$timeline-flag-min-width: 80px !default;
$timeline-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-spacing-x}) !default;
$timeline-mobile-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-mobile-spacing-x}) !default;
$timeline-horizontal-flag-min-width: 80px !default;
$timeline-flag-bg: $primary !default;
$timeline-flag-text: contrast-wcag( $timeline-flag-bg ) !default;

$timeline-flag-callout-width: 10px !default;
$timeline-flag-callout-height: 10px !default;

$timeline-flag-offset-bottom: 4px !default;
$timeline-flag-margin-bottom-calc: calc(#{$timeline-track-size} + 2 * #{$timeline-track-border-width} + #{$timeline-flag-offset-bottom} + #{$timeline-flag-callout-height}) !default;

$timeline-date-width: 50px !default;
$timeline-date-margin-bottom: 10px !default;

$timeline-vertical-padding-calc: calc(#{$timeline-spacing-x} + (#{$timeline-flag-min-width} - #{$timeline-track-size}) / 2) !default;
$timeline-vertical-padding-with-dates-calc: calc(#{$timeline-vertical-padding-calc} + #{$timeline-date-width}) !default;
$timeline-mobile-vertical-padding-calc: calc(#{$timeline-mobile-spacing-x} + (#{$timeline-flag-min-width} - #{$timeline-track-size}) / 2) !default;
$timeline-mobile-vertical-padding-with-dates-calc: calc(#{$timeline-mobile-vertical-padding-calc} + #{$timeline-date-width}) !default;

$timeline-circle-width: 16px !default;
$timeline-circle-height: 16px !default;
$timeline-circle-bg: $primary !default;

$timeline-collapse-arrow-padding-x: $padding-x-sm !default;

$timeline-event-width: 400px !default;
$timeline-event-height: 600px !default;
$timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$card-border-width})) !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/timeline/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/timeline/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/timeline/_layout.scss
@include exports("timeline/layout") {

    .k-timeline {
        box-sizing: border-box;
        outline: 0;
        font-family: $timeline-font-family;
        font-size: $timeline-font-size;
        line-height: $timeline-line-height;
        display: block;
        background-color: transparent;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        ul {
            margin: 0;
            padding: 0;

            li {
                list-style-type: none;
            }
        }

        .k-timeline-flag {
            display: inline-block;
            text-align: center;
            padding: $timeline-flag-padding-y $timeline-flag-padding-x;
            border-radius: $border-radius;
            line-height: $timeline-flag-line-height;
            min-width: $timeline-flag-min-width;
            max-width: $timeline-flag-max-width;
            box-sizing: border-box;
            position: relative;
            z-index: 1;
        }

        .k-timeline-circle {
            width: $timeline-circle-width;
            height: $timeline-circle-height;
            border-radius: 50%;
            flex-shrink: 0;
            position: relative;
            z-index: 1;
        }

        &.k-timeline-dates-hidden {
            .k-timeline-date {
                display: none;
            }
        }

        .k-event-collapse {
            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: $border-radius;
                }
            }
        }

        .k-timeline-card-callout {
            &.k-callout-w,
            &.k-callout-e {
                top: $timeline-track-event-offset;
            }
        }
    }

    .k-timeline-vertical,
    .k-timeline-horizontal {
        padding: 0 $timeline-spacing-x;
        margin: $timeline-spacing-y 0;
        width: 100%;
        position: relative;
        box-sizing: border-box;
        border: 0;
    }

    .k-timeline-vertical,
    .k-timeline-horizontal .k-timeline-track-wrap  {
        &::after {
            content: "";
            position: absolute;
            top: 0;
            border-width: $timeline-track-border-width;
            border-style: solid;
            background-clip: padding-box;
        }
    }

    .k-timeline-vertical {
        padding-left: $timeline-vertical-padding-with-dates-calc;

        &.k-timeline-dates-hidden {
            padding-left: $timeline-vertical-padding-calc;
        }

        &::after  {
            height: 100%;
            width: $timeline-track-size;
            transform: translateX(-50%);
            border-radius: $border-radius-lg;
        }

        .k-timeline-flag-wrap {
            display: flex;
            align-items: center;

            &:first-child {
                padding-top: $timeline-spacing-y;
            }
        }

        .k-timeline-flag {
            transform: translateX(-50%);
        }

        .k-timeline-date-wrap {
            position: absolute;
            padding-right: $timeline-items-padding;
            margin-top: $timeline-track-event-offset;
            transform: translate(-100%, -50%);
            text-align: right;
        }

        .k-timeline-event {
            display: flex;
            align-items: flex-start;
            padding: $timeline-spacing-y 0;
        }

        .k-timeline-card {
            padding-left: $timeline-items-padding;

            .k-card {
                margin-left: $timeline-items-padding;
                min-height: $timeline-event-min-height-calc;
                width: $timeline-event-width;
                max-width: 100%;

                .k-card-header {
                    border-radius: $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: -$icon-spacing 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: $timeline-track-event-offset;
            transform: translate(-50%, -50%);
            margin-right: - $timeline-circle-width / 2;
        }

        &.k-timeline-alternating {
            padding-left: $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: left;
                        padding-right: 0;
                        padding-left: $timeline-items-padding;
                    }

                    .k-timeline-card {
                        padding-left: 0;
                        padding-right: $timeline-items-padding;

                        .k-card {
                            margin-right: $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: $timeline-date-margin-bottom;
        }

        .k-timeline-card {
            height: 100%;
            box-sizing: border-box;
        }

        .k-card {
            max-height: 100%;
            box-sizing: border-box;
        }

        .k-timeline-events-list {
            overflow-x: hidden;
            padding-top: $timeline-track-margin-bottom;

            .k-timeline-scrollable-wrap {
                position: relative;
                height: $timeline-event-height;

                .k-timeline-event {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .k-timeline-track-wrap {
            position: relative;
            padding: ($timeline-track-arrow-height / 2) 0;

            &::after {
                top: auto;
                bottom: $timeline-track-arrow-height / 2;
                left: $timeline-track-start-calc;
                right: $timeline-track-end-calc;
                transform: translateY(-50%);
                height: $timeline-track-size;
            }

            .k-timeline-track {
                overflow: hidden;
                margin: 0 $timeline-track-arrow-width;
                position: relative;
                z-index: 2;

                .k-timeline-scrollable-wrap {
                    transition: transform 1s ease-in-out;
                }
            }

            .k-timeline-flag  {
                margin-bottom: $timeline-flag-margin-bottom-calc;
                position: relative;
                min-width: $timeline-horizontal-flag-min-width;

                &::after {
                    content: "";
                    width: $timeline-flag-callout-width;
                    height: $timeline-flag-callout-height;
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translate(-50%, 50%) rotate(45deg);
                }
            }
        }

        .k-timeline-scrollable-wrap {
            display: flex;
        }
    }

    .k-timeline-arrow {
        width: $timeline-track-arrow-width;
        height: $timeline-track-arrow-height;
        border-radius: 50%;
        position: absolute;
        bottom: calc(#{$timeline-track-size} + 2 * #{$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: 0 $timeline-mobile-spacing-x;
        margin: $timeline-mobile-spacing-y 0;

        .k-timeline-flag {
            max-width: $timeline-mobile-flag-max-width;
        }

        &.k-timeline-horizontal {
            .k-timeline-flag-wrap {
                display: none;
            }
        }

        &.k-timeline-vertical {
            padding-left: $timeline-mobile-vertical-padding-with-dates-calc;

            &.k-timeline-dates-hidden {
                padding-left: $timeline-mobile-vertical-padding-calc;
            }

            &.k-timeline-alternating {
                padding-left: $timeline-mobile-spacing-x;
            }

            .k-timeline-card {
                width: 100%;


                .k-card {
                    width: auto;
                }
            }

            .k-card-actions > .k-button.k-flat:first-child {
                margin-left: 0;
            }
        }
    }
}

// #endregion

@include exports( "timeline/layout/bootstrap" ) {
    .k-timeline-card .k-card-header {
        padding-top: $card-header-padding-x;
    }
}

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/timeline/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/timeline/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/timeline/_theme.scss
@include exports("timeline/theme") {

    .k-timeline {
        .k-timeline-flag {
            color: $timeline-flag-text;
            background-color: $timeline-flag-bg;
        }

        .k-timeline-circle {
            background-color: $timeline-circle-bg;
        }

        .k-timeline-card {
            .k-card-header {
                background-color: $card-bg;
                color: $card-text;
            }

            .k-card-body {

                // Scrollbar styles for Mozilla
                scrollbar-color: $card-border $card-bg;

                // Scrollbar styles for Chrome, Safari and Opera
                &::-webkit-scrollbar-track {
                    background: $card-bg;
                }

                &::-webkit-scrollbar-thumb {
                    background: $card-border;
                }

                &::-webkit-scrollbar-thumb:hover {
                    background: $hovered-border;
                }
            }
        }

        .k-timeline-date {
            color: $body-text;
        }

        .k-timeline-arrow.k-button:not(.k-flat):not(.k-bare):not(.k-outline):not(.k-overflow-button).k-state-disabled {
            opacity: 1; // The arrow button in disabled mode should have a solid background
            color: $timeline-track-arrow-disabled-text;
            background-color: $timeline-track-arrow-disabled-bg;
            border-color: $timeline-track-arrow-disabled-border;
        }
    }

    .k-timeline-vertical,
    .k-timeline-horizontal .k-timeline-track-wrap {
        &::after {
            background-color: $timeline-track-bg;
            border-color: $timeline-track-border-color;
        }
    }

    .k-timeline-horizontal .k-timeline-flag::after {
        background-color: $timeline-flag-bg;
    }
}

// #endregion

// #endregion

// #endregion
// #region @import "pdf-viewer/_index.scss"; -> /packages/bootstrap/scss/pdf-viewer/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../combobox/_index.scss"; -> /packages/bootstrap/scss/combobox/_index.scss
// #region @import /packages/bootstrap/scss/combobox/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../toolbar/_index.scss"; -> /packages/bootstrap/scss/toolbar/_index.scss
// #region @import /packages/bootstrap/scss/toolbar/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../dialog/_index.scss"; -> /packages/bootstrap/scss/dialog/_index.scss
// #region @import /packages/bootstrap/scss/dialog/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../pager/_index.scss"; -> /packages/bootstrap/scss/pager/_index.scss
// #region @import /packages/bootstrap/scss/pager/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/pdf-viewer/_variables.scss
// PDF viewer
$pdf-viewer-border-width: 1px !default;
$pdf-viewer-font-family: $font-family !default;
$pdf-viewer-font-size: $font-size !default;
$pdf-viewer-line-height: $line-height !default;

$pdf-viewer-bg: $component-bg !default;
$pdf-viewer-text: $component-text !default;
$pdf-viewer-border: $component-border !default;

$pdf-viewer-toolbar-bg: null !default;
$pdf-viewer-toolbar-text: null !default;
$pdf-viewer-toolbar-border: null !default;
$pdf-viewer-toolbar-gradient: null !default;

$pdf-viewer-canvas-bg: $app-bg !default;
$pdf-viewer-canvas-text: null !default;
$pdf-viewer-canvas-border: null !default;

$pdf-viewer-page-spacing: 30px !default;

$pdf-viewer-page-bg: white !default;
$pdf-viewer-page-text: $component-text !default;
$pdf-viewer-page-border: $component-border !default;
$pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;

$pdf-viewer-search-dialog-spacing: $toolbar-padding-x !default;
$pdf-viewer-search-dialog-button-spacing: $pdf-viewer-search-dialog-spacing !default;
$pdf-viewer-search-dialog-textbox-padding-x: $input-padding-y !default;
$pdf-viewer-search-dialog-input-button-height: $line-height-em !default;
$pdf-viewer-search-dialog-matches-width: 4.5em !default;

$pdf-viewer-selection-line-height: 1.2 !default;

$pdf-viewer-search-highlight-bg: try-darken($base-bg, 70% ) !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/pdf-viewer/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/pdf-viewer/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/pdf-viewer/_layout.scss
@include exports("pdf-viewer/layout") {

    .k-pdf-viewer {
        border-width: $pdf-viewer-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $pdf-viewer-font-family;
        font-size: $pdf-viewer-font-size;
        line-height: $pdf-viewer-line-height;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-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 {
            padding: 0;
            border-width: 0;
            color: inherit;
            background: none;
            overflow: visible;
        }


        // Canvas
        .k-list-scroller {
            flex: 1 1 auto;
            outline: none;

            .k-enable-text-select {
                -webkit-user-select: text;
                -moz-user-select: text;
                -ms-user-select: text;
                user-select: text;
                cursor: text;
            }

            .k-enable-panning {
                cursor: grab;
            }
            .k-enable-panning span::selection {
                background-color: transparent;
            }
        }


        // Page
        .k-page {
            position: relative;
            margin: $pdf-viewer-page-spacing auto;

            canvas {
                direction: ltr;
            }

            .k-text-layer {
                position: absolute;
                top: 0;
                left: 0;
                opacity: .2;
                overflow: hidden;

                > span {
                    position: absolute;
                    line-height: $pdf-viewer-selection-line-height;
                    transform-origin: 0% 0%;
                    color: transparent;
                }

                mark {
                    color: transparent;
                }
            }
        }
    }

    // Search
    .k-pdf-viewer-search-dialog {
        padding: $pdf-viewer-search-dialog-spacing;

        .k-search-container {
            display: flex;
            flex: 0 0 auto;
            justify-content: flex-start;
            align-items: center;

            .k-textbox {
                display: inline-flex;
                padding-right: $pdf-viewer-search-dialog-textbox-padding-x;
                margin: 0 $pdf-viewer-search-dialog-spacing;
                align-items: center;
                background: none;
            }
            .k-textbox .k-icon {
                position: absolute;
                font-size: inherit;

                .k-ie & {
                    position: relative;
                }
            }

            .k-match-case-button {
                display: inline-flex;
                height: $pdf-viewer-search-dialog-input-button-height;
                justify-content: center;
            }

            .k-search-matches {
                display: inline-block;
                min-width: $pdf-viewer-search-dialog-matches-width;
                margin: 0 $pdf-viewer-search-dialog-spacing 0 $pdf-viewer-search-dialog-button-spacing;
                vertical-align: middle;
            }

            > .k-button {
                margin-left: $pdf-viewer-search-dialog-button-spacing;
            }

            .k-search-dialog-draghandle  {
                cursor: move;
                margin-left: 0;
            }
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/pdf-viewer/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/pdf-viewer/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/pdf-viewer/_theme.scss
@include exports("pdf-viewer/theme") {


    .k-pdf-viewer {
        @extend .k-text-selection !optional;
        @include fill(
            $pdf-viewer-text,
            $pdf-viewer-bg,
            $pdf-viewer-border
        );


        // Toolbar
        .k-toolbar {
            @include fill(
                $pdf-viewer-toolbar-text,
                $pdf-viewer-toolbar-bg,
                $pdf-viewer-toolbar-border,
                $pdf-viewer-toolbar-gradient
            );
        }


        // Canvas
        .k-canvas {
            @include fill(
                $pdf-viewer-canvas-text,
                $pdf-viewer-canvas-bg,
                $pdf-viewer-canvas-border
            );
        }


        // Page
        .k-page {
            @include fill(
                $pdf-viewer-page-text,
                $pdf-viewer-page-bg,
                $pdf-viewer-page-border
            );
            @include box-shadow( $pdf-viewer-page-shadow );
        }


        // Search
        .k-search-highlight {
            background-color: $pdf-viewer-search-highlight-bg;
        }

    }

}

// #endregion

// #endregion

// #endregion
// #region @import "scroller/_index.scss"; -> /packages/bootstrap/scss/scroller/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/scroller/_variables.scss
// Scroller

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/scroller/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/scroller/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/scroller/_layout.scss
@include exports("scroller/layout") {

    // 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: left;
    }
    .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;
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/scroller/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/scroller/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/scroller/_theme.scss
@include exports("scroller/theme") {

    .km-touch-scrollbar {
        background-color: #333333;
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "scrollview/_index.scss"; -> /packages/bootstrap/scss/scrollview/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/scrollview/_variables.scss
// Scrollview
$scrollview-border-width: 1px !default;
$scrollview-font-family: $font-family !default;
$scrollview-font-size: $font-size !default;
$scrollview-line-height: $line-height !default;

$scrollview-bg: $component-bg !default;
$scrollview-text: $component-text !default;
$scrollview-border: $component-border !default;

$scrollview-pagebutton-size: 8px !default;
$scrollview-pagebutton-bg: rgba($carousel-indicator-active-bg, .5) !default;
$scrollview-pagebutton-border: null !default;
$scrollview-pagebutton-primary-bg: null !default;
$scrollview-pagebutton-primary-border: null !default;
$scrollview-pagebutton-shadow: 0 0 2px rgba(0, 0, 0, .08) !default;

$scrollview-pager-offset: 20px !default;
$scrollview-pager-item-spacing: 20px !default;
$scrollview-pager-item-border-width: 0px !default;
$scrollview-pager-height: calc( #{$scrollview-pagebutton-size} + #{$scrollview-pager-item-border-width * 2} + #{$scrollview-pager-item-spacing / 2} ) !default;

$scrollview-arrow-icon-size: 4.5em !default;
$scrollview-arrow-tap-highlight-color: $rgba-transparent !default;
$scrollview-navigation-color: $selected-text !default;
$scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default;
$scrollview-navigation-bg: rgba(0, 0, 0, 0) !default;
$scrollview-navigation-default-opacity: .7 !default;
$scrollview-navigation-hover-opacity: 1 !default;
$scrollview-navigation-hover-span-bg: null !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/scrollview/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/scrollview/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/scrollview/_layout.scss
@include exports("scrollview/layout") {

    // refactor when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done
    kendo-scrollview.k-scrollview-wrap,
    div.k-scrollview {
        border-width: $scrollview-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $scrollview-font-family;
        font-size: $scrollview-font-size;
        line-height: $scrollview-line-height;
        position: relative;
        overflow: hidden;
        display: block;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-scrollview,
        ul.k-scrollview-wrap {
            list-style-type: none;
            position: absolute;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            cursor: default;

            img {
                user-select: none;
            }

            & > li {
                display: inline-block;
                overflow: hidden;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .k-scrollview-pageable,
        .k-scrollview-nav {
            margin: 0;
            padding: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            text-align: center;
            list-style: none;
            position: absolute;
            left: 0;
            bottom: $scrollview-pager-offset;
            pointer-events: none;
        }

        .k-scrollview-pageable > li.k-button,
        .k-scrollview-nav > li.k-link {
            margin: 0 $scrollview-pager-item-spacing;
            padding: 0;
            width: $scrollview-pagebutton-size;
            height: $scrollview-pagebutton-size;
            box-sizing: content-box;
            display: inline-block;
            position: relative;
            flex: 0 0 $scrollview-pagebutton-size;
            border-width: $scrollview-pager-item-border-width;
            border-style: solid;
            border-radius: 50%;
            cursor: pointer;
            pointer-events: all;

            &::before {
                content: "";
                width: $scrollview-pagebutton-size + $scrollview-pager-item-spacing;
                height: $scrollview-pager-height;
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

        // remove when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done
        .k-scrollview-pageable > li.k-button::before {
            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;
            overflow: hidden;
            -webkit-tap-highlight-color: $scrollview-arrow-tap-highlight-color;
        }

        .k-scrollview-prev {
            left: 0;
        }

        .k-scrollview-next {
            right: 0;
        }

        .k-scrollview-next span,
        .k-scrollview-prev span {
            display: table-cell;
            margin: 0;
            padding: 0;
            vertical-align: middle;
            font-size: $scrollview-arrow-icon-size;
            font-weight: normal;
        }

        .k-scrollview-elements {
            width: 100%;
        }

        .k-scrollview-animation {
            transition-duration: .3s;
            transition-timing-function: ease-in-out;
        }

    }

    // refactor when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done
    div.k-scrollview {

        div.k-scrollview-wrap {
            white-space: nowrap;

            & > [data-role="page"] {
                vertical-align: top;
                display: inline-block;
                min-height: 1px;
            }
        }

        .k-scrollview-nav-wrap {
            position: absolute;
            bottom: ($scrollview-pager-offset - ($scrollview-pager-item-spacing / 4));
            left: ($scrollview-pager-item-spacing / 2);
            right: ($scrollview-pager-item-spacing / 2);
            height: $scrollview-pager-height;
            overflow: hidden;

            .k-scrollview-nav {
                margin: 0;
                padding: ($scrollview-pager-item-spacing / 4) 0 0 0;
                display: block;
                white-space: nowrap;
                overflow-x: scroll;
                overflow-y: hidden;
                text-align: center;
                list-style: none;
                position: static;
                pointer-events: initial;

                > li {
                    vertical-align: top;
                }
            }
        }

    }

    @supports (-webkit-user-select: none) {
        kendo-scrollview.k-scrollview-wrap ul.k-scrollview li > *,
        div.k-scrollview ul.k-scrollview-wrap li > * {
            pointer-events: auto;
        }
    }

    @supports (not (-webkit-user-select: none)) {
        kendo-scrollview.k-scrollview-wrap ul.k-scrollview li > *,
        div.k-scrollview ul.k-scrollview-wrap li > * {
            pointer-events: none;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/scrollview/_theme.scss
@include exports("scrollview/theme") {

    // refactor when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done
    kendo-scrollview.k-scrollview-wrap,
    div.k-scrollview {
        @extend .k-text-selection !optional;
        @include fill(
            $scrollview-text,
            $scrollview-bg,
            $scrollview-border
        );

        .k-scrollview-pageable,
        .k-scrollview-nav {
            margin-left: $carousel-control-width;
            margin-right: $carousel-control-width;
            width: auto;
            left: 0;
            right: 0;

            > li {
                background-color: $scrollview-pagebutton-bg;
                margin-right: $carousel-indicator-spacer;
                margin-left: $carousel-indicator-spacer;
                padding: 0;
                max-width: $carousel-indicator-width;
                height: $carousel-indicator-height;
                border-width: 0;
                border-radius: 0;
                flex: 1 0 auto;
                position: relative;
            }
        }
    }
}

// #endregion

// #endregion


// Dataviz
// #region @import "dataviz/_index.scss"; -> /packages/bootstrap/scss/dataviz/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../popup/_index.scss"; -> /packages/bootstrap/scss/popup/_index.scss
// #region @import /packages/bootstrap/scss/popup/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/dataviz/_variables.scss
// Chart
/// The color of the first series.
/// @group charts
$series-a: #0275d8 !default;

/// The color of the second series.
/// @group charts
$series-b: #5bc0de !default;

/// The color of the third series.
/// @group charts
$series-c: #5cb85c !default;

/// The color of the fourth series.
/// @group charts
$series-d: #f0ad4e !default;

/// The color of the fifth series.
/// @group charts
$series-e: #e67d4a !default;

/// The color of the sixth series.
/// @group charts
$series-f: #d9534f !default;

$chart-border-width: 0px !default;
$chart-font-family: $font-family !default;
$chart-font-size: $font-size !default;
$chart-line-height: $line-height !default;
$chart-font-size-sm: 11px !default;
$chart-font-size-md: 12px !default;
$chart-font-size-lg: 16px !default;
$chart-tooltip-font-size: ($font-size * .929) !default;
$chart-label-font-size: .857em !default;
$chart-title-font-size: 1.143em !default;

$chart-inactive: rgba( $body-text, .5 ) !default;

/// The color of the Chart grid lines (major).
/// @group charts
$chart-major-lines: rgba(0, 0, 0, .08) !default;

/// The color of the Chart grid lines (minor).
/// @group charts
$chart-minor-lines: rgba(0, 0, 0, .04) !default;

$chart-area-opacity: .8 !default;

$chart-bg: $component-bg !default;
$chart-text: $component-text !default;
$chart-border: $component-border !default;

$chart-tap-highlight-color: rgba(0, 0, 0, 0);

$chart-crosshair-background: rgba(0, 0, 0, .5) !default;
$chart-crosshair-shared-tooltip-color: $base-text !default;
$chart-crosshair-shared-tooltip-background: $base-bg !default;
$chart-crosshair-shared-tooltip-border: rgba(0, 0, 0, .08) !default;

$chart-notes-background: rgba(0, 0, 0, .5) !default;
$chart-notes-border: rgba(0, 0, 0, .5) !default;
$chart-notes-lines: rgba(0, 0, 0, .5) !default;

$error-bars-background: rgba(0, 0, 0, .5) !default;

$chart-selection-marque-background: $series-a !default;
$selection-handle-size: 22px !default;
$selection-border-color: rgba(0, 0, 0, .08) !default;
$selection-shadow: inset 0 1px 7px rgba(0, 0, 0, .15) !default;


// TreeMap
$treemap-font-family: $font-family !default;
$treemap-font-size: $font-size !default;
$treemap-line-height: $line-height !default;

// #endregion
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/dataviz/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/dataviz/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/dataviz/_layout.scss
@include exports("dataviz/barcode/layout") {

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

}


@include exports("dataviz/charts/layout") {

    // Exported variables
    .k-var--chart-font {
        font-size: $chart-font-size;
    }

    .k-var--chart-title-font {
        font-size: $chart-title-font-size;
    }

    .k-var--chart-label-font {
        font-size: $chart-label-font-size;
    }

    // Elements
    .k-chart,
    .k-sparkline,
    .k-stockchart {
        border-width: $chart-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $chart-font-family;
        font-size: $chart-font-size;
        line-height: $chart-line-height;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $chart-tap-highlight-color;
    }

    .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: left ease-in 80ms, top ease-in 80ms;
    }

    .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( $border-radius );
        font-size: $chart-tooltip-font-size;
        line-height: $line-height;
        padding: $tooltip-padding-y $tooltip-padding-x;
    }

    .k-chart-tooltip th {
        width: auto;
        text-align: center;
        padding: 1px;
    }

    .k-chart-tooltip td {
        width: auto;
        text-align: left;
        padding: $padding-y-sm $padding-x-sm;
        line-height: $line-height;
        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: $selection-handle-size;
        height: $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: -($selection-handle-size / 2);
    }

    .k-right-handle {
        right: -($selection-handle-size / 2);
    }

    .k-left-handle div {
        margin: -($selection-handle-size) 0 0 (-($selection-handle-size / 1.5));
        padding: ($selection-handle-size * 2) (($selection-handle-size / 1.5) * 2) 0 0;
    }

    .k-right-handle div {
        margin: -($selection-handle-size) 0 0 (-($selection-handle-size / 1.5));
        padding: ($selection-handle-size * 2) 0 0 (($selection-handle-size / 1.5) * 2);
    }

    .k-left-handle.k-handle-active div {
        margin-left: -($selection-handle-size * 2);
        padding-left: ($selection-handle-size * 2) + ($selection-handle-size / 1.5);
    }

    .k-right-handle.k-handle-active div {
        margin-left: -($selection-handle-size * 2);
        padding-right: ($selection-handle-size * 2) + ($selection-handle-size / 1.5);
    }

    .k-mask {
        position: absolute;
        height: 100%;
    }

    .k-border {
        width: 1px;
        height: 100%;
        position: absolute;
    }

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

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

    // Navigator hint
    .k-navigator-hint div {
        position: absolute;
    }

    .k-navigator-hint .k-scroll {
        @include border-radius( $border-radius );
        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;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-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;
            }
        }
    }
}


@include exports("dataviz/diagram/layout") {

    .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%;
    }

    // IE8-
    .k-diagram img {
        box-sizing: content-box;
    }
}


@include exports("dataviz/treemap/layout") {

    // Base
    .k-treemap {
        height: 400px;
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        outline: 0;
        font-family: $treemap-font-family;
        font-size: $treemap-font-size;
        line-height: $treemap-line-height;
        display: block;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-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: $padding-y-sm $padding-x-sm;
            border-width: 0 0 1px;
            border-style: solid;
            border-color: inherit;
            font-size: $font-size;
            background-position: 0 0;
            background-repeat: repeat-x;
        }
        .k-treemap-title-vertical {
            padding: $padding-x-sm $padding-y-sm;
            width: $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( #{$padding-y-sm * 2} + (#{$line-height} * #{$font-size}) + 1px);
        }
        .k-treemap-title-vertical + .k-treemap-wrap {
            left: calc( #{$padding-y-sm * 2} + (#{$line-height} * #{$font-size}) + 1px);
        }


        // Leaf
        .k-leaf {
            padding: $padding-x-sm;
        }
    }
}


@include exports("dataviz/gauge/layout") {

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

    .k-arcgauge-label {
        position: absolute;
        text-align: center;
        padding: 0;
        margin: 0;
    }

}




@include exports("dataviz/qrcode/layout") {

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

}




@include exports("chart/variables") {

    // export variables to allow use in scripts
    $exported: (
        accent: $primary,
        accent-contrast: $primary-contrast,
        primary: $primary,
        primary-contrast: $primary-contrast,
        base: $base-bg,
        background: $chart-bg,

        border-radius: $border-radius,

        normal-background: $base-bg,
        normal-text-color: $base-text,
        hover-background: $hovered-bg,
        hover-text-color: $hovered-text,
        selected-background: $selected-bg,
        selected-text-color: $selected-text,

        success: $success,
        info: $info,
        warning: $warning,
        error: $error,

        series-a: $series-a,
        series-b: $series-b,
        series-c: $series-c,
        series-d: $series-d,
        series-e: $series-e,
        series-f: $series-f,

        gauge-pointer: $primary,
        gauge-track: darken($chart-bg, 10%)
    );

    @each $name, $value in $exported {
        $type: type-of($value);

        .k-var--#{$name} {
            @if $type == "color" {
                // background-color can store any color
                background-color: $value;

                svg & {
                    fill: $value;
                }
            } @else if $type == "number" {
                // margin-top can store positive & negative values
                margin-top: $value;
            }
        }
    }
}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/dataviz/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/dataviz/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/dataviz/_theme.scss
@include exports("dataviz/charts/theme") {
    // Exported variables
    .k-var--chart-inactive {
        background-color: $chart-inactive;
    }

    .k-var--chart-major-lines {
        background-color: $chart-major-lines;
    }

    .k-var--chart-minor-lines {
        background-color: $chart-minor-lines;
    }

    .k-var--chart-area-opacity {
        opacity: $chart-area-opacity;
    }

    .k-var--chart-notes-background {
        background-color: $chart-notes-background;
    }

    .k-var--chart-notes-border {
        background-color: $chart-notes-border;
    }

    .k-var--chart-notes-lines {
        background-color: $chart-notes-lines;
    }

    .k-var--chart-crosshair-background {
        background-color: $chart-crosshair-background;
    }

    .k-var--chart-error-bars-background {
        background-color: $error-bars-background;
    }

    // Elements
    .k-chart,
    .k-sparkline,
    .k-stockchart {
        @extend .k-text-selection !optional;
        @include fill(
            $chart-text,
            transparent,
            $chart-border
        );

        .k-popup {
            background: transparent;
        }
    }


    // Tooltip
    // TODO
    .k-chart-tooltip {
        color: $component-bg;
    }
    .k-chart-tooltip-inverse {
        color: invert($component-bg);
    }

    .k-chart-crosshair-tooltip,
    .k-chart-shared-tooltip {
        color: $chart-crosshair-shared-tooltip-color;
        background-color: $chart-crosshair-shared-tooltip-background;
        border-color: $chart-crosshair-shared-tooltip-border;
    }

    .k-selection {
        border-color: $selection-border-color;
        box-shadow: $selection-shadow;
    }

    .k-selection-bg {
        background-color: transparent;
    }

    .k-handle {
        cursor: e-resize;
        @include fill(
            $button-text,
            $button-bg,
            $button-border,
            $button-gradient
        );

        &:hover {
            @include fill(
                $button-hovered-text,
                $button-hovered-bg,
                $button-hovered-border,
                $button-hovered-gradient
            );
        }
    }

    .k-handle div {
        background-color: transparent;
    }

    .k-mask {
        background-color: $component-bg;
        opacity: .8;
    }

    .k-marquee-color {
        background-color: $chart-selection-marque-background;
    }

    .k-marquee-color {
        opacity: .6;
    }
}




@include exports("dataviz/treemap/theme") {

    // Treemap
    .k-treemap {
        @include fill(
            $component-text,
            $component-bg,
            $component-border
        );

        // Title
        .k-treemap-title {
            @include fill(
                $header-text,
                $header-bg,
                $header-border,
                $header-gradient
            );
        }

        // Leaf
        .k-leaf {
            color: $component-bg;
        }
        .k-leaf.k-inverse {
            color: $component-text;
        }
        .k-leaf.k-state-hover {
            box-shadow: inset 0 0 0 3px $component-border;
        }
    }

}

// #endregion

// #endregion

// #endregion
// #region @import "map/_index.scss"; -> /packages/bootstrap/scss/map/_index.scss
// #region @import "../_variables.scss"; -> /packages/bootstrap/scss/_variables.scss
// #region @import /packages/bootstrap/scss/_variables.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Dependencies
// #region @import "../common/_index.scss"; -> /packages/bootstrap/scss/common/_index.scss
// #region @import /packages/bootstrap/scss/common/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../utils/_position.scss"; -> /packages/bootstrap/scss/utils/_position.scss
// #region @import /packages/bootstrap/scss/utils/_position.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../button/_index.scss"; -> /packages/bootstrap/scss/button/_index.scss
// #region @import /packages/bootstrap/scss/button/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../scroller/_index.scss"; -> /packages/bootstrap/scss/scroller/_index.scss
// #region @import /packages/bootstrap/scss/scroller/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion
// #region @import "../icons/_index.scss"; -> /packages/bootstrap/scss/icons/_index.scss
// #region @import /packages/bootstrap/scss/icons/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion


// Component
// #region @import "_variables.scss"; -> /packages/bootstrap/scss/map/_variables.scss
// Map
$map-border-width: 0px !default;

$map-font-size: $font-size !default;
$map-line-height: $line-height !default;
$map-font-family: $font-family !default;

$map-bg: $component-bg !default;
$map-text: $component-text !default;
$map-border: $component-border !default;

$map-navigator-margin: $spacer-x !default;
$map-navigator-padding: 2px !default;
$map-navigator-width: calc( #{$icon-size * 3} + #{$map-navigator-padding * 2} ) !default;
$map-navigator-height: $map-navigator-width !default;
$map-navigator-border-width: 1px !default;

$map-zoom-control-margin: $spacer-x !default;
$map-zoom-control-button-padding-x: $button-padding-y !default;
$map-zoom-control-button-padding-y: $map-zoom-control-button-padding-x !default;

$map-attribution-padding-x: $padding-x-sm !default;
$map-attribution-padding-y: $padding-y-sm !default;
$map-attribution-font-size: ($map-font-size * .75) !default;
$map-attribution-bg: rgba( $map-bg, .8 ) !default;

$map-marker-size: $icon-size-lg !default;
$map-marker-fill: $primary !default;

// #endregion
// #region @import "images/markers.scss"; -> /packages/bootstrap/scss/map/images/markers.scss
// #region @import "../../mixins/_index.scss"; -> /packages/bootstrap/scss/mixins/_index.scss
// #region @import /packages/bootstrap/scss/mixins/_index.scss
// File already imported_once. Skipping output.
// #endregion
// #endregion

@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
// #region @import "_layout.scss"; -> /packages/bootstrap/scss/map/_layout.scss
// #region @import "~@progress/kendo-theme-default/scss/map/_layout.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/map/_layout.scss
@include exports("map/layout") {

    // Layout
    .k-map {
        height: 600px;
        border-width: $map-border-width;
        border-style: solid;
        font-size: $map-font-size;
        line-height: $map-line-height;
        font-family: $map-font-family;


        // 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%);
            font-size: $map-marker-size;
            cursor: pointer;
            position: absolute;
            overflow: visible;
        }


        // Attribution
        .k-attribution {
            padding: $map-attribution-padding-y $map-attribution-padding-x;
            border-width: 0;
            font-size: $map-attribution-font-size;
            z-index: 1000;
        }


    }


    // Controls
    .k-map-controls {
        position: absolute;
        display: flex;
        align-items: center;
    }


    // Navigator
    .k-navigator {
        margin: $map-navigator-margin;
        width: $map-navigator-width;
        height: $map-navigator-width;
        border-width: $map-navigator-border-width;
        border-style: solid;
        box-sizing: border-box;
        border-radius: 50%;
        position: relative;

        .k-pdf-export & { display: none; }


        // Buttons
        .k-button {
            margin: 0;
            padding: 0;
            border-radius: 100%;
            line-height: 1;
            box-shadow: none;
            position: absolute;

            &:not(:hover) {
                border-color: transparent;
                background: none;
            }
        }
        .k-navigator-up {
            transform: translateX(-50%);
            top: $map-navigator-padding;
            left: 50%;
        }
        .k-navigator-right {
            transform: translateY(-50%);
            right: $map-navigator-padding;
            top: 50%;
        }
        .k-navigator-down  {
            transform: translateX(-50%);
            bottom: $map-navigator-padding;
            left: 50%;
        }
        .k-navigator-left {
            transform: translateY(-50%);
            left: $map-navigator-padding;
            top: 50%;
        }
    }


    // Zoom control
    .k-zoom-control {
        margin: $spacer-x;
        border: 0;
        background: none;
        display: flex;

        .k-pdf-export & { display: none; }


        // Buttons
        .k-button {
            padding: $button-padding-y;
        }
    }

}

// #endregion

// #endregion
// #region @import "_theme.scss"; -> /packages/bootstrap/scss/map/_theme.scss
// #region @import "~@progress/kendo-theme-default/scss/map/_theme.scss"; -> /packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/map/_theme.scss
@include exports("map/theme") {

    .k-map {
        @include fill(
            $map-text,
            $map-bg,
            $map-border
        );

        .k-navigator {
            @include fill(
                $button-text,
                $button-bg,
                $button-border,
                $button-gradient
            );
            @include box-shadow( $button-shadow );
        }

        .k-marker {
            color: $map-marker-fill;
        }

        .k-attribution {
            background-color: $map-attribution-bg;
        }
    }

}

// #endregion

// #endregion

// #endregion
