$mbsc-font-path: '~@mobiscroll/jquery-lite/dist/css/' !default;

// Forms
$modules: () !default;

@mixin exports($name) {
  @if (not index($modules, $name)) {
    $modules: append($modules, $name) !global;
    @content;
  }
}



@include exports("common") {
  .mbsc-cloak {
    visibility: hidden !important;
  }

  /* Empty view */

  .mbsc-empty {
    text-align: center;
    margin: 3em;
    color: inherit;
  }

  .mbsc-empty h3 {
    margin: .666666em 0;
    padding: 0;
    color: inherit;
    font-size: 1.5em;
    font-weight: normal;
    font-family: inherit;
  }

  .mbsc-empty p {
    margin: 1em 0;
    padding: 0;
    font-size: 1em;
    line-height: 1.5;
  }
}



$mbsc-font-path: '' !default;

@include exports("icons") {

  @font-face {
    font-family: 'icons_mobiscroll';
    src:
      url($mbsc-font-path + 'icons_mobiscroll.woff?vtxdtu') format('woff'),
      url($mbsc-font-path + 'icons_mobiscroll.woff') format('woff'),
      url($mbsc-font-path + 'icons_mobiscroll.ttf?vtxdtu') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  .mbsc-ic:before {
    font-family: 'icons_mobiscroll';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Icons */

  .mbsc-ic-aid::before {
    content: "\ea01";
  }

  .mbsc-ic-airplane::before {
    content: "\ea02";
  }

  .mbsc-ic-alarm2::before {
    content: "\ea03";
  }

  .mbsc-ic-arrow-down2::before {
    content: "\ea04";
  }

  .mbsc-ic-arrow-down5::before {
    content: "\ea05";
  }

  .mbsc-ic-arrow-left2::before {
    content: "\ea06";
  }

  .mbsc-ic-arrow-left4::before {
    content: "\ea07";
  }

  .mbsc-ic-arrow-left5::before {
    content: "\ea08";
  }

  .mbsc-ic-arrow-left6::before {
    content: "\ea09";
  }

  .mbsc-ic-arrow-right2::before {
    content: "\ea0a";
  }

  .mbsc-ic-arrow-right4::before {
    content: "\ea0b";
  }

  .mbsc-ic-arrow-right5::before {
    content: "\ea0c";
  }

  .mbsc-ic-arrow-right6::before {
    content: "\ea0d";
  }

  .mbsc-ic-arrow-up2::before {
    content: "\ea0e";
  }

  .mbsc-ic-arrow-up5::before {
    content: "\ea0f";
  }

  .mbsc-ic-attachment::before {
    content: "\ea10";
  }

  .mbsc-ic-backspace::before {
    content: "\ea11";
  }

  .mbsc-ic-backspace3::before {
    content: "\ea12";
  }

  .mbsc-ic-backspace4::before {
    content: "\ea13";
  }

  .mbsc-ic-bars::before {
    content: "\ea14";
  }

  .mbsc-ic-book::before {
    content: "\ea15";
  }

  .mbsc-ic-brightness-contrast::before {
    content: "\ea16";
  }

  .mbsc-ic-bubble::before {
    content: "\ea17";
  }

  .mbsc-ic-bubbles::before {
    content: "\ea18";
  }

  .mbsc-ic-bullhorn::before {
    content: "\ea19";
  }

  .mbsc-ic-calendar::before {
    content: "\ea1a";
  }

  .mbsc-ic-camera::before {
    content: "\ea1b";
  }

  .mbsc-ic-cart::before {
    content: "\ea1c";
  }

  .mbsc-ic-checkmark::before {
    content: "\ea1d";
  }

  .mbsc-ic-clock::before {
    content: "\ea1e";
  }

  .mbsc-ic-close::before {
    content: "\ea1f";
  }

  .mbsc-ic-cloud-download::before {
    content: "\ea20";
  }

  .mbsc-ic-cloud-upload::before {
    content: "\ea21";
  }

  .mbsc-ic-cloud::before {
    content: "\ea22";
  }

  .mbsc-ic-cogs::before {
    content: "\ea23";
  }

  .mbsc-ic-compass::before {
    content: "\ea24";
  }

  .mbsc-ic-connection::before {
    content: "\ea25";
  }

  .mbsc-ic-copy2::before {
    content: "\ea26";
  }

  .mbsc-ic-copy3::before {
    content: "\ea27";
  }

  .mbsc-ic-credit::before {
    content: "\ea28";
  }

  .mbsc-ic-disk::before {
    content: "\ea29";
  }

  .mbsc-ic-download::before {
    content: "\ea2a";
  }

  .mbsc-ic-drawer::before {
    content: "\ea2b";
  }

  .mbsc-ic-droplet::before {
    content: "\ea2c";
  }

  .mbsc-ic-earth::before {
    content: "\ea2d";
  }

  .mbsc-ic-eye-blocked::before {
    content: "\ea2e";
  }

  .mbsc-ic-eye::before {
    content: "\ea2f";
  }

  .mbsc-ic-fa-dollar::before {
    content: "\ea30";
  }

  .mbsc-ic-fa-ellipsis-h::before {
    content: "\ea31";
  }

  .mbsc-ic-fa-facebook::before {
    content: "\ea32";
  }

  .mbsc-ic-fa-globe::before {
    content: "\ea33";
  }

  .mbsc-ic-fa-google-plus::before {
    content: "\ea34";
  }

  .mbsc-ic-fa-google::before {
    content: "\ea35";
  }

  .mbsc-ic-fa-leaf::before {
    content: "\ea36";
  }

  .mbsc-ic-fa-mail-reply::before {
    content: "\ea37";
  }

  .mbsc-ic-fa-retweet::before {
    content: "\ea38";
  }

  .mbsc-ic-fa-rotate-left::before {
    content: "\ea39";
  }

  .mbsc-ic-fa-twitter::before {
    content: "\ea3a";
  }

  .mbsc-ic-feed2::before {
    content: "\ea3b";
  }

  .mbsc-ic-file4::before {
    content: "\ea3c";
  }

  .mbsc-ic-film::before {
    content: "\ea3d";
  }

  .mbsc-ic-flag::before {
    content: "\ea3e";
  }

  .mbsc-ic-folder::before {
    content: "\ea3f";
  }

  .mbsc-ic-forward::before {
    content: "\ea40";
  }

  .mbsc-ic-foundation-mail::before {
    content: "\ea41";
  }

  .mbsc-ic-foundation-minus-circle::before {
    content: "\ea42";
  }

  .mbsc-ic-gift::before {
    content: "\ea43";
  }

  .mbsc-ic-globe::before {
    content: "\ea44";
  }

  .mbsc-ic-heart::before {
    content: "\ea45";
  }

  .mbsc-ic-heart2::before {
    content: "\ea46";
  }

  .mbsc-ic-history::before {
    content: "\ea47";
  }

  .mbsc-ic-home::before {
    content: "\ea48";
  }

  .mbsc-ic-image2::before {
    content: "\ea49";
  }

  .mbsc-ic-ion-android-social-user::before {
    content: "\ea4a";
  }

  .mbsc-ic-ion-android-system-windows::before {
    content: "\ea4b";
  }

  .mbsc-ic-ion-bluetooth::before {
    content: "\ea4c";
  }

  .mbsc-ic-ion-close-circled::before {
    content: "\ea4d";
  }

  .mbsc-ic-ion-email::before {
    content: "\ea4e";
  }

  .mbsc-ic-ion-ios7-arrow-back::before {
    content: "\ea4f";
  }

  .mbsc-ic-ion-ios7-arrow-forward::before {
    content: "\ea50";
  }

  .mbsc-ic-ion-ios7-checkmark-empty::before {
    content: "\ea51";
  }

  .mbsc-ic-ion-ios7-close-empty::before {
    content: "\ea52";
  }

  .mbsc-ic-ion-ios7-close-outline::before {
    content: "\ea53";
  }

  .mbsc-ic-ion-ios7-email::before {
    content: "\ea54";
  }

  .mbsc-ic-ion-ios7-information-outline::before {
    content: "\ea55";
  }

  .mbsc-ic-ion-ios7-plus-empty::before {
    content: "\ea56";
  }

  .mbsc-ic-ion-iphone::before {
    content: "\ea57";
  }

  .mbsc-ic-ion-navigate::before {
    content: "\ea58";
  }

  .mbsc-ic-ion-social-facebook::before {
    content: "\ea59";
  }

  .mbsc-ic-ion-usb::before {
    content: "\ea5a";
  }

  .mbsc-ic-ios-backspace::before {
    content: "\ea5b";
  }

  .mbsc-ic-key2::before {
    content: "\ea5c";
  }

  .mbsc-ic-library::before {
    content: "\ea5d";
  }

  .mbsc-ic-line-bubble::before {
    content: "\ea5f";
  }

  .mbsc-ic-line-calendar::before {
    content: "\ea5e";
  }

  .mbsc-ic-line-food::before {
    content: "\ea60";
  }

  .mbsc-ic-line-heart::before {
    content: "\ea61";
  }

  .mbsc-ic-line-key::before {
    content: "\ea63";
  }

  .mbsc-ic-line-mail::before {
    content: "\ea62";
  }

  .mbsc-ic-line-megaphone::before {
    content: "\ea64";
  }

  .mbsc-ic-line-music::before {
    content: "\ea65";
  }

  .mbsc-ic-line-note::before {
    content: "\ea66";
  }

  .mbsc-ic-line-paperplane::before {
    content: "\ea67";
  }

  .mbsc-ic-line-params::before {
    content: "\ea68";
  }

  .mbsc-ic-line-phone::before {
    content: "\ea69";
  }

  .mbsc-ic-line-settings::before {
    content: "\ea6c";
  }

  .mbsc-ic-line-star::before {
    content: "\ea6a";
  }

  .mbsc-ic-line-t-shirt::before {
    content: "\ea6b";
  }

  .mbsc-ic-line-tag::before {
    content: "\ea6d";
  }

  .mbsc-ic-line-user::before {
    content: "\ea6e";
  }

  .mbsc-ic-line-world::before {
    content: "\ea6f";
  }

  .mbsc-ic-link::before {
    content: "\ea71";
  }

  .mbsc-ic-location::before {
    content: "\ea73";
  }

  .mbsc-ic-lock::before {
    content: "\ea70";
  }

  .mbsc-ic-lock2::before {
    content: "\ea72";
  }

  .mbsc-ic-loop2::before {
    content: "\ea74";
  }

  .mbsc-ic-map::before {
    content: "\ea75";
  }

  .mbsc-ic-material-arrow-back::before {
    content: "\ea76";
  }

  .mbsc-ic-material-arrow-forward::before {
    content: "\ea77";
  }

  .mbsc-ic-material-backspace::before {
    content: "\ea79";
  }

  .mbsc-ic-material-brightness-medium::before {
    content: "\ea7a";
  }

  .mbsc-ic-material-check-box-outline-blank::before {
    content: "\ea78";
  }

  .mbsc-ic-material-check::before {
    content: "\ea7b";
  }

  .mbsc-ic-material-close::before {
    content: "\ea7c";
  }

  .mbsc-ic-material-crop::before {
    content: "\ea7e";
  }

  .mbsc-ic-material-email::before {
    content: "\ea7d";
  }

  .mbsc-ic-material-equalizer::before {
    content: "\ea7f";
  }

  .mbsc-ic-material-explore::before {
    content: "\ea80";
  }

  .mbsc-ic-material-filter::before {
    content: "\ea81";
  }

  .mbsc-ic-material-format-bold::before {
    content: "\ea82";
  }

  .mbsc-ic-material-format-ital::before {
    content: "\ea83";
  }

  .mbsc-ic-material-format-list-numbered::before {
    content: "\ea84";
  }

  .mbsc-ic-material-format-paint::before {
    content: "\ea85";
  }

  .mbsc-ic-material-format-underline::before {
    content: "\ea86";
  }

  .mbsc-ic-material-inbox::before {
    content: "\ea87";
  }

  .mbsc-ic-material-iso::before {
    content: "\ea88";
  }

  .mbsc-ic-material-keyboard-arrow-down::before {
    content: "\ea89";
  }

  .mbsc-ic-material-keyboard-arrow-left::before {
    content: "\ea8a";
  }

  .mbsc-ic-material-keyboard-arrow-right::before {
    content: "\ea8b";
  }

  .mbsc-ic-material-keyboard-arrow-up::before {
    content: "\ea8c";
  }

  .mbsc-ic-material-label::before {
    content: "\ea8d";
  }

  .mbsc-ic-material-language::before {
    content: "\ea8e";
  }

  .mbsc-ic-material-list::before {
    content: "\ea8f";
  }

  .mbsc-ic-material-menu::before {
    content: "\ea90";
  }

  .mbsc-ic-material-message::before {
    content: "\ea91";
  }

  .mbsc-ic-material-more-horiz::before {
    content: "\ea92";
  }

  .mbsc-ic-material-music-note::before {
    content: "\ea93";
  }

  .mbsc-ic-material-notifications::before {
    content: "\ea94";
  }

  .mbsc-ic-material-palette::before {
    content: "\ea95";
  }

  .mbsc-ic-material-pause::before {
    content: "\ea96";
  }

  .mbsc-ic-material-people::before {
    content: "\ea97";
  }

  .mbsc-ic-material-phone-iphone::before {
    content: "\ea98";
  }

  .mbsc-ic-material-photo-size-select-large::before {
    content: "\ea99";
  }

  .mbsc-ic-material-play-arrow::before {
    content: "\ea9a";
  }

  .mbsc-ic-material-repeat::before {
    content: "\ea9b";
  }

  .mbsc-ic-material-rotate-right::before {
    content: "\ea9c";
  }

  .mbsc-ic-material-search::before {
    content: "\ea9d";
  }

  .mbsc-ic-material-share::before {
    content: "\ea9e";
  }

  .mbsc-ic-material-shuffle::before {
    content: "\ea9f";
  }

  .mbsc-ic-material-skip-next::before {
    content: "\eaa0";
  }

  .mbsc-ic-material-skip-previous::before {
    content: "\eaa1";
  }

  .mbsc-ic-material-star-outline::before {
    content: "\eaa2";
  }

  .mbsc-ic-material-star::before {
    content: "\eaa3";
  }

  .mbsc-ic-material-stop::before {
    content: "\eaa4";
  }

  .mbsc-ic-material-system-update::before {
    content: "\eaa5";
  }

  .mbsc-ic-material-texture::before {
    content: "\eaa9";
  }

  .mbsc-ic-material-tune::before {
    content: "\eaa8";
  }

  .mbsc-ic-material-tv::before {
    content: "\eaa6";
  }

  .mbsc-ic-material-vertical-align-bottom::before {
    content: "\eaa7";
  }

  .mbsc-ic-material-wb-auto::before {
    content: "\eaaa";
  }

  .mbsc-ic-meteo-Celsius::before {
    content: "\eaab";
  }

  .mbsc-ic-meteo-Fahrenheit::before {
    content: "\eaad";
  }

  .mbsc-ic-meteo-cloud::before {
    content: "\eaac";
  }

  .mbsc-ic-meteo-cloud2::before {
    content: "\eaae";
  }

  .mbsc-ic-meteo-cloud3::before {
    content: "\eab0";
  }

  .mbsc-ic-meteo-cloud4::before {
    content: "\eaaf";
  }

  .mbsc-ic-meteo-cloud5::before {
    content: "\eab1";
  }

  .mbsc-ic-meteo-cloudy::before {
    content: "\eab2";
  }

  .mbsc-ic-meteo-cloudy2::before {
    content: "\eab3";
  }

  .mbsc-ic-meteo-cloudy3::before {
    content: "\eab4";
  }

  .mbsc-ic-meteo-cloudy4::before {
    content: "\eab6";
  }

  .mbsc-ic-meteo-compass::before {
    content: "\eab5";
  }

  .mbsc-ic-meteo-lightning::before {
    content: "\eab7";
  }

  .mbsc-ic-meteo-lightning2::before {
    content: "\eab8";
  }

  .mbsc-ic-meteo-lightning3::before {
    content: "\eab9";
  }

  .mbsc-ic-meteo-lightning4::before {
    content: "\eabb";
  }

  .mbsc-ic-meteo-lightning5::before {
    content: "\eaba";
  }

  .mbsc-ic-meteo-lines::before {
    content: "\eabd";
  }

  .mbsc-ic-meteo-moon::before {
    content: "\eabc";
  }

  .mbsc-ic-meteo-moon2::before {
    content: "\eabf";
  }

  .mbsc-ic-meteo-none::before {
    content: "\eabe";
  }

  .mbsc-ic-meteo-rainy::before {
    content: "\eac0";
  }

  .mbsc-ic-meteo-rainy2::before {
    content: "\eac1";
  }

  .mbsc-ic-meteo-rainy3::before {
    content: "\eac2";
  }

  .mbsc-ic-meteo-rainy4::before {
    content: "\eac3";
  }

  .mbsc-ic-meteo-snowflake::before {
    content: "\eac4";
  }

  .mbsc-ic-meteo-snowy::before {
    content: "\eac5";
  }

  .mbsc-ic-meteo-snowy2::before {
    content: "\eac6";
  }

  .mbsc-ic-meteo-snowy3::before {
    content: "\eac7";
  }

  .mbsc-ic-meteo-snowy4::before {
    content: "\eac8";
  }

  .mbsc-ic-meteo-snowy5::before {
    content: "\eac9";
  }

  .mbsc-ic-meteo-sun::before {
    content: "\eaca";
  }

  .mbsc-ic-meteo-sun2::before {
    content: "\eacb";
  }

  .mbsc-ic-meteo-sun3::before {
    content: "\eacc";
  }

  .mbsc-ic-meteo-sunrise::before {
    content: "\eacd";
  }

  .mbsc-ic-meteo-thermometer::before {
    content: "\eace";
  }

  .mbsc-ic-meteo-weather::before {
    content: "\eacf";
  }

  .mbsc-ic-meteo-weather2::before {
    content: "\ead0";
  }

  .mbsc-ic-meteo-weather3::before {
    content: "\ead1";
  }

  .mbsc-ic-meteo-weather4::before {
    content: "\ead2";
  }

  .mbsc-ic-meteo-weather5::before {
    content: "\ead4";
  }

  .mbsc-ic-meteo-wind::before {
    content: "\ead3";
  }

  .mbsc-ic-meteo-windy::before {
    content: "\ead5";
  }

  .mbsc-ic-meteo-windy2::before {
    content: "\ead7";
  }

  .mbsc-ic-meteo-windy3::before {
    content: "\ead6";
  }

  .mbsc-ic-meteo-windy4::before {
    content: "\ead8";
  }

  .mbsc-ic-meteo-windy5::before {
    content: "\ead9";
  }

  .mbsc-ic-minus::before {
    content: "\eada";
  }

  .mbsc-ic-mobile::before {
    content: "\eadb";
  }

  .mbsc-ic-music::before {
    content: "\eadc";
  }

  .mbsc-ic-neutral::before {
    content: "\eadd";
  }

  .mbsc-ic-newspaper::before {
    content: "\eade";
  }

  .mbsc-ic-office::before {
    content: "\eadf";
  }

  .mbsc-ic-pause2::before {
    content: "\eae0";
  }

  .mbsc-ic-pencil::before {
    content: "\eae2";
  }

  .mbsc-ic-phone::before {
    content: "\eae1";
  }

  .mbsc-ic-play::before {
    content: "\eae3";
  }

  .mbsc-ic-play3::before {
    content: "\eae4";
  }

  .mbsc-ic-plus::before {
    content: "\eae5";
  }

  .mbsc-ic-print::before {
    content: "\eae6";
  }

  .mbsc-ic-redo2::before {
    content: "\eae7";
  }

  .mbsc-ic-remove::before {
    content: "\eae8";
  }

  .mbsc-ic-reply::before {
    content: "\eae9";
  }

  .mbsc-ic-sad::before {
    content: "\eaea";
  }

  .mbsc-ic-sad2::before {
    content: "\eaeb";
  }

  .mbsc-ic-share::before {
    content: "\eaec";
  }

  .mbsc-ic-smiley::before {
    content: "\eaed";
  }

  .mbsc-ic-smiley2::before {
    content: "\eaee";
  }

  .mbsc-ic-stack::before {
    content: "\eaef";
  }

  .mbsc-ic-star::before {
    content: "\eaf0";
  }

  .mbsc-ic-star2::before {
    content: "\eaf1";
  }

  .mbsc-ic-star3::before {
    content: "\eaf3";
  }

  .mbsc-ic-stop2::before {
    content: "\eaf2";
  }

  .mbsc-ic-stopwatch::before {
    content: "\eaf4";
  }

  .mbsc-ic-stream-sync::before {
    content: "\eaf5";
  }

  .mbsc-ic-support::before {
    content: "\eaf6";
  }

  .mbsc-ic-tag::before {
    content: "\eaf7";
  }

  .mbsc-ic-thumbs-up::before {
    content: "\eaf8";
  }

  .mbsc-ic-thumbs-up2::before {
    content: "\eaf9";
  }

  .mbsc-ic-undo2::before {
    content: "\eafa";
  }

  .mbsc-ic-unlocked::before {
    content: "\eafb";
  }

  .mbsc-ic-upload::before {
    content: "\eafc";
  }

  .mbsc-ic-user4::before {
    content: "\eafd";
  }

  .mbsc-ic-volume-high::before {
    content: "\eafe";
  }

  .mbsc-ic-volume-medium::before {
    content: "\eaff";
  }

  .mbsc-ic-volume-mute2::before {
    content: "\eb00";
  }
}



@include exports("collapsible") {
  .mbsc-collapsible.mbsc-form-group {
    margin: 0;
  }

  .mbsc-collapsible-header {
    position: relative;
    padding-right: 3em;
  }

  .mbsc-collapsible .mbsc-collapsible-icon {
    position: absolute;
    width: 1em;
    height: 1em;
    top: 50%;
    right: 1em;
    margin-top: -.5em;
    line-height: 1em;
    font-size: 1em;
    transition: transform .125s ease-out;
  }

  .mbsc-collapsible .mbsc-collapsible-content {
    overflow: hidden;
    transition: height .125s ease;
    box-sizing: content-box;
  }

  .mbsc-collapsible:not(.mbsc-collapsible-open) .mbsc-collapsible-content {
    height: 0;
    padding-bottom: 0;
  }

  .mbsc-collapsible-open > .mbsc-collapsible-header .mbsc-collapsible-icon {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
  }

  /* Collapsible rtl */

  .mbsc-rtl {

    .mbsc-collapsible.mbsc-form-group,
    .mbsc-collapsible.mbsc-card {

      .mbsc-collapsible-header,
      .mbsc-collapsible-header.mbsc-form-group-title {
        padding-right: 1em;
        padding-left: 3em;

        .mbsc-collapsible-icon {
          right: auto;
          left: 1em;
        }
      }
    }
  }
}




@include exports("page") {
  [mbsc-page]:not(.mbsc-page) {
    // Prevent FOUC
    visibility: hidden;
  }

  .mbsc-page-ctx {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  .mbsc-page {
    min-height: 100%;
    font-size: 16px;
    font-family: arial, verdana, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%;
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mbsc-page,
  .mbsc-page * {
    box-sizing: border-box;
  }

  .mbsc-page:before,
  .mbsc-page:after {
    content: '';
    display: table;
  }


  /* RTL mode */

  .mbsc-rtl {
    direction: rtl;
  }


  /* Typography */

  .mbsc-page h1,
  .mbsc-page h2,
  .mbsc-page h3,
  .mbsc-page h4,
  .mbsc-page h5,
  .mbsc-page h6,
  .mbsc-h1,
  .mbsc-h2,
  .mbsc-h3,
  .mbsc-h4,
  .mbsc-h5,
  .mbsc-h6 {
    margin: 0;
    padding: 0;
    color: inherit;
    font-weight: normal;
    font-family: inherit;
  }

  .mbsc-page p,
  .mbsc-p {
    margin: 1em 0;
    padding: 0;
    line-height: 1.5;
  }

  .mbsc-page a,
  .mbsc-a {
    text-decoration: none;
  }

  .mbsc-page a:hover,
  .mbsc-a:hover {
    text-decoration: underline;
  }

  .mbsc-page a.mbsc-btn:hover,
  .mbsc-a.mbsc-btn:hover {
    text-decoration: none;
  }

  .mbsc-page h1,
  .mbsc-h1 {
    margin: .347826em 0;
    font-size: 2.875em;
  }

  .mbsc-page h2,
  .mbsc-h2 {
    margin: .470588em 0;
    font-size: 2.125em;
  }

  .mbsc-page h3,
  .mbsc-h3 {
    margin: .666666em 0;
    font-size: 1.5em;
  }

  .mbsc-page h4,
  .mbsc-h4 {
    margin: .8em 0;
    font-size: 1.25em;
  }

  .mbsc-page h5,
  .mbsc-h5 {
    margin: 1.066666em 0;
    font-size: .9375em;
  }

  .mbsc-page h6,
  .mbsc-h6 {
    margin: 1.333333em 0;
    font-size: .75em;
  }

  /* Padding, margin */

  .mbsc-padding {
    padding: 1em;
  }

  .mbsc-padding > p:first-child {
    margin-top: 0;
  }

  .mbsc-padding > p:last-child {
    margin-bottom: 0;
  }

  .mbsc-margin {
    margin: 1em 0;
  }

  .mbsc-margin:first-child {
    margin-top: 0;
  }

  .mbsc-margin:last-child {
    margin-bottom: 0;
  }

  /* Lists */

  .mbsc-page ul,
  .mbsc-page ol,
  .mbsc-ul,
  .mbsc-ol {
    padding: 0;
    margin: 1em 0 1em 1.25em;
    line-height: 1.5;
  }

  .mbsc-page ul ul,
  .mbsc-page ol ol,
  .mbsc-ul .mbsc-ul,
  .mbsc-ol .mbsc-ol {
    margin: 0 0 0 1.25em;
  }

  /* Font sizes */

  .mbsc-txt-xs {
    font-size: .625em
  }

  .mbsc-txt-s {
    font-size: .75em;
  }

  .mbsc-txt-m {
    font-size: 1.25em;
  }

  .mbsc-txt-l {
    font-size: 1.5em;
  }

  .mbsc-txt-xl {
    font-size: 2em;
  }

  .mbsc-txt-muted {
    opacity: .6;
  }

  /* Line heights */
  .mbsc-line-height-xs {
    line-height: 1;
  }

  .mbsc-line-height-s {
    line-height: 1.25;
  }

  .mbsc-line-height-m {
    line-height: 1.5;
  }

  .mbsc-line-height-l {
    line-height: 1.75;
  }

  .mbsc-line-height-xl {
    line-height: 2;
  }

  /* Font weights */

  .mbsc-ultra-bold {
    font-weight: 900;
  }

  .mbsc-bold {
    font-weight: bold;
  }

  .mbsc-medium {
    font-weight: 500;
  }

  .mbsc-light {
    font-weight: 300;
  }

  .mbsc-thin {
    font-weight: 100;
  }

  .mbsc-italic {
    font-style: italic;
  }

  /* Text align */

  .mbsc-align-left {
    text-align: left;
  }

  .mbsc-align-right {
    text-align: right;
  }

  .mbsc-align-center {
    text-align: center;
  }

  .mbsc-align-justify {
    text-align: justify;
  }

  /* Float */

  .mbsc-pull-right {
    float: right;
  }

  .mbsc-pull-left {
    float: left;
  }

  /* Image section */

  .mbsc-media-fluid {
    display: block;
    width: 100%;
  }

  .mbsc-img-thumbnail {
    width: 6em;
    height: 6em;
    margin: 1em;
  }

  /* Avatar image */

  .mbsc-avatar {
    width: 2.5em;
    height: 2.5em;
    padding: 0;
    border-radius: 1.25em;
  }

  /* Note */

  .mbsc-note {
    position: relative;
    padding: .75em 1.25em;
    margin: 1em;
    border: 1px solid transparent;
    font-size: .875em;
  }

  @media screen and (max-width: 600px) {
    .mbsc-note {
      text-align: center;
    }
  }
}



@include exports("input") {
  @keyframes autofill {
    from {
      opacity: 1;
    }

    to {
      opacity: 1;
    }
  }

  .mbsc-input {
    display: block;
    margin: 0;
    z-index: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .mbsc-input.mbsc-control-w.mbsc-ltr,
  .mbsc-input.mbsc-control-w.mbsc-rtl {
    // v5 compatibility
    width: auto;
    font-size: 1em;
    line-height: normal;
    max-width: none;
    position: relative;
  }

  .mbsc-input.mbsc-label-floating.mbsc-control-w.mbsc-ltr,
  .mbsc-input.mbsc-label-floating.mbsc-control-w.mbsc-rtl,
  .mbsc-input.mbsc-label-stacked.mbsc-control-w.mbsc-ltr,
  .mbsc-input.mbsc-label-stacked.mbsc-control-w.mbsc-rtl {
    // v5 compatibility
    top: 0;
    left: 0;
    right: 0;
    transform: none;
  }

  .mbsc-input .mbsc-control:-webkit-autofill {
    animation-name: autofill;
  }

  .mbsc-input input,
  .mbsc-input select,
  .mbsc-input textarea {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .mbsc-input-wrap,
  .mbsc-input input,
  .mbsc-input textarea {
    box-sizing: border-box;
  }

  .mbsc-input input,
  .mbsc-input select,
  .mbsc-input textarea {
    display: block;
    width: 100%;
    font-size: 1em;
  }

  .mbsc-input input:focus,
  .mbsc-input select:focus,
  .mbsc-input textarea:focus {
    outline: 0;
  }

  .mbsc-input-wrap {
    position: relative;
    display: block;
  }

  /* Textbox, textarea, select */

  .mbsc-input .mbsc-label {
    font-size: .875em;
    white-space: nowrap;
  }

  .mbsc-input-ic {
    position: absolute;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
  }

  .mbsc-input-toggle {
    cursor: pointer;
  }

  .mbsc-ic-right .mbsc-input-ic {
    right: .5em;
  }

  .mbsc-ic-left .mbsc-input-ic {
    left: .5em;
  }

  .mbsc-ic-right input {
    padding-right: 2.4em;
  }

  .mbsc-ic-left input {
    padding-left: 2.4em;
  }

  /* Inline labels */

  .mbsc-label-inline.mbsc-input.mbsc-control-w {

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    .mbsc-input-wrap {
      -webkit-box-flex: 1;
      -webkit-flex: 1 auto;
      -moz-box-flex: 1;
      -moz-flex: 1 auto;
      -ms-flex: 1 auto;
      flex: 1 auto;
    }

    .mbsc-label {
      position: static;
      -webkit-box-flex: 0;
      -webkit-flex: 0 auto;
      -moz-box-flex: 0;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      font-size: 1em;
      width: 30%;
      max-width: 12.5em;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: content-box;
    }
  }

  /* Floating labels */

  .mbsc-label-floating.mbsc-input {
    .mbsc-label {
      pointer-events: none;
      transition: transform .2s;
    }

    .mbsc-label~.mbsc-input-wrap {

      /* WebKit browsers */
      .mbsc-control::-webkit-input-placeholder {
        opacity: 0;
      }

      /* Mozilla Firefox 4 to 18 */
      .mbsc-control:-moz-placeholder {
        opacity: 0;
      }

      /* Mozilla Firefox 19+ */
      .mbsc-control::-moz-placeholder {
        opacity: 0;
      }

      /* Internet Explorer 10+ */
      .mbsc-control:-ms-input-placeholder {
        opacity: 0;
      }
    }

    &.mbsc-label-floating-active .mbsc-label~.mbsc-input-wrap {

      /* WebKit browsers */
      .mbsc-control::-webkit-input-placeholder {
        opacity: 1;
        transition: opacity .2s;
      }

      /* Mozilla Firefox 4 to 18 */
      .mbsc-control:-moz-placeholder {
        opacity: 1;
        transition: opacity .2s;
      }

      /* Mozilla Firefox 19+ */
      .mbsc-control::-moz-placeholder {
        opacity: 1;
        transition: opacity .2s;
      }

      /* Internet Explorer 10+ */
      .mbsc-control:-ms-input-placeholder {
        opacity: 1;
        transition: opacity .2s;
      }
    }
  }

  .mbsc-ltr.mbsc-label-floating.mbsc-input .mbsc-label {
    -webkit-transform-origin: top left;
    transform-origin: top left;
  }

  .mbsc-rtl.mbsc-label-floating.mbsc-input .mbsc-label {
    -webkit-transform-origin: top right;
    transform-origin: top right;
  }

  /* file type */
  .mbsc-input-wrap .mbsc-control[type="file"] {
    position: absolute;
    left: 0;
    opacity: 0;
  }
}





@include exports("progress") {
  .mbsc-progress {
    position: relative;
    display: block;
    margin: 0;
    z-index: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .mbsc-progress progress {
    display: none;
  }

  .mbsc-progress .mbsc-input-wrap {
    position: relative;
    display: block;
  }

  .mbsc-progress .mbsc-input-ic {
    position: absolute;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
  }

  .mbsc-progress-cont {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
  }

  .mbsc-progress-track {
    position: relative;
    display: block;
    box-sizing: border-box;
  }

  .mbsc-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
  }

  .mbsc-rtl .mbsc-progress-bar {
    left: auto;
    right: 0;
  }

  .mbsc-progress-anim .mbsc-progress-bar {
    transition: width .1s ease-in-out;
  }

  .mbsc-progress-value {
    position: absolute;
    top: 50%;
    width: 3em;
    overflow: hidden;
    margin-top: -.5em;
    line-height: 1em;
  }

  .mbsc-progress-value-right .mbsc-progress-value {
    right: 0;
    text-align: right;
  }

  .mbsc-rtl.mbsc-progress-value-right .mbsc-progress-value {
    right: auto;
    left: 0;
    text-align: left;
  }

  .mbsc-progress-value-left .mbsc-progress-value {
    left: 0;
    text-align: left;
  }

  .mbsc-rtl.mbsc-progress-value-left .mbsc-progress-value {
    left: auto;
    right: 0;
    text-align: right;
  }

  .mbsc-progress-step-label {
    position: absolute;
    top: 1em;
    width: 3.5em;
    font-size: .75em;
    text-align: center;
    overflow: hidden;
  }

  .mbsc-ltr .mbsc-progress-step-label {
    margin-left: -1.75em;
  }

  .mbsc-rtl .mbsc-progress-step-label {
    margin-right: -1.75em;
  }

  /* Inline labels */

  .mbsc-label-inline.mbsc-progress.mbsc-control-w {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    .mbsc-input-wrap {
      -webkit-box-flex: 1;
      -webkit-flex: 1 auto;
      -moz-box-flex: 1;
      -moz-flex: 1 auto;
      -ms-flex: 1 auto;
      flex: 1 auto;
    }

    .mbsc-label {
      position: static;
      -webkit-box-flex: 0;
      -webkit-flex: 0 auto;
      -moz-box-flex: 0;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      font-size: 1em;
      line-height: 2.125em;
      width: 30%;
      max-width: 12.5em;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}


@include exports("slider") {
  .mbsc-progress.mbsc-slider input {
    display: none;
  }

  .mbsc-ltr .mbsc-progress-anim .mbsc-slider-handle-cont {
    transition: left .1s ease-in-out;
  }

  .mbsc-rtl .mbsc-progress-anim .mbsc-slider-handle-cont {
    transition: right .1s ease-in-out;
  }

  .mbsc-slider-handle-cont {
    position: absolute;
    width: 2em;
    height: 2em;
    top: .0625em;
    margin-top: -1em;
    cursor: pointer;
  }

  .mbsc-ltr .mbsc-slider-handle-cont {
    right: -1em;
  }

  .mbsc-rtl .mbsc-slider-handle-cont {
    left: -1em;
  }

  .mbsc-ltr .mbsc-slider-handle-cont.mbsc-slider-handle-left {
    left: 0;
  }

  .mbsc-rtl .mbsc-slider-handle-cont.mbsc-slider-handle-left {
    right: 0;
  }

  .mbsc-ltr .mbsc-progress-track .mbsc-slider-handle-cont {
    margin-left: -1em;
  }

  .mbsc-rtl .mbsc-progress-track .mbsc-slider-handle-cont {
    margin-right: -1em;
  }

  .mbsc-slider-handle {
    position: absolute;
    top: .125em;
    right: 50%;
    margin: -.5em -.5em 0 0;
    z-index: 2;
  }

  .mbsc-slider-handle-cont .mbsc-slider-handle {
    box-sizing: content-box;
  }

  .mbsc-slider .mbsc-slider-handle:focus,
  .mbsc-slider .mbsc-active .mbsc-slider-handle {
    outline: 0;
    z-index: 15;
  }

  .mbsc-slider .mbsc-handle-curr {
    z-index: 16;
  }

  .mbsc-slider-tooltip {
    position: absolute;
    right: 50%;
    opacity: 0;
    color: #000;
  }

  .mbsc-slider-step {
    position: absolute;
    top: 0;
    width: .125em;
    height: 100%;
    margin-left: -.0625em;
  }
}




@include exports("rating") {
  .mbsc-rating {
    &.mbsc-progress .mbsc-progress-cont {
      display: inline-block;
      width: auto;
      padding: 0 .5em;
      margin: 0 -.681818em;
      cursor: pointer;
    }

    .mbsc-progress-cont .mbsc-progress-track {
      height: auto;
      background: none;
    }

    .mbsc-ic {
      font-size: 1.375em;
      margin: 0 0.181818em;
    }

    &.mbsc-progress input {
      display: none;
    }

    &.mbsc-progress .mbsc-progress-cont .mbsc-slider-handle {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      top: 0;
      left: 0;
      right: 0;
      background: none;
      box-shadow: none;
      border: 0;
      -webkit-transform: none;
      transform: none;
    }

    .mbsc-progress-cont .mbsc-progress-bar {
      background: none;
      overflow: hidden;
      white-space: nowrap;
      border-radius: 0;
      transition: none;
    }
  }
}







@include exports("animation") {

  .mbsc-anim-trans .mbsc-fr-scroll {
    overflow: hidden;
  }

  .mbsc-anim-trans-flip .mbsc-fr-persp,
  .mbsc-anim-trans-swing .mbsc-fr-persp {
    -webkit-perspective: 1000px;
    perspective: 1000px;
  }

  .mbsc-anim-trans .mbsc-fr-popup,
  .mbsc-anim-trans .mbsc-fr-overlay {
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .mbsc-anim-in .mbsc-fr-popup,
  .mbsc-anim-in .mbsc-fr-overlay {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 225ms;
    animation-timing-function: ease-out;
    animation-duration: 225ms;
  }

  .mbsc-anim-out .mbsc-fr-popup,
  .mbsc-anim-out .mbsc-fr-overlay {
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 195ms;
    animation-timing-function: ease-in;
    animation-duration: 195ms;
  }

  .mbsc-anim-in .mbsc-fr-overlay {
    -webkit-animation-name: mbsc-anim-f-in;
    animation-name: mbsc-anim-f-in;
  }

  .mbsc-anim-out .mbsc-fr-overlay {
    -webkit-animation-name: mbsc-anim-f-out;
    animation-name: mbsc-anim-f-out;
  }

  .mbsc-anim-flip,
  .mbsc-anim-swing,
  .mbsc-anim-slidehorizontal,
  .mbsc-anim-slidevertical,
  .mbsc-anim-slidedown,
  .mbsc-anim-slideup,
  .mbsc-anim-fade {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0);
    backface-visibility: hidden;
    transform: translateX(0);
  }

  .mbsc-anim-swing,
  .mbsc-anim-slidehorizontal,
  .mbsc-anim-slidevertical,
  .mbsc-anim-slidedown,
  .mbsc-anim-slideup,
  .mbsc-anim-fade {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }

  .mbsc-anim-flip,
  .mbsc-anim-pop {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }

  .mbsc-anim-in .mbsc-anim-pop {
    opacity: 1;
    -webkit-animation-name: mbsc-anim-p-in;
    -webkit-animation-duration: 100ms;
    -webkit-transform: scale(1);
    animation-name: mbsc-anim-p-in;
    animation-duration: 100ms;
    transform: scale(1);
  }

  .mbsc-anim-out .mbsc-anim-pop {
    opacity: 0;
    -webkit-animation-name: mbsc-anim-p-out;
    -webkit-animation-duration: 150ms;
    animation-name: mbsc-anim-p-out;
    animation-duration: 150ms;
  }

  .mbsc-anim-trans-pop .mbsc-fr-overlay {
    -webkit-animation-duration: 150ms;
    animation-duration: 150ms;
  }

  .mbsc-anim-in .mbsc-anim-flip {
    opacity: 1;
    -webkit-animation-name: mbsc-anim-fl-in;
    -webkit-transform: scale(1);
    animation-name: mbsc-anim-fl-in;
    transform: scale(1);
  }

  .mbsc-anim-out .mbsc-anim-flip {
    opacity: 0;
    -webkit-animation-name: mbsc-anim-fl-out;
    animation-name: mbsc-anim-fl-out;
  }

  .mbsc-anim-in .mbsc-anim-swing {
    opacity: 1;
    -webkit-animation-name: mbsc-anim-sw-in;
    -webkit-transform: scale(1);
    transform: scale(1);
    animation-name: mbsc-anim-sw-in;
  }

  .mbsc-anim-out .mbsc-anim-swing {
    opacity: 0;
    -webkit-animation-name: mbsc-anim-sw-out;
    animation-name: mbsc-anim-sw-out;
  }

  .mbsc-anim-in .mbsc-anim-slidehorizontal {
    opacity: 1;
    -webkit-animation-name: mbsc-anim-sh-in;
    -webkit-transform: scale(1);
    transform: scale(1);
    animation-name: mbsc-anim-sh-in;
  }

  .mbsc-anim-out .mbsc-anim-slidehorizontal {
    opacity: 0;
    -webkit-animation-name: mbsc-anim-sh-out;
    animation-name: mbsc-anim-sh-out;
  }

  .mbsc-anim-in .mbsc-anim-slidevertical {
    opacity: 1;
    -webkit-animation-name: mbsc-anim-sv-in;
    -webkit-transform: scale(1);
    animation-name: mbsc-anim-sv-in;
    transform: scale(1);
  }

  .mbsc-anim-out .mbsc-anim-slidevertical {
    opacity: 0;
    -webkit-animation-name: mbsc-anim-sv-out;
    animation-name: mbsc-anim-sv-out;
  }

  .mbsc-anim-in .mbsc-anim-slidedown {
    -webkit-animation-name: mbsc-anim-sd-in;
    -webkit-transform: scale(1);
    animation-name: mbsc-anim-sd-in;
    transform: scale(1);
  }

  .mbsc-anim-out .mbsc-anim-slidedown {
    -webkit-animation-name: mbsc-anim-sd-out;
    -webkit-transform: translateY(-100%);
    animation-name: mbsc-anim-sd-out;
  }

  .mbsc-anim-in .mbsc-anim-slideup {
    -webkit-animation-name: mbsc-anim-su-in;
    -webkit-transform: scale(1);
    transform: scale(1);
    animation-name: mbsc-anim-su-in;
  }

  .mbsc-anim-out .mbsc-anim-slideup {
    -webkit-animation-name: mbsc-anim-su-out;
    -webkit-transform: translateY(100%);
    animation-name: mbsc-anim-su-out;
  }

  .mbsc-anim-in .mbsc-anim-fade {
    opacity: 1;
    -webkit-animation-name: mbsc-anim-f-in;
    animation-name: mbsc-anim-f-in;
  }

  .mbsc-anim-out .mbsc-anim-fade {
    opacity: 0;
    -webkit-animation-name: mbsc-anim-f-out;
    animation-name: mbsc-anim-f-out;
  }

  .mbsc-fr-pointer {
    &.mbsc-anim-in .mbsc-anim-slidedown {
      -webkit-animation-name: mbsc-anim-sd-in, mbsc-anim-f-in;
      animation-name: mbsc-anim-sd-in, mbsc-anim-f-in;
    }

    &.mbsc-anim-out .mbsc-anim-slidedown {
      -webkit-animation-name: mbsc-anim-sd-out, mbsc-anim-f-out;
      animation-name: mbsc-anim-sd-out, mbsc-anim-f-out;
    }

    &.mbsc-anim-in .mbsc-anim-slideup {
      -webkit-animation-name: mbsc-anim-su-in, mbsc-anim-f-in;
      animation-name: mbsc-anim-su-in, mbsc-anim-f-in;
    }

    &.mbsc-anim-out .mbsc-anim-slideup {
      -webkit-animation-name: mbsc-anim-su-out, mbsc-anim-f-out;
      animation-name: mbsc-anim-su-out, mbsc-anim-f-out;
    }
  }

  /* Fade in */

  @keyframes mbsc-anim-f-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @-webkit-keyframes mbsc-anim-f-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }


  /* Fade out */

  @keyframes mbsc-anim-f-out {
    from {
      visibility: visible;
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @-webkit-keyframes mbsc-anim-f-out {
    from {
      visibility: visible;
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }


  /* Pop in */

  @keyframes mbsc-anim-p-in {
    from {
      opacity: 0;
      transform: scale(0.8);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @-webkit-keyframes mbsc-anim-p-in {
    from {
      opacity: 0;
      -webkit-transform: scale(0.8);
    }

    to {
      opacity: 1;
      -webkit-transform: scale(1);
    }
  }


  /* Pop out */

  @keyframes mbsc-anim-p-out {
    from {
      opacity: 1;
      transform: scale(1);
    }

    to {
      opacity: 0;
      transform: scale(0.8);
    }
  }

  @-webkit-keyframes mbsc-anim-p-out {
    from {
      opacity: 1;
      -webkit-transform: scale(1);
    }

    to {
      opacity: 0;
      -webkit-transform: scale(0.8);
    }
  }


  /* Flip in */

  @keyframes mbsc-anim-fl-in {
    from {
      opacity: 0;
      transform: rotateY(90deg);
    }

    to {
      opacity: 1;
      transform: rotateY(0);
    }
  }

  @-webkit-keyframes mbsc-anim-fl-in {
    from {
      opacity: 0;
      -webkit-transform: rotateY(90deg);
    }

    to {
      opacity: 1;
      -webkit-transform: rotateY(0);
    }
  }


  /* Flip out */

  @keyframes mbsc-anim-fl-out {
    from {
      opacity: 1;
      transform: rotateY(0deg);
    }

    to {
      opacity: 0;
      transform: rotateY(-90deg);
    }
  }

  @-webkit-keyframes mbsc-anim-fl-out {
    from {
      opacity: 1;
      -webkit-transform: rotateY(0deg);
    }

    to {
      opacity: 0;
      -webkit-transform: rotateY(-90deg);
    }
  }


  /* Swing in */

  @keyframes mbsc-anim-sw-in {
    from {
      opacity: 0;
      transform: rotateY(-90deg);
    }

    to {
      opacity: 1;
      transform: rotateY(0deg);
    }
  }

  @-webkit-keyframes mbsc-anim-sw-in {
    from {
      opacity: 0;
      -webkit-transform: rotateY(-90deg);
    }

    to {
      opacity: 1;
      -webkit-transform: rotateY(0deg);
    }
  }


  /* Swing out */

  @keyframes mbsc-anim-sw-out {
    from {
      opacity: 1;
      transform: rotateY(0deg);
    }

    to {
      opacity: 0;
      transform: rotateY(-90deg);
    }
  }

  @-webkit-keyframes mbsc-anim-sw-out {
    from {
      opacity: 1;
      -webkit-transform: rotateY(0deg);
    }

    to {
      opacity: 0;
      -webkit-transform: rotateY(-90deg);
    }
  }


  /* Slide horizontal in */

  @keyframes mbsc-anim-sh-in {
    from {
      opacity: 0;
      transform: translateX(-100%);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @-webkit-keyframes mbsc-anim-sh-in {
    from {
      opacity: 0;
      -webkit-transform: translateX(-100%);
    }

    to {
      opacity: 1;
      -webkit-transform: translateX(0);
    }
  }


  /* Slide horizontal out */

  @keyframes mbsc-anim-sh-out {
    from {
      opacity: 1;
      transform: translateX(0);
    }

    to {
      opacity: 0;
      transform: translateX(100%);
    }
  }

  @-webkit-keyframes mbsc-anim-sh-out {
    from {
      opacity: 1;
      -webkit-transform: translateX(0);
    }

    to {
      opacity: 0;
      -webkit-transform: translateX(100%);
    }
  }


  /* Slide vertical in */

  @keyframes mbsc-anim-sv-in {
    from {
      opacity: 0;
      transform: translateY(-100%);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @-webkit-keyframes mbsc-anim-sv-in {
    from {
      opacity: 0;
      -webkit-transform: translateY(-100%);
    }

    to {
      opacity: 1;
      -webkit-transform: translateY(0);
    }
  }


  /* Slide vertical out */

  @keyframes mbsc-anim-sv-out {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  @-webkit-keyframes mbsc-anim-sv-out {
    from {
      opacity: 1;
      -webkit-transform: translateY(0);
    }

    to {
      opacity: 0;
      -webkit-transform: translateY(100%);
    }
  }


  /* Slide Down In */

  @keyframes mbsc-anim-sd-in {
    from {
      transform: translateY(-100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @-webkit-keyframes mbsc-anim-sd-in {
    from {
      opacity: 1;
      -webkit-transform: translateY(-100%);
    }

    to {
      opacity: 1;
      -webkit-transform: translateY(0);
    }
  }


  /* Slide down out */

  @keyframes mbsc-anim-sd-out {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-100%);
    }
  }

  @-webkit-keyframes mbsc-anim-sd-out {
    from {
      opacity: 1;
      -webkit-transform: translateY(0);
    }

    to {
      opacity: 1;
      -webkit-transform: translateY(-100%);
    }
  }


  /* Slide Up In */

  @keyframes mbsc-anim-su-in {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @-webkit-keyframes mbsc-anim-su-in {
    from {
      opacity: 1;
      -webkit-transform: translateY(100%);
    }

    to {
      opacity: 1;
      -webkit-transform: translateY(0);
    }
  }


  /* Slide up out */

  @keyframes mbsc-anim-su-out {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(100%);
    }
  }

  @-webkit-keyframes mbsc-anim-su-out {
    from {
      opacity: 1;
      -webkit-transform: translateY(0);
    }

    to {
      opacity: 1;
      -webkit-transform: translateY(100%);
    }
  }
}



@include exports("frame") {

  .mbsc-fr-w,
  .mbsc-fr-overlay {
    -webkit-transform: translateZ(0);
  }

  .mbsc-fr {
    pointer-events: none;
    z-index: 99998;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: 100%;
  }

  .mbsc-fr-focus {
    outline: 0;
  }

  .mbsc-fr-lock-ctx {
    position: relative;
  }

  .mbsc-fr-lock.mbsc-fr-lock-ios {
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
  }

  .mbsc-fr-pos {
    visibility: hidden;
  }

  .mbsc-fr-scroll {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .mbsc-fr-popup {
    max-width: 98%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    font-size: 12px;
    text-shadow: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
  }

  .mbsc-rtl {
    direction: rtl;
  }


  /* Box sizing */

  .mbsc-fr-popup,
  .mbsc-fr-btn-cont,
  .mbsc-fr-arr {
    box-sizing: border-box;
  }

  .mbsc-fr .mbsc-fr-w {
    box-sizing: content-box;
  }

  .mbsc-fr-w {
    min-width: 256px;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    font-family: arial, verdana, sans-serif;
  }


  /* Modal overlay */

  .mbsc-fr,
  .mbsc-fr-persp,
  .mbsc-fr-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .mbsc-fr-lock .mbsc-fr-persp {
    -ms-touch-action: none;
    touch-action: none;
  }

  .mbsc-fr-lock-ctx > .mbsc-fr,
  .mbsc-fr-lock-ctx .mbsc-fr-persp,
  .mbsc-fr-lock-ctx .mbsc-fr-overlay {
    position: absolute;
  }

  .mbsc-fr-persp {
    pointer-events: auto;
    overflow: hidden;
  }

  .mbsc-fr-overlay {
    z-index: 1;
    background: rgba(0, 0, 0, .7);
  }


  /* Liquid mode */

  .mbsc-fr-liq .mbsc-fr-popup {
    max-width: 100%;
  }


  /* Top/Bottom mode */

  .mbsc-fr-top .mbsc-fr-popup,
  .mbsc-fr-bottom .mbsc-fr-popup {
    width: 100%;
    max-width: 100%;
  }

  .mbsc-fr-top .mbsc-fr-w,
  .mbsc-fr-bottom .mbsc-fr-w {
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
  }

  .mbsc-fr-bottom .mbsc-fr-w {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mbsc-fr-top .mbsc-fr-popup {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
  }


  /* Inline mode */

  .mbsc-fr-inline {
    position: relative;
    pointer-events: auto;
    z-index: 0;
  }

  .mbsc-fr-inline .mbsc-fr-popup {
    position: static;
    max-width: 100%;
  }


  /* Bubble mode */

  .mbsc-fr-bubble,
  .mbsc-fr-bubble .mbsc-fr-persp {
    position: absolute;
  }

  .mbsc-fr-bubble .mbsc-fr-arr-w {
    position: absolute;
    z-index: 1;
    left: 0;
    width: 100%;
    overflow: hidden;
  }

  .mbsc-fr-bubble-top .mbsc-fr-arr-w {
    top: 100%;
  }

  .mbsc-fr-bubble-bottom .mbsc-fr-arr-w {
    bottom: 100%;
  }

  .mbsc-fr-bubble .mbsc-fr-arr-i {
    margin: 0 1.75em;
    position: relative;
    direction: ltr;
  }

  .mbsc-fr-bubble .mbsc-fr-arr {
    display: block;
  }

  .mbsc-fr-arr {
    display: none;
    position: relative;
    left: 0;
    width: 2em;
    height: 2em;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-left: -1em;
  }

  .mbsc-fr-bubble-bottom .mbsc-fr-arr {
    top: 1.333334em;
  }

  .mbsc-fr-bubble-top .mbsc-fr-arr {
    top: -1.333334em;
  }

  .mbsc-fr-hdn {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
  }


  /* Header */

  .mbsc-fr-hdr {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }


  /* Buttons */

  .mbsc-fr-btn {
    overflow: hidden;
    display: block;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;
  }

  .mbsc-fr-btn-e {
    cursor: pointer;
  }

  .mbsc-fr-btn.mbsc-disabled {
    cursor: not-allowed;
  }


  /* Button container */

  .mbsc-fr-btn-cont {
    display: table;
    width: 100%;
    text-align: center;
    white-space: normal;
  }

  .mbsc-fr-btn-cont .mbsc-disabled {
    opacity: .3;
  }


  /* Button wrapper */

  .mbsc-fr-btn-w {
    vertical-align: top;
    display: table-cell;
    position: relative;
    z-index: 5;
  }

  .mbsc-fr-btn-w .mbsc-fr-btn:before {
    padding: .375em;
  }

  /* Desktop view */

  .mbsc-fr-pointer {

    /* Embedded components */
    &.mbsc-fr .mbsc-fr-w .mbsc-fr-inline .mbsc-fr-w {
      box-shadow: none;
      border-radius: 0;
    }

    .mbsc-ltr .mbsc-fr-w,
    .mbsc-ltr .mbsc-sc-whl .mbsc-sel-gr {
      text-align: left;
    }

    .mbsc-rtl .mbsc-fr-w,
    .mbsc-rtl .mbsc-sc-whl .mbsc-sel-gr {
      text-align: right;
    }

    &.mbsc-fr-top .mbsc-fr-w,
    &.mbsc-fr-bottom .mbsc-fr-w {
      pointer-events: auto;
      display: inline-block;
      margin-top: 3em;
      margin-bottom: 3em;
      max-width: 98%;
    }

    &.mbsc-fr-top .mbsc-fr-popup,
    &.mbsc-fr-bottom .mbsc-fr-popup {
      text-align: center;
      pointer-events: none;
    }

    &.mbsc-fr-bubble .mbsc-fr-arr-w {
      display: none;
    }

    .mbsc-sel-empty {
      text-align: center;
    }
  }
}


@include exports("popup") {

  .mbsc-wdg .mbsc-wdg-c {
    position: relative;
    z-index: 0;
    font-size: 14px;
    white-space: normal;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }

  .mbsc-wdg .mbsc-ltr .mbsc-wdg-c {
    text-align: left;
  }

  .mbsc-wdg .mbsc-rtl .mbsc-wdg-c {
    text-align: right;
  }

  .mbsc-wdg .mbsc-wdg-c.mbsc-w-p {
    padding: 1em;
  }

  .mbsc-no-padding.mbsc-wdg .mbsc-wdg-c.mbsc-w-p {
    padding: 0;
  }
}


@include exports("notifications") {
  /* Toast, snackbar */

  .mbsc-toast .mbsc-fr-persp,
  .mbsc-snackbar .mbsc-fr-persp {
    pointer-events: none;
  }

  .mbsc-toast .mbsc-fr-overlay,
  .mbsc-snackbar .mbsc-fr-overlay {
    display: none;
  }

  .mbsc-toast.mbsc-fr .mbsc-fr-persp .mbsc-fr-popup,
  .mbsc-snackbar.mbsc-fr .mbsc-fr-persp .mbsc-fr-popup {
    border: 0;
    line-height: 1.428572;
  }

  /* Snackbar */

  .mbsc-snackbar.mbsc-fr .mbsc-fr-w {
    min-width: 18em;
    max-width: 36em;
    margin: 0 auto;
    pointer-events: auto;
    box-shadow: none;
  }

  .mbsc-snackbar-cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .mbsc-snackbar-msg {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0 1em;
  }

  .mbsc-snackbar .mbsc-snackbar-cont .mbsc-snackbar-btn {
    margin: -1em 0;
    padding: 1em;
    line-height: 1.428572;
    font-size: 1em;
    font-weight: 400;
  }

  .mbsc-snackbar.mbsc-no-touch.mbsc-fr .mbsc-fr-c .mbsc-btn-flat:not(:disabled):hover {
    background: none;
    box-shadow: none;
  }


  /* Toast */

  .mbsc-toast.mbsc-fr .mbsc-fr-w {
    background: none;
    box-shadow: none;
  }

  .mbsc-toast.mbsc-fr .mbsc-fr-c.mbsc-wdg-c {
    text-align: center;
    padding-bottom: 4em;
  }

  .mbsc-toast .mbsc-toast-msg {
    display: inline-block;
    min-width: 10em;
    max-width: 50em;
    padding: .857143em 2em;
  }

  /* Alert, confirm, prompt */

  .mbsc-alert.mbsc-fr .mbsc-fr-c.mbsc-wdg-c {
    padding: 1.714286em;
    max-width: 20em;
  }

  .mbsc-alert .mbsc-fr-c .mbsc-input {
    padding: 0;
    margin: 0;
  }

  .mbsc-alert.mbsc-fr h2 {
    margin: 0 0 1em 0;
    padding: 0;
    font-size: 1.428572em;
    font-weight: bold;
  }

  .mbsc-alert.mbsc-fr p {
    margin: 1em 0;
    padding: 0;
    font-size: 1em;
  }
}

@include exports("forms") {
  /* Forms */

  [mbsc-form]:not(.mbsc-form) {
    // Prevent FOUC
    visibility: hidden;
  }

  .mbsc-form,
  .mbsc-control-w,
  .mbsc-btn,
  .mbsc-segmented {
    font-size: 16px;
    font-family: arial, verdana, sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
  }

  .mbsc-form:before,
  .mbsc-form:after {
    content: '';
    display: table;
  }

  .mbsc-form-group {
    margin: 1.5em 0;
  }

  .mbsc-form-group-inset {
    margin: 2em 1.5em;
  }

  .mbsc-form-group,
  .mbsc-form-group-inset {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* No background inside widget */

  .mbsc-wdg .mbsc-w-p .mbsc-form {
    background: none;
  }

  /* Other mobiscroll components inline */

  .mbsc-input .mbsc-fr-inline .mbsc-fr-popup {
    display: block;
  }

  .mbsc-err-msg {
    display: block;
    font-size: .75em;
  }

  .mbsc-checkbox,
  .mbsc-switch,
  .mbsc-radio,
  .mbsc-stepper-cont {
    line-height: 1.25em;
  }

  .mbsc-checkbox,
  .mbsc-switch,
  .mbsc-btn,
  .mbsc-radio,
  .mbsc-segmented,
  .mbsc-stepper-cont {
    position: relative;
    display: block;
    margin: 0;
    z-index: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .mbsc-checkbox input,
  .mbsc-switch input,
  .mbsc-radio input,
  .mbsc-segmented input,
  .mbsc-btn {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .mbsc-checkbox input,
  .mbsc-switch input,
  .mbsc-radio input,
  .mbsc-select select,
  .mbsc-segmented input {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    margin: 0;
  }

  .mbsc-btn,
  .mbsc-checkbox-box,
  .mbsc-checkbox-box:after,
  .mbsc-radio-box,
  .mbsc-radio-box:after,
  .mbsc-switch-track,
  .mbsc-segmented,
  .mbsc-progress progress,
  .mbsc-stepper-cont {
    box-sizing: border-box;
  }

  .mbsc-segmented .mbsc-segmented-content,
  .mbsc-btn-flat .mbsc-btn-ic {
    box-sizing: content-box;
  }

  .mbsc-desc {
    display: block;
    font-size: .75em;
    opacity: .6;
  }

  label.mbsc-input,
  .mbsc-label {
    margin: 0;
    display: block;
    font-weight: normal;
  }

  .mbsc-control-w {
    // Override bootstrap defaults
    max-width: none;
    margin: 0;
    font-size: 1em;
    font-weight: normal;
  }

  .mbsc-control-w .mbsc-label {
    // v5 compatibility
    position: static;
    line-height: normal;
  }

  /* Textarea */

  .mbsc-input textarea {
    resize: none;
    overflow: hidden;
    line-height: 1.5em;
  }

  .mbsc-input .mbsc-textarea-scroll {
    overflow: auto;
  }

  /* Select */

  .mbsc-select select,
  .mbsc-select input {
    cursor: pointer;
  }

  .mbsc-select select option {
    color: initial;
  }

  .mbsc-select-ic {
    display: none;
  }

  /* Checkbox */

  .mbsc-checkbox {
    padding: .5em;
  }

  .mbsc-checkbox-box {
    position: absolute;
    top: 50%;
    display: block;
    width: 1.375em;
    height: 1.375em;
  }

  .mbsc-checkbox-box:after {
    content: '';
    position: absolute;
    display: block;
    opacity: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .mbsc-checkbox input:checked + .mbsc-checkbox-box:after {
    opacity: 1;
  }

  /* Radio */

  .mbsc-radio {
    padding: .5em;
  }

  .mbsc-radio-box {
    position: absolute;
    top: 50%;
    display: block;
    width: 1.25em;
    height: 1.25em;
    border-radius: 1.25em;
  }

  .mbsc-radio-box:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: .625em;
    height: .625em;
    margin-top: -.3125em;
    margin-left: -.3125em;
    border-radius: .625em;
    opacity: 0;
  }

  .mbsc-radio input:checked + .mbsc-radio-box:after {
    opacity: 1;
  }

  /* Switch */

  .mbsc-switch {
    padding: .5em;
  }

  .mbsc-switch-track {
    position: absolute;
    top: 50%;
    display: block;
    width: 3.375em;
    height: 1.625em;
    transition: background-color .2s ease-in-out, border .2s ease-in-out;
    z-index: 4;
  }

  .mbsc-switch .mbsc-switch-track .mbsc-progress-track {
    height: 100%;
    background: none;
  }

  .mbsc-switch .mbsc-switch-track .mbsc-slider-handle-cont {
    top: 50%;
  }

  .mbsc-switch-handle {
    position: absolute;
    display: block;
  }

  .mbsc-switch-txt-off,
  .mbsc-switch-txt-on {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    font-size: .625em;
    text-align: center;
    line-height: 2em;
  }

  /* Segmented control & Stepper */

  .mbsc-segmented {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .mbsc-segmented .mbsc-segmented-item {
    margin: 0;
    display: table-cell;
    position: relative;
    vertical-align: top;
    text-align: center;
    font-size: 1em;
  }

  .mbsc-segmented-content {
    position: relative;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: .875em;
    font-weight: normal;
    z-index: 2;
  }

  // Angular + Bootstrap compatibility
  .mbsc-segmented-item label {
    display: block;
    margin: 0;
  }

  .mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content,
  .mbsc-disabled .mbsc-segmented-content,
  .mbsc-segmented input:disabled + .mbsc-segmented-content {
    z-index: 0;
  }

  .mbsc-stepper.mbsc-segmented {
    position: absolute;
    display: block;
    width: auto;
    right: 1em;
    top: 50%;
    // v5 compatibility
    overflow: visible;
  }

  .mbsc-rtl .mbsc-stepper {
    right: auto;
    left: 1em;
  }

  .mbsc-stepper-cont .mbsc-label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .mbsc-segmented-item:focus {
    outline: 0;
  }

  .mbsc-stepper input {
    position: absolute;
    left: 4.142857em;
    width: 4.142857em;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    box-shadow: none;
    font-size: .875em;
    text-align: center;
    opacity: 1;
    z-index: 4;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
  }

  .mbsc-stepper input::-webkit-outer-spin-button,
  .mbsc-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .mbsc-ltr.mbsc-stepper-val-right .mbsc-stepper input {
    left: auto;
    right: 0;
  }

  .mbsc-rtl.mbsc-stepper-val-right .mbsc-stepper input {
    right: auto;
    left: 0;
  }

  .mbsc-ltr.mbsc-stepper-val-left .mbsc-stepper input {
    left: 0;
  }

  .mbsc-rtl.mbsc-stepper-val-left .mbsc-stepper input {
    right: 0;
  }

  .mbsc-stepper .mbsc-segmented-item {
    width: 3.625em;
  }

  .mbsc-stepper-cont.mbsc-stepper-val-left .mbsc-stepper .mbsc-segmented-item:nth-child(2) .mbsc-segmented-content,
  .mbsc-stepper-cont.mbsc-stepper-val-right .mbsc-stepper .mbsc-segmented-item:last-child .mbsc-segmented-content {
    /* Strong rule is needed to override disabled styling */
    border: 0;
    background: transparent;
  }

  .mbsc-control-w.mbsc-stepper-cont .mbsc-stepper {
    padding: 0;
  }

  .mbsc-segmented-item .mbsc-control,
  .mbsc-stepper .mbsc-segmented-content {
    cursor: pointer;
  }

  .mbsc-disabled .mbsc-segmented-content,
  .mbsc-segmented input:disabled,
  .mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content {
    cursor: not-allowed;
  }

  /* Buttons */

  .mbsc-btn {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    text-overflow: ellipsis;
    font-size: 1em;
    font-family: arial, verdana, sans-serif;
    cursor: pointer;
  }

  .mbsc-btn:disabled {
    cursor: not-allowed;

    * {
      /* Prevents click event firing for the Angular mbsc-button component, when disabled */
      pointer-events: none;
    }
  }

  .mbsc-btn:focus {
    outline: 0;
  }

  .mbsc-btn-ic {
    line-height: 1;
  }

  .mbsc-btn-group,
  .mbsc-btn-group-block,
  .mbsc-btn-group-justified {
    // Prevent margin collision
    border: 1px solid transparent;
  }

  .mbsc-btn-group-block .mbsc-btn,
  .mbsc-btn-block {
    display: block;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .mbsc-btn-group-justified,
  .mbsc-btn-group-justified mbsc-button {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .mbsc-btn-group-justified .mbsc-btn,
  .mbsc-btn-group-justified mbsc-button {
    -webkit-box-flex: 1;
    -webkit-flex: 1 auto;
    -ms-flex: 1 auto;
    flex: 1 auto;
  }

  input:disabled + span .mbsc-slider-handle-cont {
    cursor: not-allowed;
  }

  /* Form in grid */

  .mbsc-form .mbsc-form-grid .mbsc-form-group-title {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}




















// Button color variables

$mbsc-button-color-light: null !default;
$mbsc-button-color-dark: null !default;
$mbsc-button-text-light: null !default;
$mbsc-button-text-dark: null !default;

// Forms color variables

$mbsc-form-background-light: null !default;
$mbsc-form-background-dark: null !default;
$mbsc-form-text-light: null !default;
$mbsc-form-text-dark: null !default;
$mbsc-form-accent-light: null !default;
$mbsc-form-accent-dark: null !default;

$mbsc-form-group-title-text-light: null !default;
$mbsc-form-group-title-text-dark: null !default;

// Input color variables

$mbsc-input-background-light: null !default;
$mbsc-input-background-dark: null !default;
$mbsc-input-border-light: null !default;
$mbsc-input-border-dark: null !default;
$mbsc-input-text-light: null !default;
$mbsc-input-text-dark: null !default;
$mbsc-input-accent-light: null !default;
$mbsc-input-accent-dark: null !default;
$mbsc-input-error-light: null !default;
$mbsc-input-error-dark: null !default;

// Navigation color variables

$mbsc-nav-background-light: null !default;
$mbsc-nav-background-dark: null !default;
$mbsc-nav-text-light: null !default;
$mbsc-nav-text-dark: null !default;
$mbsc-nav-accent-light: null !default;
$mbsc-nav-accent-dark: null !default;

// Card color variables

$mbsc-card-background-light: null !default;
$mbsc-card-background-dark: null !default;
$mbsc-card-text-light: null !default;
$mbsc-card-text-dark: null !default;

// Page color variables

$mbsc-page-background-light: null !default;
$mbsc-page-background-dark: null !default;
$mbsc-page-text-light: null !default;
$mbsc-page-text-dark: null !default;

// Listview color variables

$mbsc-listview-background-light: null !default;
$mbsc-listview-background-dark: null !default;
$mbsc-listview-text-light: null !default;
$mbsc-listview-text-dark: null !default;
$mbsc-listview-accent-light: null !default;
$mbsc-listview-accent-dark: null !default;
$mbsc-listview-header-background-light: null !default;
$mbsc-listview-header-background-dark: null !default;
$mbsc-listview-header-text-light: null !default;
$mbsc-listview-header-text-dark: null !default;

// Calendar/Range/Eventcalendar color variables

$mbsc-calendar-mark-light: null !default;
$mbsc-calendar-mark-dark: null !default;

// Frame color variables

$mbsc-frame-background-light: null !default;
$mbsc-frame-background-dark: null !default;
$mbsc-frame-text-light: null !default;
$mbsc-frame-text-dark: null !default;
$mbsc-frame-accent-light: null !default;
$mbsc-frame-accent-dark: null !default;
$mbsc-frame-overlay-light: null !default;
$mbsc-frame-overlay-dark: null !default;

@function get-contrast-color($color) {
  @if (lightness($color) > 65%) {
    @return #000;
  }

  @else {
    @return #fff;
  }
}


$mbsc-ios-button: #007bff !default;
$mbsc-ios-accent: #007bff !default;
$mbsc-ios-background: #f7f7f7 !default;
$mbsc-ios-text: #000000 !default;

$mbsc-ios-dark-button: #ff8400 !default;
$mbsc-ios-dark-accent: #ff8400 !default;
$mbsc-ios-dark-background: #000000 !default;
$mbsc-ios-dark-text: #ffffff !default;

/* Base colors */
$mbsc-ios-primary: #3f97f6 !default;
$mbsc-ios-secondary: #90979E !default;
$mbsc-ios-success: #43BE5F !default;
$mbsc-ios-danger: #f5504e !default;
$mbsc-ios-warning: #f8b042 !default;
$mbsc-ios-info: #5BB7C5 !default;
$mbsc-ios-light: #fff !default;
$mbsc-ios-dark: #47494A !default;

$mbsc-ios-colors: ( // Colors map
  'background': $mbsc-ios-background,
  'text': $mbsc-ios-text,
  'accent': $mbsc-ios-accent,
);
$mbsc-ios-dark-colors: ( // Colors map
  'background': $mbsc-ios-dark-background,
  'text': $mbsc-ios-dark-text,
  'accent': $mbsc-ios-dark-accent,
);

@function mbsc-ios-colors($params) {
  $background: map-get($params, 'background');
  $text: map-get($params, 'text');
  $accent: map-get($params, 'accent');

  $button: '';

  @if (map-get($params, 'button')) {
    $button: map-get($params, 'button');
  }

  @else {
    $button: map-get($params, 'accent');
  }

  $background-limited: hsl(hue($background), saturation($background), max(lightness($background), 3%));
  $background-alt: lighten($background-limited, 3%);
  $card-shadow: darken($background, 17%);
  $cont-background: lighten($background, 6%);

  $border-color: '';
  $popup-border: '';
  $label-text: '';
  $button-disabled: '';
  $switch-background: '';
  $snackbar-button: '';
  $slider-tooltip: '';
  $slider-track-step: '';
  $text-alt: '';
  $background-overlay: '';
  $empty-color: '';
  $btn-cont-background: '';

  // Light background
  @if (lightness($background) > 50%) {
    $border-color: darken($background-limited, 17%);
    $popup-border: $border-color;
    $label-text: lighten($text, 67%);
    $button-disabled: darken($background, 13%);
    $switch-background: darken($background, 7%);
    $slider-tooltip: darken($background, 26%);
    $slider-track-step: darken($background, 10%);
    $text-alt: lighten($text, 53%);
    $background-overlay: rgba(#000, .2);
    $empty-color: lighten($text, 43%);
    $btn-cont-background: darken($background, 3%);
    $snackbar-button: hsl(hue($button), saturation($button), max(lightness($button), 80%));
  }

  // Dark background
  @else {
    $border-color: lighten($background, 20%);
    $popup-border: lighten($border-color, 13%);
    $label-text: $text;
    $button-disabled: lighten($background, 13%);
    $switch-background: #fff;
    $slider-tooltip: lighten($background, 70%);
    $slider-track-step: lighten($background, 27%);
    $text-alt: darken($text, 33%);
    $background-overlay: rgba(#fff, .1);
    $empty-color: $text;
    $btn-cont-background: lighten($background-limited, 8%);
    $snackbar-button: $button;
  }



  @return ('cont-background': $cont-background,
    'border-color': $border-color,
    'background-alt': $background-alt,
    'card-shadow': $card-shadow,
    'popup-border': $popup-border,
    'background-limited': $background-limited,
    'label-text': $label-text,
    'button-disabled': $button-disabled,
    'switch-background': $switch-background,
    'snackbar-button': $snackbar-button,
    'slider-tooltip': $slider-tooltip,
    'slider-track-step': $slider-track-step,
    'text-alt': $text-alt,
    'background-overlay': $background-overlay,
    'empty-color': $empty-color,
    'btn-cont-background': $btn-cont-background,
    'button': $button,
    /* static colors */
    'error': #d8332a,
    'white-text': #fff,
    'dark-text': #000);
}

@mixin mbsc-ios-common($theme, $params) {
  @include exports("common.#{$theme}.colors") {
    $colors: mbsc-ios-colors($params);
    $empty-color: map-get($colors, empty-color);

    .mbsc-#{$theme} {
      .mbsc-empty {
        color: $empty-color;
      }
    }
  }
}



@include exports("collapsible.ios") {
  .mbsc-ios .mbsc-collapsible {
    .mbsc-collapsible-header {
      padding-right: 3em;
    }

    .mbsc-form-group-title {
      padding-top: 2.5em;
      margin: 0;

      .mbsc-collapsible-icon {
        margin-top: .5em;
      }
    }
  }
}



@include exports("borders.ios") {

  @media (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) {

    .mbsc-fr-hb.mbsc-ios.mbsc-fr-inline .mbsc-fr-w,
    .mbsc-fr-hb.mbsc-ios.mbsc-fr-inline .mbsc-fr-c,
    .mbsc-fr-hb.mbsc-ios .mbsc-fr-hdr,
    .mbsc-fr-hb.mbsc-ios .mbsc-fr-btn-cont,
    .mbsc-fr-hb.mbsc-ios.mbsc-fr-center .mbsc-fr-btn-w,
    .mbsc-fr-hb.mbsc-ios.mbsc-fr-bottom .mbsc-fr-popup,
    /* Calendar */
    .mbsc-fr-hb.mbsc-ios.mbsc-cal-liq.mbsc-fr-center .mbsc-fr-btn-cont,
    .mbsc-fr-hb.mbsc-ios.mbsc-calendar .mbsc-fr-popup .mbsc-fr-btn-cont,
    .mbsc-fr-hb.mbsc-ios .mbsc-cal-day,
    .mbsc-fr-hb.mbsc-ios .mbsc-cal-sc-m-cell,
    /* Range */
    .mbsc-fr-hb.mbsc-ios .mbsc-range-btn-end,
    .mbsc-fr-hb.mbsc-ios .mbsc-range-btn-end .mbsc-range-btn:before,
    /* Numpad */
    .mbsc-fr-hb.mbsc-ios .mbsc-np-btn,
    /* Navigation */
    .mbsc-fr-hb.mbsc-ios.mbsc-ms-more .mbsc-ms-item:after,
    /* Listview */
    .mbsc-lv-hb.mbsc-ios .mbsc-lv-item:before,
    .mbsc-lv-hb.mbsc-ios .mbsc-lv-item:after,
    .mbsc-lv-hb.mbsc-ios .mbsc-lv-gr-title,
    .mbsc-lv-hb.mbsc-ios,
    /* Forms */
    .mbsc-form-hb.mbsc-ios .mbsc-control-w:before,
    .mbsc-form-hb.mbsc-ios .mbsc-control-w:after,
    .mbsc-form-hb.mbsc-ios .mbsc-form-group-inset .mbsc-control-ng .mbsc-control-w:before,
    .mbsc-form-hb.mbsc-ios .mbsc-form-group-inset .mbsc-control-ng .mbsc-control-w:after,
    .mbsc-form-hb.mbsc-ios .mbsc-divider,
    .mbsc-form-hb.mbsc-ios .mbsc-btn-group {
      border-width: .5px;
    }
  }
}






// Theme specific variables - inherited from global variables

// background
$mbsc-ios-page-background: $mbsc-page-background-light !default;
$mbsc-ios-dark-page-background: $mbsc-page-background-dark !default;

// text
$mbsc-ios-page-text: $mbsc-page-text-light !default;
$mbsc-ios-dark-page-text: $mbsc-page-text-dark !default;

// add variables to color maps
$mbsc-ios-colors: map-merge($mbsc-ios-colors, (
  'page-background': $mbsc-ios-page-background,
  'page-text': $mbsc-ios-page-text,
));
$mbsc-ios-dark-colors: map-merge($mbsc-ios-dark-colors, (
  'page-background': $mbsc-ios-dark-page-background,
  'page-text': $mbsc-ios-dark-page-text,
));

@mixin mbsc-ios-page($theme, $params) {
  @include exports("page.#{$theme}.colors") {

    $background: map-get($params, 'background');
    $text: map-get($params, 'text');

    $colors: mbsc-ios-colors($params);
    $button: map-get($colors, 'button');

    @if (lightness($background) > 50%) {
      $background: adjust-hue(darken(saturate($background, 19%), 2%), 240deg);
    }
    @else {
      $background: adjust-hue(lighten(desaturate($background, 19%), 10%), 240deg);
    }

    // get custom params
    $text-param: map-get($params, 'page-text');
    $background-param: map-get($params, 'page-background');
    // overwrite params with custom variables
    $background: if($background-param, $background-param, $background);
    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));

    .mbsc-#{$theme} {
      &.mbsc-page {
        background: $background;
        color: $text;
      }

      a {
        color: $button;
      }
    }
  }
}



@include exports("page.ios") {
  .mbsc-ios {
    .mbsc-note {
      border-radius: .25em;
    }

    .mbsc-note,
    .mbsc-note-primary {
      color: darken($mbsc-ios-primary, 30%);
      background-color: lighten($mbsc-ios-primary, 20%);
    }

    .mbsc-note-secondary {
      color: darken($mbsc-ios-secondary, 30%);
      background-color: lighten($mbsc-ios-secondary, 20%);
    }

    .mbsc-note-success {
      color: darken($mbsc-ios-success, 30%);
      background-color: lighten($mbsc-ios-success, 20%);
    }

    .mbsc-note-danger {
      color: darken($mbsc-ios-danger, 30%);
      background-color: lighten($mbsc-ios-danger, 20%);
    }

    .mbsc-note-warning {
      color: darken($mbsc-ios-warning, 30%);
      background-color: lighten($mbsc-ios-warning, 20%);
    }

    .mbsc-note-info {
      color: darken($mbsc-ios-info, 30%);
      background-color: lighten($mbsc-ios-info, 20%);
    }

    .mbsc-note-light {
      color: darken($mbsc-ios-light, 70%);
      background-color: lighten($mbsc-ios-light, 20%);
    }

    .mbsc-note-dark {
      color: darken($mbsc-ios-dark, 30%);
      background-color: lighten($mbsc-ios-dark, 20%);
    }
  }

  @include mbsc-ios-page(ios, $mbsc-ios-colors);
}





// Theme specific variables - inherited from global variables

// Background
$mbsc-ios-input-background: $mbsc-input-background-light !default;
$mbsc-ios-dark-input-background: $mbsc-input-background-dark !default;
// Border
$mbsc-ios-input-border: $mbsc-input-border-light !default;
$mbsc-ios-dark-input-border: $mbsc-input-border-dark !default;
// Text
$mbsc-ios-input-text: $mbsc-input-text-light !default;
$mbsc-ios-dark-input-text: $mbsc-input-text-dark !default;
// Error
$mbsc-ios-input-error: $mbsc-input-error-light !default;
$mbsc-ios-dark-input-error: $mbsc-input-error-dark !default;

$mbsc-ios-colors: map-merge($mbsc-ios-colors, (
  'input-background': $mbsc-ios-input-background,
  'input-border': $mbsc-ios-input-border,
  'input-text': $mbsc-ios-input-text,
  'input-error': $mbsc-ios-input-error,
));
$mbsc-ios-dark-colors: map-merge($mbsc-ios-dark-colors, (
  'input-background': $mbsc-ios-dark-input-background,
  'input-border': $mbsc-ios-dark-input-border,
  'input-text': $mbsc-ios-dark-input-text,
  'input-error': $mbsc-ios-dark-input-error,
));

@mixin mbsc-ios-input($theme, $params) {
  @include exports("input.#{$theme}.colors") {

    $background: map-get($params, 'background');
    $text: map-get($params, 'text');
    // get custom params
    $input-background-param: map-get($params, 'input-background');
    $input-border-param: map-get($params, 'input-border');
    $input-text-param: map-get($params, 'input-text');
    $input-error-param: map-get($params, 'input-error');
    // static colors
    $colors: mbsc-ios-colors($params);
    $error: map-get($colors, error);
    // overwrite colors with custom colors
    $text: if($input-text-param, $input-text-param, $text);
    $border-origin: if($input-background-param, $input-background-param, $background);
    $background: if($input-background-param, $input-background-param, lighten($background, 6%));
    $error: if($input-error-param, $input-error-param, $error);
    // calculated colors
    $background-limited: hsl(hue($border-origin), saturation($border-origin), max(lightness($border-origin), 3%));
    $form-text: '';
    $border-color: '';
    @if (lightness($background) > 50%) {
      $form-text: hsl(hue($text), saturation($text), max(lightness($text), 80%));
      $border-color: darken($background-limited, 17%);
    }
    @else {
      $form-text: hsl(hue($text), saturation($text), min(lightness($text), 80%));
      $border-color: lighten($border-origin, 20%);
    }
    // overwrite colors with custom ones if provided
    $border-color:if($input-border-param, $input-border-param, $border-color);

    .mbsc-#{$theme} {
      &.mbsc-input {
        background: $background;
      }

      &.mbsc-input .mbsc-control::-webkit-input-placeholder {
        color: $form-text;
      }

      &.mbsc-input .mbsc-control::-ms-input-placeholder {
        color: $form-text;
      }

      &.mbsc-input .mbsc-control::-moz-placeholder {
        color: $form-text;
      }

      .mbsc-input-wrap input:-webkit-autofill ~ .mbsc-input-fill {
        background: #e8f0fe;
      }

      .mbsc-input-wrap input:-webkit-autofill {
        box-shadow: 0 0 0px 1000px #e8f0fe inset;
      }

      &.mbsc-input .mbsc-label,
      &.mbsc-progress .mbsc-label,
      &.mbsc-input input,
      &.mbsc-input textarea {
        color: $text;
      }

      .mbsc-err-msg {
        color: $error;
      }

      &.mbsc-input:before,
      &.mbsc-input:after,
      &.mbsc-form .mbsc-control-w:before,
      &.mbsc-form .mbsc-control-w:after {
        border-color: $border-color;
      }

      &.mbsc-control-w.mbsc-err:after,
      &.mbsc-control-w.mbsc-err + .mbsc-err:before,
      &.mbsc-control-w.mbsc-err + .mbsc-divider,
      mbsc-input.mbsc-err + mbsc-input &.mbsc-err:before {
        border-top-color: $error;
      }

      /* Box Input and Outline */
      &.mbsc-input-box,
      &.mbsc-input-outline {
        &.mbsc-err {
          border-color: $error;
        }

        .mbsc-err-msg {
          color: $error;
        }
      }

      /* Outline */
      &.mbsc-input-outline {

        /* Row separator */
        &.mbsc-control-w {
          border: 1px solid $border-color;
        }

        &.mbsc-err.mbsc-control-w {
          border-color: $error;
        }
      }
    }
  }
}



@include exports("input.ios") {
  .mbsc-ios {
    &.mbsc-input {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }

    &.mbsc-input.mbsc-control-w.mbsc-label-inline {
      // v5 compatibility
      padding: 0;
    }

    &.mbsc-input input {
      height: 2.75em;
      padding: 0 1em;
      background: transparent;
    }

    .mbsc-input-wrap {
      position: static;
      -webkit-box-flex: 1;
      -webkit-flex: 1 auto;
      -moz-box-flex: 1;
      -moz-flex: 1 auto;
      -ms-flex: 1 auto;
      flex: 1 auto;
    }

    .mbsc-input-wrap .mbsc-input-fill {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: -1;
    }

    /* Textbox, select, textarea */
    &.mbsc-textarea textarea {
      height: 3em;
      padding: 0 1em;
      background: transparent;
    }

    &.mbsc-input .mbsc-label,
    &.mbsc-progress .mbsc-label {
      -webkit-box-flex: 0;
      -webkit-flex: 0 auto;
      -moz-box-flex: 0;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 30%;
      max-width: 12.5em;
      overflow: hidden;
      font-size: 1em;
      line-height: 2.75em;
      white-space: nowrap;
      text-overflow: ellipsis;
      box-sizing: content-box;
    }

    &.mbsc-ltr.mbsc-input .mbsc-label {
      padding-left: 1em;
    }

    &.mbsc-rtl.mbsc-input .mbsc-label {
      padding-right: 1em;
    }

    &.mbsc-input input:disabled,
    &.mbsc-input textarea:disabled,
    &.mbsc-input .mbsc-control:disabled ~ input,
    &.mbsc-input .mbsc-control:disabled ~ .mbsc-ic {
      opacity: .5;
    }

    .mbsc-err-msg {
      padding: .5em 1.3333em;
    }

    /* Select */
    &.mbsc-ltr.mbsc-select input {
      padding-right: 2.25em;
    }

    &.mbsc-rtl.mbsc-select input {
      padding-left: 2.25em;
    }

    .mbsc-select-ic {
      position: absolute;
      display: block;
      height: 1.25em;
      width: 1.25em;
      top: .875em;
      right: 1em;
      text-align: center;
    }

    &.mbsc-rtl .mbsc-select-ic {
      right: auto;
      left: 1em;
    }

    &.mbsc-ic-right .mbsc-select-ic {
      right: 3.4em;
    }

    &.mbsc-rtl .mbsc-ic-right .mbsc-select-ic {
      right: auto;
      left: 3.4em;
    }

    /* Select inline */
    &.mbsc-select-inline .mbsc-select-ic {
      display: none;
    }

    /* Textarea */
    &.mbsc-textarea .mbsc-input-wrap {
      padding: .625em 0;
    }

    /* Icons */
    .mbsc-input-ic {
      top: .375em;
      margin-top: -1px;
    }

    &.mbsc-ic-left {
      z-index: 1;
    }

    &.mbsc-ltr.mbsc-ic-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-ic-right .mbsc-input-wrap {
      padding-left: 2.25em;
    }

    &.mbsc-ltr.mbsc-ic-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-ic-left .mbsc-input-wrap {
      padding-right: 2.25em;
    }

    &.mbsc-ltr.mbsc-ic-left .mbsc-label {
      padding-left: 3.25em;
    }

    &.mbsc-rtl.mbsc-ic-left .mbsc-label {
      padding-right: 3.25em;
    }

    &.mbsc-ltr.mbsc-ic-left .mbsc-label ~ .mbsc-input-wrap {
      padding-left: 0;
    }

    &.mbsc-rtl.mbsc-ic-left .mbsc-label ~ .mbsc-input-wrap {
      padding-right: 0;
    }

    &.mbsc-ic-left .mbsc-left-ic,
    &.mbsc-rtl.mbsc-ic-right .mbsc-right-ic {
      right: auto;
      left: .625em;
    }

    &.mbsc-ic-right .mbsc-right-ic,
    &.mbsc-rtl.mbsc-ic-left .mbsc-left-ic {
      left: auto;
      right: .625em;
    }

    /* Row separator */
    &.mbsc-control-w {
      margin-top: -1px;
    }

    &.mbsc-control-w:before,
    &.mbsc-control-w:after {
      content: "";
      position: absolute;
      right: 0;
      left: 1em;
      border-top: 1px solid transparent;
    }

    &.mbsc-control-w:before {
      top: 0;
    }

    &.mbsc-control-w:after {
      bottom: 0;
    }

    .mbsc-form-group-title + .mbsc-control-w:before,
    .mbsc-control-w:first-child:before,
    .mbsc-control-w:last-child:after {
      left: 0;
    }

    .mbsc-control-ng .mbsc-control-w:before,
    .mbsc-control-ng .mbsc-control-w:after {
      left: 1em;
    }

    .mbsc-form-group-title + .mbsc-control-ng .mbsc-control-w:before,
    .mbsc-control-ng:first-child .mbsc-control-w:before,
    .mbsc-control-ng:last-child .mbsc-control-w:after {
      left: 0;
    }

    &.mbsc-ic-left:before,
    &.mbsc-ic-left:after {
      left: 3.25em;
    }

    .mbsc-err {
      z-index: 2;
    }

    .mbsc-form-group-inset .mbsc-form-group-title + .mbsc-control-w,
    .mbsc-form-group-inset .mbsc-control-w:first-child {
      border-top-left-radius: .5em;
      border-top-right-radius: .5em;
    }

    .mbsc-form-group-inset .mbsc-control-w:last-child {
      border-bottom-left-radius: .5em;
      border-bottom-right-radius: .5em;
    }

    .mbsc-form-group-inset .mbsc-form-group-title,
    .mbsc-form-group-inset .mbsc-form-group-title + .mbsc-control-w:before,
    .mbsc-form-group-inset .mbsc-control-w:first-child:before,
    .mbsc-form-group-inset .mbsc-control-w:last-child:after {
      border-width: 0;
    }

    .mbsc-form-group-inset .mbsc-control-ng .mbsc-control-w {
      border-radius: 0;
    }

    .mbsc-form-group-inset .mbsc-control-ng .mbsc-control-w:before,
    .mbsc-form-group-inset .mbsc-control-ng .mbsc-control-w:after {
      border-width: 1px;
    }

    &.mbsc-form .mbsc-form-group-inset .mbsc-form-group-title + .mbsc-control-ng .mbsc-control-w:before,
    &.mbsc-form .mbsc-form-group-inset .mbsc-control-ng:first-child .mbsc-control-w:before,
    &.mbsc-form .mbsc-form-group-inset .mbsc-control-ng:last-child .mbsc-control-w:after {
      border-width: 0;
    }

    .mbsc-form-group-inset .mbsc-form-group-title + .mbsc-control-ng .mbsc-control-w,
    .mbsc-form-group-inset .mbsc-control-ng:first-child .mbsc-control-w {
      border-top-left-radius: .5em;
      border-top-right-radius: .5em;
    }

    .mbsc-form-group-inset .mbsc-control-ng:last-child .mbsc-control-w {
      border-bottom-left-radius: .5em;
      border-bottom-right-radius: .5em;
    }

    /* Stacked label */
    &.mbsc-label-stacked.mbsc-input {
      .mbsc-label {
        font-size: .75em;
        position: absolute;
        top: 1em;
        line-height: 1em;
        padding: 0;
        width: auto;
        max-width: none;
      }

      .mbsc-label ~ .mbsc-input-wrap {

        input,
        .mbsc-color-input {
          height: 3.75em;
          padding-top: 1.5em;
        }

        .mbsc-input-ic {
          top: 1.625em;
        }
      }

      &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap {
        padding-top: 1.625em;
      }

      &.mbsc-select .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic {
        top: 1.4375em;
      }
    }

    &.mbsc-ltr.mbsc-label-stacked.mbsc-input {
      .mbsc-label {
        left: 1.333334em;
        right: auto;
      }

      &.mbsc-ic-left {
        .mbsc-input-wrap {
          padding-left: 2.375em;
        }

        .mbsc-label {
          left: 4.5em;
        }
      }
    }

    &.mbsc-rtl.mbsc-label-stacked.mbsc-input {
      .mbsc-label {
        left: auto;
        right: 1.333334em;
      }

      &.mbsc-ic-left {
        .mbsc-input-wrap {
          padding-right: 2.375em;
        }

        .mbsc-label {
          right: 4.5em;
        }
      }

      &.mbsc-control-w:before,
      &.mbsc-control-w:after {
        right: 0;
      }
    }

    /* Floating label */
    &.mbsc-label-floating.mbsc-input {
      .mbsc-label {
        position: absolute;
        padding: 0;
        font-size: 1em;
        line-height: 2em;
        top: .875em;
        width: auto;
        transform-origin: 0 0;
        transition: transform .2s;
      }

      &.mbsc-ic-left .mbsc-label,
      &.mbsc-ic-right .mbsc-label {
        top: 1.625em;
      }

      .mbsc-label ~ .mbsc-input-wrap {

        input,
        .mbsc-color-input {
          height: 3.75em;
          padding-top: 1.5em;
        }

        .mbsc-input-ic {
          top: 1.625em;
        }
      }

      &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap {
        padding-top: 1.625em;
      }

      &.mbsc-select .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic {
        top: 1.4375em;
      }

      &.mbsc-label-floating-active {
        .mbsc-label {
          -webkit-transform: translateY(-.5em) scale(.75);
          transform: translateY(-.5em) scale(.75);
        }

        &.mbsc-ic-left .mbsc-label,
        &.mbsc-ic-right .mbsc-label {
          -webkit-transform: translateY(-1.25em) scale(.75);
          transform: translateY(-1.25em) scale(.75);
        }
      }
    }

    &.mbsc-ltr.mbsc-label-floating.mbsc-input {
      .mbsc-label {
        left: 1em;
      }

      &.mbsc-ic-left {
        .mbsc-input-wrap {
          padding-left: 2.375em;
        }

        .mbsc-label {
          left: 3.375em;
        }
      }
    }

    &.mbsc-rtl.mbsc-label-floating.mbsc-input {
      .mbsc-label {
        right: 1em;
      }

      &.mbsc-ic-left {
        .mbsc-input-wrap {
          padding-right: 2.375em;
        }

        .mbsc-label {
          right: 3.375em;
        }
      }

      &.mbsc-control-w:before,
      &.mbsc-control-w:after {
        right: 0;
      }
    }

    /* Box Input and Outline */
    &.mbsc-input-box,
    &.mbsc-input-outline {

      /* Row separator */
      &.mbsc-control-w {
        margin-top: -1px;
        margin: 1.5em 1em;
        border-radius: 8px;
        border: 1px solid transparent;

        input {
          border-radius: 8px;
        }
      }

      &.mbsc-control-w:before,
      &.mbsc-control-w:after {
        border-top: 0;
      }

      .mbsc-err-msg {
        position: absolute;
        bottom: -1.5em;
        padding: 0;
      }

      &.mbsc-control-w.mbsc-err + .mbsc-divider {
        border-top: 0;
      }

      &.mbsc-label-stacked.mbsc-input {
        .mbsc-label {
          top: .75em;
        }

        .mbsc-label ~ .mbsc-input-wrap {

          input,
          .mbsc-color-input {
            height: 3.375em;
            padding-top: 1.25em;
          }

          .mbsc-input-ic {
            top: .75em;
          }
        }

        &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap {
          padding-top: 1.75em;
        }

        &.mbsc-select .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic {
          top: 1.25em;
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input {
        .mbsc-label {
          top: .6875em;
        }

        .mbsc-label ~ .mbsc-input-wrap {

          input,
          .mbsc-color-input {
            height: 3.375em;
            padding-top: 1.25em;
          }

          .mbsc-input-ic {
            top: .75em;
          }
        }

        &.mbsc-label-floating-active {
          .mbsc-label {
            -webkit-transform: translateY(-.5em) scale(.75);
            transform: translateY(-.5em) scale(.75);
          }
        }
      }

      .mbsc-input-wrap .mbsc-input-fill {
        border-radius: 8px;
      }
    }

    &.mbsc-ltr.mbsc-input-box .mbsc-err-msg,
    &.mbsc-ltr.mbsc-input-outline .mbsc-err-msg {
      left: 1.333334em;
    }

    &.mbsc-rtl.mbsc-input-box .mbsc-err-msg,
    &.mbsc-rtl.mbsc-input-outline .mbsc-err-msg {
      right: 1.333334em;
    }

    /* Box and outline inputs inside form group inset */
    .mbsc-form-group-inset .mbsc-control-ng .mbsc-control-w.mbsc-input-box,
    .mbsc-form-group-inset .mbsc-control-ng .mbsc-control-w.mbsc-input-outline {
      border-radius: .5em;
    }

    /* Outline */
    &.mbsc-input-outline.mbsc-select .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic {
      top: .875em;
    }
  }

  @include mbsc-ios-input(ios, $mbsc-ios-colors);
}








@mixin mbsc-ios-progress($theme, $params) {
  @include exports("progress.#{$theme}.colors") {

    $accent: map-get($params, accent);

    $colors: mbsc-ios-colors($params);
    $cont-background: map-get($colors, cont-background);
    $slider-track-step: map-get($colors, slider-track-step);
    $slider-tooltip: map-get($colors, slider-tooltip);

    .mbsc-#{$theme} {

      &.mbsc-form .mbsc-progress,
      &.mbsc-input-box.mbsc-progress,
      &.mbsc-input-outline.mbsc-progress {
        background: $cont-background;
      }

      .mbsc-progress-track {
        background: $slider-track-step;
      }

      .mbsc-progress-bar {
        background: $accent;
      }

      .mbsc-progress-value,
      .mbsc-progress-step-label {
        color: $slider-tooltip;
      }
    }
  }
}



@include exports("progress.ios") {
  .mbsc-ios {
    &.mbsc-progress {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      min-height: 4em;
      margin-top: -1px;
      padding: .625em 1em;
      align-items: center;
      box-sizing: border-box;
    }

    &.mbsc-progress.mbsc-progress-w.mbsc-control-w .mbsc-label {
      padding: 0;
    }

    &.mbsc-progress .mbsc-input-ic {
      top: .0625em;
      margin: 0;
    }

    &.mbsc-progress.mbsc-ic-left .mbsc-left-ic,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-right .mbsc-right-ic {
      right: auto;
      left: -.375em;
    }

    &.mbsc-progress.mbsc-ic-right .mbsc-right-ic,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-left .mbsc-left-ic {
      left: auto;
      right: -.375em;
    }

    &.mbsc-progress .mbsc-input-wrap {
      position: relative;
      padding: 0 .75em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-progress-w.mbsc-ic-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-progress-w.mbsc-ic-right .mbsc-input-wrap {
      padding-left: 2.5em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-progress-w.mbsc-ic-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-progress-w.mbsc-ic-left .mbsc-input-wrap {
      padding-right: 2.5em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-progress-value-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-progress-value-right .mbsc-input-wrap {
      padding-left: 3.5em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-progress-value-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-progress-value-left .mbsc-input-wrap {
      padding-right: 3.5em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-left.mbsc-progress-value-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-right.mbsc-progress-value-right .mbsc-input-wrap {
      padding-left: 5.5em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-right.mbsc-progress-value-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-left.mbsc-progress-value-left .mbsc-input-wrap {
      padding-right: 5.5em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-left.mbsc-progress-value-left .mbsc-progress-value,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-right.mbsc-progress-value-right .mbsc-progress-value {
      left: 2.2857em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-right.mbsc-progress-value-right .mbsc-progress-value,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-left.mbsc-progress-value-left .mbsc-progress-value {
      right: 2.2857em;
    }

    .mbsc-progress-cont {
      padding: 1em 0;
    }

    .mbsc-progress-track {
      border-radius: 1em;
      height: .125em;
    }

    .mbsc-progress-bar {
      z-index: 1;
      border-radius: 1em;
    }

    .mbsc-progress-value {
      width: 3.715em;
      font-size: .875em;
    }

    .mbsc-progress-step-label {
      top: 1.333334em;
    }

    &.mbsc-progress.mbsc-ic-left:before,
    &.mbsc-progress.mbsc-ic-left:after {
      left: 1em;
    }

    /* Stacked label */
    .mbsc-label-stacked.mbsc-progress.mbsc-control-w,
    .mbsc-label-floating.mbsc-progress.mbsc-control-w {
      .mbsc-label {
        font-size: .75em;
        position: absolute;
        top: .666667em;
        line-height: 1em;
        padding: 0;
        overflow: visible;
      }

      &:not(.mbsc-slider) .mbsc-input-wrap {
        padding-left: 0;
        padding-right: 0;
      }

      .mbsc-label + .mbsc-input-wrap {
        padding-top: 1em;
        padding-bottom: 1em;

        .mbsc-input-ic {
          top: 1.0625em;
        }
      }

      &.mbsc-ltr.mbsc-ic-right .mbsc-input-wrap,
      &.mbsc-rtl.mbsc-ic-left .mbsc-input-wrap {
        padding-right: 2.5em;
      }

      &.mbsc-ltr.mbsc-ic-left .mbsc-input-wrap,
      &.mbsc-rtl.mbsc-ic-right .mbsc-input-wrap {
        padding-left: 2.5em;
      }

      &.mbsc-ltr.mbsc-progress-value-right .mbsc-input-wrap,
      &.mbsc-rtl.mbsc-progress-value-left .mbsc-input-wrap {
        padding-right: 3.5em;
      }

      &.mbsc-ltr.mbsc-progress-value-left .mbsc-input-wrap,
      &.mbsc-rtl.mbsc-progress-value-right .mbsc-input-wrap {
        padding-left: 3.5em;
      }

      &.mbsc-ltr.mbsc-ic-left.mbsc-progress-value-left .mbsc-input-wrap,
      &.mbsc-rtl.mbsc-ic-right.mbsc-progress-value-right .mbsc-input-wrap {
        padding-left: 5.5em;
      }

      &.mbsc-ltr.mbsc-ic-right.mbsc-progress-value-right .mbsc-input-wrap,
      &.mbsc-rtl.mbsc-ic-left.mbsc-progress-value-left .mbsc-input-wrap {
        padding-right: 5.5em;
      }
    }

    /* Progress color presets */
    .mbsc-progress-primary .mbsc-progress-bar {
      background: $mbsc-ios-primary;
    }

    .mbsc-progress-secondary .mbsc-progress-bar {
      background: $mbsc-ios-secondary;
    }

    .mbsc-progress-success .mbsc-progress-bar {
      background: $mbsc-ios-success;
    }

    .mbsc-progress-danger .mbsc-progress-bar {
      background: $mbsc-ios-danger;
    }

    .mbsc-progress-warning .mbsc-progress-bar {
      background: $mbsc-ios-warning;
    }

    .mbsc-progress-info .mbsc-progress-bar {
      background: $mbsc-ios-info;
    }
  }

  @include mbsc-ios-progress(ios, (background: $mbsc-ios-background, text: $mbsc-ios-text, accent: $mbsc-ios-accent));
}






@mixin mbsc-ios-slider($theme, $params) {
  @include exports("slider.#{$theme}.colors") {

    @include mbsc-ios-page($theme, $params);
    @include mbsc-ios-progress($theme, $params);

    $colors: mbsc-ios-colors($params);
    $slider-tooltip: map-get($colors, slider-tooltip);
    $slider-track-step: map-get($colors, slider-track-step);
    $cont-background: map-get($colors, cont-background);

    .mbsc-#{$theme} {
      .mbsc-slider-handle {
        background: #fff;
      }

      .mbsc-slider-tooltip {
        color: $slider-tooltip;
        background: $cont-background;
      }

      .mbsc-slider-step {
        background: $slider-track-step;
      }
    }
  }
}



@include exports("slider.ios") {
  .mbsc-ios {

    .mbsc-slider-handle {
      top: 50%;
      width: 1.75em;
      height: 1.75em;
      margin: -.875em -.875em 0 0;
      border-radius: 1.25em;
      box-shadow: 0 0 1em rgba(0, 0, 0, .1), 0 0 .0625em rgba(0, 0, 0, .15), 0 .125em .125em rgba(0, 0, 0, .15);
    }

    .mbsc-slider-tooltip {
      font-size: .875em;
      width: 3em;
      margin-right: -1.5em;
      top: -1em;
      text-align: center;
      opacity: 0;
      transition: opacity .2s ease-in-out;
    }

    .mbsc-slider-handle:focus ~ .mbsc-slider-tooltip,
    .mbsc-active .mbsc-slider-tooltip {
      opacity: 1;
    }

    .mbsc-slider-step {
      height: .5em;
      width: .0625em;
      margin-top: -.1875em;
      margin-left: -.0625em;
    }

    &.mbsc-slider input:disabled ~ .mbsc-progress-cont .mbsc-progress-track {
      opacity: .4;
    }

    &.mbsc-slider-primary .mbsc-progress-bar {
      background: $mbsc-ios-primary;
    }

    &.mbsc-slider-secondary .mbsc-progress-bar {
      background: $mbsc-ios-secondary;
    }

    &.mbsc-slider-success .mbsc-progress-bar {
      background: $mbsc-ios-success;
    }

    &.mbsc-slider-danger .mbsc-progress-bar {
      background: $mbsc-ios-danger;
    }

    &.mbsc-slider-warning .mbsc-progress-bar {
      background: $mbsc-ios-warning;
    }

    &.mbsc-slider-info .mbsc-progress-bar {
      background: $mbsc-ios-info;
    }
  }

  @include mbsc-ios-slider(ios, (background: $mbsc-ios-background, text: $mbsc-ios-text, accent: $mbsc-ios-accent));
}







@mixin mbsc-ios-rating($theme, $params) {
  @include exports("rating.#{$theme}.colors") {

    @include mbsc-ios-progress($theme, $params);

    $accent: map-get($params, accent);

    .mbsc-#{$theme}.mbsc-rating {
      .mbsc-progress-track {
        color: $accent;
      }
    }
  }
}



@include exports("rating.ios") {
  .mbsc-ios.mbsc-rating {
    &.mbsc-progress .mbsc-input-wrap {
      padding: 0;
    }

    input:disabled ~ .mbsc-progress-cont .mbsc-progress-track {
      opacity: .4;
    }

    /* Color presets */
    &.mbsc-rating-primary .mbsc-progress-track {
      color: $mbsc-ios-primary;
    }

    &.mbsc-rating-secondary .mbsc-progress-track {
      color: $mbsc-ios-secondary;
    }

    &.mbsc-rating-success .mbsc-progress-track {
      color: $mbsc-ios-success;
    }

    &.mbsc-rating-danger .mbsc-progress-track {
      color: $mbsc-ios-danger;
    }

    &.mbsc-rating-warning .mbsc-progress-track {
      color: $mbsc-ios-warning;
    }

    &.mbsc-rating-info .mbsc-progress-track {
      color: $mbsc-ios-info;
    }
  }

  @include mbsc-ios-rating(ios, (background: $mbsc-ios-background, text: $mbsc-ios-text, accent: $mbsc-ios-accent));
}








// Theme specific variables - inherited from global variables

// Background
$mbsc-ios-frame-background: $mbsc-frame-background-light !default;
$mbsc-ios-dark-frame-background: $mbsc-frame-background-dark !default;
// Text
$mbsc-ios-frame-text: $mbsc-frame-text-light !default;
$mbsc-ios-dark-frame-text: $mbsc-frame-text-dark !default;
// Accent
$mbsc-ios-frame-accent: $mbsc-frame-accent-light !default;
$mbsc-ios-dark-frame-accent: $mbsc-frame-accent-dark !default;
// Overlay
$mbsc-ios-frame-overlay: $mbsc-frame-overlay-light !default;
$mbsc-ios-dark-frame-overlay: $mbsc-frame-overlay-dark !default;

$mbsc-ios-colors: map-merge($mbsc-ios-colors, (
  'frame-background': $mbsc-ios-frame-background,
  'frame-text': $mbsc-ios-frame-text,
  'frame-accent': $mbsc-ios-frame-accent,
  'frame-overlay': $mbsc-ios-frame-overlay,
));

$mbsc-ios-dark-colors: map-merge($mbsc-ios-dark-colors, (
  'frame-background': $mbsc-ios-dark-frame-background,
  'frame-text': $mbsc-ios-dark-frame-text,
  'frame-accent': $mbsc-ios-dark-frame-accent,
  'frame-overlay': $mbsc-ios-dark-frame-overlay,
));

@mixin mbsc-ios-frame($theme, $params) {
  @include exports("frame.#{$theme}.colors") {

    $background:map-get($params, 'background');
    $text: map-get($params, 'text');
    $accent: map-get($params, 'accent');

    $overlay-param: map-get($params, 'frame-overlay');
    $background-param: map-get($params, 'frame-background');
    $text-param: map-get($params, 'frame-text');
    $accent-param: map-get($params, 'frame-accent');

    $background: if($background-param, $background-param, $background);
    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
    $accent: if($accent-param, $accent-param, $accent);

    $button: '';
    @if (map-get($params, 'button')) {
      $button: map-get($params, 'button');
    }
    @else {
      $button: $accent;
    }

    $background-limited: hsl(hue($background), saturation($background), max(lightness($background), 3%));
    $cont-background: lighten($background, 6%);
    $background-alt: lighten($background-limited, 3%);

    $background-overlay: '';
    $btn-cont-background: '';
    $border-color: '';
    $top-bottom-border: '';
    $button-active: '';
    $background-desktop: '';
    $popup-shadow: '';
    $popup-arrow-shadow: '';
    $popup-border: '';
    @if (lightness($background) > 50%) {
      $background-overlay: rgba(#000, .2);
      $btn-cont-background: darken($background, 3%);
      $border-color: darken($background-limited, 17%);
      $top-bottom-border: darken($background, 41%);
      $button-active: darken($background, 5%);
      $background-desktop: $background-limited;
      $popup-shadow: rgba(0, 0, 0, .3);
      $popup-arrow-shadow: rgba(0, 0, 0, .2);
      $popup-border: darken($background-limited, 17%);
    }
    @else {
      $background-overlay: rgba(#fff, .1);
      $btn-cont-background: lighten($background-limited, 8%);
      $border-color: lighten($background, 20%);
      $top-bottom-border: lighten($background, 21%);
      $button-active: lighten($background, 12%);
      $background-desktop: lighten($background-limited, 17%);
      $popup-shadow: rgba(0, 0, 0, .8);
      $popup-arrow-shadow: rgba(0, 0, 0, .8);
      $border-color: lighten($background, 20%);
      $popup-border: lighten($border-color, 13%);
    }

    $background-overlay: if($overlay-param, $overlay-param, $background-overlay);

    .mbsc-#{$theme} {

      &.mbsc-fr-top .mbsc-fr-btn-cont,
      &.mbsc-fr-bottom .mbsc-fr-btn-cont {
        background: $btn-cont-background;
      }

      .mbsc-fr-overlay {
        background: $background-overlay;
      }

      .mbsc-fr-w {
        background: $background-limited;
        color: $text;
      }

      .mbsc-fr-hdr {
        color: $text;
      }

      &.mbsc-fr-nobtn .mbsc-fr-hdr,
      &.mbsc-fr-center:not(.mbsc-cal-liq) .mbsc-fr-hdr,
      .mbsc-fr-btn-cont {
        border-bottom: 1px solid $border-color;
      }

      .mbsc-fr-btn {
        color: $button;
      }

      /* Bubble arrow */

      .mbsc-fr-arr {
        background: $background-limited;
      }

      /* Top and bottom display */

      &.mbsc-fr-bottom .mbsc-fr-popup {
        border-top: 1px solid $top-bottom-border;
      }

      &.mbsc-fr-top .mbsc-fr-popup {
        border-bottom: 1px solid $top-bottom-border;
      }

      /* Center display button  */

      &.mbsc-fr-center .mbsc-fr-btn-w {
        border-top: 1px solid $border-color;
        border-left: 1px solid $border-color;
      }

      &.mbsc-fr-center .mbsc-rtl .mbsc-fr-btn-w {
        border-right: 1px solid $border-color;
      }

      &.mbsc-fr-center.mbsc-no-touch .mbsc-fr-btn-e:not(.mbsc-disabled):hover,
      &.mbsc-fr-center .mbsc-fr-btn.mbsc-active {
        background: $button-active;
      }

      /* Inline display */

      &.mbsc-fr-inline .mbsc-fr-w {
        background: $background-alt;
        border-top: 1px solid $border-color;
      }

      &.mbsc-fr-inline .mbsc-fr-c {
        border-bottom: 1px solid $border-color;
      }

      &.mbsc-fr-no-overlay {
        .mbsc-fr-arr {
          box-shadow: 0 0 1em $popup-arrow-shadow;
        }

        .mbsc-fr-w {
          box-shadow: 0 .125em 1em $popup-arrow-shadow;
        }
      }

      /* Desktop view */

      &.mbsc-fr-pointer {

        .mbsc-fr-persp .mbsc-fr-popup .mbsc-fr-w,
        .mbsc-fr-persp .mbsc-cal-picker {
          background: $background-desktop;
        }

        .mbsc-fr-hdr {
          border-color: $popup-border;
        }
      }
    }
  }
}



@include exports("frame.ios") {
  .mbsc-ios {

    &.mbsc-fr-top .mbsc-fr-btn-cont,
    &.mbsc-fr-bottom .mbsc-fr-btn-cont {
      padding-left: constant(safe-area-inset-left);
      padding-left: env(safe-area-inset-left);
      padding-right: constant(safe-area-inset-right);
      padding-right: env(safe-area-inset-right);
    }

    .mbsc-fr-w {
      position: relative;
      padding-top: 3.666667em;
      font-size: 12px;
      font-family: -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
    }

    .mbsc-fr-has-hdr .mbsc-fr-w {
      min-width: 25em;
    }

    &.mbsc-fr-nobtn .mbsc-fr-w,
    &.mbsc-fr-center .mbsc-fr-w {
      min-width: 22.5em;
    }

    .mbsc-fr-hdr {
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      left: 0;
      line-height: 1.25em;
      padding: .75em 4.375em;
      font-size: 1.333334em;
      font-weight: bold;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &.mbsc-fr-nobtn .mbsc-fr-hdr,
    &.mbsc-fr-center:not(.mbsc-cal-liq) .mbsc-fr-hdr {
      position: relative;
      padding: .75em .5em;
      margin-bottom: -1px;
      white-space: normal;
    }

    .mbsc-fr-btn-cont {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: block;
    }

    .mbsc-ltr .mbsc-fr-btn-cont {
      text-align: right;
    }

    .mbsc-rtl .mbsc-fr-btn-cont {
      text-align: left;
    }

    .mbsc-fr-btn {
      height: 2.75em;
      line-height: 2.75em;
      padding: 0 .625em;
      text-align: center;
      font-size: 1.333334em;
    }

    .mbsc-fr-btn.mbsc-active {
      opacity: .5;
    }

    .mbsc-fr-btn-w {
      display: inline-block;
    }

    .mbsc-ltr .mbsc-fr-btn-c {
      float: left;
    }

    .mbsc-rtl .mbsc-fr-btn-c {
      float: right;
    }

    .mbsc-fr-btn-s .mbsc-fr-btn {
      font-weight: bold;
    }

    &.mbsc-fr-bubble .mbsc-fr-w,
    &.mbsc-fr-center .mbsc-fr-w {
      border-radius: 8px;
    }

    &.mbsc-fr-inline .mbsc-fr-w {
      border-radius: 0;
    }

    /* Bubble arrow */

    .mbsc-fr-arr {
      border-radius: 6px;
    }

    /* Top and bottom display */

    &.mbsc-fr-bottom .mbsc-fr-overlay,
    &.mbsc-fr-top .mbsc-fr-overlay {
      background: none;
    }

    /* Center display button  */

    &.mbsc-fr-center .mbsc-fr-w {
      padding-top: 0;
      padding-bottom: 3.75em;
    }

    &.mbsc-fr-center.mbsc-fr-btn-block .mbsc-fr-w {
      padding: 0;
    }

    &.mbsc-fr-center .mbsc-fr-btn-cont {
      display: table;
      top: auto;
      bottom: 0;
      border: 0;
      table-layout: fixed;
    }

    &.mbsc-fr-center .mbsc-fr-btn-w {
      display: table-cell;
      float: none;
    }

    &.mbsc-fr-center .mbsc-fr-btn-w:first-child {
      border-left: 0;
    }

    &.mbsc-fr-center .mbsc-rtl .mbsc-fr-btn-w {
      border-left: 0;
    }

    &.mbsc-fr-center .mbsc-rtl .mbsc-fr-btn-w:first-child {
      border-right: 0;
    }

    &.mbsc-fr-center .mbsc-ltr .mbsc-fr-btn-w:first-child .mbsc-fr-btn,
    &.mbsc-fr-center .mbsc-rtl .mbsc-fr-btn-w:last-child .mbsc-fr-btn {
      border-radius: 0 0 0 .5em;
    }

    &.mbsc-fr-center .mbsc-ltr .mbsc-fr-btn-w:last-child .mbsc-fr-btn,
    &.mbsc-fr-center .mbsc-rtl .mbsc-fr-btn-w:first-child .mbsc-fr-btn {
      border-radius: 0 0 .5em 0;
    }

    &.mbsc-fr-center .mbsc-fr-btn.mbsc-active {
      opacity: 1;
    }

    &.mbsc-fr-center.mbsc-fr-btn-block .mbsc-fr-btn-cont {
      position: static;
      display: block;
    }

    &.mbsc-fr-center.mbsc-fr-btn-block .mbsc-fr-btn-w {
      display: block;
      border-left: 0;
      border-right: 0;
    }

    &.mbsc-fr-center.mbsc-fr-btn-block .mbsc-fr-w .mbsc-fr-btn-w .mbsc-fr-btn {
      border-radius: 0;
    }

    &.mbsc-fr-center.mbsc-fr-btn-block .mbsc-fr-btn-w:last-child .mbsc-fr-btn {
      border-radius: 0 0 .5em .5em;
    }

    /* Inline display */

    &.mbsc-fr-inline .mbsc-fr-w {
      margin-top: -1px;
    }

    /* No buttons */

    &.mbsc-fr-nobtn .mbsc-fr-w {
      padding: 0;
    }

    &.mbsc-fr-nobtn.mbsc-fr-bottom .mbsc-fr-w {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }

    /* Desktop view */

    &.mbsc-fr-pointer {
      &.mbsc-fr .mbsc-fr-popup {
        border: 0;
      }

      .mbsc-fr-hdr {
        font-size: 1.166667em;
        line-height: 1.5em;
      }
    }
  }

  @include mbsc-ios-frame(ios, $mbsc-ios-colors);
}





@mixin mbsc-ios-popup($theme, $params) {
  @include exports("popup.#{$theme}.colors") {

    @include mbsc-ios-frame($theme, $params);
  }
}



@include exports("popup.ios") {
  @include mbsc-ios-popup(ios, (background: $mbsc-ios-background, text: $mbsc-ios-text, accent: $mbsc-ios-accent));
}





@mixin mbsc-ios-notifications($theme, $params) {
  @include exports("notifications.#{$theme}.colors") {

    @include mbsc-ios-popup($theme, $params);

    $colors: mbsc-ios-colors($params);
    $dark-text: map-get($colors, dark-text);
    $light-text: map-get($colors, light-text);
    $snackbar-button: map-get($colors, snackbar-button);

    .mbsc-#{$theme} {
      &.mbsc-alert .mbsc-input {
        border: 1px solid #ccc;
      }

      /* Snackbar */

      &.mbsc-snackbar .mbsc-fr-w {
        background: #646464;
        color: #fff;
      }

      &.mbsc-snackbar .mbsc-snackbar-btn {
        color: $snackbar-button;
      }

      /* Toast */

      &.mbsc-toast .mbsc-toast-msg {
        background: #646464;
        color: #fff;
      }

      /* Snackbar and Toast color presets */

      &.mbsc-snackbar.mbsc-primary .mbsc-fr-w,
      &.mbsc-toast.mbsc-primary .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w,
      &.mbsc-toast.mbsc-secondary .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-success .mbsc-fr-w,
      &.mbsc-toast.mbsc-success .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-danger .mbsc-fr-w,
      &.mbsc-toast.mbsc-danger .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-warning .mbsc-fr-w,
      &.mbsc-toast.mbsc-warning .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-info .mbsc-fr-w,
      &.mbsc-toast.mbsc-info .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-primary .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-secondary .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-success .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-danger .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-warning .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-info .mbsc-snackbar-btn {
        color: $light-text;
      }
    }
  }
}



@include exports("notifications.ios") {
  .mbsc-ios {
    &.mbsc-alert .mbsc-fr-c.mbsc-wdg-c {
      padding: 1.142857em;
      line-height: 1.285714;
      text-align: center;
    }

    &.mbsc-alert h2 {
      margin: 0.277778em 0;
      font-size: 1.285715em;
    }

    &.mbsc-alert p {
      margin: 0.357143em 0;
    }

    &.mbsc-alert .mbsc-input {
      margin-top: 1.142857em;
      border-radius: 0;
    }

    &.mbsc-alert .mbsc-input input {
      height: 1.714286em;
      padding: 0 0.357143em;
    }

    /* Toast */

    &.mbsc-toast .mbsc-toast-msg {
      border-radius: .5em;
      opacity: .9;
    }

    /* Snackbar and Toast color presets */

    &.mbsc-snackbar.mbsc-primary .mbsc-fr-w,
    &.mbsc-toast.mbsc-primary .mbsc-toast-msg {
      background: $mbsc-ios-primary;
    }

    &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w,
    &.mbsc-toast.mbsc-secondary .mbsc-toast-msg {
      background: $mbsc-ios-secondary;
    }

    &.mbsc-snackbar.mbsc-success .mbsc-fr-w,
    &.mbsc-toast.mbsc-success .mbsc-toast-msg {
      background: $mbsc-ios-success;
    }

    &.mbsc-snackbar.mbsc-danger .mbsc-fr-w,
    &.mbsc-toast.mbsc-danger .mbsc-toast-msg {
      background: $mbsc-ios-danger;
    }

    &.mbsc-snackbar.mbsc-warning .mbsc-fr-w,
    &.mbsc-toast.mbsc-warning .mbsc-toast-msg {
      background: $mbsc-ios-warning;
    }

    &.mbsc-snackbar.mbsc-info .mbsc-fr-w,
    &.mbsc-toast.mbsc-info .mbsc-toast-msg {
      background: $mbsc-ios-info;
    }
  }

  @include mbsc-ios-notifications(ios, (background: $mbsc-ios-background, text: $mbsc-ios-text, accent: $mbsc-ios-accent));
}









// Theme specific variables - inherited from global variables

// General colors for the form
// Background
$mbsc-ios-form-background: $mbsc-form-background-light !default;
$mbsc-ios-dark-form-background: $mbsc-form-background-dark !default;
// Text
$mbsc-ios-form-text: $mbsc-form-text-light !default;
$mbsc-ios-dark-form-text: $mbsc-form-text-dark !default;
// Accent
$mbsc-ios-form-accent: $mbsc-form-accent-light !default;
$mbsc-ios-dark-form-accent: $mbsc-form-accent-dark !default;

// Button
// button background
$mbsc-ios-button-color: $mbsc-button-color-light !default;
$mbsc-ios-dark-button-color: $mbsc-button-color-dark !default;
// button text
$mbsc-ios-button-text: $mbsc-button-text-light !default;
$mbsc-ios-dark-button-text: $mbsc-button-text-dark !default;

// Form Group
// text
$mbsc-ios-form-group-title-text: $mbsc-form-group-title-text-light !default;
$mbsc-ios-dark-form-group-title-text: $mbsc-form-group-title-text-dark !default;

// add variables to light and dark color maps
$mbsc-ios-colors: map-merge($mbsc-ios-colors, (
  'form-background': $mbsc-ios-form-background,
  'form-text': $mbsc-ios-form-text,
  'form-accent': $mbsc-ios-form-accent,
  'button-color': $mbsc-ios-button-color,
  'button-text': $mbsc-ios-button-text,
  'form-group-title-text': $mbsc-ios-form-group-title-text,
));
$mbsc-ios-dark-colors: map-merge($mbsc-ios-dark-colors, (
  'form-background': $mbsc-ios-dark-form-background,
  'form-text': $mbsc-ios-dark-form-text,
  'form-accent': $mbsc-ios-dark-form-accent,
  'button-color': $mbsc-ios-dark-button-color,
  'button-text': $mbsc-ios-dark-button-text,
  'form-group-title-text': $mbsc-ios-dark-form-group-title-text,
));

@mixin mbsc-ios-forms($theme, $params) {
  @include exports("forms.#{$theme}.colors") {

    @include mbsc-ios-page($theme, $params);
    @include mbsc-ios-input($theme, $params);
    @include mbsc-ios-slider($theme, $params);
    @include mbsc-ios-rating($theme, $params);
    @include mbsc-ios-notifications($theme, $params);

    $background: map-get($params, 'background');
    $text: map-get($params, 'text');
    $accent: map-get($params, 'accent');
    // Generic
    $background-param: map-get($params, 'form-background');
    $text-param: map-get($params, 'form-text');
    $accent-param: map-get($params, 'form-accent');
    // Button custom variables
    $button-background-param: map-get($params, 'button-color');
    $button-text-param: map-get($params, 'button-text');
    // Form Group custom variables
    $group-title-param: map-get($params, 'form-group-title-text');


    // default background color
    @if (lightness($background) > 50%) {
      $background: adjust-hue(darken(saturate($background, 19%), 2%), 240deg);
    }
    @else {
      $background: adjust-hue(lighten(desaturate($background, 19%), 10%), 240deg);
    }

    // overwrite custom variables
    $background: if($background-param, $background-param, $background);
    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
    $accent: if($accent-param, $accent-param, $accent);

    $button: '';
    @if (map-get($params, 'button')) {
      $button: map-get($params, 'button');
    }
    @else {
      $button: $accent;
    }

    $colors: mbsc-ios-colors($params);
    $dark-text: map-get($colors, 'dark-text');
    $white-text: map-get($colors, 'white-text');

    $cont-background: lighten($background, 6%);
    $form-selection: '';
    @if (lightness($button) > 50%) {
      $form-selection: lighten(saturate($accent, 15%), 3%);
    }
    @else {
      $form-selection: darken(desaturate($accent, 15%), 3%);
    }
    $background-limited: hsl(hue($background), saturation($background), max(lightness($background), 3%));
    $border-color: '';
    $button-background: '';
    $disabled-background: '';
    $disabled-color: '';
    $form-text: '';
    $icon-color: lighten(saturate($text, 10%), 55%);
    $switch-track: #4cd764;
    $title-color: '';
    $track-background: '';
    $track-border: '';
    @if (lightness($background) > 50%) {
      $border-color: darken($background-limited, 17%);
      $button-background: lighten($background, 10%);
      $disabled-background: darken($background, 10%);
      $disabled-color: darken($background, 20%);
      $form-text: hsl(hue($text), saturation($text), max(lightness($text), 80%));
      $title-color: lighten(saturate($text, 2%), 44%);
      $track-background: darken($background, 7%);
      $track-border: darken($background, 7%);
    }
    @else {
      $border-color: lighten($background, 20%);
      $button-background: lighten($background, 23%);
      $disabled-background: lighten($background, 13%);
      $disabled-color: lighten($background, 23%);
      $form-text: hsl(hue($text), saturation($text), min(lightness($text), 80%));
      $switch-track: $accent;
      $title-color: darken(desaturate($text, 2%), 44%);
      $track-background: #fff;
      $track-border: lighten($background, 17%);
    }

    // overwrite button color variables
    $button-background: if($button-background-param, $button-background-param, $button-background);
    $button-text: if($button-text-param, $button-text-param, if($button-background-param, get-contrast-color($button-background-param), $accent));
    $title-color: if($group-title-param, $group-title-param, $title-color);

    .mbsc-#{$theme} {


      &.mbsc-form {
        background: $background;
        color: $text;
      }

      &.mbsc-form *::-moz-selection,
      &.mbsc-control-w *::-moz-selection,
      &.mbsc-form *::selection,
      &.mbsc-control-w *::selection {
        color: $form-text;
        background: $form-selection;
      }

      .mbsc-input-ic {
        color: $icon-color;
      }

      .mbsc-divider,
      .mbsc-form-group-title {
        border-bottom: 1px solid $border-color;
        color: $title-color;
      }

      .mbsc-divider {
        border-top: 1px solid $border-color;
      }

      /* Backgrounds */
      &.mbsc-form .mbsc-checkbox,
      &.mbsc-form .mbsc-radio,
      &.mbsc-form .mbsc-switch,
      &.mbsc-form .mbsc-segmented,
      &.mbsc-form .mbsc-stepper-cont,
      &.mbsc-input-box.mbsc-checkbox,
      &.mbsc-input-box.mbsc-radio,
      &.mbsc-input-box.mbsc-switch,
      &.mbsc-input-box.mbsc-stepper-cont,
      &.mbsc-input-outline.mbsc-checkbox,
      &.mbsc-input-outline.mbsc-radio,
      &.mbsc-input-outline.mbsc-switch,
      &.mbsc-input-outline.mbsc-stepper-cont {
        background: $cont-background;
      }

      &.mbsc-form .mbsc-input-box.mbsc-segmented,
      &.mbsc-form .mbsc-input-box.mbsc-segmented {
        background: transparent;
      }

      /* Checkbox */
      .mbsc-checkbox-box {
        border: .125em solid $form-selection;
      }

      .mbsc-checkbox-box:after {
        border: .125em solid $form-selection;
        border-top: 0;
        border-right: 0;
      }

      /* Radio */
      .mbsc-radio-box:after {
        border: .125em solid $form-selection;
        border-top: 0;
        border-right: 0;
      }

      &.mbsc-radio input:disabled ~ .mbsc-radio-label {
        color: $disabled-color;
      }

      /* Buttons */
      &.mbsc-btn {
        background: $button-background;
        color: $button-text;
      }

      &.mbsc-btn:not(.mbsc-btn-flat):disabled {
        background: $disabled-background;
        color: $disabled-color;
      }

      &.mbsc-btn.mbsc-btn-flat {
        background: transparent;
        border-color: transparent;
      }

      &.mbsc-btn-flat:disabled {
        background: transparent;
        color: $disabled-color;
      }

      /* Button color presets */
      &.mbsc-btn-primary.mbsc-btn,
      &.mbsc-btn-secondary.mbsc-btn,
      &.mbsc-btn-success.mbsc-btn,
      &.mbsc-btn-danger.mbsc-btn,
      &.mbsc-btn-warning.mbsc-btn,
      &.mbsc-btn-info.mbsc-btn,
      &.mbsc-btn-dark.mbsc-btn {
        color: $white-text;
      }

      &.mbsc-btn-light.mbsc-btn {
        color: $dark-text;
      }

      /* Flat buttons */
      &.mbsc-btn-flat.mbsc-btn {
        background: transparent;
      }

      /* Outline buttons */
      &.mbsc-btn-outline.mbsc-btn {
        background: transparent;
        border: 1px solid $button-text;
        color: $button-text;

        &.mbsc-active {
          background: $button-text;
          color: $button-background;
        }
      }

      &.mbsc-btn.mbsc-btn-outline:disabled {
        color: $disabled-color;
        border-color: $disabled-color;
        background: transparent;
      }

      /* Switch */
      .mbsc-switch-track {
        background: $track-background;
        border: .0625em solid $track-border;
      }

      .mbsc-switch-track:after {
        background: $cont-background;
      }

      .mbsc-switch-handle {
        background: $white-text;
      }

      &.mbsc-switch input:checked + .mbsc-switch-track {
        background: $switch-track;
        border-color: $switch-track;
      }

      /* Segmented & Stepper */
      .mbsc-segmented-content {
        color: $form-selection;
        border: .07142857em solid $form-selection;
        background: $cont-background;
      }

      &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item input:checked + .mbsc-segmented-content {
        background: $form-selection;
        color: $cont-background;
      }

      &.mbsc-segmented .mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
        background: rgba($accent, .3);
        color: $form-selection;
      }

      &.mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-disabled .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item input:disabled + .mbsc-segmented-content {
        color: $disabled-color;
        border-color: $disabled-color;
      }

      .mbsc-stepper input:disabled {
        color: $disabled-color;
        -webkit-text-fill-color: $disabled-color;
      }

      &.mbsc-segmented input:disabled:checked + .mbsc-segmented-content {
        background: $disabled-background;
      }

      .mbsc-stepper input {
        color: $text;
      }

      &.mbsc-no-touch .mbsc-segmented-item:hover .mbsc-segmented-content {
        background: rgba($accent, .15);
      }
    }
  }
}



@include exports("forms.ios") {
  .mbsc-ios {
    .mbsc-desc {
      opacity: .5;
    }

    .mbsc-divider,
    .mbsc-form-group-title {
      position: relative;
      z-index: 2;
      margin-top: -1px;
      font-size: 0.75em;
      line-height: 1.5em;
      text-transform: uppercase;
    }

    .mbsc-divider {
      padding: 2.333334em 1.333334em .5em 1.333334em;
    }

    .mbsc-form-group-title {
      padding: .5em 1.333334em;
    }

    &.mbsc-form-outline .mbsc-divider,
    &.mbsc-form-outline .mbsc-form-group-title,
    &.mbsc-form-box .mbsc-divider,
    &.mbsc-form-box .mbsc-form-group-title {
      border: 0;
    }

    /* Form grid */

    .mbsc-form-grid {
      margin-top: .75em;
      margin-bottom: .75em;
    }

    .mbsc-form-grid .mbsc-input-box.mbsc-control-w,
    .mbsc-form-grid .mbsc-input-outline.mbsc-control-w {
      margin: .75em 1em;
    }

    /* Checkbox, switch */
    &.mbsc-checkbox .mbsc-err-msg,
    &.mbsc-switch .mbsc-err-msg,
    &.mbsc-radio .mbsc-err-msg {
      padding: 0;
      margin-bottom: -1em;
    }

    /* Checkbox, radio */
    &.mbsc-ltr.mbsc-checkbox,
    &.mbsc-ltr.mbsc-radio {
      padding: .875em 3.75em .875em 1em;
    }

    &.mbsc-rtl.mbsc-checkbox,
    &.mbsc-rtl.mbsc-radio {
      padding: .875em 1em .875em 3.75em;
    }

    &.mbsc-checkbox input:disabled + .mbsc-checkbox-box,
    &.mbsc-checkbox input:disabled ~ .mbsc-label,
    &.mbsc-checkbox input:disabled ~ .mbsc-desc,
    &.mbsc-radio input:disabled + .mbsc-radio-box,
    &.mbsc-radio input:disabled ~ .mbsc-label,
    &.mbsc-radio input:disabled ~ .mbsc-desc,
    &.mbsc-switch input:disabled + .mbsc-switch-track,
    &.mbsc-switch input:disabled ~ .mbsc-label,
    &.mbsc-switch input:disabled ~ .mbsc-desc {
      opacity: .3;
    }

    .mbsc-checkbox-box:after,
    .mbsc-radio-box:after {
      transition: opacity .2s ease-in-out;
    }

    /* Checkbox */
    .mbsc-checkbox-box {
      right: 1em;
      width: 1.75em;
      height: 1.75em;
      margin-top: -.875em;
      background: transparent;
      border-radius: 2em;
    }

    &.mbsc-rtl .mbsc-checkbox-box {
      right: auto;
      left: 1em;
    }

    .mbsc-checkbox-box:after {
      top: 32%;
      left: 26%;
      width: .75em;
      height: .375em;
    }

    /* Checkbox color presets */
    &.mbsc-checkbox-primary {

      .mbsc-checkbox-box,
      .mbsc-checkbox-box:after {
        border-color: $mbsc-ios-primary;
      }
    }

    &.mbsc-checkbox-secondary {

      .mbsc-checkbox-box,
      .mbsc-checkbox-box:after {
        border-color: $mbsc-ios-secondary;
      }
    }

    &.mbsc-checkbox-success {

      .mbsc-checkbox-box,
      .mbsc-checkbox-box:after {
        border-color: $mbsc-ios-success;
      }
    }

    &.mbsc-checkbox-danger {

      .mbsc-checkbox-box,
      .mbsc-checkbox-box:after {
        border-color: $mbsc-ios-danger;
      }
    }

    &.mbsc-checkbox-warning {

      .mbsc-checkbox-box,
      .mbsc-checkbox-box:after {
        border-color: $mbsc-ios-warning;
      }
    }

    &.mbsc-checkbox-info {

      .mbsc-checkbox-box,
      .mbsc-checkbox-box:after {
        border-color: $mbsc-ios-info;
      }
    }

    /* Radio */
    .mbsc-radio-box {
      right: 1.125em;
      margin-top: -.625em;
      background: transparent;
    }

    &.mbsc-rtl .mbsc-radio-box {
      right: auto;
      left: 1.125em;
    }

    .mbsc-radio-box:after {
      position: absolute;
      top: 44%;
      left: 23%;
      width: 1em;
      height: .5em;
      border-radius: 0;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

    /* Radio color presets */
    &.mbsc-radio-primary .mbsc-radio-box:after {
      border-color: $mbsc-ios-primary;
    }

    &.mbsc-radio-secondary .mbsc-radio-box:after {
      border-color: $mbsc-ios-secondary;
    }

    &.mbsc-radio-success .mbsc-radio-box:after {
      border-color: $mbsc-ios-success;
    }

    &.mbsc-radio-danger .mbsc-radio-box:after {
      border-color: $mbsc-ios-danger;
    }

    &.mbsc-radio-warning .mbsc-radio-box:after {
      border-color: $mbsc-ios-warning;
    }

    &.mbsc-radio-info .mbsc-radio-box:after {
      border-color: $mbsc-ios-info;
    }

    /* Buttons */
    &.mbsc-btn {
      margin: .5em .25em;
      padding: .625em 1.375em;
      border: 0;
      border-radius: .25em;
    }

    .mbsc-btn-ic {
      padding-right: .625em;
    }

    .mbsc-btn-icon-only .mbsc-btn-ic {
      padding: 0;
    }

    &.mbsc-no-touch.mbsc-btn:not(:disabled):not(.mbsc-active):hover {
      opacity: .8;
    }

    &.mbsc-btn.mbsc-active {
      opacity: .6;
    }

    &.mbsc-btn-flat.mbsc-active {
      opacity: .6;
    }

    &.mbsc-btn-flat:disabled {
      opacity: .8;
    }

    .mbsc-btn-group,
    .mbsc-btn-group-justified,
    .mbsc-btn-group-block {
      margin: .5em .75em;
    }

    .mbsc-btn-group-block {
      margin: .5em 1em;
    }

    /* Button color presets */
    &.mbsc-btn-primary.mbsc-btn {
      background: $mbsc-ios-primary;

      &.mbsc-btn-flat {
        color: $mbsc-ios-primary;
      }
    }

    &.mbsc-btn-secondary.mbsc-btn {
      background: $mbsc-ios-secondary;

      &.mbsc-btn-flat {
        color: $mbsc-ios-secondary;
      }
    }

    &.mbsc-btn-success.mbsc-btn {
      background: $mbsc-ios-success;

      &.mbsc-btn-flat {
        color: $mbsc-ios-success;
      }
    }

    &.mbsc-btn-danger.mbsc-btn {
      background: $mbsc-ios-danger;

      &.mbsc-btn-flat {
        color: $mbsc-ios-danger;
      }
    }

    &.mbsc-btn-warning.mbsc-btn {
      background: $mbsc-ios-warning;

      &.mbsc-btn-flat {
        color: $mbsc-ios-warning;
      }
    }

    &.mbsc-btn-info.mbsc-btn {
      background: $mbsc-ios-info;

      &.mbsc-btn-flat {
        color: $mbsc-ios-info;
      }
    }

    &.mbsc-btn-light.mbsc-btn {
      background: $mbsc-ios-light;

      &.mbsc-btn-flat {
        color: darken($mbsc-ios-light, 20%);
      }
    }

    &.mbsc-btn-dark.mbsc-btn {
      background: $mbsc-ios-dark;

      &.mbsc-btn-flat {
        color: $mbsc-ios-dark;
      }
    }

    /* Flat buttons */
    &.mbsc-btn-flat.mbsc-btn {
      background: transparent;
    }

    /* Outline buttons */
    &.mbsc-btn-outline.mbsc-btn.mbsc-active {
      opacity: 1;
    }

    /* Outline buttons */
    &.mbsc-btn-outline.mbsc-btn {
      &.mbsc-btn-primary {
        border-color: $mbsc-ios-primary;
        color: $mbsc-ios-primary;

        &.mbsc-active {
          background: $mbsc-ios-primary;
          color: $mbsc-ios-light;
        }
      }

      &.mbsc-btn-secondary {
        border-color: $mbsc-ios-secondary;
        color: $mbsc-ios-secondary;

        &.mbsc-active {
          background: $mbsc-ios-secondary;
          color: $mbsc-ios-light;
        }
      }

      &.mbsc-btn-success {
        border-color: $mbsc-ios-success;
        color: $mbsc-ios-success;

        &.mbsc-active {
          background: $mbsc-ios-success;
          color: $mbsc-ios-light;
        }
      }

      &.mbsc-btn-danger {
        border-color: $mbsc-ios-danger;
        color: $mbsc-ios-danger;

        &.mbsc-active {
          background: $mbsc-ios-danger;
          color: $mbsc-ios-light;
        }
      }

      &.mbsc-btn-warning {
        border-color: $mbsc-ios-warning;
        color: $mbsc-ios-warning;

        &.mbsc-active {
          background: $mbsc-ios-warning;
          color: $mbsc-ios-light;
        }
      }

      &.mbsc-btn-info {
        border-color: $mbsc-ios-info;
        color: $mbsc-ios-info;

        &.mbsc-active {
          background: $mbsc-ios-info;
          color: $mbsc-ios-light;
        }
      }

      &.mbsc-btn-light {
        border-color: darken($mbsc-ios-light, 25%);
        color: darken($mbsc-ios-light, 25%);

        &.mbsc-active {
          background: darken($mbsc-ios-light, 25%);
          color: $mbsc-ios-light;
        }
      }

      &.mbsc-btn-dark {
        border-color: $mbsc-ios-dark;
        color: $mbsc-ios-dark;

        &.mbsc-active {
          background: $mbsc-ios-dark;
          color: $mbsc-ios-light;
        }
      }
    }

    /* Switch */
    &.mbsc-ltr.mbsc-switch {
      padding: .875em 5em .875em 1em;
    }

    &.mbsc-rtl.mbsc-switch {
      padding: .875em 1em .875em 5em;
    }

    .mbsc-switch-track {
      right: 1em;
      width: 3em;
      height: 1.75em;
      padding: 0;
      margin-top: -.96875em;
      border-radius: 1.25em;
      box-sizing: content-box;
    }

    &.mbsc-rtl .mbsc-switch-track {
      right: auto;
      left: 1em;
    }

    .mbsc-switch-track:after {
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 1.25em;
      -webkit-transform: scale(1);
      transform: scale(1);
      transition: transform .2s ease-out;
    }

    .mbsc-switch-track .mbsc-progress-track {
      margin: 0 .875em;
    }

    .mbsc-switch-handle {
      z-index: 2;
      top: 50%;
      left: 50%;
      width: 1.75em;
      height: 1.75em;
      margin: -.875em 0 0 -.875em;
      border-radius: 1.75em;
      box-shadow: 0 0 1em rgba(0, 0, 0, .1), 0 0 .0625em rgba(0, 0, 0, .15), 0 .125em .125em rgba(0, 0, 0, .15);
      transition: transform .2s ease-out;
    }

    &.mbsc-rtl .mbsc-switch-handle {
      margin: -.875em -.875em 0 0;
    }

    &.mbsc-switch input:checked + .mbsc-switch-track:after {
      -webkit-transform: scale(0);
      transform: scale(0);
    }

    /* swithc color presets */
    &.mbsc-switch-primary.mbsc-switch input:checked + .mbsc-switch-track {
      border-color: $mbsc-ios-primary;
      background: $mbsc-ios-primary;
    }

    &.mbsc-switch-secondary.mbsc-switch input:checked + .mbsc-switch-track {
      border-color: $mbsc-ios-secondary;
      background: $mbsc-ios-secondary;
    }

    &.mbsc-switch-success.mbsc-switch input:checked + .mbsc-switch-track {
      border-color: $mbsc-ios-success;
      background: $mbsc-ios-success;
    }

    &.mbsc-switch-danger.mbsc-switch input:checked + .mbsc-switch-track {
      border-color: $mbsc-ios-danger;
      background: $mbsc-ios-danger;
    }

    &.mbsc-switch-warning.mbsc-switch input:checked + .mbsc-switch-track {
      border-color: $mbsc-ios-warning;
      background: $mbsc-ios-warning;
    }

    &.mbsc-switch-info.mbsc-switch input:checked + .mbsc-switch-track {
      border-color: $mbsc-ios-info;
      background: $mbsc-ios-info;
    }

    /* Segmented & Stepper */
    &.mbsc-segmented.mbsc-segmented-group {
      padding: .75em;
      // v5 compatibility
      margin: 0;
      border-radius: 0;
    }

    &.mbsc-segmented.mbsc-stepper {
      position: absolute;
      display: block;
      margin-top: -1em;
      // v5 compatibility
      background: none;
      border-radius: 0;
    }

    .mbsc-segmented-content {
      height: 2.142857142em;
      margin-left: -.07142857em;
      line-height: 2.142857142857143em;
      padding: 0 .42857em;
    }

    &.mbsc-ltr .mbsc-stepper-minus .mbsc-segmented-content,
    &.mbsc-ltr .mbsc-segmented-item:first-child .mbsc-segmented-content,
    &.mbsc-rtl .mbsc-stepper-plus .mbsc-segmented-content,
    &.mbsc-rtl .mbsc-segmented-item:last-child .mbsc-segmented-content {
      border-top-left-radius: .25em;
      border-bottom-left-radius: .25em;
    }

    .mbsc-segmented.mbsc-stepper.mbsc-control-w:before,
    .mbsc-segmented.mbsc-stepper.mbsc-control-w:after {
      border: 0;
    }

    &.mbsc-ltr .mbsc-stepper-plus .mbsc-segmented-content,
    &.mbsc-ltr .mbsc-segmented-item:last-child .mbsc-segmented-content,
    &.mbsc-rtl .mbsc-stepper-minus .mbsc-segmented-content,
    &.mbsc-rtl .mbsc-segmented-item:first-child .mbsc-segmented-content {
      border-top-right-radius: .25em;
      border-bottom-right-radius: .25em;
    }

    &.mbsc-ltr.mbsc-stepper-cont {
      padding: 1.5em 11.75em 1.5em 1em;
    }

    &.mbsc-rtl.mbsc-stepper-cont {
      padding: 1.5em 1em 1.5em 11.75em;
    }

    &.mbsc-ltr .mbsc-stepper {
      right: 1em;
    }

    &.mbsc-rtl .mbsc-stepper {
      left: 1em;
    }

    &.mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content,
    &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-disabled .mbsc-segmented-content,
    &.mbsc-segmented .mbsc-segmented-item input:disabled + .mbsc-segmented-content {
      background: none;
    }

    .mbsc-stepper .mbsc-segmented-item {
      width: 3.25em;
    }

    .mbsc-stepper input {
      width: 3.714286em;
      left: 3.714286em;
      z-index: 3;
    }

    &.mbsc-segmented {

      /* Stepper color presets */
      .mbsc-segmented-primary {
        .mbsc-segmented-content {
          border-color: $mbsc-ios-primary;
          color: $mbsc-ios-primary;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-ios-primary;
        }

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
          color: $mbsc-ios-primary;
          background: rgba($mbsc-ios-primary, .45);
        }
      }

      .mbsc-segmented-secondary {
        .mbsc-segmented-content {
          border-color: $mbsc-ios-secondary;
          color: $mbsc-ios-secondary;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-ios-secondary;
        }

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
          color: $mbsc-ios-secondary;
          background: rgba($mbsc-ios-secondary, .45);
        }
      }

      .mbsc-segmented-success {
        .mbsc-segmented-content {
          border-color: $mbsc-ios-success;
          color: $mbsc-ios-success;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-ios-success;
        }

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
          color: $mbsc-ios-success;
          background: rgba($mbsc-ios-success, .45);
        }
      }

      .mbsc-segmented-danger {
        .mbsc-segmented-content {
          border-color: $mbsc-ios-danger;
          color: $mbsc-ios-danger;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-ios-danger;
        }

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
          color: $mbsc-ios-danger;
          background: rgba($mbsc-ios-danger, .45);
        }
      }

      .mbsc-segmented-warning {
        .mbsc-segmented-content {
          border-color: $mbsc-ios-warning;
          color: $mbsc-ios-warning;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-ios-warning;
        }

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
          color: $mbsc-ios-warning;
          background: rgba($mbsc-ios-warning, .45);
        }
      }

      .mbsc-segmented-info {
        .mbsc-segmented-content {
          border-color: $mbsc-ios-info;
          color: $mbsc-ios-info;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-ios-info;
        }

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
          color: $mbsc-ios-info;
          background: rgba($mbsc-ios-info, .45);
        }
      }
    }

    &.mbsc-no-touch {

      /* Segmented hover color presets*/
      .mbsc-segmented-primary {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-primary, .15);
        }
      }

      .mbsc-segmented-secondary {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-secondary, .15);
        }
      }

      .mbsc-segmented-success {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-success, .15);
        }
      }

      .mbsc-segmented-danger {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-danger, .15);
        }
      }

      .mbsc-segmented-warning {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-warning, .15);
        }
      }

      .mbsc-segmented-info {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-info, .15);
        }
      }

      /* Stepper color presets*/
      &.mbsc-stepper-primary {
        .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-primary, .15);
        }
      }

      &.mbsc-stepper-secondary {
        .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-secondary, .15);
        }
      }

      &.mbsc-stepper-success {
        .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-success, .15);
        }
      }

      &.mbsc-stepper-danger {
        .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-danger, .15);
        }
      }

      &.mbsc-stepper-warning {
        .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-warning, .15);
        }
      }

      &.mbsc-stepper-info {
        .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-info, .15);
        }
      }
    }

    /* Stepper color presets */
    &.mbsc-stepper-primary {
      .mbsc-segmented-content {
        border-color: $mbsc-ios-primary;
        color: $mbsc-ios-primary;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-ios-primary;
      }
    }

    &.mbsc-stepper-secondary {
      .mbsc-segmented-content {
        border-color: $mbsc-ios-secondary;
        color: $mbsc-ios-secondary;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-ios-secondary;
      }
    }

    &.mbsc-stepper-success {
      .mbsc-segmented-content {
        border-color: $mbsc-ios-success;
        color: $mbsc-ios-success;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-ios-success;
      }
    }

    &.mbsc-stepper-danger {
      .mbsc-segmented-content {
        border-color: $mbsc-ios-danger;
        color: $mbsc-ios-danger;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-ios-danger;
      }
    }

    &.mbsc-stepper-warning {
      .mbsc-segmented-content {
        border-color: $mbsc-ios-warning;
        color: $mbsc-ios-warning;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-ios-warning;
      }
    }

    &.mbsc-stepper-info {
      .mbsc-segmented-content {
        border-color: $mbsc-ios-info;
        color: $mbsc-ios-info;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-ios-info;
      }
    }
  }

  @include mbsc-ios-forms(ios, $mbsc-ios-colors);
}





$mbsc-material-accent: #009688 !default;
$mbsc-material-background: #eee !default;
$mbsc-material-text: #5b5b5b !default;

$mbsc-material-dark-accent: #81ccc4 !default;
$mbsc-material-dark-background: #303030 !default;
$mbsc-material-dark-text: #c2c2c2 !default;

/* Base colors */
$mbsc-material-primary: #3f97f6 !default;
$mbsc-material-secondary: #90979E !default;
$mbsc-material-success: #43BE5F !default;
$mbsc-material-danger: #f5504e !default;
$mbsc-material-warning: #f8b042 !default;
$mbsc-material-info: #5BB7C5 !default;
$mbsc-material-light: #fff !default;
$mbsc-material-dark: #47494A !default;

$mbsc-material-colors: ( // Colors map
  'background': $mbsc-material-background,
  'text': $mbsc-material-text,
  'accent': $mbsc-material-accent,
);

$mbsc-material-dark-colors: ( // Colors map
  'background': $mbsc-material-dark-background,
  'text': $mbsc-material-dark-text,
  'accent': $mbsc-material-dark-accent,
);

@function mbsc-material-colors($params) {
  $background: map-get($params, 'background');
  $text: map-get($params, 'text');
  $accent: map-get($params, 'accent');

  $snackbar-btn: hsl(hue($accent), saturation($accent), max(lightness($accent), 34%));

  $border: '';
  $gray-background: '';
  $snackbar: '';
  $background-contrast: '';
  $lv-item: '';

  // Light background
  @if (lightness($background) > 50%) {
    $border: lighten($text, 40%);
    $gray-background: darken($background, 23%);
    $snackbar: #323232;
    $background-contrast: #000;
  }
  // Dark background
  @else {
    $border: darken($text, 40%);
    $gray-background: lighten($background, 17%);
    $snackbar: #5b5b5b;
    $background-contrast: #fff;
  }

  @return ('ripple': $background-contrast,
    'border': $border,
    'gray-background': $gray-background,
    'background-contrast': $background-contrast,
    'snackbar': $snackbar,
    'snackbar-btn': $snackbar-btn,
    // Static colors
    'white-text': #fff,
    'dark-text': #000,
    'light-text': #eee,
    'error': #de3226,
  );
}

@mixin mbsc-material-common($theme, $params) {
  @include exports("common.#{$theme}.colors") {

    $text: map-get($params, text);
    $colors: mbsc-material-colors($params);
    $ripple: map-get($colors, ripple);

    .mbsc-#{$theme} {
      .mbsc-ripple {
        background: $ripple;
      }

      .mbsc-empty {
        color: $text;
      }
    }
  }
}



@include exports("collapsible.material") {
  .mbsc-material .mbsc-collapsible {
    .mbsc-form-group-title {
      padding: 1em;
    }

    .mbsc-collapsible-header {
      padding-right: 3em;
    }
  }
}






// Theme specific variables - inherited from global variables

// background
$mbsc-material-page-background: $mbsc-page-background-light !default;
$mbsc-material-dark-page-background: $mbsc-page-background-dark !default;
// text
$mbsc-material-page-text: $mbsc-page-text-light !default;
$mbsc-material-dark-page-text: $mbsc-page-text-dark !default;

// add variablest to color maps
$mbsc-material-colors: map-merge($mbsc-material-colors, (
  'page-background': $mbsc-material-page-background,
  'page-text': $mbsc-material-page-text,
));
$mbsc-material-dark-colors: map-merge($mbsc-material-dark-colors, (
  'page-background': $mbsc-material-dark-page-background,
  'page-text': $mbsc-material-dark-page-text,
));

@mixin mbsc-material-page($theme, $params) {
  @include exports("page.#{$theme}.colors") {
    @include mbsc-material-common($theme, $params);

    $background: map-get($params, 'background');
    $accent: map-get($params, 'accent');
    $text: map-get($params, 'text');

    // get custom params
    $text-param: map-get($params, 'page-text');
    $background-param: map-get($params, 'page-background');
    // overwrite params with custom variables
    $background: if($background-param, $background-param, $background);
    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), lighten($text, 7%)));

    .mbsc-#{$theme} {
      &.mbsc-page {
        background-color: $background;
        color: $text;
      }

      a {
        color: $accent;
      }
    }
  }
}



@include exports("page.material") {
  .mbsc-material {
    .mbsc-note {
      border-radius: .1875em;
    }

    /* Note */
    .mbsc-note,
    .mbsc-note-primary {
      color: darken($mbsc-material-primary, 30%);
      background-color: lighten($mbsc-material-primary, 15%);
    }

    .mbsc-note-secondary {
      color: darken($mbsc-material-secondary, 30%);
      background-color: lighten($mbsc-material-secondary, 15%);
    }

    .mbsc-note-success {
      color: darken($mbsc-material-success, 30%);
      background-color: lighten($mbsc-material-success, 15%);
    }

    .mbsc-note-danger {
      color: darken($mbsc-material-danger, 30%);
      background-color: lighten($mbsc-material-danger, 15%);
    }

    .mbsc-note-warning {
      color: darken($mbsc-material-warning, 30%);
      background-color: lighten($mbsc-material-warning, 15%);
    }

    .mbsc-note-info {
      color: darken($mbsc-material-info, 30%);
      background-color: lighten($mbsc-material-info, 15%);
    }

    .mbsc-note-light {
      color: darken($mbsc-material-light, 60%);
      background-color: lighten($mbsc-material-light, 10%);
    }

    .mbsc-note-dark {
      color: darken($mbsc-material-dark, 30%);
      background-color: lighten($mbsc-material-dark, 20%);
    }
  }

  @include mbsc-material-page(material, $mbsc-material-colors);
}





// Theme specific variables - inherited from global variables

// Background
$mbsc-material-input-background: $mbsc-input-background-light !default;
$mbsc-material-dark-input-background: $mbsc-input-background-dark !default;
// Border
$mbsc-material-input-border: $mbsc-input-border-light !default;
$mbsc-material-dark-input-border: $mbsc-input-border-dark !default;
// Text
$mbsc-material-input-text: $mbsc-input-text-light !default;
$mbsc-material-dark-input-text: $mbsc-input-text-dark !default;
// Accent
$mbsc-material-input-accent: $mbsc-input-accent-light !default;
$mbsc-material-dark-input-accent: $mbsc-input-accent-dark !default;
// Error
$mbsc-material-input-error: $mbsc-input-error-light !default;
$mbsc-material-dark-input-error: $mbsc-input-error-dark !default;

$mbsc-material-colors: map-merge($mbsc-material-colors, (
  'input-background': $mbsc-material-input-background,
  'input-border': $mbsc-material-input-border,
  'input-text': $mbsc-material-input-text,
  'input-accent': $mbsc-material-input-accent,
  'input-error': $mbsc-material-input-error,
));
$mbsc-material-dark-colors: map-merge($mbsc-material-dark-colors, (
  'input-background': $mbsc-material-dark-input-background,
  'input-border': $mbsc-material-dark-input-border,
  'input-text': $mbsc-material-dark-input-text,
  'input-accent': $mbsc-material-dark-input-accent,
  'input-error': $mbsc-material-dark-input-error,
));

@mixin mbsc-material-input($theme, $params) {
  @include exports("input.#{$theme}.colors") {

    $background: map-get($params, 'background');
    $accent: map-get($params, 'accent');
    $text: map-get($params, 'text');
    // custom colors
    $input-background-param: map-get($params, 'input-background');
    $input-border-param: map-get($params, 'input-border');
    $input-text-param: map-get($params, 'input-text');
    $input-accent-param: map-get($params, 'input-accent');
    $input-error-param: map-get($params, 'input-error');

    // overwrite colors with custom ones
    $background: if($input-background-param, $input-background-param, $background);
    $text: if($input-text-param, $input-text-param, $text);
    $accent: if($input-accent-param, $input-accent-param, $accent);

    $box-input: '';
    @if (lightness($background) > 50%) {
      $box-input: darken($background, 7%);
    }
    @else {
      $box-input: lighten($background, 7%);
    }

    // derived colors
    $colors: mbsc-material-colors($params);
    $error: map-get($colors, error);
    $border: if($input-border-param, $input-border-param, lighten($text, 7%));
    $error: if($input-error-param, $input-error-param, $error);
    $input-text: darken($text, 24%);
    .mbsc-#{$theme} {

      /* Textbox */
      &.mbsc-input .mbsc-control {
        border-bottom: 1px solid $border;
        color: $input-text;
      }

      /* Textbox, textarea, select */
      &.mbsc-input .mbsc-control:focus,
      &.mbsc-input select:focus ~ input {
        border-bottom: 2px solid $accent;
      }

      /* Input */
      &.mbsc-input.mbsc-err input,
      &.mbsc-input.mbsc-err textarea {
        border-bottom: 1px solid $error;
      }

      /* Select */
      &.mbsc-select .mbsc-input-wrap:after {
        border: 5px solid $border;
        border-color: $border transparent transparent transparent;
      }

      /* Box Input color */
      &.mbsc-input-box {
        &.mbsc-input .mbsc-input-wrap {
          background: $box-input;
        }
      }

      /* Outline Input */
      &.mbsc-input-outline {

        &.mbsc-input .mbsc-control {
          border: 1px solid $border;
        }

        &.mbsc-input .mbsc-label {
          background: $background;
        }

        &.mbsc-label-inline.mbsc-input .mbsc-label,
        &.mbsc-label-floating:not(.mbsc-label-floating-active).mbsc-input .mbsc-label {
          background: none;
        }

        &.mbsc-input input:focus,
        &.mbsc-input select:focus ~ input {
          border: 2px solid $accent;
        }

        &.mbsc-err input {
          border: 1px solid $error;
        }

        &.mbsc-err input:focus {
          border: 2px solid $error;
        }

        &.mbsc-input textarea:focus {
          border: 2px solid $accent;
        }

        &.mbsc-err textarea {
          border: 1px solid $error;
        }

        &.mbsc-err textarea:focus {
          border: 2px solid $error;
        }
      }
    }
  }
}



@include exports("input.material") {
  .mbsc-material {

    /* Textbox */
    &.mbsc-input input,
    &.mbsc-input textarea,
    &.mbsc-input .mbsc-color-input {
      height: 2.125em;
      padding: 0 0 1px 0;
      background-color: transparent;
      font-size: 1em;
      transition: border-color .2s;
    }

    /* Textbox, textarea, select */
    &.mbsc-input .mbsc-control:disabled ~ input,
    &.mbsc-input textarea:disabled,
    &.mbsc-input input:disabled,
    &.mbsc-input input:disabled ~ .mbsc-color-input {
      border-style: dotted;
      opacity: .5;
    }

    &.mbsc-input input:focus,
    &.mbsc-input textarea:focus,
    &.mbsc-input select:focus ~ input,
    &.mbsc-input .mbsc-color-input:focus {
      padding-bottom: 0;
    }

    /* Input */
    &.mbsc-input {
      margin: 1.5em 1em;

      .mbsc-label ~ .mbsc-input-wrap {
        padding-top: .875em;

        .mbsc-input-ic {
          top: .9375em;
        }
      }
    }

    &.mbsc-input.mbsc-err input:focus,
    &.mbsc-input.mbsc-err textarea:focus {
      padding-bottom: 0;
      border-width: 2px;
    }

    .mbsc-input-ic {
      top: .0625em;
      margin: -2px 0 0 0;
    }

    /* Textarea */
    &.mbsc-input textarea {
      padding-top: .25em;
    }

    /* Select */
    &.mbsc-select .mbsc-input-wrap:after {
      content: '';
      position: absolute;
      height: 0;
      width: 0;
      top: .875em;
    }

    &.mbsc-select .mbsc-label ~ .mbsc-input-wrap:after {
      top: 1.75em;
    }

    &.mbsc-ltr.mbsc-select {
      input {
        padding-right: 1em;
      }

      &.mbsc-ic-right input {
        padding-right: 3em;
      }

      .mbsc-input-wrap:after {
        left: auto;
        right: 0;
      }

      &.mbsc-ic-right .mbsc-input-wrap:after {
        right: 2em;
      }
    }

    &.mbsc-rtl.mbsc-select {
      input {
        padding-left: 1em;
      }

      &.mbsc-ic-right input {
        padding-left: 3em;
      }

      .mbsc-input-wrap:after {
        right: auto;
        left: 0;
      }

      &.mbsc-ic-right .mbsc-input-wrap:after {
        left: 2em;
      }
    }

    /* Inline select */
    .mbsc-select-inline .mbsc-input-wrap:after {
      display: none;
    }

    /* LTR left icon */
    &.mbsc-ltr.mbsc-input.mbsc-ic-left {

      input,
      textarea {
        padding-left: 1.625em;
      }

      .mbsc-left-ic {
        right: auto;
        left: -.375em
      }

      .mbsc-label,
      .mbsc-err-msg {
        left: 2.166667em;
      }
    }

    /* LTR right icon */
    &.mbsc-ltr.mbsc-input.mbsc-ic-right {

      input,
      textarea {
        padding-right: 1.625em;
      }

      .mbsc-right-ic {
        left: auto;
        right: -.375em
      }
    }

    /* RTL left icon */
    &.mbsc-rtl.mbsc-input.mbsc-ic-left {

      input,
      textarea {
        padding-right: 1.625em;
      }

      .mbsc-left-ic {
        left: auto;
        right: -.375em
      }

      .mbsc-label,
      .mbsc-err-msg {
        right: 2.166667em;
      }
    }

    /* RTL right icon */
    &.mbsc-rtl.mbsc-input.mbsc-ic-right {

      input,
      textarea {
        padding-left: 1.625em;
      }

      .mbsc-right-ic {
        right: auto;
        left: -.375em
      }
    }

    &.mbsc-input .mbsc-label {
      position: absolute;
      top: 0;
      font-size: .75em;
    }

    /* Inline labels */
    &.mbsc-label-inline.mbsc-input {
      &.mbsc-control-w {
        // v5 compatibility
        padding: 0;
      }

      .mbsc-label {
        line-height: 2em;
      }

      .mbsc-label ~ .mbsc-input-wrap {
        padding-top: 0;

        .mbsc-input-ic {
          top: .0625em;
        }
      }

      &.mbsc-select .mbsc-label ~ .mbsc-input-wrap:after {
        top: 1em;
      }
    }

    /* Floating labels */
    &.mbsc-label-floating.mbsc-input {
      .mbsc-label {
        font-size: 1em;
        line-height: 2em;
        top: .875em;
      }

      &.mbsc-label-floating-active {
        .mbsc-label {
          -webkit-transform: translateY(-1.125em) scale(.75);
          transform: translateY(-1.125em) scale(.75);
        }
      }
    }

    &.mbsc-ltr.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
      left: 1.625em;
    }

    &.mbsc-rtl.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
      right: 1.625em;
    }

    /* Box Input */
    &.mbsc-input-box {
      &.mbsc-input .mbsc-input-wrap {
        border-radius: 4px 4px 0 0;
      }

      &.mbsc-input input,
      &.mbsc-input .mbsc-color-input {
        height: 2.25em;
        padding: .0625em 1em;
        border-radius: 4px 4px 0 0;
      }

      &.mbsc-input input:focus,
      &.mbsc-input textarea:focus,
      &.mbsc-input select:focus ~ input,
      &.mbsc-input .mbsc-color-input:focus {
        padding-bottom: 0;
      }

      &.mbsc-input textarea {
        padding: .375em 1em .0625em 1em;
        height: 2.25em;
      }

      &.mbsc-input .mbsc-label ~ .mbsc-input-wrap {
        padding-top: 0;

        input,
        .mbsc-color-input {
          padding-top: 1.25em;
          height: 3.5em;
        }

        textarea:focus {
          padding-bottom: 0;
        }

        .mbsc-input-ic {
          top: .875em;
        }
      }

      .mbsc-input-ic {
        top: .25em;
      }

      .mbsc-label {
        top: .666667em;
        z-index: 1;
      }

      &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap {
        padding-top: 1.625em;

        textarea {
          height: 1.866667em;
          padding-top: 0;
        }
      }

      &.mbsc-select {
        .mbsc-input-wrap:after {
          top: 1em;
        }

        .mbsc-label ~ .mbsc-input-wrap:after {
          top: 1.625em;
        }
      }

      /* Inline labels */
      &.mbsc-label-inline {
        .mbsc-label {
          padding-top: .125em;
          padding-bottom: .125em;
        }

        .mbsc-label ~ .mbsc-input-wrap {
          padding-top: 0;

          input,
          .mbsc-color-input {
            height: 2.25em;
            padding-top: .0625em;
          }
        }

        .mbsc-label ~ .mbsc-input-wrap .mbsc-input-ic {
          top: .1875em;
        }

        &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap {
          padding-top: .375em;
        }
      }

      /* Floating labels */
      &.mbsc-label-floating {
        &.mbsc-label-floating-active .mbsc-label {
          -webkit-transform: translateY(-.625em) scale(.75);
          transform: translateY(-.625em) scale(.75);
        }
      }
    }

    &.mbsc-ltr.mbsc-input-box {
      .mbsc-err-msg {
        left: 1.333334em;
      }

      .mbsc-label {
        left: 1.333334em;
        right: auto;
      }

      &.mbsc-ic-left {
        .mbsc-err-msg {
          left: 4em;
        }

        .mbsc-label {
          left: 4em;
        }

        .mbsc-left-ic {
          left: .5em;
        }

        input,
        textarea {
          padding-left: 3em;
        }
      }

      &.mbsc-ic-right {

        input,
        textarea {
          padding-right: 3em;
        }

        .mbsc-right-ic {
          right: .5em;
        }

        .mbsc-input-wrap:after {
          right: 2em;
        }
      }

      &.mbsc-select {
        input {
          padding-right: 2em;
        }

        .mbsc-input-wrap:after {
          right: .6875em;
        }

        &.mbsc-ic-right {
          input {
            padding-right: 4em;
          }

          .mbsc-input-wrap:after {
            right: 3em;
          }
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input .mbsc-label {
        left: 1em;
      }

      &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
        left: 3em;
      }
    }

    &.mbsc-rtl.mbsc-input-box {
      .mbsc-err-msg {
        right: 1.333334em;
      }

      .mbsc-label {
        right: 1.333334em;
        left: auto;
      }

      &.mbsc-ic-left {
        .mbsc-err-msg {
          right: 4em;
        }

        .mbsc-label {
          right: 4em;
        }

        .mbsc-left-ic {
          right: .5em;
        }

        input,
        textarea {
          padding-right: 3em;
        }
      }

      &.mbsc-ic-right {

        input,
        textarea {
          padding-left: 3em;
        }

        .mbsc-right-ic {
          left: .5em;
        }

        .mbsc-input-wrap:after {
          left: 2em;
        }
      }

      &.mbsc-select {
        input {
          padding-left: 2em;
        }

        .mbsc-input-wrap:after {
          left: .6875em;
        }

        &.mbsc-ic-right {
          input {
            padding-left: 4em;
          }

          .mbsc-input-wrap:after {
            left: 3em;
          }
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input .mbsc-label {
        right: 1em;
      }

      &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
        right: 3em;
      }
    }

    /* Outline Input */
    &.mbsc-input-outline {

      &.mbsc-input input,
      &.mbsc-input textarea,
      &.mbsc-input .mbsc-color-input {
        border-radius: 4px;
      }

      &.mbsc-input input,
      &.mbsc-input .mbsc-color-input {
        height: 3.375em;
        padding: .0625em 1em;
      }

      &.mbsc-input textarea {
        height: 3.375em;
        padding: .875em 1em .4375em 1em;
      }

      &.mbsc-input .mbsc-label {
        top: -.166667em;
        z-index: 1;
        padding: 0 .333334em;
      }

      .mbsc-input-ic {
        top: .8125em;
      }

      &.mbsc-input .mbsc-label ~ .mbsc-input-wrap {
        padding-top: .25em;

        .mbsc-input-ic {
          top: 1.0625em;
        }
      }

      &.mbsc-input input:focus,
      &.mbsc-input select:focus ~ input {
        padding: 0 .9375em;
      }

      &.mbsc-err input {
        padding-top: 0;
        padding-bottom: 0;
      }

      &.mbsc-err input:focus {
        padding: 0 .9375em;
      }

      &.mbsc-input textarea:focus {
        padding: .8125em .9375em .375em .9375em;
      }

      &.mbsc-err textarea:focus {
        padding: .875em .9375em 0 .9375em;
      }

      &.mbsc-select {
        .mbsc-input-wrap:after {
          top: 1.5em;
        }

        .mbsc-label ~ .mbsc-input-wrap:after {
          top: 1.75em;
        }
      }

      /* Inline labels */
      &.mbsc-label-inline {
        .mbsc-label {
          line-height: 3.375em;
        }

        .mbsc-label ~ .mbsc-input-wrap {
          padding-top: 0;
        }

        .mbsc-label ~ .mbsc-input-wrap .mbsc-input-ic {
          top: .8125em;
        }

        &.mbsc-select .mbsc-label ~ .mbsc-input-wrap:after {
          top: 1.5em;
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input {
        .mbsc-label {
          top: .9375em;
          padding: 0 .25em;
        }

        &.mbsc-label-floating-active .mbsc-label {
          -webkit-transform: translateY(-1.375em) scale(.75);
          transform: translateY(-1.375em) scale(.75);
        }
      }
    }

    &.mbsc-ltr.mbsc-input-outline {
      .mbsc-err-msg {
        left: 1.416667em;
      }

      .mbsc-label {
        left: 1.083334em;
        right: auto;
      }

      &.mbsc-ic-left {
        .mbsc-err-msg {
          left: 4.083334em;
        }

        .mbsc-label {
          left: 3.75em;
        }

        .mbsc-left-ic {
          left: .5em;
        }

        input,
        textarea {
          padding-left: 3em;
        }

        input:focus,
        textarea:focus,
        &.mbsc-err textarea {
          padding-left: 2.9375em;
        }
      }

      &.mbsc-ic-right {

        input,
        textarea {
          padding-right: 3em;
        }

        input:focus,
        textarea:focus {
          padding-right: 2.9375em;
        }

        .mbsc-right-ic {
          right: .5em;
        }
      }

      &.mbsc-select {
        input {
          padding-right: 2em;
        }

        select:focus ~ input {
          padding-right: 1.9375em;
        }

        .mbsc-input-wrap:after {
          right: .6875em;
        }

        &.mbsc-ic-right {
          input {
            padding-right: 4em;
          }

          select:focus ~ input {
            padding-right: 3.9375em;
          }

          .mbsc-input-wrap:after {
            right: 3em;
          }
        }

        &.mbsc-ic-left select:focus ~ input {
          padding-left: 2.9375em;
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input .mbsc-label {
        left: .875em;
      }

      &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
        left: 2.875em;
      }
    }

    &.mbsc-rtl.mbsc-input-outline {
      .mbsc-err-msg {
        right: 1.416667em;
      }

      .mbsc-label {
        right: 1.083334em;
        left: auto;
      }

      &.mbsc-ic-left {
        .mbsc-err-msg {
          right: 4.083334em;
        }

        .mbsc-label {
          right: 3.75em;
        }

        .mbsc-left-ic {
          right: .5em;
        }

        input,
        textarea {
          padding-right: 3em;
        }

        input:focus,
        textarea:focus,
        &.mbsc-err textarea {
          padding-right: 2.9375em;
        }
      }

      &.mbsc-ic-right {

        input,
        textarea {
          padding-left: 3em;
        }

        input:focus,
        textarea:focus {
          padding-left: 2.9375em;
        }

        .mbsc-right-ic {
          left: .5em;
        }
      }

      &.mbsc-select {
        input {
          padding-left: 2em;
        }

        select:focus ~ input {
          padding-left: 1.9375em;
        }

        .mbsc-input-wrap:after {
          left: .6875em;
        }

        &.mbsc-ic-right {
          input {
            padding-left: 4em;
          }

          select:focus ~ input {
            padding-left: 3.9375em;
          }

          .mbsc-input-wrap:after {
            left: 3em;
          }
        }

        &.mbsc-ic-left select:focus ~ input {
          padding-right: 2.9375em;
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input .mbsc-label {
        right: .875em;
      }

      &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
        right: 2.875em;
      }
    }
  }

  @include mbsc-material-input(material, $mbsc-material-colors);
}








@mixin mbsc-material-progress($theme, $params) {
  @include exports("progress.#{$theme}.colors") {

    $accent: map-get($params, accent);

    $colors: mbsc-material-colors($params);
    $gray-background: map-get($colors, gray-background);

    .mbsc-#{$theme} {
      .mbsc-progress-track {
        background: $gray-background;
      }

      .mbsc-progress-bar {
        background: $accent;
      }
    }
  }
}



@include exports("progress.material") {
  .mbsc-material {
    &.mbsc-progress {
      padding: .75em 1em;
    }

    &.mbsc-progress .mbsc-input-wrap {
      padding: 0;
    }

    &.mbsc-progress .mbsc-input-ic {
      top: .3125em;
      margin: 0;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-right .mbsc-input-wrap {
      padding-left: 2.25em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-left .mbsc-input-wrap {
      padding-right: 2.25em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-left .mbsc-left-ic,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-right .mbsc-right-ic {
      right: auto;
      left: -0.375em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-right .mbsc-right-ic,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-left .mbsc-left-ic {
      left: auto;
      right: -0.375em;
    }

    &.mbsc-progress .mbsc-label {
      font-size: .75em;
    }

    .mbsc-progress-cont {
      padding: 1.25em 0;
    }

    .mbsc-progress-track {
      height: .125em;
    }

    .mbsc-progress-value {
      font-size: .75em;
      width: 4em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-progress-value-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-progress-value-left .mbsc-input-wrap {
      padding-right: 3.25em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-progress-value-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-progress-value-right .mbsc-input-wrap {
      padding-left: 3.25em;
    }

    &.mbsc-ltr.mbsc-progress-value-left.mbsc-ic-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress-value-right.mbsc-ic-right .mbsc-input-wrap {
      padding-left: 5.5em;
    }

    &.mbsc-ltr.mbsc-progress-value-right.mbsc-ic-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress-value-left.mbsc-ic-left .mbsc-input-wrap {
      padding-right: 5.5em;
    }

    &.mbsc-ltr.mbsc-progress-value-left.mbsc-ic-left .mbsc-progress-value,
    &.mbsc-rtl.mbsc-progress-value-right.mbsc-ic-right .mbsc-progress-value {
      left: 2.25em;
      right: auto;
    }

    &.mbsc-ltr.mbsc-progress-value-right.mbsc-ic-right .mbsc-progress-value,
    &.mbsc-rtl.mbsc-progress-value-left.mbsc-ic-left .mbsc-progress-value {
      left: auto;
      right: 2.25em;
    }

    /* Inline labels */
    .mbsc-label-inline.mbsc-progress.mbsc-control-w .mbsc-label {
      line-height: 2.625em;
    }

    /* Progress color presets */
    .mbsc-progress-primary .mbsc-progress-bar {
      background: $mbsc-material-primary;
    }

    .mbsc-progress-secondary .mbsc-progress-bar {
      background: $mbsc-material-secondary;
    }

    .mbsc-progress-success .mbsc-progress-bar {
      background: $mbsc-material-success;
    }

    .mbsc-progress-danger .mbsc-progress-bar {
      background: $mbsc-material-danger;
    }

    .mbsc-progress-warning .mbsc-progress-bar {
      background: $mbsc-material-warning;
    }

    .mbsc-progress-info .mbsc-progress-bar {
      background: $mbsc-material-info;
    }
  }

  @include mbsc-material-progress(material, (background: $mbsc-material-background, text: $mbsc-material-text, accent: $mbsc-material-accent));
}






@mixin mbsc-material-slider($theme, $params) {
  @include exports("slider.#{$theme}.colors") {

    @include mbsc-material-page($theme, $params);
    @include mbsc-material-progress($theme, $params);

    $background: map-get($params, background);
    $accent: map-get($params, accent);

    $colors: mbsc-material-colors($params);
    $tooltip: map-get($colors, tooltip);
    $background-contrast: map-get($colors, background-contrast);
    $gray-background: map-get($colors, gray-background);

    .mbsc-#{$theme} {
      .mbsc-slider-step {
        background: $background-contrast;
      }

      .mbsc-slider-handle {
        border: 2px solid $accent;
        background: $accent;
      }

      .mbsc-slider-handle:before {
        background: rgba($background-contrast, .1);
      }

      .mbsc-slider-start .mbsc-slider-handle {
        border-color: $gray-background;
        background: $background;
      }

      .mbsc-slider-tooltip {
        color: $background;
        background-color: $accent;
      }

      .mbsc-slider-tooltip:before {
        border-top: 1em solid $accent;
      }

      &.mbsc-slider-has-tooltip .mbsc-slider-start .mbsc-slider-tooltip,
      &.mbsc-slider input:disabled ~ .mbsc-progress-cont .mbsc-progress-bar {
        background: $gray-background;
      }

      &.mbsc-slider-has-tooltip .mbsc-slider-start .mbsc-slider-tooltip:before {
        border-top-color: $gray-background;
      }

      &.mbsc-slider input:disabled ~ .mbsc-progress-cont .mbsc-slider-handle {
        background: $gray-background;
        border-color: $gray-background;
        box-shadow: 0 0 0 .3125em $background;
      }

      &.mbsc-slider input:disabled ~ .mbsc-progress-cont .mbsc-slider-start .mbsc-slider-handle {
        border-color: $gray-background;
        background: $background;
      }
    }
  }
}



@include exports("slider.material") {
  .mbsc-material {
    &.mbsc-slider .mbsc-input-wrap {
      padding: 0 .5em;
    }

    .mbsc-slider-handle {
      top: 50%;
      width: .75em;
      height: .75em;
      margin: -.5em -.5em 0 0;
      border-radius: 1.125em;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transition: -webkit-transform .2s ease-in-out;
      transition: transform .2s ease-in-out;
    }

    .mbsc-slider-handle:focus,
    .mbsc-active .mbsc-slider-handle {
      -webkit-transform: scale(1.4);
      transform: scale(1.4);
    }

    .mbsc-slider-handle:before {
      content: '';
      position: absolute;
      z-index: -1;
      top: -.625em;
      left: -.625em;
      width: 2em;
      height: 2em;
      opacity: 0;
      border-radius: 2.875em;
      -webkit-transition: opacity .2s ease-in-out;
      transition: opacity .2s ease-in-out;
    }

    .mbsc-active .mbsc-slider-handle:before {
      opacity: 1;
    }

    .mbsc-slider-tooltip {
      margin-right: -1.16665em;
      top: -2.5em;
      width: 2.33333333em;
      height: 2.33333333em;
      border-radius: 2.33333333em;
      line-height: 2.33333333em;
      text-align: center;
      font-size: .75em;
      -webkit-transform: scale(.4) translate3d(0, 6em, 0);
      transform: scale(.4) translate3d(0, 6em, 0);
      -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
      transition: transform .2s ease-in-out, opacity .2s ease-in-out;
    }

    .mbsc-slider-tooltip:before {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      border-left: .8333em solid transparent;
      border-right: .8333em solid transparent;
      bottom: -.66666em;
      left: .3333em;
    }

    &.mbsc-slider-has-tooltip .mbsc-slider-handle:focus ~ .mbsc-slider-tooltip,
    &.mbsc-slider-has-tooltip .mbsc-active .mbsc-slider-tooltip {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0) scale(1);
      transform: translate3d(0, 0, 0) scale(1);
    }

    &.mbsc-slider-has-tooltip .mbsc-slider-handle:focus,
    &.mbsc-slider-has-tooltip .mbsc-active .mbsc-slider-handle {
      -webkit-transform: scale(0);
      transform: scale(0);
    }

    &.mbsc-slider input:disabled ~ .mbsc-progress-cont .mbsc-progress-track {
      opacity: .4;
    }

    &.mbsc-slider input:disabled ~ .mbsc-progress-cont .mbsc-slider-handle {
      -webkit-transform: scale(.7);
      transform: scale(.7);
    }

    /* color presets */
    &.mbsc-slider-primary {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle {
        background: $mbsc-material-primary;
        border-color: $mbsc-material-primary;
      }

      .mbsc-slider-tooltip:before {
        border-top-color: $mbsc-material-primary;
      }

      .mbsc-progress-bar {
        background: $mbsc-material-primary;
      }
    }

    &.mbsc-slider-secondary {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle {
        background: $mbsc-material-secondary;
        border-color: $mbsc-material-secondary;
      }

      .mbsc-slider-tooltip:before {
        border-top-color: $mbsc-material-secondary;
      }

      .mbsc-progress-bar {
        background: $mbsc-material-secondary;
      }
    }

    &.mbsc-slider-success {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle {
        background: $mbsc-material-success;
        border-color: $mbsc-material-success;
      }

      .mbsc-slider-tooltip:before {
        border-top-color: $mbsc-material-success;
      }

      .mbsc-progress-bar {
        background: $mbsc-material-success;
      }
    }

    &.mbsc-slider-danger {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle {
        background: $mbsc-material-danger;
        border-color: $mbsc-material-danger;
      }

      .mbsc-slider-tooltip:before {
        border-top-color: $mbsc-material-danger;
      }

      .mbsc-progress-bar {
        background: $mbsc-material-danger;
      }
    }

    &.mbsc-slider-warning {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle {
        background: $mbsc-material-warning;
        border-color: $mbsc-material-warning;
      }

      .mbsc-slider-tooltip:before {
        border-top-color: $mbsc-material-warning;
      }

      .mbsc-progress-bar {
        background: $mbsc-material-warning;
      }
    }

    &.mbsc-slider-info {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle {
        background: $mbsc-material-info;
        border-color: $mbsc-material-info;
      }

      .mbsc-slider-tooltip:before {
        border-top-color: $mbsc-material-info;
      }

      .mbsc-progress-bar {
        background: $mbsc-material-info;
      }
    }
  }

  @include mbsc-material-slider(material, (background: $mbsc-material-background, text: $mbsc-material-text, accent: $mbsc-material-accent));
}







@mixin mbsc-material-rating($theme, $params) {
  @include exports("rating.#{$theme}.colors") {

    @include mbsc-material-progress($theme, $params);

    $accent: map-get($params, accent);

    .mbsc-#{$theme}.mbsc-rating {
      .mbsc-progress-track {
        color: $accent;
      }
    }
  }
}



@include exports("rating.material") {
  .mbsc-material.mbsc-rating {
    .mbsc-slider-handle:before {
      display: none;
    }

    .mbsc-label {
      padding-bottom: .5em;
    }

    input:disabled ~ .mbsc-progress-cont .mbsc-progress-track {
      opacity: .4;
    }

    &.mbsc-rating-primary .mbsc-progress-track {
      color: $mbsc-material-primary;
    }

    &.mbsc-rating-secondary .mbsc-progress-track {
      color: $mbsc-material-secondary;
    }

    &.mbsc-rating-success .mbsc-progress-track {
      color: $mbsc-material-success;
    }

    &.mbsc-rating-danger .mbsc-progress-track {
      color: $mbsc-material-danger;
    }

    &.mbsc-rating-warning .mbsc-progress-track {
      color: $mbsc-material-warning;
    }

    &.mbsc-rating-info .mbsc-progress-track {
      color: $mbsc-material-info;
    }
  }

  @include mbsc-material-rating(material, (background: $mbsc-material-background, text: $mbsc-material-text, accent: $mbsc-material-accent));
}







// Theme specific variables - inherited from global variables

// Background
$mbsc-material-frame-background: $mbsc-frame-background-light !default;
$mbsc-material-dark-frame-background: $mbsc-frame-background-dark !default;
// Text
$mbsc-material-frame-text: $mbsc-frame-text-light !default;
$mbsc-material-dark-frame-text: $mbsc-frame-text-dark !default;
// Accent
$mbsc-material-frame-accent: $mbsc-frame-accent-light !default;
$mbsc-material-dark-frame-accent: $mbsc-frame-accent-dark !default;
// Overlay
$mbsc-material-frame-overlay: $mbsc-frame-overlay-light !default;
$mbsc-material-dark-frame-overlay: $mbsc-frame-overlay-dark !default;

$mbsc-material-colors: map-merge($mbsc-material-colors, (
  'frame-background': $mbsc-material-frame-background,
  'frame-text': $mbsc-material-frame-text,
  'frame-accent': $mbsc-material-frame-accent,
  'frame-overlay': $mbsc-material-frame-overlay,
));

$mbsc-material-dark-colors: map-merge($mbsc-material-dark-colors, (
  'frame-background': $mbsc-material-dark-frame-background,
  'frame-text': $mbsc-material-dark-frame-text,
  'frame-accent': $mbsc-material-dark-frame-accent,
  'frame-overlay': $mbsc-material-dark-frame-overlay,
));

@mixin mbsc-material-frame($theme, $params) {
  @include exports("frame.#{$theme}.colors") {
    $background: map-get($params, 'background');
    $text: map-get($params, 'text');
    $accent: map-get($params, 'accent');

    $overlay-param: map-get($params, 'frame-overlay');
    $background-param: map-get($params, 'frame-background');
    $text-param: map-get($params, 'frame-text');
    $accent-param: map-get($params, 'frame-accent');

    $background: if($background-param, $background-param, $background);
    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
    $accent: if($accent-param, $accent-param, $accent);
    $overlay: if($overlay-param, $overlay-param, rgba(0, 0, 0, .6));

    $background-contrast: '';
    @if (lightness($background) > 50%) {
      $background-contrast: #000;
    }
    @else {
      $background-contrast: #fff;
    }

    .mbsc-#{$theme} {
      .mbsc-fr-overlay {
        background: $overlay;
      }

      .mbsc-fr-w {
        background: $background;
        color: $text;
        box-shadow: 0 0.25em 1.5em rgba(0, 0, 0, 0.3);
      }

      .mbsc-fr-hdr {
        color: $accent;
      }

      .mbsc-fr-btn {
        color: $accent;
      }

      &.mbsc-no-touch .mbsc-fr-btn-e:not(.mbsc-disabled):hover,
      .mbsc-fr-btn.mbsc-active {
        background: rgba($background-contrast, .1);
      }

      .mbsc-fr-arr {
        box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.2);
        background: $background;
      }
    }
  }
}



@include exports("ripple.material") {
  .mbsc-material {
    .mbsc-ripple {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      border-radius: 1000em;
      pointer-events: none;
      -webkit-transform: scale(0);
      transform: scale(0);
      -webkit-transition: -webkit-transform cubic-bezier(0, 0, 0.2, 1) .4s, opacity linear .1s;
      transition: transform cubic-bezier(0, 0, 0.2, 1) .4s, opacity linear .1s;
    }

    .mbsc-ripple-scaled {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    .mbsc-ripple-visible {
      opacity: .15;
    }
  }
}



@include exports("frame.material") {
  .mbsc-material {
    .mbsc-fr-w {
      border-radius: .1875em;
      min-width: 15em;
      font-size: 16px;
    }

    .mbsc-fr-hdr {
      padding: 0 .6666em;
      padding-top: .6666em;
      font-size: .75em;
      font-weight: bold;
      text-transform: uppercase;
      min-height: 2em;
      line-height: 2em;
    }

    .mbsc-fr-btn-cont {
      display: block;
      overflow: hidden;
      padding: 0 .5em .5em .5em;
    }

    .mbsc-ltr .mbsc-fr-btn-cont {
      text-align: right;
    }

    .mbsc-rtl .mbsc-fr-btn-cont {
      text-align: left;
    }

    .mbsc-fr-btn-w {
      display: inline-block;
    }

    .mbsc-fr-btn {
      position: relative;
      height: 2.4em;
      line-height: 2.4em;
      padding: 0 1em;
      border-radius: 2px;
      font-weight: bold;
      text-transform: uppercase;
    }

    .mbsc-fr-btn-cont .mbsc-fr-btn {
      font-size: .9375em;
    }

    .mbsc-fr-btn-e {
      transition: background-color .2s ease-out;
    }

    /* Inline mode */

    &.mbsc-fr-inline .mbsc-fr-w {
      box-shadow: none;
    }


    /* Top, bottom mode */

    &.mbsc-fr-inline .mbsc-fr-w,
    &.mbsc-fr-top .mbsc-fr-w,
    &.mbsc-fr-bottom .mbsc-fr-w {
      border-radius: 0;
    }
  }

  @include mbsc-material-frame(material, $mbsc-material-colors);
}





@mixin mbsc-material-popup($theme, $params) {
  @include exports("popup.#{$theme}.colors") {

    @include mbsc-material-frame($theme, $params);
  }
}



@include exports("popup.material") {
  @include mbsc-material-popup(material, (background: $mbsc-material-background, text: $mbsc-material-text, accent: $mbsc-material-accent));
}





@mixin mbsc-material-notifications($theme, $params) {
  @include exports("notifications.#{$theme}.colors") {

    @include mbsc-material-popup($theme, $params);

    $accent: map-get($params, accent);

    $colors: mbsc-material-colors($params);
    $white-text: map-get($colors, white-text);
    $light-text: map-get($colors, light-text);
    $snackbar: map-get($colors, snackbar);
    $snackbar-btn: map-get($colors, snackbar-btn);

    .mbsc-#{$theme} {

      /* Snackbar */

      &.mbsc-snackbar .mbsc-fr-w {
        background: $snackbar;
        color: $white-text;
      }

      &.mbsc-snackbar .mbsc-snackbar-btn {
        color: $snackbar-btn;
      }

      /* Toast */

      &.mbsc-toast .mbsc-toast-msg {
        background: #505050;
        color: $white-text;
      }

      /* Snackbar and Toast color presets */
      &.mbsc-snackbar.mbsc-primary .mbsc-fr-w,
      &.mbsc-toast.mbsc-primary .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w,
      &.mbsc-toast.mbsc-secondary .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-success .mbsc-fr-w,
      &.mbsc-toast.mbsc-success .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-danger .mbsc-fr-w,
      &.mbsc-toast.mbsc-danger .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-warning .mbsc-fr-w,
      &.mbsc-toast.mbsc-warning .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-info .mbsc-fr-w,
      &.mbsc-toast.mbsc-info .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-primary .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-secondary .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-success .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-danger .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-warning .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-info .mbsc-snackbar-btn {
        color: $light-text;
      }
    }
  }
}



@include exports("notifications.material") {
  .mbsc-material {
    &.mbsc-toast .mbsc-toast-msg {
      opacity: .9;
      border-radius: 1.571429em;
    }

    /* Snackbar and Toast color presets */

    &.mbsc-snackbar.mbsc-primary .mbsc-fr-w,
    &.mbsc-toast.mbsc-primary .mbsc-toast-msg {
      background: $mbsc-material-primary;
    }

    &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w,
    &.mbsc-toast.mbsc-secondary .mbsc-toast-msg {
      background: $mbsc-material-secondary;
    }

    &.mbsc-snackbar.mbsc-success .mbsc-fr-w,
    &.mbsc-toast.mbsc-success .mbsc-toast-msg {
      background: $mbsc-material-success;
    }

    &.mbsc-snackbar.mbsc-danger .mbsc-fr-w,
    &.mbsc-toast.mbsc-danger .mbsc-toast-msg {
      background: $mbsc-material-danger;
    }

    &.mbsc-snackbar.mbsc-warning .mbsc-fr-w,
    &.mbsc-toast.mbsc-warning .mbsc-toast-msg {
      background: $mbsc-material-warning;
    }

    &.mbsc-snackbar.mbsc-info .mbsc-fr-w,
    &.mbsc-toast.mbsc-info .mbsc-toast-msg {
      background: $mbsc-material-info;
    }
  }

  @include mbsc-material-notifications(material, (background: $mbsc-material-background, text: $mbsc-material-text, accent: $mbsc-material-accent));
}









// Theme specific variables - inherited from global variables

// General colors for the form
// Background
$mbsc-material-form-background: $mbsc-form-background-light !default;
$mbsc-material-dark-form-background: $mbsc-form-background-dark !default;
// Text
$mbsc-material-form-text: $mbsc-form-text-light !default;
$mbsc-material-dark-form-text: $mbsc-form-text-dark !default;
// Accent
$mbsc-material-form-accent: $mbsc-form-accent-light !default;
$mbsc-material-dark-form-accent: $mbsc-form-accent-dark !default;

// Button
// button background
$mbsc-material-button-color: $mbsc-button-color-light !default;
$mbsc-material-dark-button-color: $mbsc-button-color-dark !default;
// button text
$mbsc-material-button-text: $mbsc-button-text-light !default;
$mbsc-material-dark-button-text: $mbsc-button-text-dark !default;

// Form Group
// text
$mbsc-material-form-group-title-text: $mbsc-form-group-title-text-light !default;
$mbsc-material-dark-form-group-title-text: $mbsc-form-group-title-text-dark !default;


// add variables to light and dark color maps
$mbsc-material-colors: map-merge($mbsc-material-colors, (
  'form-background': $mbsc-material-form-background,
  'form-text': $mbsc-material-form-text,
  'form-accent': $mbsc-material-form-accent,
  'button-color': $mbsc-material-button-color,
  'button-text': $mbsc-material-button-text,
  'form-group-title-text': $mbsc-material-form-group-title-text,
));
$mbsc-material-dark-colors: map-merge($mbsc-material-dark-colors, (
  'form-background': $mbsc-material-dark-form-background,
  'form-text': $mbsc-material-dark-form-text,
  'form-accent': $mbsc-material-dark-form-accent,
  'button-color': $mbsc-material-dark-button-color,
  'button-text': $mbsc-material-dark-button-text,
  'form-group-title-text': $mbsc-material-dark-form-group-title-text,
));

@mixin mbsc-material-forms($theme, $params) {
  @include exports("forms.#{$theme}.colors") {

    @include mbsc-material-page($theme, $params);
    @include mbsc-material-input($theme, $params);
    @include mbsc-material-slider($theme, $params);
    @include mbsc-material-rating($theme, $params);
    @include mbsc-material-notifications($theme, $params);

    $background: map-get($params, 'background');
    $text: map-get($params, 'text');
    $accent: map-get($params, 'accent');
    // Generic
    $background-param: map-get($params, 'form-background');
    $text-param: map-get($params, 'form-text');
    $accent-param: map-get($params, 'form-accent');
    // Button
    $button-background-param: map-get($params, 'button-color');
    $button-text-param: map-get($params, 'button-text');
    // Group Title
    $group-title-param: map-get($params, 'form-group-title-text');

    $colors: mbsc-material-colors($params);
    // stati colors
    $white-text: map-get($colors, 'white-text');
    $dark-text: map-get($colors, 'dark-text');
    $light-text: map-get($colors, 'light-text');
    $error: map-get($colors, 'error');
    $background-contrast: map-get($colors, 'background-contrast');

    // overwrite custom variables
    $background: if($background-param, $background-param, $background);
    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
    $accent: if($accent-param, $accent-param, $accent);

    // derived variables
    $form-text: lighten($text, 7%);
    $checkbox: $background;
    $gray-background: '';
    $input-color: '';
    $switch-disabled: '';
    $switch: '';
    $button-background: '';
    $button-text: '';
    @if (lightness($background) > 50%) {
      $checkbox: lighten($background, 7%);
      $gray-background: darken($background, 23%);
      $input-color: lighten($text, 29%);
      $switch-disabled: darken($background, 20%);
      $switch: lighten($background, 5%);
      $button-background: darken($background, 9%);
      $button-text: darken($text, 36%);
    }
    @else {
      $gray-background: lighten($background, 17%);
      $input-color: darken($text, 19%);
      $switch-disabled: lighten($background, 16%);
      $switch: lighten($background, 53%);
      $button-background: lighten($background, 17%);
      $button-text: lighten($text, 24%);
    }

    // Switch
    $switch-track-disabled: $button-background;
    // Segmented
    $segmented-background-disabled: $button-background;
    $segmented-text: $button-text;
    $segmented-active: darken($button-background, 4%);
    // Stepper
    $stepper-background: $button-background;

    // Button specific vars overwritten
    $button-background: if($button-background-param, $button-background-param, $button-background);
    $button-text: if($button-text-param, $button-text-param, if($button-background-param, get-contrast-color($button-background-param), $button-text));
    $button-active: darken($button-background, 4%);

    // Group title
    $group-title: if($group-title-param, $group-title-param, $accent);

    .mbsc-#{$theme} {

      &.mbsc-form {
        background-color: $background;
        color: $form-text;
      }

      &.mbsc-control-w {
        color: $form-text;
      }

      &.mbsc-form *::-moz-selection,
      &.mbsc-control-w *::-moz-selection,
      &.mbsc-form *::selection,
      &.mbsc-control-w *::selection {
        color: $white-text;
        background: $accent;
      }

      .mbsc-divider,
      .mbsc-form-group-title {
        color: $group-title;
      }

      .mbsc-err-msg,
      .mbsc-err .mbsc-label {
        color: $error;
      }

      /* Checkbox, radio */
      .mbsc-checkbox-box,
      .mbsc-radio-box {
        border: .125em solid $form-text;
      }


      .mbsc-checkbox-box:before,
      .mbsc-radio-box:before {
        background: rgba($background-contrast, .1);
      }

      /* Checkbox */
      .mbsc-checkbox-box:after {
        border: .125em solid $checkbox;
        border-top: 0;
        border-right: 0;
      }

      &.mbsc-checkbox input:checked + .mbsc-checkbox-box {
        background: $accent;
        border-color: $accent;
      }

      /* Radio */
      .mbsc-radio-box:after {
        background: $accent;
      }

      &.mbsc-radio input:checked + .mbsc-radio-box {
        border-color: $accent;
      }

      /* Button */
      &.mbsc-btn {
        background: $button-background;
        color: $button-text;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25);
      }

      &.mbsc-no-touch.mbsc-btn:not(:disabled):hover,
      .mbsc-btn.mbsc-active {
        background: $button-active;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
      }


      &.mbsc-no-touch.mbsc-btn-flat:not(:disabled):hover,
      .mbsc-btn-flat.mbsc-active {
        background-color: $gray-background;
      }

      &.mbsc-btn:disabled {
        color: $input-color;
      }

      &.mbsc-btn.mbsc-btn-outline:disabled {
        color: $input-color;
        border-color: $input-color;
      }

      &.mbsc-btn-light.mbsc-btn {
        color: $dark-text;
      }

      &.mbsc-btn-dark.mbsc-btn {
        color: $light-text;
      }

      /* Flat buttons */
      &.mbsc-btn-flat.mbsc-btn {
        background: transparent;
        box-shadow: none;
      }

      &.mbsc-no-touch.mbsc-btn-flat:not(:disabled):hover,
      .mbsc-btn-flat.mbsc-active {
        box-shadow: none;
      }

      /* Outline buttons */
      &.mbsc-btn-outline.mbsc-btn {
        background: transparent;
        border: 1px solid $form-text;
        color: $form-text;
        box-shadow: none;

        &.mbsc-active.mbsc-control {
          background: $form-text;
          color: $background;
          opacity: 1;
        }
      }

      /* Switch */
      .mbsc-switch-track {
        background: $gray-background;
      }

      &.mbsc-switch .mbsc-switch-handle {
        background: $switch;
        box-shadow: 0 3px 1px -2px rgba($background-contrast, 0.2), 0 1px 5px 0 rgba($background-contrast, 0.12);
      }

      &.mbsc-switch input:checked + .mbsc-switch-track {
        background-color: rgba($accent, .3);
      }

      &.mbsc-switch input:checked + .mbsc-switch-track .mbsc-switch-handle {
        background: $accent;
      }

      &.mbsc-switch input:disabled + .mbsc-switch-track {
        background: $switch-track-disabled;
      }

      &.mbsc-switch input:disabled + .mbsc-switch-track .mbsc-switch-handle {
        background: $switch-disabled;
      }

      /* Segmented control and Stepper */
      .mbsc-segmented-content {
        border: .142858em solid $accent;
        color: $segmented-text;
      }

      &.mbsc-segmented .mbsc-segmented-item input:checked + .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item input:checked ~ .mbsc-segmented-content {
        background: $accent;
        color: $background;
      }

      &.mbsc-segmented .mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item .mbsc-active .mbsc-segmented-content {
        background: $segmented-active;
        color: $segmented-text;
      }

      &.mbsc-segmented .mbsc-segmented-item input:disabled + .mbsc-segmented-content {
        color: $input-color;
        border-color: $gray-background;
        background: transparent;
      }

      &.mbsc-segmented .mbsc-segmented-item input:disabled:checked + .mbsc-segmented-content {
        background: $segmented-background-disabled;
        color: $input-color;
        border-color: $segmented-background-disabled;
      }

      .mbsc-stepper .mbsc-segmented-content {
        border-color: $stepper-background;
      }

      .mbsc-stepper-control .mbsc-segmented-content {
        background: $stepper-background;
      }

      &.mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-disabled .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item.mbsc-disabled .mbsc-segmented-content {
        background: $segmented-background-disabled;
        color: $input-color;
      }

      &.mbsc-segmented .mbsc-segmented-item input:disabled ~ .mbsc-segmented-item .mbsc-stepper-val {
        background: $background;
      }

      .mbsc-stepper input {
        color: $text;
      }

      .mbsc-stepper input:disabled {
        color: $input-color;
        -webkit-text-fill-color: $input-color;
      }

      &.mbsc-no-touch .mbsc-segmented-item:hover .mbsc-segmented-content {
        background: $segmented-active;
        color: $segmented-text;
      }

      /* Segmented color presets */
      &.mbsc-stepper-primary.mbsc-stepper-cont {
        .mbsc-stepper .mbsc-segmented-content {
          color: $background;
        }

        .mbsc-stepper .mbsc-stepper-val {
          background: transparent;
        }
      }

      &.mbsc-stepper-secondary.mbsc-stepper-cont {
        .mbsc-stepper .mbsc-segmented-content {
          color: $background;
        }

        .mbsc-stepper .mbsc-stepper-val {
          background: transparent;
        }
      }

      &.mbsc-stepper-success.mbsc-stepper-cont {
        .mbsc-stepper .mbsc-segmented-content {
          color: $background;
        }

        .mbsc-stepper .mbsc-stepper-val {
          background: transparent;
        }
      }

      &.mbsc-stepper-danger.mbsc-stepper-cont {
        .mbsc-stepper .mbsc-segmented-content {
          color: $background;
        }

        .mbsc-stepper .mbsc-stepper-val {
          background: transparent;
        }
      }

      &.mbsc-stepper-warning.mbsc-stepper-cont {
        .mbsc-stepper .mbsc-segmented-content {
          color: $background;
        }

        .mbsc-stepper .mbsc-stepper-val {
          background: transparent;
        }
      }

      &.mbsc-stepper-info.mbsc-stepper-cont {
        .mbsc-stepper .mbsc-segmented-content {
          color: $background;
        }

        .mbsc-stepper .mbsc-stepper-val {
          background: transparent;
        }
      }
    }
  }
}




@include exports("forms.material") {
  .mbsc-material {
    .mbsc-desc {
      opacity: .7;
    }

    .mbsc-divider,
    .mbsc-form-group-title {
      padding: .5em 1em;
    }

    .mbsc-err-msg {
      position: absolute;
      padding-top: .333334em;
      font-size: .75em;
    }

    &.mbsc-ltr .mbsc-err-msg {
      left: 0;
    }

    &.mbsc-rtl .mbsc-err-msg {
      right: 0;
    }

    /* Form grid */

    .mbsc-form-grid {
      margin-top: .75em;
      margin-bottom: .75em;
    }

    .mbsc-form-grid .mbsc-input-box,
    .mbsc-form-grid .mbsc-input-outline {
      margin: .75em 1em;
    }

    /* Checkbox, switch, radio */
    &.mbsc-checkbox .mbsc-err-msg,
    &.mbsc-switch .mbsc-err-msg,
    &.mbsc-radio .mbsc-err-msg {
      padding-top: 0;
    }

    &.mbsc-ltr.mbsc-checkbox .mbsc-err-msg,
    &.mbsc-ltr.mbsc-switch .mbsc-err-msg,
    &.mbsc-ltr.mbsc-radio .mbsc-err-msg {
      left: 1.3333em;
    }

    &.mbsc-rtl.mbsc-checkbox .mbsc-err-msg,
    &.mbsc-rtl.mbsc-switch .mbsc-err-msg,
    &.mbsc-rtl.mbsc-radio .mbsc-err-msg {
      right: 1.3333em;
    }

    /* Checkbox, radio */
    &.mbsc-ltr.mbsc-checkbox,
    &.mbsc-ltr.mbsc-radio {
      padding: .9375em 3.5em .9375em 1em;
      line-height: 1.25em;
    }

    &.mbsc-rtl.mbsc-checkbox,
    &.mbsc-rtl.mbsc-radio {
      padding: .9375em 1em .9375em 3.5em;
    }

    .mbsc-checkbox-box,
    .mbsc-radio-box {
      right: 1.25em;
      width: 1.125em;
      height: 1.125em;
      margin-top: -.5625em;
      background: transparent;
      -webkit-transition: background-color .1s ease-out;
      transition: background-color .1s ease-out;
    }

    &.mbsc-rtl .mbsc-checkbox-box,
    &.mbsc-rtl .mbsc-radio-box {
      right: auto;
      left: 1.25em;
    }

    .mbsc-checkbox-box:after,
    .mbsc-radio-box:after {
      opacity: 1;
      -webkit-transform: scale(0) rotate(-45deg);
      transform: scale(0) rotate(-45deg);
      -webkit-transition: -webkit-transform .1s ease-out;
      transition: transform .1s ease-out;
    }

    &.mbsc-checkbox input:checked + .mbsc-checkbox-box:after,
    &.mbsc-radio input:checked + .mbsc-radio-box:after {
      -webkit-transform: scale(1) rotate(-45deg);
      transform: scale(1) rotate(-45deg);
    }

    .mbsc-checkbox-box:before,
    .mbsc-radio-box:before {
      content: '';
      position: absolute;
      top: -1em;
      left: -1em;
      z-index: -1;
      width: 2.875em;
      height: 2.875em;
      opacity: 0;
      border-radius: 2.875em;
      -webkit-transition: opacity .2s ease-in-out;
      transition: opacity .2s ease-in-out;
    }

    &.mbsc-checkbox input:disabled + .mbsc-checkbox-box,
    &.mbsc-checkbox input:disabled ~ .mbsc-label,
    &.mbsc-checkbox input:disabled ~ .mbsc-desc,
    &.mbsc-radio input:disabled + .mbsc-radio-box,
    &.mbsc-radio input:disabled ~ .mbsc-label,
    &.mbsc-radio input:disabled ~ .mbsc-desc,
    &.mbsc-switch input:disabled ~ .mbsc-label,
    &.mbsc-switch input:disabled ~ .mbsc-desc {
      opacity: .3;
    }

    &.mbsc-checkbox input.mbsc-active + .mbsc-checkbox-box:before,
    &.mbsc-radio input.mbsc-active + .mbsc-radio-box:before,
    &.mbsc-switch input.mbsc-active + .mbsc-switch-track .mbsc-switch-handle:before {
      opacity: 1;
    }

    /* Checkbox */
    .mbsc-checkbox-box {
      border-radius: .1875em;
    }

    .mbsc-checkbox-box:after {
      top: .125em;
      left: .0625em;
      width: .8125em;
      height: .4375em;
    }

    /* Checkbox color presets */
    &.mbsc-checkbox-primary.mbsc-checkbox {
      input:checked + .mbsc-checkbox-box {
        background: $mbsc-material-primary;
        border-color: $mbsc-material-primary;
      }
    }

    &.mbsc-checkbox-secondary.mbsc-checkbox {
      input:checked .mbsc-checkbox-box {
        background: $mbsc-material-secondary;
        border-color: $mbsc-material-secondary;
      }
    }

    &.mbsc-checkbox-success.mbsc-checkbox {
      input:checked + .mbsc-checkbox-box {
        background: $mbsc-material-success;
        border-color: $mbsc-material-success;
      }
    }

    &.mbsc-checkbox-danger.mbsc-checkbox {
      input:checked + .mbsc-checkbox-box {
        background: $mbsc-material-danger;
        border-color: $mbsc-material-danger;
      }
    }

    &.mbsc-checkbox-warning.mbsc-checkbox {
      input:checked + .mbsc-checkbox-box {
        background: $mbsc-material-warning;
        border-color: $mbsc-material-warning;
      }
    }

    &.mbsc-checkbox-info.mbsc-checkbox {
      input:checked + .mbsc-checkbox-box {
        background: $mbsc-material-info;
        border-color: $mbsc-material-info;
      }
    }

    /* Radio */
    .mbsc-radio-box:after {
      width: .625em;
      height: .625em;
      margin-top: -.3125em;
      margin-left: -.3125em;
      border-radius: .625em;
    }

    /* Radio color presets */
    &.mbsc-radio-primary.mbsc-radio input:checked {
      + .mbsc-radio-box {
        border-color: $mbsc-material-primary;
      }

      + .mbsc-radio-box:after {
        background: $mbsc-material-primary;
      }
    }

    &.mbsc-radio-secondary.mbsc-radio input:checked {
      + .mbsc-radio-box {
        border-color: $mbsc-material-secondary;
      }

      + .mbsc-radio-box:after {
        background: $mbsc-material-secondary;
      }
    }

    &.mbsc-radio-success.mbsc-radio input:checked {
      + .mbsc-radio-box {
        border-color: $mbsc-material-success;
      }

      + .mbsc-radio-box:after {
        background: $mbsc-material-success;
      }
    }

    &.mbsc-radio-danger.mbsc-radio input:checked {
      + .mbsc-radio-box {
        border-color: $mbsc-material-danger;
      }

      + .mbsc-radio-box:after {
        background: $mbsc-material-danger;
      }
    }

    &.mbsc-radio-warning.mbsc-radio input:checked {
      + .mbsc-radio-box {
        border-color: $mbsc-material-warning;
      }

      + .mbsc-radio-box:after {
        background: $mbsc-material-warning;
      }
    }

    &.mbsc-radio-info.mbsc-radio input:checked {
      + .mbsc-radio-box {
        border-color: $mbsc-material-info;
      }

      + .mbsc-radio-box:after {
        background: $mbsc-material-info;
      }
    }

    /* Button */
    &.mbsc-btn {
      margin: .5em;
      padding: .7143em;
      border-radius: .2143em;
      font-size: .875em;
      font-weight: bold;
      text-transform: uppercase;
      transition: box-shadow .2s ease-out, background-color .2s ease-out;
    }

    .mbsc-btn-ic {
      padding: 0 .5em 0 0;
    }

    .mbsc-btn-icon-only .mbsc-btn-ic {
      padding: 0 .5em;
    }

    .mbsc-btn-group,
    .mbsc-btn-group-justified {
      margin: .5em;
    }

    .mbsc-btn-group-block {
      margin: .5em 1em;
    }

    &.mbsc-btn:disabled {
      box-shadow: none;
    }

    /* Button color presets */
    &.mbsc-btn-primary.mbsc-btn {
      background: $mbsc-material-primary;
      color: $mbsc-material-light;

      &.mbsc-active {
        background: darken($mbsc-material-primary, 10%);
      }

      &.mbsc-btn-flat {
        color: $mbsc-material-primary;

        &.mbsc-active {
          background: rgba($mbsc-material-primary, .3);
        }
      }
    }

    &.mbsc-btn-secondary.mbsc-btn {
      background: $mbsc-material-secondary;
      color: $mbsc-material-light;

      &.mbsc-active {
        background: darken($mbsc-material-secondary, 10%);
      }

      &.mbsc-btn-flat {
        color: $mbsc-material-secondary;

        &.mbsc-active {
          background: rgba($mbsc-material-secondary, .3);
        }
      }
    }

    &.mbsc-btn-success.mbsc-btn {
      background: $mbsc-material-success;
      color: $mbsc-material-light;

      &.mbsc-active {
        background: darken($mbsc-material-success, 10%);
      }

      &.mbsc-btn-flat {
        color: $mbsc-material-success;

        &.mbsc-active {
          background: rgba($mbsc-material-success, .3);
        }
      }
    }

    &.mbsc-btn-danger.mbsc-btn {
      background: $mbsc-material-danger;
      color: $mbsc-material-light;

      &.mbsc-active {
        background: darken($mbsc-material-danger, 10%);
      }

      &.mbsc-btn-flat {
        color: $mbsc-material-danger;

        &.mbsc-active {
          background: rgba($mbsc-material-danger, .3);
        }
      }
    }

    &.mbsc-btn-warning.mbsc-btn {
      background: $mbsc-material-warning;
      color: $mbsc-material-light;

      &.mbsc-active {
        background: darken($mbsc-material-warning, 10%);
      }

      &.mbsc-btn-flat {
        color: $mbsc-material-warning;

        &.mbsc-active {
          background: rgba($mbsc-material-warning, .3);
        }
      }
    }

    &.mbsc-btn-info.mbsc-btn {
      background: $mbsc-material-info;
      color: $mbsc-material-light;

      &.mbsc-active {
        background: darken($mbsc-material-info, 10%);
      }

      &.mbsc-btn-flat {
        color: $mbsc-material-info;

        &.mbsc-active {
          background: rgba($mbsc-material-info, .3);
        }
      }
    }

    &.mbsc-btn-light.mbsc-btn {
      background: $mbsc-material-light;

      &.mbsc-active {
        background: darken($mbsc-material-light, 10%);
      }

      &.mbsc-btn-flat {
        color: darken($mbsc-material-light, 25%);

        &.mbsc-active {
          background: rgba($mbsc-material-light, .25);
        }
      }
    }

    &.mbsc-btn-dark.mbsc-btn {
      background: $mbsc-material-dark;

      &.mbsc-active {
        background: darken($mbsc-material-dark, 10%);
      }

      &.mbsc-btn-flat {
        color: $mbsc-material-dark;

        &.mbsc-active {
          background: rgba($mbsc-material-dark, .3);
        }
      }
    }

    /* Outline buttons */
    &.mbsc-btn-outline.mbsc-btn {
      box-shadow: none;
    }

    /* Outline buttons */
    &.mbsc-btn-outline.mbsc-btn {
      &.mbsc-btn-primary {
        border-color: $mbsc-material-primary;
        color: $mbsc-material-primary;

        &.mbsc-active {
          background: $mbsc-material-primary;
          color: $mbsc-material-light;
        }
      }

      &.mbsc-btn-secondary {
        border-color: $mbsc-material-secondary;
        color: $mbsc-material-secondary;

        &.mbsc-active {
          background: $mbsc-material-secondary;
          color: $mbsc-material-light;
        }
      }

      &.mbsc-btn-success {
        border-color: $mbsc-material-success;
        color: $mbsc-material-success;

        &.mbsc-active {
          background: $mbsc-material-success;
          color: $mbsc-material-light;
        }
      }

      &.mbsc-btn-danger {
        border-color: $mbsc-material-danger;
        color: $mbsc-material-danger;

        &.mbsc-active {
          background: $mbsc-material-danger;
          color: $mbsc-material-light;
        }
      }

      &.mbsc-btn-warning {
        border-color: $mbsc-material-warning;
        color: $mbsc-material-warning;

        &.mbsc-active {
          background: $mbsc-material-warning;
          color: $mbsc-material-light;
        }
      }

      &.mbsc-btn-info {
        border-color: $mbsc-material-info;
        color: $mbsc-material-info;

        &.mbsc-active {
          background: $mbsc-material-info;
          color: $mbsc-material-light;
        }
      }

      &.mbsc-btn-light {
        border-color: darken($mbsc-material-light, 25%);
        color: darken($mbsc-material-light, 25%);

        &.mbsc-active {
          background: darken($mbsc-material-light, 25%);
          color: darken($mbsc-material-light, 25%);
        }
      }

      &.mbsc-btn-dark {
        border-color: $mbsc-material-dark;
        color: $mbsc-material-dark;

        &.mbsc-active {
          background: $mbsc-material-dark;
          color: $mbsc-material-light;
        }
      }
    }

    /* button hover style */
    &.mbsc-no-touch {
      &.mbsc-btn-outline.mbsc-btn:not(:disabled):hover {
        box-shadow: none;
      }

      &.mbsc-btn-primary.mbsc-btn {
        &:not(:disabled):hover {
          background: darken($mbsc-material-primary, 10%);

          &.mbsc-btn-flat {
            background: lighten($mbsc-material-primary, 25%);
          }
        }
      }

      &.mbsc-btn-secondary.mbsc-btn {
        &:not(:disabled):hover {
          background: darken($mbsc-material-secondary, 10%);

          &.mbsc-btn-flat {
            background: lighten($mbsc-material-secondary, 25%);
          }
        }
      }

      &.mbsc-btn-success.mbsc-btn {
        &:not(:disabled):hover {
          background: darken($mbsc-material-success, 10%);

          &.mbsc-btn-flat {
            background: lighten($mbsc-material-success, 25%);
          }
        }
      }

      &.mbsc-btn-danger.mbsc-btn {
        &:not(:disabled):hover {
          background: darken($mbsc-material-danger, 10%);

          &.mbsc-btn-flat {
            background: lighten($mbsc-material-danger, 25%);
          }
        }
      }

      &.mbsc-btn-warning.mbsc-btn {
        &:not(:disabled):hover {
          background: darken($mbsc-material-warning, 10%);

          &.mbsc-btn-flat {
            background: lighten($mbsc-material-warning, 25%);
          }
        }
      }

      &.mbsc-btn-info.mbsc-btn {
        &:not(:disabled):hover {
          background: darken($mbsc-material-info, 10%);

          &.mbsc-btn-flat {
            background: lighten($mbsc-material-info, 25%);
          }
        }
      }

      &.mbsc-btn-light.mbsc-btn {
        &:not(:disabled):hover {
          background: darken($mbsc-material-light, 10%);

          &.mbsc-btn-flat {
            background: lighten($mbsc-material-light, 25%);
          }
        }
      }

      &.mbsc-btn-dark.mbsc-btn {
        &.mbsc-btn:not(:disabled):hover {
          background: darken($mbsc-material-dark, 10%);

          &.mbsc-btn-flat {
            background: lighten($mbsc-material-dark, 25%);
          }
        }
      }

      &.mbsc-btn-outline.mbsc-btn {
        &:not(:disabled):not(.mbsc-active):hover {
          background: transparent;
        }
      }
    }

    &.mbsc-active.mbsc-control {
      opacity: 1;
    }

    /* Switch */
    &.mbsc-ltr.mbsc-switch {
      padding: .9375em 4em .9375em 1em;
      line-height: 1.25em;
    }

    &.mbsc-rtl.mbsc-switch {
      padding: .9375em 1em .9375em 4em;
    }

    .mbsc-switch-track {
      right: 1.25em;
      width: 1.75em;
      height: .875em;
      padding: 0 .25em;
      margin-top: -.4375em;
      border-radius: 1.25em;
    }

    &.mbsc-rtl .mbsc-switch-track {
      right: auto;
      left: 1.25em;
    }

    &.mbsc-switch .mbsc-switch-handle {
      z-index: auto;
      top: .375em;
      left: .375em;
      width: 1.25em;
      height: 1.25em;
      margin: 0;
      border: 0;
      border-radius: 1.25em;
    }

    &.mbsc-rtl.mbsc-switch .mbsc-switch-handle {
      left: auto;
      right: .375em;
    }

    .mbsc-switch-handle:before {
      top: -.625em;
      left: -.625em;
      width: 2.5em;
      height: 2.5em;
    }

    .mbsc-switch-handle,
    .mbsc-active .mbsc-switch-handle {
      -webkit-transform: none;
      transform: none;
    }

    /* Switch color presets */
    &.mbsc-switch.mbsc-switch-primary input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-material-primary, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-material-primary;
      }
    }

    &.mbsc-switch.mbsc-switch-secondary input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-material-secondary, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-material-secondary;
      }
    }

    &.mbsc-switch.mbsc-switch-success input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-material-success, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-material-success;
      }
    }

    &.mbsc-switch.mbsc-switch-danger input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-material-danger, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-material-danger;
      }
    }

    &.mbsc-switch.mbsc-switch-warning input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-material-warning, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-material-warning;
      }
    }

    &.mbsc-switch.mbsc-switch-info input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-material-info, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-material-info;
      }
    }

    /* Segmented control and Stepper */
    &.mbsc-segmented {
      padding: .75em;
    }

    .mbsc-segmented-content {
      height: 2.2857145em;
      margin: 0 -.07142857em;
      line-height: 2.2857145em;
      padding: 0 .428571em;
      -webkit-backface-visibility: hidden;
      /* fix android 4.1 flickering */
    }

    &.mbsc-ltr .mbsc-segmented-item:first-child .mbsc-segmented-content,
    &.mbsc-ltr .mbsc-stepper-minus .mbsc-segmented-content,
    &.mbsc-rtl .mbsc-stepper-plus .mbsc-segmented-content,
    &.mbsc-rtl .mbsc-segmented-item:last-child .mbsc-segmented-content {
      border-top-left-radius: .214286em;
      border-bottom-left-radius: .214286em;
    }

    &.mbsc-ltr .mbsc-stepper-plus .mbsc-segmented-content,
    &.mbsc-ltr .mbsc-segmented-item:last-child .mbsc-segmented-content,
    &.mbsc-rtl .mbsc-segmented-item:first-child .mbsc-segmented-content,
    &.mbsc-rtl .mbsc-stepper-minus .mbsc-segmented-content {
      border-top-right-radius: .214286em;
      border-bottom-right-radius: .214286em;
    }

    &.mbsc-stepper-cont {
      padding: 1.75em 12.875em 1.75em 1em;
    }

    &.mbsc-rtl.mbsc-stepper-cont {
      padding: 1.75em 1em 1.75em 12.875em;
    }

    .mbsc-stepper {
      margin-top: -1.125em;
    }

    .mbsc-stepper .mbsc-segmented-content {
      border-left: 0;
      border-right: 0;
    }

    .mbsc-stepper-control .mbsc-segmented-content {
      border: 0;
      height: 2.5714285em;
      line-height: 2.5714285em;
    }

    /* Segmented color presets */
    .mbsc-segmented-primary {
      &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
        background: $mbsc-material-primary;
      }
    }

    .mbsc-segmented-secondary {
      .mbsc-segmented-content {
        border-color: $mbsc-material-secondary;
        color: $mbsc-material-secondary;
      }

      &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
        background: $mbsc-material-secondary;
      }
    }

    .mbsc-segmented-success {
      .mbsc-segmented-content {
        border-color: $mbsc-material-success;
        color: $mbsc-material-success;
      }

      &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
        background: $mbsc-material-success;
      }
    }

    .mbsc-segmented-danger {
      .mbsc-segmented-content {
        border-color: $mbsc-material-danger;
        color: $mbsc-material-danger;
      }

      &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
        background: $mbsc-material-danger;
      }
    }

    .mbsc-segmented-warning {
      .mbsc-segmented-content {
        border-color: $mbsc-material-warning;
        color: $mbsc-material-warning;
      }

      &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
        background: $mbsc-material-warning;
      }
    }

    .mbsc-segmented-info {
      .mbsc-segmented-content {
        border-color: $mbsc-material-info;
        color: $mbsc-material-info;
      }

      &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
        background: $mbsc-material-info;
      }
    }

    /* Segmented color presets */
    &.mbsc-segmented {
      .mbsc-segmented-primary {
        .mbsc-segmented-content {
          border-color: $mbsc-material-primary;
          color: $mbsc-material-primary;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-material-primary;
        }
      }

      .mbsc-segmented-secondary {
        .mbsc-segmented-content {
          border-color: $mbsc-material-secondary;
          color: $mbsc-material-secondary;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-material-secondary;
        }
      }

      .mbsc-segmented-success {
        .mbsc-segmented-content {
          border-color: $mbsc-material-success;
          color: $mbsc-material-success;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-material-success;
        }
      }

      .mbsc-segmented-danger {
        .mbsc-segmented-content {
          border-color: $mbsc-material-danger;
          color: $mbsc-material-danger;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-material-danger;
        }
      }

      .mbsc-segmented-warning {
        .mbsc-segmented-content {
          border-color: $mbsc-material-warning;
          color: $mbsc-material-warning;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-material-warning;
        }
      }

      .mbsc-segmented-info {
        .mbsc-segmented-content {
          border-color: $mbsc-material-info;
          color: $mbsc-material-info;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-material-info;
        }
      }
    }

    /* Segmented color presets */
    &.mbsc-stepper-primary.mbsc-stepper-cont {
      .mbsc-stepper .mbsc-segmented-content {
        background: $mbsc-material-primary;
        border-color: $mbsc-material-primary;
      }
    }

    &.mbsc-stepper-secondary.mbsc-stepper-cont {
      .mbsc-stepper .mbsc-segmented-content {
        background: $mbsc-material-secondary;
        border-color: $mbsc-material-secondary;
      }
    }

    &.mbsc-stepper-success.mbsc-stepper-cont {
      .mbsc-stepper .mbsc-segmented-content {
        background: $mbsc-material-success;
        border-color: $mbsc-material-success;
      }
    }

    &.mbsc-stepper-danger.mbsc-stepper-cont {
      .mbsc-stepper .mbsc-segmented-content {
        background: $mbsc-material-danger;
        border-color: $mbsc-material-danger;
      }
    }

    &.mbsc-stepper-warning.mbsc-stepper-cont {
      .mbsc-stepper .mbsc-segmented-content {
        background: $mbsc-material-warning;
        border-color: $mbsc-material-warning;
      }
    }

    &.mbsc-stepper-info.mbsc-stepper-cont {
      .mbsc-stepper .mbsc-segmented-content {
        background: $mbsc-material-info;
        color: $mbsc-material-light;
        border-color: $mbsc-material-info;
      }
    }

    &.mbsc-no-touch {

      /* Segmented hover color presets */
      &.mbsc-stepper-primary.mbsc-stepper-cont .mbsc-segmented-item:hover .mbsc-segmented-content {
        background: rgba($mbsc-material-primary, .7);
      }

      &.mbsc-stepper-secondary.mbsc-stepper-cont .mbsc-segmented-item:hover .mbsc-segmented-content {
        background: rgba($mbsc-material-secondary, .7);
      }

      &.mbsc-stepper-success.mbsc-stepper-cont .mbsc-segmented-item:hover .mbsc-segmented-content {
        background: rgba($mbsc-material-success, .7);
      }

      &.mbsc-stepper-danger.mbsc-stepper-cont .mbsc-segmented-item:hover .mbsc-segmented-content {
        background: rgba($mbsc-material-danger, .7);
      }

      &.mbsc-stepper-warning.mbsc-stepper-cont .mbsc-segmented-item:hover .mbsc-segmented-content {
        background: rgba($mbsc-material-warning, .7);
      }

      &.mbsc-stepper-info.mbsc-stepper-cont .mbsc-segmented-item:hover .mbsc-segmented-content {
        background: rgba($mbsc-material-info, .7);
      }
    }
  }

  @include mbsc-material-forms('material', $mbsc-material-colors);
}





$mbsc-mobiscroll-accent: #4eccc4 !default;
$mbsc-mobiscroll-background: #f7f7f7 !default;
$mbsc-mobiscroll-text: #454545 !default;

$mbsc-mobiscroll-dark-accent: #4fccc4 !default;
$mbsc-mobiscroll-dark-background: #263238 !default;
$mbsc-mobiscroll-dark-text: #f7f7f7 !default;

/* Base colors */
$mbsc-mobiscroll-primary: #3f97f6 !default;
$mbsc-mobiscroll-secondary: #90979E !default;
$mbsc-mobiscroll-success: #43BE5F !default;
$mbsc-mobiscroll-danger: #f5504e !default;
$mbsc-mobiscroll-warning: #f8b042 !default;
$mbsc-mobiscroll-info: #5BB7C5 !default;
$mbsc-mobiscroll-light: darken(#fff, 10%) !default;
$mbsc-mobiscroll-dark: #47494A !default;

$mbsc-mobiscroll-colors: ( // Colors map
  'background': $mbsc-mobiscroll-background,
  'text': $mbsc-mobiscroll-text,
  'accent': $mbsc-mobiscroll-accent,
);
$mbsc-mobiscroll-dark-colors: ( // Colors map
  'background': $mbsc-mobiscroll-dark-background,
  'text': $mbsc-mobiscroll-dark-text,
  'accent': $mbsc-mobiscroll-dark-accent,
);

@function mbsc-mobiscroll-colors($params) {
  $background: map-get($params, 'background');
  $text: map-get($params, 'text');
  $accent: map-get($params, 'accent');

  $border: '';
  $empty-color: '';
  $input-disabled: '';
  $input-box: '';
  $tooltip: '';
  $empty-color: '';

  // Light background
  @if (lightness($background) > 50%) {
    $border: darken($background, 17%);
    $empty-color: lighten($text, 20%);
    $input-disabled: darken($background, 13%);
    $input-box: darken($background, 10%);
    $tooltip: darken($background, 4%);
  }

  // Dark background
  @else {
    $border: lighten($background, 17%);
    $empty-color: $text;
    $input-disabled: lighten($background, 17%);
    $input-box: lighten($background, 10%);
    $tooltip: $background;
  }

  @return ('border': $border,
  'empty-color': $empty-color,
  'input-disabled': $input-disabled,
  'input-box': $input-box,
  'tooltip': $tooltip,
  /* static colors */
  'textarea': #1f1f1f,
  'notification': #787878,
  'white-text': #ffffff,
  'error': #de3226,
  'dark-text': #000);
}

@mixin mbsc-mobiscroll-common($theme, $params) {
  @include exports("common.#{$theme}.colors") {
    $colors: mbsc-mobiscroll-colors($params);
    $empty-color: map-get($colors, empty-color);

    .mbsc-#{$theme} {
      .mbsc-empty {
        color: $empty-color;
      }
    }
  }
}



@include exports("collapsible.mobiscroll") {
  .mbsc-mobiscroll .mbsc-collapsible {
    .mbsc-form-group-title {
      padding: 1em;
    }

    .mbsc-collapsible-header {
      padding-right: 3em;
    }
  }
}






// Theme specific variables - inherited from global variables

// background
$mbsc-mobiscroll-page-background: $mbsc-page-background-light !default;
$mbsc-mobiscroll-dark-page-background: $mbsc-page-background-dark !default;

// text
$mbsc-mobiscroll-page-text: $mbsc-page-text-light !default;
$mbsc-mobiscroll-dark-page-text: $mbsc-page-text-dark !default;

// add variables to color maps
$mbsc-mobiscroll-colors: map-merge($mbsc-mobiscroll-colors, (
  'page-background': $mbsc-mobiscroll-page-background,
  'page-text': $mbsc-mobiscroll-page-text,
));
$mbsc-mobiscroll-dark-colors: map-merge($mbsc-mobiscroll-dark-colors, (
  'page-background': $mbsc-mobiscroll-dark-page-background,
  'page-text': $mbsc-mobiscroll-dark-page-text,
));

@mixin mbsc-mobiscroll-page($theme, $params) {
  @include exports("page.#{$theme}.colors") {
    @include mbsc-mobiscroll-common($theme, $params);

    $text: map-get($params, 'text');
    $accent: map-get($params, 'accent');
    $background: map-get($params, 'background');
    // get custom params
    $text-param: map-get($params, 'page-text');
    $background-param: map-get($params, 'page-background');
    // overwrite params with custom variables
    $background: if($background-param, $background-param, $background);
    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));

    .mbsc-#{$theme} {
      &.mbsc-page {
        background: $background;
        color: $text;
      }

      a {
        color: $accent;
      }
    }
  }
}



@include exports("page.mobiscroll") {
  .mbsc-mobiscroll {

    /* Note */
    .mbsc-note {
      border-radius: .1875em;
    }

    .mbsc-note,
    .mbsc-note-primary {
      color: darken($mbsc-mobiscroll-primary, 30%);
      background-color: lighten($mbsc-mobiscroll-primary, 20%);
    }

    .mbsc-note-secondary {
      color: darken($mbsc-mobiscroll-secondary, 30%);
      background-color: lighten($mbsc-mobiscroll-secondary, 20%);
    }

    .mbsc-note-success {
      color: darken($mbsc-mobiscroll-success, 30%);
      background-color: lighten($mbsc-mobiscroll-success, 20%);
    }

    .mbsc-note-danger {
      color: darken($mbsc-mobiscroll-danger, 30%);
      background-color: lighten($mbsc-mobiscroll-danger, 20%);
    }

    .mbsc-note-warning {
      color: darken($mbsc-mobiscroll-warning, 25%);
      background-color: lighten($mbsc-mobiscroll-warning, 20%);
    }

    .mbsc-note-info {
      color: darken($mbsc-mobiscroll-info, 30%);
      background-color: lighten($mbsc-mobiscroll-info, 20%);
    }

    .mbsc-note-light {
      color: darken($mbsc-mobiscroll-light, 60%);
      background-color: darken($mbsc-mobiscroll-light, 5%);
    }

    .mbsc-note-dark {
      color: darken($mbsc-mobiscroll-dark, 30%);
      background-color: lighten($mbsc-mobiscroll-dark, 40%);
    }
  }

  @include mbsc-mobiscroll-page(mobiscroll, $mbsc-mobiscroll-colors);
}





// Theme specific variables - inherited from global variables

// Background
$mbsc-mobiscroll-input-background: $mbsc-input-background-light !default;
$mbsc-mobiscroll-dark-input-background: $mbsc-input-background-dark !default;
// Text
$mbsc-mobiscroll-input-text: $mbsc-input-text-light !default;
$mbsc-mobiscroll-dark-input-text: $mbsc-input-text-dark !default;
// Accent
$mbsc-mobiscroll-input-accent: $mbsc-input-accent-light !default;
$mbsc-mobiscroll-dark-input-accent: $mbsc-input-accent-dark !default;
// Error
$mbsc-mobiscroll-input-error: $mbsc-input-error-light !default;
$mbsc-mobiscroll-dark-input-error: $mbsc-input-error-dark !default;

$mbsc-mobiscroll-colors: map-merge($mbsc-mobiscroll-colors, (
  'input-background': $mbsc-mobiscroll-input-background,
  'input-text': $mbsc-mobiscroll-input-text,
  'input-accent': $mbsc-mobiscroll-input-accent,
  'input-error': $mbsc-mobiscroll-input-error,
));
$mbsc-mobiscroll-dark-colors: map-merge($mbsc-mobiscroll-dark-colors, (
  'input-background': $mbsc-mobiscroll-dark-input-background,
  'input-text': $mbsc-mobiscroll-dark-input-text,
  'input-accent': $mbsc-mobiscroll-dark-input-accent,
  'input-error': $mbsc-mobiscroll-dark-input-error,
));

@mixin mbsc-mobiscroll-input($theme, $params) {
  @include exports("input.#{$theme}.colors") {

    $background: map-get($params, 'background');
    $accent: map-get($params, 'accent');
    $text: map-get($params, 'text');
    // get custom params
    $input-background-param: map-get($params, 'input-background');
    $input-text-param: map-get($params, 'input-text');
    $input-accent-param: map-get($params, 'input-accent');
    $input-error-param: map-get($params, 'input-error');

    $text: if($input-text-param, $input-text-param, $text);
    $accent: if($input-accent-param, $input-accent-param, $accent);

    $input-box: '';
    @if (lightness($background) > 50%) {
      $input-box: darken($background, 10%);
    }
    @else {
      $input-box: lighten($background, 10%);
    }


    $colors: mbsc-mobiscroll-colors($params);
    $error: map-get($colors, error);
    $white-text: map-get($colors, 'white-text');
    $input-icon: lighten($text, 20%);
    $color-input: darken($text, 15%);

    $input-box: if($input-background-param, $input-background-param, $input-box);
    $error: if($input-error-param, $input-error-param, $error);

    .mbsc-#{$theme} {

      /* Textbox */
      &.mbsc-input .mbsc-control {
        border-bottom: 1px solid $input-icon;
        color: $color-input;
      }

      &.mbsc-input .mbsc-control:focus,
      &.mbsc-input select:focus ~ input .mbsc-input textarea:focus {
        border-color: $accent;
      }

      .mbsc-input-ic {
        color: $input-icon;
      }

      /* Box Input */
      &.mbsc-input-box {
        &.mbsc-input .mbsc-input-wrap {
          background: $input-box;
        }
      }

      /* Outline Input */
      &.mbsc-input-outline {

        &.mbsc-input .mbsc-control {
          border: 1px solid $input-icon;
        }

        &.mbsc-input .mbsc-label {
          background: $background;
        }

        &.mbsc-label-inline.mbsc-input .mbsc-label,
        &.mbsc-label-floating:not(.mbsc-label-floating-active).mbsc-input .mbsc-label {
          background: none;
        }

        &.mbsc-input .mbsc-control:focus,
        &.mbsc-input select:focus ~ input,
        &.mbsc-err input {
          border-color: $accent;
        }

        &.mbsc-input textarea:focus {
          border-color: $accent;
        }
      }

      &.mbsc-input.mbsc-err input,
      &.mbsc-input.mbsc-err textarea {
        border-color: $error;
      }
    }
  }
}



@include exports("input.mobiscroll") {
  .mbsc-mobiscroll {

    /* Textbox */
    &.mbsc-input input,
    &.mbsc-input textarea,
    &.mbsc-color-input {
      height: 2.125em;
      padding: 0 0 1px 0;
      background: transparent;
      font-size: 1em;
    }

    &.mbsc-input input:disabled,
    &.mbsc-input textarea:disabled,
    &.mbsc-input input:disabled ~ .mbsc-color-input,
    &.mbsc-input .mbsc-control:disabled ~ input,
    &.mbsc-input .mbsc-control:disabled ~ .mbsc-select-ic {
      opacity: .4;
    }

    /* Input */
    &.mbsc-input {
      margin: 1.5em 1em;

      .mbsc-label ~ .mbsc-input-wrap {
        padding-top: .875em;

        .mbsc-input-ic {
          top: .9375em;
        }
      }
    }

    .mbsc-input-ic {
      top: .0625em;
      margin: -2px 0 0 0;
    }

    /* Textarea */
    &.mbsc-input textarea {
      padding-top: .25em;
    }

    /* Select */
    .mbsc-select-ic {
      position: absolute;
      display: block;
      height: 1.25em;
      width: 1.25em;
      top: .5625em;
      text-align: center;
    }

    &.mbsc-ltr .mbsc-select-ic {
      left: auto;
      right: .6875em;
    }

    &.mbsc-rtl .mbsc-select-ic {
      right: auto;
      left: .6875em;
    }

    .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic {
      top: 1.4375em;
    }

    &.mbsc-ltr.mbsc-select {
      input {
        padding-right: 1.25em;
      }

      &.mbsc-ic-right input {
        padding-right: 3em;
      }

      .mbsc-input-wrap .mbsc-select-ic {
        left: auto;
        right: 0;
      }

      &.mbsc-ic-right .mbsc-input-wrap .mbsc-select-ic {
        right: 1.75em;
      }
    }

    &.mbsc-rtl.mbsc-select {
      input {
        padding-left: 1.25em;
      }

      &.mbsc-ic-right input {
        padding-left: 3em;
      }

      .mbsc-input-wrap .mbsc-select-ic {
        right: auto;
        left: 0;
      }

      &.mbsc-ic-right .mbsc-input-wrap .mbsc-select-ic {
        left: 1.75em;
      }
    }

    /* Select inline */
    .mbsc-select-inline .mbsc-select-ic {
      display: none;
    }

    /* LTR left icon */
    &.mbsc-ltr.mbsc-input.mbsc-ic-left {

      input,
      textarea {
        padding-left: 1.625em;
      }

      .mbsc-left-ic {
        right: auto;
        left: -.375em
      }

      .mbsc-label,
      .mbsc-err-msg {
        left: 2.166667em;
      }
    }

    /* LTR right icon */
    &.mbsc-ltr.mbsc-input.mbsc-ic-right {

      input,
      textarea {
        padding-right: 1.625em;
      }

      .mbsc-right-ic {
        left: auto;
        right: -.375em
      }
    }

    /* RTL left icon */
    &.mbsc-rtl.mbsc-input.mbsc-ic-left {

      input,
      textarea {
        padding-right: 1.625em;
      }

      .mbsc-left-ic {
        left: auto;
        right: -.375em
      }

      .mbsc-label,
      .mbsc-err-msg {
        right: 2.166667em;
      }
    }

    /* RTL right icon */
    &.mbsc-rtl.mbsc-input.mbsc-ic-right {

      input,
      textarea {
        padding-left: 1.625em;
      }

      .mbsc-right-ic {
        right: auto;
        left: -.375em
      }
    }

    &.mbsc-input .mbsc-label {
      position: absolute;
      top: 0;
      font-size: .75em;
    }

    /* Inline labels */
    &.mbsc-label-inline.mbsc-input {
      .mbsc-label {
        line-height: 2em;
      }

      .mbsc-label + .mbsc-input-wrap {
        padding-top: 0;

        .mbsc-input-ic {
          top: .0625em;
        }
      }

      &.mbsc-select .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic {
        top: .5625em;
      }
    }

    /* Floating labels */
    &.mbsc-label-floating.mbsc-input {
      .mbsc-label {
        font-size: 1em;
        line-height: 2em;
        top: .875em;
      }

      &.mbsc-label-floating-active .mbsc-label {
        -webkit-transform: translateY(-1.125em) scale(.75);
        transform: translateY(-1.125em) scale(.75);
      }
    }

    &.mbsc-ltr.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
      left: 1.625em;
    }

    &.mbsc-rtl.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
      right: 1.625em;
    }

    /* Box Input */
    &.mbsc-input-box {
      &.mbsc-input .mbsc-input-wrap {
        border-radius: 4px 4px 0 0;
      }

      &.mbsc-input input,
      &.mbsc-input .mbsc-color-input {
        height: 2.25em;
        padding: .0625em 1em;
        border-radius: 4px 4px 0 0;
      }

      &.mbsc-input textarea {
        padding: .375em 1em .0625em 1em;
        height: 2.25em;
      }

      &.mbsc-input .mbsc-label ~ .mbsc-input-wrap {
        padding-top: 0;

        input,
        .mbsc-color-input {
          padding-top: 1.25em;
          height: 3.5em;
        }

        textarea:focus {
          padding-bottom: 0;
        }

        .mbsc-input-ic {
          top: .875em;
        }
      }

      .mbsc-input-ic {
        top: .25em;
      }

      &.mbsc-input .mbsc-label {
        padding: .666667em 0;
        z-index: 1;
        line-height: normal;
      }

      &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap {
        padding-top: 1.625em;

        textarea {
          height: 1.866667em;
          padding-top: 0;
        }
      }

      &.mbsc-select {
        .mbsc-input-wrap .mbsc-select-ic {
          top: .625em;
        }

        .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic {
          top: 1.375em;
        }
      }

      /* Inline labels */
      &.mbsc-label-inline {
        .mbsc-label {
          padding-top: .125em;
          padding-bottom: .125em;
          line-height: 2em;
        }

        .mbsc-label ~ .mbsc-input-wrap {
          padding-top: 0;

          input,
          .mbsc-color-input {
            height: 2.25em;
            padding-top: .0625em;
          }
        }

        .mbsc-label ~ .mbsc-input-wrap .mbsc-input-ic {
          top: .1875em;
        }

        &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap {
          padding-top: .375em;
        }

        &.mbsc-select .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic {
          top: .625em;
        }
      }

      /* Floating labels */
      &.mbsc-label-floating {
        .mbsc-label {
          top: .125em;
          line-height: 2em;
        }

        &.mbsc-label-floating-active .mbsc-label {
          line-height: normal;
          -webkit-transform: translateY(-.125em) scale(.75);
          transform: translateY(-.125em) scale(.75);
        }
      }
    }

    &.mbsc-ltr.mbsc-input-box {
      .mbsc-err-msg {
        left: 1.333334em;
      }

      .mbsc-label {
        left: 1.333334em;
        right: auto;
      }

      &.mbsc-ic-left {
        .mbsc-err-msg {
          left: 4em;
        }

        .mbsc-label {
          left: 4em;
        }

        .mbsc-left-ic {
          left: .5em;
        }

        input,
        textarea {
          padding-left: 3em;
        }
      }

      &.mbsc-ic-right {

        input,
        textarea {
          padding-right: 3em;
        }

        .mbsc-right-ic {
          right: .5em;
        }

        .mbsc-input-wrap .mbsc-select-ic {
          right: 2em;
        }
      }

      &.mbsc-select {
        input {
          padding-right: 2em;
        }

        .mbsc-input-wrap .mbsc-select-ic {
          right: .6875em;
        }

        &.mbsc-ic-right {
          input {
            padding-right: 4em;
          }

          .mbsc-input-wrap .mbsc-select-ic {
            right: 2.75em;
          }
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input .mbsc-label {
        left: 1em;
      }

      &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
        left: 3em;
      }
    }

    &.mbsc-rtl.mbsc-input-box {
      .mbsc-err-msg {
        right: 1.333334em;
      }

      .mbsc-label {
        right: 1.333334em;
        left: auto;
      }

      &.mbsc-ic-left {
        .mbsc-err-msg {
          right: 4em;
        }

        .mbsc-label {
          right: 4em;
        }

        .mbsc-left-ic {
          right: .5em;
        }

        input,
        textarea {
          padding-right: 3em;
        }
      }

      &.mbsc-ic-right {

        input,
        textarea {
          padding-left: 3em;
        }

        .mbsc-right-ic {
          left: .5em;
        }

        .mbsc-input-wrap .mbsc-select-ic {
          left: 2em;
        }
      }

      &.mbsc-select {
        input {
          padding-left: 2em;
        }

        .mbsc-input-wrap .mbsc-select-ic {
          left: .6875em;
        }

        &.mbsc-ic-right {
          input {
            padding-left: 4em;
          }

          .mbsc-input-wrap .mbsc-select-ic {
            left: 2.75em;
          }
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input .mbsc-label {
        right: 1em;
      }

      &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
        right: 3em;
      }
    }

    /* Outline Input */
    &.mbsc-input-outline {

      &.mbsc-input input,
      &.mbsc-input textarea,
      &.mbsc-input .mbsc-color-input {
        border-radius: 4px;
        height: 3.375em;
      }

      &.mbsc-input input,
      &.mbsc-input .mbsc-color-input {
        padding: .0625em 1em;
      }

      &.mbsc-input textarea {
        padding: .875em 1em .4375em 1em;
      }

      &.mbsc-input .mbsc-label {
        top: -.166667em;
        z-index: 1;
        padding: 0 .333334em;
      }

      .mbsc-input-ic {
        top: .8125em;
      }

      &.mbsc-input .mbsc-label ~ .mbsc-input-wrap {
        padding-top: .25em;

        .mbsc-input-ic {
          top: 1.0625em;
        }
      }

      &.mbsc-input input:focus,
      &.mbsc-input select:focus ~ input,
      &.mbsc-err input {
        padding-top: 0;
        padding-bottom: 0;
      }

      &.mbsc-err input,
      &.mbsc-err textarea {
        border-color: #de3226;
      }

      &.mbsc-select {
        .mbsc-input-wrap .mbsc-select-ic {
          top: 1.3125em;
        }

        .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic {
          top: 1.5625em;
        }
      }

      /* Inline labels */
      &.mbsc-label-inline {
        .mbsc-label {
          line-height: 3.375em;
        }

        .mbsc-label ~ .mbsc-input-wrap {
          padding-top: 0;
        }

        .mbsc-label ~ .mbsc-input-wrap .mbsc-input-ic {
          top: .8125em;
        }

        &.mbsc-select .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic {
          top: 1.3125em;
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input {
        .mbsc-label {
          top: .9375em;
          padding: 0 .25em;
        }

        &.mbsc-label-floating-active .mbsc-label {
          -webkit-transform: translateY(-1.375em) scale(.75);
          transform: translateY(-1.375em) scale(.75);
        }
      }
    }

    &.mbsc-ltr.mbsc-input-outline {
      .mbsc-err-msg {
        left: 1.416667em;
      }

      .mbsc-label {
        left: 1.083334em;
        right: auto;
      }

      &.mbsc-ic-left {
        .mbsc-err-msg {
          left: 4.083334em;
        }

        .mbsc-label {
          left: 3.75em;
        }

        .mbsc-left-ic {
          left: .5em;
        }

        input,
        textarea {
          padding-left: 3em;
        }
      }

      &.mbsc-ic-right {

        input,
        textarea {
          padding-right: 3em;
        }

        .mbsc-right-ic {
          right: .5em;
        }
      }

      &.mbsc-select {
        input {
          padding-right: 2em;
        }

        .mbsc-input-wrap .mbsc-select-ic {
          right: .6875em;
        }

        &.mbsc-ic-right {
          input {
            padding-right: 4em;
          }

          .mbsc-input-wrap .mbsc-select-ic {
            right: 3em;
          }
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input .mbsc-label {
        left: .875em;
      }

      &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
        left: 2.875em;
      }
    }

    &.mbsc-rtl.mbsc-input-outline {
      .mbsc-err-msg {
        right: 1.416667em;
      }

      .mbsc-label {
        right: 1.083334em;
        left: auto;
      }

      &.mbsc-ic-left {
        .mbsc-err-msg {
          right: 4.083334em;
        }

        .mbsc-label {
          right: 3.75em;
        }

        .mbsc-left-ic {
          right: .5em;
        }

        input,
        textarea {
          padding-right: 3em;
        }
      }

      &.mbsc-ic-right {

        input,
        textarea {
          padding-left: 3em;
        }

        .mbsc-right-ic {
          left: .5em;
        }
      }

      &.mbsc-select {
        input {
          padding-left: 2em;
        }

        .mbsc-input-wrap .mbsc-select-ic {
          left: .6875em;
        }

        &.mbsc-ic-right {
          input {
            padding-left: 4em;
          }

          .mbsc-input-wrap .mbsc-select-ic {
            left: 3em;
          }
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input .mbsc-label {
        right: .875em;
      }

      &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
        right: 2.875em;
      }
    }
  }

  @include mbsc-mobiscroll-input(mobiscroll, $mbsc-mobiscroll-colors);
}








@mixin mbsc-mobiscroll-progress($theme, $params) {
  @include exports("progress.#{$theme}.colors") {

    $background: map-get($params, 'background');
    $accent: map-get($params, 'accent');
    $text: map-get($params, 'text');
    // derived colors
    $input-icon: lighten($text, 20%);

    $track: '';
    // Light background
    @if (lightness($background) > 50%) {
      $track: darken($background, 10%);
    }
    // Dark background
    @else {
      $track: lighten($background, 8%);
    }

    .mbsc-#{$theme} {
      &.mbsc-progress .mbsc-input-ic {
        color: $input-icon;
      }

      .mbsc-progress-track {
        background: $track;
      }

      .mbsc-progress-bar {
        background: $accent;
      }
    }
  }
}



@include exports("progress.mobiscroll") {
  .mbsc-mobiscroll {
    &.mbsc-progress {
      padding: 1em;
    }

    &.mbsc-progress .mbsc-label {
      font-size: .75em;
    }

    &.mbsc-progress .mbsc-input-ic {
      top: .0625em;
      margin: 0;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-right .mbsc-input-wrap {
      padding-left: 2.75em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-left .mbsc-input-wrap {
      padding-right: 2.75em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-left .mbsc-left-ic,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-right .mbsc-right-ic {
      right: auto;
      left: -.375em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-right .mbsc-right-ic,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-left .mbsc-left-ic {
      left: auto;
      right: -.375em;
    }

    .mbsc-progress-cont {
      padding: 1em 0;
    }

    .mbsc-progress-track {
      border-radius: 1em;
      height: .125em;
    }

    .mbsc-progress-value {
      width: 3.75em;
      font-size: .875em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-progress-value-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-progress-value-right .mbsc-input-wrap {
      padding-left: 3.5em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-progress-value-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-progress-value-left .mbsc-input-wrap {
      padding-right: 3.5em;
    }

    &.mbsc-ltr.mbsc-progress-value-left.mbsc-ic-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress-value-right.mbsc-ic-right .mbsc-input-wrap {
      padding-left: 5.5em;
    }

    &.mbsc-ltr.mbsc-progress-value-right.mbsc-ic-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress-value-left.mbsc-ic-left .mbsc-input-wrap {
      padding-right: 5.5em;
    }

    &.mbsc-ltr.mbsc-progress-value-left.mbsc-ic-left .mbsc-progress-value,
    &.mbsc-rtl.mbsc-progress-value-right.mbsc-ic-right .mbsc-progress-value {
      left: 2.25em;
      right: auto;
    }

    &.mbsc-ltr.mbsc-progress-value-right.mbsc-ic-right .mbsc-progress-value,
    &.mbsc-rtl.mbsc-progress-value-left.mbsc-ic-left .mbsc-progress-value {
      left: auto;
      right: 2.25em;
    }

    .mbsc-progress-primary .mbsc-progress-bar {
      background: $mbsc-mobiscroll-primary;
    }

    .mbsc-progress-secondary .mbsc-progress-bar {
      background: $mbsc-mobiscroll-secondary;
    }

    .mbsc-progress-success .mbsc-progress-bar {
      background: $mbsc-mobiscroll-success;
    }

    .mbsc-progress-danger .mbsc-progress-bar {
      background: $mbsc-mobiscroll-danger;
    }

    .mbsc-progress-warning .mbsc-progress-bar {
      background: $mbsc-mobiscroll-warning;
    }

    .mbsc-progress-info .mbsc-progress-bar {
      background: $mbsc-mobiscroll-info;
    }
  }

  @include mbsc-mobiscroll-progress(mobiscroll, (background: $mbsc-mobiscroll-background, text: $mbsc-mobiscroll-text, accent: $mbsc-mobiscroll-accent));
}






@mixin mbsc-mobiscroll-slider($theme, $params) {
  @include exports("slider.#{$theme}.colors") {

    @include mbsc-mobiscroll-page($theme, $params);
    @include mbsc-mobiscroll-progress($theme, $params);

    $background: map-get($params, background);
    $accent: map-get($params, accent);

    $colors: mbsc-mobiscroll-colors($params);
    $tooltip: map-get($colors, tooltip);

    .mbsc-#{$theme} {
      .mbsc-slider-step {
        background: $background;
      }

      .mbsc-slider-handle {
        background: $accent;
      }

      .mbsc-slider-tooltip {
        color: $tooltip;
        background-color: $accent;
      }
    }
  }
}



@include exports("slider.mobiscroll") {
  .mbsc-mobiscroll {
    &.mbsc-slider .mbsc-input-wrap {
      padding: 0 .5em;
    }

    .mbsc-slider-handle {
      top: 50%;
      width: 1em;
      height: 1em;
      border-radius: 1.125em;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transition: -webkit-transform .2s ease-in-out;
      transition: transform .2s ease-in-out;
    }

    .mbsc-slider-handle:focus,
    .mbsc-active .mbsc-slider-handle {
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
    }

    &.mbsc-slider input:disabled ~ .mbsc-progress-cont .mbsc-progress-track {
      opacity: .4;
    }

    &.mbsc-slider input:disabled ~ .mbsc-progress-cont .mbsc-slider-handle {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    .mbsc-slider-tooltip {
      top: -1.91666em;
      width: 2.33333333em;
      height: 2.33333333em;
      border-radius: 2em;
      margin-right: -1.1666em;
      line-height: 2.33333333em;
      text-align: center;
      font-size: .75em;
      z-index: 5;
      -webkit-transform: scale(.4) translate3d(0, 5em, 0);
      transform: scale(.4) translate3d(0, 5em, 0);
      -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
      transition: transform .2s ease-in-out, opacity .2s ease-in-out;
    }

    .mbsc-slider-handle:focus ~ .mbsc-slider-tooltip,
    .mbsc-active .mbsc-slider-tooltip {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0) scale(1);
      transform: translate3d(0, 0, 0) scale(1);
    }

    &.mbsc-slider-has-tooltip .mbsc-slider-handle:focus,
    &.mbsc-slider-has-tooltip .mbsc-active .mbsc-slider-handle {
      -webkit-transform: scale(.5);
      transform: scale(.5);
    }

    &.mbsc-slider-primary {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle,
      .mbsc-progress-bar {
        background: $mbsc-mobiscroll-primary;
      }
    }

    &.mbsc-slider-secondary {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle,
      .mbsc-progress-bar {
        background: $mbsc-mobiscroll-secondary;
      }
    }

    &.mbsc-slider-success {

      .mbsc-slider-tooltip,
      .mbsc-slider-handlem .mbsc-progress-bar {
        background: $mbsc-mobiscroll-success;
      }
    }

    &.mbsc-slider-danger {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle,
      .mbsc-progress-bar {
        background: $mbsc-mobiscroll-danger;
      }
    }

    &.mbsc-slider-warning {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle,
      .mbsc-progress-bar {
        background: $mbsc-mobiscroll-warning;
      }
    }

    &.mbsc-slider-info {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle,
      .mbsc-progress-bar {
        background: $mbsc-mobiscroll-info;
      }
    }
  }

  @include mbsc-mobiscroll-slider(mobiscroll, (background: $mbsc-mobiscroll-background, text: $mbsc-mobiscroll-text, accent: $mbsc-mobiscroll-accent));
}







@mixin mbsc-mobiscroll-rating($theme, $params) {
  @include exports("rating.#{$theme}.colors") {

    @include mbsc-mobiscroll-progress($theme, $params);

    $accent: map-get($params, accent);

    .mbsc-#{$theme}.mbsc-rating {
      .mbsc-progress-track {
        color: $accent;
      }
    }
  }
}



@include exports("rating.mobiscroll") {
  .mbsc-mobiscroll.mbsc-rating {
    .mbsc-label {
      padding-bottom: .5em;
    }

    input:disabled ~ .mbsc-progress-cont .mbsc-progress-track {
      opacity: .4;
    }

    &.mbsc-rating-primary .mbsc-progress-track {
      color: $mbsc-mobiscroll-primary;
    }

    &.mbsc-rating-secondary .mbsc-progress-track {
      color: $mbsc-mobiscroll-secondary;
    }

    &.mbsc-rating-success .mbsc-progress-track {
      color: $mbsc-mobiscroll-success;
    }

    &.mbsc-rating-danger .mbsc-progress-track {
      color: $mbsc-mobiscroll-danger;
    }

    &.mbsc-rating-warning .mbsc-progress-track {
      color: $mbsc-mobiscroll-warning;
    }

    &.mbsc-rating-info .mbsc-progress-track {
      color: $mbsc-mobiscroll-info;
    }
  }

  @include mbsc-mobiscroll-rating(mobiscroll, (background: $mbsc-mobiscroll-background, text: $mbsc-mobiscroll-text, accent: $mbsc-mobiscroll-accent));
}







// Theme specific variables - inherited from global variables

// Background
$mbsc-mobiscroll-frame-background: $mbsc-frame-background-light !default;
$mbsc-mobiscroll-dark-frame-background: $mbsc-frame-background-dark !default;
// Text
$mbsc-mobiscroll-frame-text: $mbsc-frame-text-light !default;
$mbsc-mobiscroll-dark-frame-text: $mbsc-frame-text-dark !default;
// Accent
$mbsc-mobiscroll-frame-accent: $mbsc-frame-accent-light !default;
$mbsc-mobiscroll-dark-frame-accent: $mbsc-frame-accent-dark !default;
// Overlay
$mbsc-mobiscroll-frame-overlay: $mbsc-frame-overlay-light !default;
$mbsc-mobiscroll-dark-frame-overlay: $mbsc-frame-overlay-dark !default;

$mbsc-mobiscroll-colors: map-merge($mbsc-mobiscroll-colors, (
  'frame-background': $mbsc-mobiscroll-frame-background,
  'frame-text': $mbsc-mobiscroll-frame-text,
  'frame-accent': $mbsc-mobiscroll-frame-accent,
  'frame-overlay': $mbsc-mobiscroll-frame-overlay,
));

$mbsc-mobiscroll-dark-colors: map-merge($mbsc-mobiscroll-dark-colors, (
  'frame-background': $mbsc-mobiscroll-dark-frame-background,
  'frame-text': $mbsc-mobiscroll-dark-frame-text,
  'frame-accent': $mbsc-mobiscroll-dark-frame-accent,
  'frame-overlay': $mbsc-mobiscroll-dark-frame-overlay,
));

@mixin mbsc-mobiscroll-frame($theme, $params) {
  @include exports("frame.#{$theme}.colors") {

    $background: map-get($params, 'background');
    $text: map-get($params, 'text');
    $accent: map-get($params, 'accent');

    $overlay-param: map-get($params, 'frame-overlay');
    $background-param: map-get($params, 'frame-background');
    $text-param: map-get($params, 'frame-text');
    $accent-param: map-get($params, 'frame-accent');

    $background: if($background-param, $background-param, $background);
    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
    $accent: if($accent-param, $accent-param, $accent);
    $overlay: if($overlay-param, $overlay-param, rgba(0, 0, 0, .7));

    .mbsc-#{$theme} {
      .mbsc-fr-overlay {
        background: $overlay;
      }

      .mbsc-fr-w {
        background: $background;
        color: $text;
      }

      .mbsc-fr-hdr,
      .mbsc-fr-btn {
        color: $accent;
      }

      .mbsc-fr-btn.mbsc-active,
      &.mbsc-no-touch .mbsc-fr-btn-e:not(.mbsc-disabled):hover {
        background: rgba($accent, .3);
      }

      .mbsc-fr-arr {
        background: $background;
      }
    }
  }
}



@include exports("frame.mobiscroll") {
  .mbsc-mobiscroll {
    .mbsc-fr-w {
      min-width: 16em;
      font-size: 16px;
    }

    .mbsc-fr-hdr {
      padding: 0 .6666em;
      padding-top: .6666em;
      font-size: .75em;
      text-transform: uppercase;
      min-height: 2em;
      line-height: 2em;
    }

    .mbsc-fr-btn-cont {
      display: block;
      overflow: hidden;
      text-align: right;
      padding: 0 .5em .5em .5em;
    }

    .mbsc-ltr .mbsc-fr-btn-cont {
      text-align: right;
    }

    .mbsc-rtl .mbsc-fr-btn-cont {
      text-align: left;
    }

    .mbsc-fr-btn-w {
      display: inline-block;
    }

    .mbsc-fr-btn {
      height: 2.5em;
      line-height: 2.5em;
      padding: 0 1em;
      text-transform: uppercase;
    }

    /* Display modes */
    &.mbsc-fr-center .mbsc-fr-w,
    &.mbsc-fr-bubble .mbsc-fr-w {
      border-radius: .25em;
    }

    &.mbsc-fr-no-overlay {
      .mbsc-fr-arr {
        box-shadow: 0 0 1em rgba(0, 0, 0, .2);
      }

      .mbsc-fr-w {
        box-shadow: 0 .125em 1em rgba(0, 0, 0, .3);
      }

      &.mbsc-fr-bubble .mbsc-fr-w {
        border-radius: .25em;
      }
    }
  }

  @include mbsc-mobiscroll-frame(mobiscroll, $mbsc-mobiscroll-colors);
}





@mixin mbsc-mobiscroll-popup($theme, $params) {
  @include exports("popup.#{$theme}.colors") {

    @include mbsc-mobiscroll-frame($theme, $params);
  }
}



@include exports("popup.mobiscroll") {
  @include mbsc-mobiscroll-popup(mobiscroll, (background: $mbsc-mobiscroll-background, text: $mbsc-mobiscroll-text, accent: $mbsc-mobiscroll-accent));
}





@mixin mbsc-mobiscroll-notifications($theme, $params) {
  @include exports("notifications.#{$theme}.colors") {

    @include mbsc-mobiscroll-popup($theme, $params);

    $background: map-get($params, background);

    $colors: mbsc-mobiscroll-colors($params);
    $notification: map-get($colors, notification);
    $white-text: map-get($colors, white-text);

    .mbsc-#{$theme} {

      &.mbsc-snackbar .mbsc-fr-w,
      &.mbsc-toast .mbsc-toast-msg {
        background: $notification;
        color: $white-text;
      }

      /* Snackbar and Toast color presets */
      &.mbsc-snackbar.mbsc-primary .mbsc-fr-w,
      &.mbsc-toast.mbsc-primary .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w,
      &.mbsc-toast.mbsc-secondary .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-success .mbsc-fr-w,
      &.mbsc-toast.mbsc-success .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-danger .mbsc-fr-w,
      &.mbsc-toast.mbsc-danger .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-warning .mbsc-fr-w,
      &.mbsc-toast.mbsc-warning .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-info .mbsc-fr-w,
      &.mbsc-toast.mbsc-info .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-primary .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-secondary .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-success .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-danger .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-warning .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-info .mbsc-snackbar-btn {
        color: $background;
      }
    }
  }
}



@include exports("notifications.mobiscroll") {
  .mbsc-mobiscroll {
    &.mbsc-toast .mbsc-toast-msg {
      opacity: .9;
      border-radius: .5em;
    }

    /* Snackbar and Toast color presets */
    &.mbsc-snackbar.mbsc-primary .mbsc-fr-w,
    &.mbsc-toast.mbsc-primary .mbsc-toast-msg {
      background: $mbsc-mobiscroll-primary;
    }

    &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w,
    &.mbsc-toast.mbsc-secondary .mbsc-toast-msg {
      background: $mbsc-mobiscroll-secondary;
    }

    &.mbsc-snackbar.mbsc-success .mbsc-fr-w,
    &.mbsc-toast.mbsc-success .mbsc-toast-msg {
      background: $mbsc-mobiscroll-success;
    }

    &.mbsc-snackbar.mbsc-danger .mbsc-fr-w,
    &.mbsc-toast.mbsc-danger .mbsc-toast-msg {
      background: $mbsc-mobiscroll-danger;
    }

    &.mbsc-snackbar.mbsc-warning .mbsc-fr-w,
    &.mbsc-toast.mbsc-warning .mbsc-toast-msg {
      background: $mbsc-mobiscroll-warning;
    }

    &.mbsc-snackbar.mbsc-info .mbsc-fr-w,
    &.mbsc-toast.mbsc-info .mbsc-toast-msg {
      background: $mbsc-mobiscroll-info;
    }
  }

  @include mbsc-mobiscroll-notifications(mobiscroll, (background: $mbsc-mobiscroll-background, text: $mbsc-mobiscroll-text, accent: $mbsc-mobiscroll-accent));
}









// Theme specific variables - inherited from global variables

// General colors for the form
// Background
$mbsc-mobiscroll-form-background: $mbsc-form-background-light !default;
$mbsc-mobiscroll-dark-form-background: $mbsc-form-background-dark !default;
// Text
$mbsc-mobiscroll-form-text: $mbsc-form-text-light !default;
$mbsc-mobiscroll-dark-form-text: $mbsc-form-text-dark !default;
// Accent
$mbsc-mobiscroll-form-accent: $mbsc-form-accent-light !default;
$mbsc-mobiscroll-dark-form-accent: $mbsc-form-accent-dark !default;

// Button
// Button background
$mbsc-mobiscroll-button-color: $mbsc-button-color-light !default;
$mbsc-mobiscroll-dark-button-color: $mbsc-button-color-dark !default;
// Button text
$mbsc-mobiscroll-button-text: $mbsc-button-text-light !default;
$mbsc-mobiscroll-dark-button-text: $mbsc-button-text-dark !default;

// Form Group
// text
$mbsc-mobiscroll-form-group-title-text: $mbsc-form-group-title-text-light !default;
$mbsc-mobiscroll-dark-form-group-title-text: $mbsc-form-group-title-text-dark !default;

// add variables to light and dark color maps
$mbsc-mobiscroll-colors: map-merge($mbsc-mobiscroll-colors, (
  'form-background': $mbsc-mobiscroll-form-background,
  'form-text': $mbsc-mobiscroll-form-text,
  'form-accent': $mbsc-mobiscroll-form-accent,
  'button-color': $mbsc-mobiscroll-button-color,
  'button-text': $mbsc-mobiscroll-button-text,
  'form-group-title-text': $mbsc-mobiscroll-form-group-title-text,
));
$mbsc-mobiscroll-dark-colors: map-merge($mbsc-mobiscroll-dark-colors, (
  'form-background': $mbsc-mobiscroll-dark-form-background,
  'form-text': $mbsc-mobiscroll-dark-form-text,
  'form-accent': $mbsc-mobiscroll-dark-form-accent,
  'button-color': $mbsc-mobiscroll-dark-button-color,
  'button-text': $mbsc-mobiscroll-dark-button-text,
  'form-group-title-text': $mbsc-mobiscroll-dark-form-group-title-text,
));

@mixin mbsc-mobiscroll-forms($theme, $params) {
  @include exports("forms.#{$theme}.colors") {

    @include mbsc-mobiscroll-page($theme, $params);
    @include mbsc-mobiscroll-input($theme, $params);
    @include mbsc-mobiscroll-slider($theme, $params);
    @include mbsc-mobiscroll-rating($theme, $params);
    @include mbsc-mobiscroll-notifications($theme, $params);

    $background: map-get($params, 'background');
    $text: map-get($params, 'text');
    $accent: map-get($params, 'accent');
    // Generic
    $background-param: map-get($params, 'form-background');
    $text-param: map-get($params, 'form-text');
    $accent-param: map-get($params, 'form-accent');
    // Button
    $button-background-param: map-get($params, 'button-color');
    $button-text-param: map-get($params, 'button-text');
    // Form group
    $group-title-param: map-get($params, 'form-group-title-text');

    $colors: mbsc-mobiscroll-colors($params);
    $input-disabled: map-get($colors, 'input-disabled');
    // static colors
    $white-text: map-get($colors, 'white-text');
    $dark-text: map-get($colors, 'dark-text');
    $error: map-get($colors, 'error');

    // overwrite custom variables
    $background: if($background-param, $background-param, $background);
    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
    $accent: if($accent-param, $accent-param, $accent);

    // derived colors
    $btn-light: '';
    $btn-disabled: '';
    $switch: '';
    $handle: '';
    $checkbox: '';
    $checked: desaturate(lighten($accent, 25%), 6%);
    // Light background
    @if (lightness($background) > 50%) {
      $btn-light: darken($background, 3%);
      $btn-disabled: darken($background, 10%);
      $switch: darken($background, 19%);
      $handle: darken($background, 8%);
      $checkbox: lighten($background, 3%);
    }
    // Dark background
    @else {
      $btn-light: $background;
      $btn-disabled: lighten($background, 8%);
      $switch: lighten($background, 14%);
      $handle: lighten($background, 7%);
      $checkbox: $background;
    }

    $button-background: if($button-background-param, $button-background-param, $accent);
    $button-text: if($button-text-param, $button-text-param, if($button-background-param, get-contrast-color($button-background-param), $btn-light));
    $button-active: darken($button-background, 4%);
    $group-title: if($group-title-param, $group-title-param, $accent);

    .mbsc-#{$theme} {

      &.mbsc-form {
        background: $background;
        color: $text;
      }

      // when controls are outside of form
      &.mbsc-control-w {
        color: $text;
      }

      &.mbsc-form *::-moz-selection,
      &.mbsc-control-w *::-moz-selection,
      &.mbsc-form *::selection,
      &.mbsc-control-w *::selection {
        color: $white-text;
        background: $accent;
      }

      .mbsc-divider,
      .mbsc-form-group-title {
        background: $background;
        color: $group-title;
      }

      .mbsc-err-msg,
      .mbsc-err .mbsc-label {
        color: $error;
      }

      /* Form grid */
      .mbsc-checkbox-box {
        background: $accent;
      }

      .mbsc-checkbox-box:after {
        border-bottom: .125em solid $checkbox;
        border-left: .125em solid $checkbox;
      }

      &.mbsc-checkbox input:disabled+.mbsc-checkbox-box {
        background: $input-disabled;
      }

      /* Radio */
      .mbsc-radio-box {
        border: .125em solid $accent;
      }

      .mbsc-radio-box:after {
        background: $accent;
      }

      &.mbsc-radio input:checked+.mbsc-radio-box {
        background: transparent;
      }

      &.mbsc-radio input:disabled+.mbsc-radio-box {
        border-color: $input-disabled;
      }

      &.mbsc-radio input:disabled+.mbsc-radio-box:after {
        background: $input-disabled;
      }

      /* Buttons */
      &.mbsc-btn {
        background: $button-background;
        color: $button-text;
      }

      &.mbsc-btn:disabled {
        background: $btn-disabled;
      }

      &.mbsc-no-touch.mbsc-btn-flat:not(:disabled):not(.mbsc-active):hover {
        background: rgba($background, .1);
      }

      &.mbsc-btn-flat {
        background: transparent;
        color: $button-background;
        border-color: transparent;
      }

      &.mbsc-btn-flat.mbsc-btn.mbsc-active {
        background: rgba($button-background, .3)
      }

      &.mbsc-btn-flat:disabled {
        color: $switch;
        background: transparent;
      }

      &.mbsc-btn-light.mbsc-btn {
        color: $dark-text;
      }

      /* Outline buttons */
      &.mbsc-btn-outline.mbsc-btn {
        border: 1px solid $button-background;
        color: $button-background;

        &.mbsc-active {
          background: $button-background;
          color: $background;
        }

        &.mbsc-btn-primary.mbsc-active,
        &.mbsc-btn-secondary.mbsc-active,
        &.mbsc-btn-success.mbsc-active,
        &.mbsc-btn-danger.mbsc-active,
        &.mbsc-btn-warning.mbsc-active,
        &.mbsc-btn-info.mbsc-active,
        &.mbsc-btn-dark.mbsc-active {
          color: $background;
        }
      }

      &.mbsc-btn.mbsc-btn-outline:disabled {
        color: $btn-disabled;
        border-color: $btn-disabled;
        background: transparent;
      }

      /* Switch */
      .mbsc-switch-track {
        background: $btn-disabled;
      }

      .mbsc-switch-handle {
        background: $switch;
      }

      &.mbsc-switch input:checked+.mbsc-switch-track {
        background: $checked;
      }

      &.mbsc-switch input:checked+.mbsc-switch-track .mbsc-switch-handle {
        background: $accent;
      }

      &.mbsc-switch input:disabled+.mbsc-switch-track {
        background: $input-disabled;
      }

      &.mbsc-switch input:disabled+.mbsc-switch-track .mbsc-switch-handle {
        background: $handle;
      }

      /* Stepper and Segmented */
      .mbsc-segmented-content {
        border: .142858em solid $accent;
        color: $accent;
      }

      &.mbsc-stepper input {
        color: $text;
      }

      &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item input:checked+.mbsc-segmented-content {
        background: $accent;
        color: $background;
      }

      &.mbsc-segmented .mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content {
        background: rgba($accent, .3);
      }

      &.mbsc-segmented input:disabled~.mbsc-segmented-item .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-disabled .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item input:disabled+.mbsc-segmented-content {
        color: $input-disabled;
        border-color: $input-disabled;
      }

      .mbsc-stepper input:disabled {
        color: $input-disabled;
        -webkit-text-fill-color: $input-disabled;
      }

      &.mbsc-segmented input:disabled:checked+.mbsc-segmented-content {
        border-color: $btn-disabled;
        background: $btn-disabled;
        color: $btn-light;
      }

      &.mbsc-stepper .mbsc-active.mbsc-disabled .mbsc-segmented-content {
        background: transparent;
        color: $input-disabled;
      }

      &.mbsc-no-touch .mbsc-segmented-item:hover .mbsc-segmented-content {
        background: rgba($accent, .1)
      }
    }
  }
}


@include exports("forms.mobiscroll") {

  .mbsc-mobiscroll {

    .mbsc-divider,
    .mbsc-form-group-title {
      padding: .5em 1em;
    }

    .mbsc-err-msg {
      position: absolute;
      padding-top: .333334em;
      font-size: .75em;
    }

    /* Form grid */

    .mbsc-form-grid {
      margin-top: .75em;
      margin-bottom: .75em;
    }

    .mbsc-form-grid .mbsc-input-box,
    .mbsc-form-grid .mbsc-input-outline {
      margin: .75em 1em;
    }

    /* Checkbox, switch, radio */
    &.mbsc-checkbox .mbsc-err-msg,
    &.mbsc-switch .mbsc-err-msg,
    &.mbsc-radio .mbsc-err-msg {
      padding-top: 0;
    }

    /* Checkbox */
    &.mbsc-ltr.mbsc-checkbox {
      padding: 1em 3.125em 1em 1em;
    }

    &.mbsc-rtl.mbsc-checkbox {
      padding: 1em 1em 1em 3.125em;
    }

    .mbsc-checkbox-box {
      margin-top: -.5625em;
      width: 1.125em;
      height: 1.125em;
      right: 1em;
    }

    &.mbsc-rtl .mbsc-checkbox-box {
      right: auto;
      left: 1em;
    }

    .mbsc-checkbox-box:after {
      top: 0.25em;
      left: .185em;
      width: .8125em;
      height: .4375em;
    }

    /* Checkbox color presets */
    &.mbsc-checkbox-primary .mbsc-checkbox-box {
      background: $mbsc-mobiscroll-primary;
    }

    &.mbsc-checkbox-secondary .mbsc-checkbox-box {
      background: $mbsc-mobiscroll-secondary;
    }

    &.mbsc-checkbox-success .mbsc-checkbox-box {
      background: $mbsc-mobiscroll-success;
    }

    &.mbsc-checkbox-danger .mbsc-checkbox-box {
      background: $mbsc-mobiscroll-danger;
    }

    &.mbsc-checkbox-warning .mbsc-checkbox-box {
      background: $mbsc-mobiscroll-warning;
    }

    &.mbsc-checkbox-info .mbsc-checkbox-box {
      background: $mbsc-mobiscroll-info;
    }

    /* Radio */
    &.mbsc-radio {
      padding: 1em 3.125em 1em 1em;
    }

    &.mbsc-rtl.mbsc-radio {
      padding: 1em 1em 1em 3.125em;
    }

    .mbsc-radio-box {
      right: 1em;
      width: 1.125em;
      height: 1.125em;
      margin-top: -.5625em;
      background: transparent;
    }

    &.mbsc-rtl .mbsc-radio-box {
      right: auto;
      left: 1em;
    }

    .mbsc-radio-box:after {
      width: .5em;
      height: .5em;
      margin-top: -.25em;
      margin-left: -.25em;
      border-radius: .625em;
    }

    &.mbsc-radio input:checked + .mbsc-radio-box {
      background: transparent;
    }

    /* Radio color presets */
    &.mbsc-radio-primary {
      .mbsc-radio-box {
        border-color: $mbsc-mobiscroll-primary;
      }

      .mbsc-radio-box:after {
        background: $mbsc-mobiscroll-primary;
      }
    }

    &.mbsc-radio-secondary {
      .mbsc-radio-box {
        border-color: $mbsc-mobiscroll-secondary;
      }

      .mbsc-radio-box:after {
        background: $mbsc-mobiscroll-secondary;
      }
    }

    &.mbsc-radio-success {
      .mbsc-radio-box {
        border-color: $mbsc-mobiscroll-success;
      }

      .mbsc-radio-box:after {
        background: $mbsc-mobiscroll-success;
      }
    }

    &.mbsc-radio-danger {
      .mbsc-radio-box {
        border-color: $mbsc-mobiscroll-danger;
      }

      .mbsc-radio-box:after {
        background: $mbsc-mobiscroll-danger;
      }
    }

    &.mbsc-radio-warning {
      .mbsc-radio-box {
        border-color: $mbsc-mobiscroll-warning;
      }

      .mbsc-radio-box:after {
        background: $mbsc-mobiscroll-warning;
      }
    }

    &.mbsc-radio-info {
      .mbsc-radio-box {
        border-color: $mbsc-mobiscroll-info;
      }

      .mbsc-radio-box:after {
        background: $mbsc-mobiscroll-info;
      }
    }

    /* Checkbox, Switch, Radio */
    &.mbsc-checkbox input:disabled ~ .mbsc-label,
    &.mbsc-checkbox input:disabled ~ .mbsc-desc,
    &.mbsc-radio input:disabled ~ .mbsc-label,
    &.mbsc-radio input:disabled ~ .mbsc-desc,
    &.mbsc-switch input:disabled ~ .mbsc-label,
    &.mbsc-switch input:disabled ~ .mbsc-desc {
      opacity: .4;
    }

    .mbsc-checkbox-box:after,
    .mbsc-radio-box:after {
      opacity: 1;
      -webkit-transform: scale(0) rotate(-45deg);
      transform: scale(0) rotate(-45deg);
      transition: transform .1s ease-out;
    }

    &.mbsc-checkbox input:checked + .mbsc-checkbox-box:after,
    &.mbsc-radio input:checked + .mbsc-radio-box:after {
      opacity: 1;
      -webkit-transform: scale(1) rotate(-45deg);
      transform: scale(1) rotate(-45deg);
    }

    /* Buttons */
    &.mbsc-btn {
      margin: .5em;
      padding: .6875em;
      font-size: 1em;
      text-transform: uppercase;
    }

    .mbsc-btn-ic {
      padding-right: .6875em;
    }

    .mbsc-btn-icon-only .mbsc-btn-ic {
      padding: 0 .5em;
    }

    &.mbsc-no-touch.mbsc-btn:not(:disabled):not(.mbsc-active):hover {
      opacity: .8;
    }

    &.mbsc-btn.mbsc-active {
      opacity: .6;
    }

    &.mbsc-no-touch.mbsc-btn-flat:not(:disabled):not(.mbsc-active):hover {
      opacity: 1;
    }

    &.mbsc-btn-flat {
      background: transparent;
      border-color: transparent;
    }

    &.mbsc-btn-flat.mbsc-btn.mbsc-active {
      opacity: 1;
    }

    &.mbsc-btn-flat:disabled {
      background: transparent;
    }

    /* Button color presets */
    &.mbsc-btn-primary.mbsc-btn {
      background: $mbsc-mobiscroll-primary;

      &.mbsc-btn-flat {
        color: $mbsc-mobiscroll-primary;

        &:not(:disabled):not(.mbsc-active):hover {
          background: rgba($mbsc-mobiscroll-primary, .2);
        }

        &.mbsc-active {
          background: rgba($mbsc-mobiscroll-primary, .3);
        }
      }
    }

    &.mbsc-btn-secondary.mbsc-btn {
      background: $mbsc-mobiscroll-secondary;

      &.mbsc-btn-flat {
        color: $mbsc-mobiscroll-secondary;

        &:not(:disabled):not(.mbsc-active):hover {
          background: rgba($mbsc-mobiscroll-secondary, .2);
        }

        &.mbsc-active {
          background: rgba($mbsc-mobiscroll-secondary, .3);
        }
      }
    }

    &.mbsc-btn-success.mbsc-btn {
      background: $mbsc-mobiscroll-success;

      &.mbsc-btn-flat {
        color: $mbsc-mobiscroll-success;

        &:not(:disabled):not(.mbsc-active):hover {
          background: rgba($mbsc-mobiscroll-success, .2);
        }

        &.mbsc-active {
          background: rgba($mbsc-mobiscroll-success, .3);
        }
      }
    }

    &.mbsc-btn-danger.mbsc-btn {
      background: $mbsc-mobiscroll-danger;

      &.mbsc-btn-flat {
        color: $mbsc-mobiscroll-danger;

        &:not(:disabled):not(.mbsc-active):hover {
          background: rgba($mbsc-mobiscroll-danger, .2);
        }

        &.mbsc-active {
          background: rgba($mbsc-mobiscroll-danger, .3);
        }
      }
    }

    &.mbsc-btn-warning.mbsc-btn {
      background: $mbsc-mobiscroll-warning;

      &.mbsc-btn-flat {
        color: $mbsc-mobiscroll-warning;

        &:not(:disabled):not(.mbsc-active):hover {
          background: rgba($mbsc-mobiscroll-warning, .2);
        }

        &.mbsc-active {
          background: rgba($mbsc-mobiscroll-warning, .3);
        }
      }
    }

    &.mbsc-btn-info.mbsc-btn {
      background: $mbsc-mobiscroll-info;

      &.mbsc-btn-flat {
        color: $mbsc-mobiscroll-info;

        &:not(:disabled):not(.mbsc-active):hover {
          background: rgba($mbsc-mobiscroll-info, .2);
        }

        &.mbsc-active {
          background: rgba($mbsc-mobiscroll-info, .3);
        }
      }
    }

    &.mbsc-btn-light.mbsc-btn {
      background: $mbsc-mobiscroll-light;

      &.mbsc-btn-flat {
        color: darken($mbsc-mobiscroll-light, 25%);

        &:not(:disabled):not(.mbsc-active):hover {
          color: darken($mbsc-mobiscroll-light, 25%);
          background: rgba(darken($mbsc-mobiscroll-light, 25%), .2);
        }

        &.mbsc-active {
          background: rgba(darken($mbsc-mobiscroll-light, 25%), .3);
        }
      }
    }

    &.mbsc-btn-dark.mbsc-btn {
      background: $mbsc-mobiscroll-dark;

      &.mbsc-btn-flat {
        color: $mbsc-mobiscroll-dark;

        &:not(:disabled):not(.mbsc-active):hover {
          background: rgba($mbsc-mobiscroll-dark, .2);
        }

        &.mbsc-active {
          background: rgba($mbsc-mobiscroll-dark, .3);
        }
      }
    }

    &.mbsc-btn-flat.mbsc-btn,
    &.mbsc-btn-outline.mbsc-btn {
      background: transparent;
    }

    .mbsc-btn-group,
    .mbsc-btn-group-justified {
      margin: .5em;
    }

    .mbsc-btn-group-block {
      margin: .5em 1em;
    }

    /* Outline buttons */
    &.mbsc-btn-outline.mbsc-btn.mbsc-active {
      opacity: 1;
    }

    /* Outline buttons */
    &.mbsc-btn-outline.mbsc-btn {
      &.mbsc-btn-primary {
        border-color: $mbsc-mobiscroll-primary;
        color: $mbsc-mobiscroll-primary;

        &.mbsc-active {
          background: $mbsc-mobiscroll-primary;
        }
      }

      &.mbsc-btn-secondary {
        border-color: $mbsc-mobiscroll-secondary;
        color: $mbsc-mobiscroll-secondary;

        &.mbsc-active {
          background: $mbsc-mobiscroll-secondary;
        }
      }

      &.mbsc-btn-success {
        border-color: $mbsc-mobiscroll-success;
        color: $mbsc-mobiscroll-success;

        &.mbsc-active {
          background: $mbsc-mobiscroll-success;
        }
      }

      &.mbsc-btn-danger {
        border-color: $mbsc-mobiscroll-danger;
        color: $mbsc-mobiscroll-danger;

        &.mbsc-active {
          background: $mbsc-mobiscroll-danger;
        }
      }

      &.mbsc-btn-warning {
        border-color: $mbsc-mobiscroll-warning;
        color: $mbsc-mobiscroll-warning;

        &.mbsc-active {
          background: $mbsc-mobiscroll-warning;
        }
      }

      &.mbsc-btn-info {
        border-color: $mbsc-mobiscroll-info;
        color: $mbsc-mobiscroll-info;

        &.mbsc-active {
          background: $mbsc-mobiscroll-info;
        }
      }

      &.mbsc-btn-light {
        border-color: darken($mbsc-mobiscroll-light, 25%);
        color: darken($mbsc-mobiscroll-light, 25%);

        &.mbsc-active {
          background: darken($mbsc-mobiscroll-light, 25%);
          color: $mbsc-mobiscroll-light;
        }
      }

      &.mbsc-btn-dark {
        border-color: $mbsc-mobiscroll-dark;
        color: $mbsc-mobiscroll-dark;

        &.mbsc-active {
          background: $mbsc-mobiscroll-dark;
        }
      }
    }

    /* Switch */
    &.mbsc-ltr.mbsc-switch {
      padding: 1em 4.375em 1em 1em;
    }

    &.mbsc-rtl.mbsc-switch {
      padding: 1em 1em 1em 4.375em;
    }

    .mbsc-switch-track {
      right: 1em;
      width: 2.375em;
      height: .875em;
      padding: 0 .75em;
      margin-top: -.4375em;
      border-radius: 1.25em;
    }

    &.mbsc-rtl .mbsc-switch-track {
      right: auto;
      left: 1em;
    }

    .mbsc-switch-handle {
      top: .25em;
      left: .25em;
      margin: 0;
      width: 1.5em;
      height: 1.5em;
      border-radius: 1.25em;
    }

    &.mbsc-rtl .mbsc-switch-handle {
      right: .25em;
    }

    .mbsc-active .mbsc-switch-handle {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    &.mbsc-switch input:disabled + .mbsc-switch-track {
      opacity: .7;
    }

    /* Switch color presets */
    &.mbsc-switch.mbsc-switch-primary input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-mobiscroll-primary, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-mobiscroll-primary;
      }
    }

    &.mbsc-switch.mbsc-switch-secondary input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-mobiscroll-secondary, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-mobiscroll-secondary;
      }
    }

    &.mbsc-switch.mbsc-switch-success input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-mobiscroll-success, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-mobiscroll-success;
      }
    }

    &.mbsc-switch.mbsc-switch-danger input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-mobiscroll-danger, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-mobiscroll-danger;
      }
    }

    &.mbsc-switch.mbsc-switch-warning input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-mobiscroll-warning, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-mobiscroll-warning;
      }
    }

    &.mbsc-switch.mbsc-switch-info input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-mobiscroll-info, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-mobiscroll-info;
      }
    }

    /* Stepper and Segmented */
    &.mbsc-segmented {
      padding: .5em 1em;
    }

    .mbsc-segmented-content {
      height: 2.28571428em;
      margin: 0 -.071428em;
      line-height: 2.28575em;
      padding: 0 .285714em;
      text-transform: uppercase;
    }

    &.mbsc-ltr.mbsc-stepper-cont {
      padding: 1.75em 12.875em 1.75em 1em;
    }

    &.mbsc-rtl.mbsc-stepper-cont {
      padding: 1.75em 1em 1.75em 12.875em;
    }

    .mbsc-stepper {
      margin-top: -1.125em;
    }

    &.mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content,
    &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-disabled .mbsc-segmented-content,
    &.mbsc-segmented .mbsc-segmented-item input:disabled + .mbsc-segmented-content {
      background: transparent;
    }

    /* Segmented color presets */
    .mbsc-segmented-primary {
      .mbsc-segmented-content {
        border-color: $mbsc-mobiscroll-primary;
        color: $mbsc-mobiscroll-primary;
      }

      &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
        background: $mbsc-mobiscroll-primary;
      }

      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
        background: rgba($mbsc-mobiscroll-primary, .35)
      }
    }

    .mbsc-segmented-secondary {
      .mbsc-segmented-content {
        border-color: $mbsc-mobiscroll-secondary;
        color: $mbsc-mobiscroll-secondary;
      }

      &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
        background: $mbsc-mobiscroll-secondary;
      }

      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
        background: rgba($mbsc-mobiscroll-secondary, .35)
      }
    }

    .mbsc-segmented-success {
      .mbsc-segmented-content {
        border-color: $mbsc-mobiscroll-success;
        color: $mbsc-mobiscroll-success;
      }

      &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
        background: $mbsc-mobiscroll-success;
      }

      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
        background: rgba($mbsc-mobiscroll-success, .35)
      }
    }

    .mbsc-segmented-danger {
      .mbsc-segmented-content {
        border-color: $mbsc-mobiscroll-danger;
        color: $mbsc-mobiscroll-danger;
      }

      &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
        background: $mbsc-mobiscroll-danger;
      }

      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
        background: rgba($mbsc-mobiscroll-danger, .35)
      }
    }

    .mbsc-segmented-warning {
      .mbsc-segmented-content {
        border-color: $mbsc-mobiscroll-warning;
        color: $mbsc-mobiscroll-warning;
      }

      &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
        background: $mbsc-mobiscroll-warning;
      }

      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
        background: rgba($mbsc-mobiscroll-warning, .35)
      }
    }

    .mbsc-segmented-info {
      .mbsc-segmented-content {
        border-color: $mbsc-mobiscroll-info;
        color: $mbsc-mobiscroll-info;
      }

      &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
        background: $mbsc-mobiscroll-info;
      }

      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
        background: rgba($mbsc-mobiscroll-info, .35)
      }
    }

    /* Stepper color presets */
    &.mbsc-stepper-primary {
      .mbsc-segmented-content {
        border-color: $mbsc-mobiscroll-primary;
        color: $mbsc-mobiscroll-primary;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-mobiscroll-primary;
      }
    }

    &.mbsc-stepper-secondary {
      .mbsc-segmented-content {
        border-color: $mbsc-mobiscroll-secondary;
        color: $mbsc-mobiscroll-secondary;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-mobiscroll-secondary;
      }
    }

    &.mbsc-stepper-success {
      .mbsc-segmented-content {
        border-color: $mbsc-mobiscroll-success;
        color: $mbsc-mobiscroll-success;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-mobiscroll-success;
      }
    }

    &.mbsc-stepper-danger {
      .mbsc-segmented-content {
        border-color: $mbsc-mobiscroll-danger;
        color: $mbsc-mobiscroll-danger;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-mobiscroll-danger;
      }
    }

    &.mbsc-stepper-warning {
      .mbsc-segmented-content {
        border-color: $mbsc-mobiscroll-warning;
        color: $mbsc-mobiscroll-warning;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-mobiscroll-warning;
      }
    }

    &.mbsc-stepper-info {
      .mbsc-segmented-content {
        border-color: $mbsc-mobiscroll-info;
        color: $mbsc-mobiscroll-info;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-mobiscroll-info;
      }
    }

    &.mbsc-no-touch {

      /* Segmented hover color styles */
      .mbsc-segmented-primary {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-primary, .35)
        }
      }

      .mbsc-segmented-secondary {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-secondary, .35)
        }
      }

      .mbsc-segmented-success {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-success, .35)
        }
      }

      .mbsc-segmented-danger {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-danger, .35)
        }
      }

      .mbsc-segmented-warning {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-warning, .35)
        }
      }

      .mbsc-segmented-info {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-info, .35)
        }
      }

      /* Stepper hover color styles */
      &.mbsc-stepper-primary {
        .mbsc-stepper .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-primary, .35)
        }
      }

      &.mbsc-stepper-secondary {
        .mbsc-stepper .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-secondary, .35)
        }
      }

      &.mbsc-stepper-success {
        .mbsc-stepper .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-success, .35)
        }
      }

      &.mbsc-stepper-danger {
        .mbsc-stepper .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-danger, .35)
        }
      }

      &.mbsc-stepper-warning {
        .mbsc-stepper .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-warning, .35)
        }
      }

      &.mbsc-stepper-info {
        .mbsc-stepper .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-info, .35)
        }
      }
    }
  }

  @include mbsc-mobiscroll-forms(mobiscroll, $mbsc-mobiscroll-colors);
}





$mbsc-windows-accent: #0078d7 !default;
$mbsc-windows-background: #f2f2f2 !default;
$mbsc-windows-text: #262626 !default;

$mbsc-windows-dark-accent: #0078d7 !default;
$mbsc-windows-dark-background: #1a1a1a !default;
$mbsc-windows-dark-text: #ffffff !default;

/* Base colors */
$mbsc-windows-primary: #3f97f6 !default;
$mbsc-windows-secondary: #90979E !default;
$mbsc-windows-success: #43BE5F !default;
$mbsc-windows-danger: #f5504e !default;
$mbsc-windows-warning: #f8b042 !default;
$mbsc-windows-info: #5BB7C5 !default;
$mbsc-windows-light: #fff !default;
$mbsc-windows-dark: #47494A !default;

$mbsc-windows-colors: ( // Colors map
  'background': $mbsc-windows-background,
  'text': $mbsc-windows-text,
  'accent': $mbsc-windows-accent,
);
$mbsc-windows-dark-colors: ( // Colors map
  'background': $mbsc-windows-dark-background,
  'text': $mbsc-windows-dark-text,
  'accent': $mbsc-windows-dark-accent,
);

@function mbsc-windows-colors($params) {
  $background: map-get($params, 'background');
  $text: map-get($params, 'text');
  $accent: map-get($params, 'accent');

  $frame-border: '';
  $input-hover: '';
  $empty-color: '';
  $input-border: '';
  $progress-background: '';
  $alt-background: '';
  $color-item: '';
  $color-preview-border: '';


  // Light background
  @if (lightness($background) > 50%) {
    $frame-border: darken($background, 15%);
    $input-hover: darken($background, 55%);
    $empty-color: lighten($text, 30%);
    $input-border: darken($background, 35%);

    $progress-background: hsl(hue($background), saturation($background), min(lightness($background), 80%));
    $alt-background: darken($background, 18%);
    $color-item: #ffffff;
    $color-preview-border: darken($background, 25%);
  }
  // Dark background
  @else {
    $frame-border: lighten($background, 15%);
    $input-hover: lighten($background, 55%);
    $empty-color: darken($text, 30%);
    $input-border: lighten($background, 35%);

    $progress-background: hsl(hue($background), saturation($background), max(lightness($background), 12%));
    $alt-background: lighten($background, 18%);
    $color-item: fade(#dfdede, 30%);
    $color-preview-border: lighten($background, 60%);
  }

  @return ('frame-border': $frame-border,
    'input-hover': $input-hover,
    'empty-color': $empty-color,
    'input-border': $input-border,
    'progress-background': $progress-background,
    'alt-background': $alt-background,
    'color-item': $color-item,
    'color-preview-border': $color-preview-border,
    /* static colors */
    'dark-text': darken($mbsc-windows-dark, 30%),
    'light-text': #efeff4,
    'error': #d30101);
}

@mixin mbsc-windows-common($theme, $params) {
  @include exports("common.#{$theme}.colors") {
    $colors: mbsc-windows-colors($params);
    $empty-color: map-get($colors, empty-color);

    .mbsc-#{$theme} {
      .mbsc-empty {
        color: $empty-color;
      }
    }
  }
}



@include exports("collapsible.windows") {
  .mbsc-windows .mbsc-collapsible {
    .mbsc-form-group-title.mbsc-collapsible-header {
      padding-left: .666667em;
      padding-right: 2em;
    }

    .mbsc-form-group-title .mbsc-collapsible-icon {
      font-size: .666667em;
    }
  }
}






// Theme specific variables - inherited from global variables

// background
$mbsc-windows-page-background: $mbsc-page-background-light !default;
$mbsc-windows-dark-page-background: $mbsc-page-background-dark !default;

// text
$mbsc-windows-page-text: $mbsc-page-text-light !default;
$mbsc-windows-dark-page-text: $mbsc-page-text-dark !default;

// add variables to color maps
$mbsc-windows-colors: map-merge($mbsc-windows-colors, (
  'page-background': $mbsc-windows-page-background,
  'page-text': $mbsc-windows-page-text,
));
$mbsc-windows-dark-colors: map-merge($mbsc-windows-dark-colors, (
  'page-background': $mbsc-windows-dark-page-background,
  'page-text': $mbsc-windows-dark-page-text,
));

@mixin mbsc-windows-page($theme, $params) {
  @include exports("page.#{$theme}.colors") {
    @include mbsc-windows-common($theme, $params);

    $background: map-get($params, 'background');
    $text: map-get($params, 'text');
    $accent: map-get($params, 'accent');

    @if (lightness($background) > 50%) {
      $background: lighten($background, 13%);
    }
    @else {
      $background: darken($background, 12%);
    }


    // get custom params
    $text-param: map-get($params, 'page-text');
    $background-param: map-get($params, 'page-background');
    // overwrite params with custom variables
    $background: if($background-param, $background-param, $background);
    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));

    .mbsc-#{$theme} {
      &.mbsc-page {
        background-color: $background;
        color: $text;
      }

      a {
        color: $accent;
      }
    }
  }
}



@include exports("page.windows") {
  .mbsc-windows {

    /* Note */
    .mbsc-note,
    .mbsc-note-primary {
      color: darken($mbsc-windows-primary, 30%);
      background-color: lighten($mbsc-windows-primary, 10%);
    }

    .mbsc-note-secondary {
      color: darken($mbsc-windows-secondary, 30%);
      background-color: lighten($mbsc-windows-secondary, 20%);
    }

    .mbsc-note-success {
      color: darken($mbsc-windows-success, 30%);
      background-color: lighten($mbsc-windows-success, 20%);
    }

    .mbsc-note-danger {
      color: darken($mbsc-windows-danger, 40%);
      background-color: lighten($mbsc-windows-danger, 10%);
    }

    .mbsc-note-warning {
      color: darken($mbsc-windows-warning, 35%);
      background-color: lighten($mbsc-windows-warning, 5%);
    }

    .mbsc-note-info {
      color: darken($mbsc-windows-info, 30%);
      background-color: lighten($mbsc-windows-info, 20%);
    }

    .mbsc-note-light {
      color: darken($mbsc-windows-light, 70%);
      background-color: lighten($mbsc-windows-light, 10%);
    }

    .mbsc-note-dark {
      color: darken($mbsc-windows-dark, 30%);
      background-color: lighten($mbsc-windows-dark, 10%);
    }
  }

  @include mbsc-windows-page(windows, $mbsc-windows-colors);
}





// Theme specific variables - inherited from global variables

// Background
$mbsc-windows-input-background: $mbsc-input-background-light !default;
$mbsc-windows-dark-input-background: $mbsc-input-background-dark !default;
// Border
$mbsc-windows-input-border: $mbsc-input-border-light !default;
$mbsc-windows-dark-input-border: $mbsc-input-border-dark !default;
// Text
$mbsc-windows-input-text: $mbsc-input-text-light !default;
$mbsc-windows-dark-input-text: $mbsc-input-text-dark !default;
// Accent
$mbsc-windows-input-accent: $mbsc-input-accent-light !default;
$mbsc-windows-dark-input-accent: $mbsc-input-accent-dark !default;
// Error
$mbsc-windows-input-error: $mbsc-input-error-light !default;
$mbsc-windows-dark-input-error: $mbsc-input-error-dark !default;

$mbsc-windows-colors: map-merge($mbsc-windows-colors, (
  'input-background': $mbsc-windows-input-background,
  'input-border': $mbsc-windows-input-border,
  'input-text': $mbsc-windows-input-text,
  'input-accent': $mbsc-windows-input-accent,
  'input-error': $mbsc-windows-input-error,
));
$mbsc-windows-dark-colors: map-merge($mbsc-windows-dark-colors, (
  'input-background': $mbsc-windows-dark-input-background,
  'input-border': $mbsc-windows-dark-input-border,
  'input-text': $mbsc-windows-dark-input-text,
  'input-accent': $mbsc-windows-dark-input-accent,
  'input-error': $mbsc-windows-dark-input-error,
));

@mixin mbsc-windows-input($theme, $params) {
  @include exports("input.#{$theme}.colors") {

    $background: map-get($params, 'background');
    $text: map-get($params, 'text');
    $accent: map-get($params, 'accent');

    // custom colors
    $input-background-param: map-get($params, 'input-background');
    $input-border-param: map-get($params, 'input-border');
    $input-text-param: map-get($params, 'input-text');
    $input-accent-param: map-get($params, 'input-accent');
    $input-error-param: map-get($params, 'input-error');

    // overwrite basic colors with custom ones
    $background: if($input-background-param, $input-background-param, $background);
    $accent: if($input-accent-param, $input-accent-param, $accent);

    $input-border: '';
    $input-hover: '';
    $frame-border: '';
    @if (lightness($background) > 50%) {
      $frame-border: darken($background, 15%);
      $input-border: darken($background, 35%);
      $input-hover: darken($background, 55%);
    }
    @else {
      $frame-border: lighten($background, 15%);
      $input-border: lighten($background, 35%);
      $input-hover: lighten($background, 55%);
    }

    // static colors
    $colors: mbsc-windows-colors($params);
    $error: map-get($colors, error);
    // overwrite colors with custom ones
    $input-border: if($input-border-param, $input-border-param, $input-border);
    $error: if($input-error-param, $input-error-param, $error);

    .mbsc-#{$theme} {

      &.mbsc-input input,
      &.mbsc-input textarea,
      &.mbsc-select input {
        border: .125em solid $input-border;
        color: $text;
      }

      &.mbsc-no-touch .mbsc-input input:hover,
      &.mbsc-no-touch .mbsc-input textarea:hover,
      &.mbsc-no-touch .mbsc-select:hover input {
        border-color: $input-hover;
      }

      &.mbsc-input input::-webkit-input-placeholder {
        color: #5c5c5c;
      }

      &.mbsc-input input::-ms-input-placeholder {
        color: #5c5c5c;
      }

      &.mbsc-input input::-moz-placeholder {
        color: #5c5c5c;
      }

      &.mbsc-input .mbsc-input-wrap input:focus,
      &.mbsc-input .mbsc-input-wrap select:focus+input,
      &.mbsc-input .mbsc-input-wrap textarea:focus,
      &.mbsc-alert.mbsc-input input:focus {
        background: #fff;
        border-color: $accent;
        color: #262626;

        ~.mbsc-input-ic {
          color: #262626;
        }
      }

      &.mbsc-input .mbsc-input-wrap .mbsc-control:disabled+input,
      &.mbsc-input .mbsc-input-wrap textarea:disabled,
      &.mbsc-input .mbsc-input-wrap input:disabled {
        border-color: $frame-border;
      }

      &.mbsc-input.mbsc-err input,
      &.mbsc-input.mbsc-err textarea {
        border-color: $error;
      }

      .mbsc-input-ic,
      &.mbsc-input .mbsc-label,
      &.mbsc-select .mbsc-input-wrap .mbsc-ic {
        color: $text;
      }

      .mbsc-err-msg {
        color: $error;
      }
    }
  }
}


@include exports("input.windows") {
  .mbsc-windows {
    &.mbsc-input {
      padding: .5em 1em 1em;
    }

    &.mbsc-input input,
    &.mbsc-input textarea,
    &.mbsc-select input {
      height: 2em;
      padding: 0 .3125em;
      font-size: 1em;
      background: transparent;
    }

    &.mbsc-ltr.mbsc-select input {
      padding-right: 1.75em;
    }

    &.mbsc-rtl.mbsc-select input {
      padding-left: 1.75em;
    }

    &.mbsc-input textarea {
      padding-top: .125em;
      padding-bottom: .125em;
    }

    .mbsc-input-ic {
      top: 0;
      margin-top: 0;
    }

    .mbsc-err-msg {
      position: absolute;
      padding-top: .333334em;
    }

    /* Textbox, textarea, select */
    &.mbsc-input.mbsc-ic-left input,
    &.mbsc-input.mbsc-ic-left textarea {
      padding-left: 2.25em;
    }

    &.mbsc-rtl.mbsc-input.mbsc-ic-left input,
    &.mbsc-rtl.mbsc-input.mbsc-ic-left textarea {
      padding-right: 2.25em;
      padding-left: .3125em;
    }

    &.mbsc-ltr.mbsc-input.mbsc-ic-right input,
    &.mbsc-ltr.mbsc-input.mbsc-ic-right textarea {
      padding-right: 2.25em;
    }

    &.mbsc-rtl.mbsc-input.mbsc-ic-right input,
    &.mbsc-rtl.mbsc-input.mbsc-ic-right textarea {
      padding-left: 2.25em;
    }

    &.mbsc-ltr.mbsc-ic-left .mbsc-left-ic,
    &.mbsc-rtl.mbsc-ic-right .mbsc-right-ic {
      right: auto;
      left: .25em;
    }

    &.mbsc-ltr.mbsc-ic-right .mbsc-right-ic,
    &.mbsc-rtl.mbsc-ic-left .mbsc-left-ic {
      left: auto;
      right: .25em;
    }

    &.mbsc-input .mbsc-label {
      padding-bottom: .3125em;
      font-size: .8125em;
    }

    &.mbsc-select .mbsc-select-ic {
      display: block;
      position: absolute;
      top: .5em;
    }

    &.mbsc-ltr.mbsc-select .mbsc-select-ic {
      right: .5em;
    }

    &.mbsc-rtl.mbsc-select .mbsc-select-ic {
      left: .5em;
    }

    &.mbsc-ic-right .mbsc-select-ic {
      display: none;
    }

    /* Inline labels */
    &.mbsc-label-inline.mbsc-input .mbsc-label {
      line-height: 2em;
      padding-bottom: 0;
    }

    /* Floating labels */
    &.mbsc-label-floating.mbsc-input {
      padding-top: 1.625em;

      .mbsc-label {
        font-size: 1em;
        position: absolute;
        top: 2.0625em;
      }

      &.mbsc-label-floating-active {
        .mbsc-label {
          -webkit-transform: translateY(-1.5em) scale(.75);
          transform: translateY(-1.5em) scale(.75);
        }
      }
    }

    /* Left to right */
    &.mbsc-ltr.mbsc-label-floating.mbsc-input {
      .mbsc-label {
        left: 1.375em;
      }

      &.mbsc-label-floating-active .mbsc-label {
        left: 1em;
      }

      &.mbsc-ic-left .mbsc-label {
        left: 3.375em;
      }

      &.mbsc-label-floating-active.mbsc-ic-left .mbsc-label {
        left: 1em;
      }
    }

    /* Right to left */
    &.mbsc-rtl.mbsc-label-floating.mbsc-input {
      .mbsc-label {
        right: 1.375em;
      }

      &.mbsc-label-floating-active .mbsc-label {
        right: 1em;
      }

      &.mbsc-ic-left .mbsc-label {
        right: 3.375em;
      }

      &.mbsc-label-floating-active.mbsc-ic-left .mbsc-label {
        right: 1em;
      }
    }
  }

  @include mbsc-windows-input(windows, $mbsc-windows-colors);
}







@mixin mbsc-windows-progress($theme, $params) {
  @include exports("progress.#{$theme}.colors") {

    $text: map-get($params, text);
    $accent: map-get($params, accent);

    $colors: mbsc-windows-colors($params);
    $gray-background: map-get($colors, gray-background);
    $progress-background: map-get($colors, progress-background);

    .mbsc-#{$theme} {

      &.mbsc-progress .mbsc-label,
      &.mbsc-progress .mbsc-input-ic {
        color: $text;
      }

      .mbsc-progress-track {
        background: $progress-background;
      }

      .mbsc-progress-bar {
        background: $accent;
      }
    }
  }
}



@include exports("progress.windows") {
  .mbsc-windows {
    &.mbsc-progress {
      padding: .75em 1em;
    }

    &.mbsc-progress .mbsc-label {
      padding-bottom: .3125em;
      font-size: 1em;
    }

    &.mbsc-progress .mbsc-input-wrap {
      padding: 0;
    }

    &.mbsc-progress .mbsc-input-ic {
      top: -.125em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-right .mbsc-input-wrap {
      padding-left: 2.25em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-left .mbsc-input-wrap {
      padding-right: 2.25em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-left .mbsc-left-ic,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-right .mbsc-right-ic {
      right: auto;
      left: -0.375em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-right .mbsc-right-ic,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-left .mbsc-left-ic {
      left: auto;
      right: -0.375em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-progress-value-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-progress-value-left .mbsc-input-wrap {
      padding-right: 3.75em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-progress-value-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-progress-value-right .mbsc-input-wrap {
      padding-left: 3.75em;
    }

    &.mbsc-ltr.mbsc-progress-value-left.mbsc-ic-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress-value-right.mbsc-ic-right .mbsc-input-wrap {
      padding-left: 5.75em;
    }

    &.mbsc-ltr.mbsc-progress-value-right.mbsc-ic-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress-value-left.mbsc-ic-left .mbsc-input-wrap {
      padding-right: 5.75em;
    }

    &.mbsc-ltr.mbsc-progress-value-left.mbsc-ic-left .mbsc-progress-value,
    &.mbsc-rtl.mbsc-progress-value-right.mbsc-ic-right .mbsc-progress-value {
      left: 1.875em;
      right: auto;
    }

    &.mbsc-ltr.mbsc-progress-value-right.mbsc-ic-right .mbsc-progress-value,
    &.mbsc-rtl.mbsc-progress-value-left.mbsc-ic-left .mbsc-progress-value {
      left: auto;
      right: 1.875em;
    }

    .mbsc-progress-cont {
      padding: .75em 0;
    }

    .mbsc-progress-track {
      height: .25em;
    }

    .mbsc-progress-value {
      margin-top: -.4375em;
      width: 3.5em;
    }

    .mbsc-progress-step-label {
      top: auto;
      bottom: -2em;
      line-height: normal;
    }

    /* Inline labels */
    .mbsc-label-inline.mbsc-progress.mbsc-control-w .mbsc-label {
      line-height: 1.875em;
      padding-bottom: 0;
    }

    /* Progress color presets */
    .mbsc-progress-primary .mbsc-progress-bar {
      background: $mbsc-windows-primary;
    }

    .mbsc-progress-secondary .mbsc-progress-bar {
      background: $mbsc-windows-secondary;
    }

    .mbsc-progress-success .mbsc-progress-bar {
      background: $mbsc-windows-success;
    }

    .mbsc-progress-danger .mbsc-progress-bar {
      background: $mbsc-windows-danger;
    }

    .mbsc-progress-warning .mbsc-progress-bar {
      background: $mbsc-windows-warning;
    }

    .mbsc-progress-info .mbsc-progress-bar {
      background: $mbsc-windows-info;
    }
  }

  @include mbsc-windows-progress(windows, (background: $mbsc-windows-background, text: $mbsc-windows-text, accent: $mbsc-windows-accent));
}






@mixin mbsc-windows-slider($theme, $params) {
  @include exports("slider.#{$theme}.colors") {

    @include mbsc-windows-page($theme, $params);
    @include mbsc-windows-progress($theme, $params);

    $background: map-get($params, 'background');
    $accent: map-get($params, 'accent');
    $text: map-get($params, 'text');

    $colors: mbsc-windows-colors($params);
    $input-border: map-get($colors, 'input-border');
    $frame-border: map-get($colors, 'frame-border');

    $form-background: '';
    $input-hover: '';
    @if (lightness($background) > 50%) {
      $form-background: lighten($background, 13%);
      $input-hover: darken($background, 55%);
    }
    @else {
      $form-background: darken($background, 12%);
      $input-hover: lighten($background, 55%);
    }

    .mbsc-#{$theme} {
      &.mbsc-slider .mbsc-progress-track {
        background: $input-border;
        border-top: 2px solid $background;
        border-bottom: 2px solid $background;
      }

      &.mbsc-slider .mbsc-progress-track {
        border-top-color: $form-background;
        border-bottom-color: $form-background;
      }

      &.mbsc-slider:hover .mbsc-progress-track {
        background: $input-hover;

        .mbsc-slider-handle {
          background: $text;
        }
      }

      &.mbsc-slider .mbsc-active~.mbsc-progress-cont .mbsc-progress-track {
        background: $input-border;

        .mbsc-slider-handle {
          background: $frame-border;
        }
      }

      .mbsc-slider-handle {
        background: $accent;
      }

      .mbsc-slider-tooltip {
        border: 1px solid $frame-border;
        background: $background;
        color: $text;
      }

      .mbsc-slider-step {
        background: $input-border;
      }
    }
  }
}


@include exports("slider.windows") {
  .mbsc-windows {
    &.mbsc-slider .mbsc-input-wrap {
      padding: 0 .3125em;
    }

    &.mbsc-slider .mbsc-input-ic {
      top: -.0625em;
    }

    &.mbsc-slider .mbsc-progress-track {
      height: 6px;
    }

    .mbsc-slider-handle {
      top: 50%;
      width: .5em;
      border-radius: 6px;
      height: 1.5em;
      margin: -0.75em -0.25em 0 0;
    }

    .mbsc-slider-tooltip {
      height: 1.875em;
      padding: 0 .75em;
      top: -2.75em;
      line-height: 1.875em;
      text-align: center;
      transition: opacity .2s ease-in-out;
      -webkit-transform: translateX(50%);
      transform: translateX(50%);
    }

    .mbsc-slider-handle:focus ~ .mbsc-slider-tooltip,
    .mbsc-active .mbsc-slider-tooltip {
      opacity: 1;
    }

    .mbsc-slider-step {
      height: 16px;
      width: 1px;
      top: -7px;
      z-index: -1;
    }

    /* fix for first tick */
    .mbsc-progress-bar + .mbsc-slider-step {
      margin: 0;
    }

    .mbsc-slider input:disabled ~ .mbsc-progress-cont .mbsc-progress-track {
      opacity: .4;
    }

    /* Slider color presets */
    &.mbsc-slider-primary .mbsc-progress-bar {
      background: $mbsc-windows-primary;
    }

    &.mbsc-slider-secondary .mbsc-progress-bar {
      background: $mbsc-windows-secondary;
    }

    &.mbsc-slider-success .mbsc-progress-bar {
      background: $mbsc-windows-success;
    }

    &.mbsc-slider-danger .mbsc-progress-bar {
      background: $mbsc-windows-danger;
    }

    &.mbsc-slider-warning .mbsc-progress-bar {
      background: $mbsc-windows-warning;
    }

    &.mbsc-slider-info .mbsc-progress-bar {
      background: $mbsc-windows-info;
    }
  }

  @include mbsc-windows-slider(windows, (background: $mbsc-windows-background, text: $mbsc-windows-text, accent: $mbsc-windows-accent));
}







@mixin mbsc-windows-rating($theme, $params) {
  @include exports("rating.#{$theme}.colors") {

    @include mbsc-windows-progress($theme, $params);

    $accent: map-get($params, accent);

    .mbsc-#{$theme}.mbsc-rating {
      .mbsc-progress-track {
        color: $accent;
      }
    }
  }
}



@include exports("rating.windows") {
  .mbsc-windows.mbsc-rating {
    input:disabled ~ .mbsc-progress-cont .mbsc-progress-track {
      opacity: .4;
    }

    /* Color presets */
    &.mbsc-rating-primary .mbsc-progress-track {
      color: $mbsc-windows-primary;
    }

    &.mbsc-rating-secondary .mbsc-progress-track {
      color: $mbsc-windows-secondary;
    }

    &.mbsc-rating-success .mbsc-progress-track {
      color: $mbsc-windows-success;
    }

    &.mbsc-rating-danger .mbsc-progress-track {
      color: $mbsc-windows-danger;
    }

    &.mbsc-rating-warning .mbsc-progress-track {
      color: $mbsc-windows-warning;
    }

    &.mbsc-rating-info .mbsc-progress-track {
      color: $mbsc-windows-info;
    }
  }

  @include mbsc-windows-rating(windows, (background: $mbsc-windows-background, text: $mbsc-windows-text, accent: $mbsc-windows-accent));
}







// Theme specific variables - inherited from global variables

// Background
$mbsc-windows-frame-background: $mbsc-frame-background-light !default;
$mbsc-windows-dark-frame-background: $mbsc-frame-background-dark !default;
// Text
$mbsc-windows-frame-text: $mbsc-frame-text-light !default;
$mbsc-windows-dark-frame-text: $mbsc-frame-text-dark !default;
// Accent
$mbsc-windows-frame-accent: $mbsc-frame-accent-light !default;
$mbsc-windows-dark-frame-accent: $mbsc-frame-accent-dark !default;
// Overlay
$mbsc-windows-frame-overlay: $mbsc-frame-overlay-light !default;
$mbsc-windows-dark-frame-overlay: $mbsc-frame-overlay-dark !default;

$mbsc-windows-colors: map-merge($mbsc-windows-colors, (
  'frame-background': $mbsc-windows-frame-background,
  'frame-text': $mbsc-windows-frame-text,
  'frame-accent': $mbsc-windows-frame-accent,
  'frame-overlay': $mbsc-windows-frame-overlay,
));

$mbsc-windows-dark-colors: map-merge($mbsc-windows-dark-colors, (
  'frame-background': $mbsc-windows-dark-frame-background,
  'frame-text': $mbsc-windows-dark-frame-text,
  'frame-accent': $mbsc-windows-dark-frame-accent,
  'frame-overlay': $mbsc-windows-dark-frame-overlay,
));

@mixin mbsc-windows-frame($theme, $params) {
  @include exports("frame.#{$theme}.colors") {

    $background: map-get($params, 'background');
    $text: map-get($params, 'text');

    $overlay-param: map-get($params, 'frame-overlay');
    $background-param: map-get($params, 'frame-background');
    $text-param: map-get($params, 'frame-text');

    $background: if($background-param, $background-param, $background);
    $text: if($text-param, $text-param, $text);
    $overlay: if($overlay-param, $overlay-param, rgba(0, 0, 0, .7));

    $button-hover: '';
    $frame-border: '';
    @if(lightness($background) > 50%) {
      $button-hover: darken($background, 10%);
      $frame-border: darken($background, 15%);
    }
    @else {
      $button-hover: lighten($background, 10%);
      $frame-border: lighten($background, 15%);
    }

    .mbsc-#{$theme} {
      .mbsc-fr-overlay {
        background: $overlay;
      }

      .mbsc-fr-w {
        background: $background;
        color: $text;
        border: 1px solid $frame-border;
      }

      .mbsc-fr-hdr {
        border-bottom: 2px solid $frame-border;
      }

      .mbsc-fr-btn-cont {
        border-top: 2px solid $frame-border;
      }

      .mbsc-fr-btn-w {
        background: $background;
      }

      .mbsc-fr-btn {
        color: $text;
      }

      &.mbsc-no-touch .mbsc-fr-btn-e:not(.mbsc-disabled):hover,
      .mbsc-fr-btn.mbsc-active {
        background: $button-hover;
      }

      .mbsc-fr-arr {
        background: $background;
        border: 1px solid $frame-border;
      }
    }
  }
}



@include exports("frame.windows") {
  .mbsc-windows {
    .mbsc-fr-w {
      font-size: 16px;
    }

    .mbsc-ltr .mbsc-fr-btn-w .mbsc-fr-btn:before {
      padding: 0 .375em 0 0;
    }

    .mbsc-rtl .mbsc-fr-btn-w .mbsc-fr-btn:before {
      padding: 0 0 0 .375em;
    }

    &.mbsc-fr-inline .mbsc-fr-w {
      border: 0;
    }

    .mbsc-fr-hdr {
      padding: .5em;
      font-weight: bold;
    }

    .mbsc-fr-btn {
      height: 2.5em;
      line-height: 2.5em;
      text-align: center;
      padding: 0 .375em;
    }

    .mbsc-fr-arr-w {
      margin: -1px 0;
    }
  }

  @include mbsc-windows-frame(windows, $mbsc-windows-colors);
}





@mixin mbsc-windows-popup($theme, $params) {
  @include exports("popup.#{$theme}.colors") {

    @include mbsc-windows-frame($theme, $params);
    $colors: mbsc-windows-colors($params);
    $frame-border: map-get($colors, frame-border);

    .mbsc-#{$theme} {
      &.mbsc-wdg.mbsc-fr-btn {
        background: $frame-border;
      }
    }
  }
}



@include exports("popup.windows") {
  .mbsc-windows.mbsc-wdg {
    .mbsc-fr-btn-cont {
      padding: 1em .875em;
      border-top: 0;
    }

    .mbsc-fr-btn {
      margin: 0 .125em;
      height: 2em;
      line-height: 2em;
    }
  }

  @include mbsc-windows-popup(windows, (background: $mbsc-windows-background, text: $mbsc-windows-text, accent: $mbsc-windows-accent));
}





@mixin mbsc-windows-notifications($theme, $params) {
  @include exports("notifications.#{$theme}.colors") {

    @include mbsc-windows-popup($theme, $params);

    $background: map-get($params, 'background');
    $accent: map-get($params, 'accent');

    $colors: mbsc-windows-colors($params);
    $dark-text: map-get($colors, 'dark-text');
    $light-text: map-get($colors, 'light-text');
    $input-hover: '';
    @if (lightness($background) > 50%) {
      $input-hover: darken($background, 55%);
    }
    @else {
      $input-hover: lighten($background, 55%);
    }

    .mbsc-#{$theme} {

      /* Snackbar */
      &.mbsc-snackbar .mbsc-snackbar-btn {
        color: $accent;
      }

      /* Toast */
      &.mbsc-toast .mbsc-toast-msg {
        background: $input-hover;
        color: get-contrast-color($input-hover);
      }

      /* Snackbar and Toast color presets */

      &.mbsc-snackbar.mbsc-primary .mbsc-fr-w,
      &.mbsc-toast.mbsc-primary .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w,
      &.mbsc-toast.mbsc-secondary .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-success .mbsc-fr-w,
      &.mbsc-toast.mbsc-success .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-danger .mbsc-fr-w,
      &.mbsc-toast.mbsc-danger .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-warning .mbsc-fr-w,
      &.mbsc-toast.mbsc-warning .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-info .mbsc-fr-w,
      &.mbsc-toast.mbsc-info .mbsc-toast-msg,
      &.mbsc-snackbar.mbsc-primary .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-secondary .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-success .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-danger .mbsc-snackbar-btn,
      &.mbsc-snackbar.mbsc-info .mbsc-snackbar-btn {
        color: $light-text;
      }

      &.mbsc-snackbar.mbsc-warning .mbsc-snackbar-btn {
        color: $dark-text;
      }
    }
  }
}



@include exports("notifications.windows") {
  .mbsc-windows {

    /* Toast */
    &.mbsc-toast .mbsc-fr-w,
    &.mbsc-snackbar .mbsc-fr-w {
      border: 0;
    }

    /* Snackbar and Toast color presets */
    &.mbsc-snackbar.mbsc-primary .mbsc-fr-w,
    &.mbsc-toast.mbsc-primary .mbsc-toast-msg {
      background: $mbsc-windows-primary;
    }

    &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w,
    &.mbsc-toast.mbsc-secondary .mbsc-toast-msg {
      background: $mbsc-windows-secondary;
    }

    &.mbsc-snackbar.mbsc-success .mbsc-fr-w,
    &.mbsc-toast.mbsc-success .mbsc-toast-msg {
      background: $mbsc-windows-success;
    }

    &.mbsc-snackbar.mbsc-danger .mbsc-fr-w,
    &.mbsc-toast.mbsc-danger .mbsc-toast-msg {
      background: $mbsc-windows-danger;
    }

    &.mbsc-snackbar.mbsc-warning .mbsc-fr-w,
    &.mbsc-toast.mbsc-warning .mbsc-toast-msg {
      background: $mbsc-windows-warning;
    }

    &.mbsc-snackbar.mbsc-info .mbsc-fr-w,
    &.mbsc-toast.mbsc-info .mbsc-toast-msg {
      background: $mbsc-windows-info;
    }
  }

  @include mbsc-windows-notifications(windows, (background: $mbsc-windows-background, text: $mbsc-windows-text, accent: $mbsc-windows-accent));
}









// Theme specific variables - inherited from global variables

// General colors for the form
// Background
$mbsc-windows-form-background: $mbsc-form-background-light !default;
$mbsc-windows-dark-form-background: $mbsc-form-background-dark !default;
// Text
$mbsc-windows-form-text: $mbsc-form-text-light !default;
$mbsc-windows-dark-form-text: $mbsc-form-text-dark !default;
// Accent
$mbsc-windows-form-accent: $mbsc-form-accent-light !default;
$mbsc-windows-dark-form-accent: $mbsc-form-accent-dark !default;

// Button
// button background
$mbsc-windows-button-color: $mbsc-button-color-light !default;
$mbsc-windows-dark-button-color: $mbsc-button-color-dark !default;
// button text
$mbsc-windows-button-text: $mbsc-button-text-light !default;
$mbsc-windows-dark-button-text: $mbsc-button-text-dark !default;

// Form Group
// text
$mbsc-windows-form-group-title-text: $mbsc-form-group-title-text-light !default;
$mbsc-windows-dark-form-group-title-text: $mbsc-form-group-title-text-dark !default;

// add variables to light and dark color maps
$mbsc-windows-colors: map-merge($mbsc-windows-colors, (
  'form-background': $mbsc-windows-form-background,
  'form-text': $mbsc-windows-form-text,
  'form-accent': $mbsc-windows-form-accent,
  'button-color': $mbsc-windows-button-color,
  'button-text': $mbsc-windows-button-text,
  'form-group-title-text': $mbsc-windows-form-group-title-text,
));
$mbsc-windows-dark-colors: map-merge($mbsc-windows-dark-colors, (
  'form-background': $mbsc-windows-dark-form-background,
  'form-text': $mbsc-windows-dark-form-text,
  'form-accent': $mbsc-windows-dark-form-accent,
  'button-color': $mbsc-windows-dark-button-color,
  'button-text': $mbsc-windows-dark-button-text,
  'form-group-title-text': $mbsc-windows-dark-form-group-title-text,
));

@mixin mbsc-windows-forms($theme, $params) {
  @include exports("forms.#{$theme}.colors") {

    @include mbsc-windows-page($theme, $params);
    @include mbsc-windows-input($theme, $params);
    @include mbsc-windows-slider($theme, $params);
    @include mbsc-windows-rating($theme, $params);
    @include mbsc-windows-notifications($theme, $params);

    $background: map-get($params, 'background');
    $text: map-get($params, 'text');
    $accent: map-get($params, 'accent');
    // form specific
    $background-param: map-get($params, 'form-background');
    $text-param: map-get($params, 'form-text');
    $accent-param: map-get($params, 'form-accent');
    // form component specific
    $button-text-param: map-get($params, 'button-text');
    $button-background-param: map-get($params, 'button-color');
    $group-title-param: map-get($params, 'form-group-title-text');
    // overwrite custom variables
    $background: if($background-param, $background-param, $background);
    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
    $accent: if($accent-param, $accent-param, $accent);

    $form-background: '';
    $checkbox-border: '';
    $button-border: '';
    $frame-border: '';
    $input-border: '';
    $input-hover: '';
    $border-color: '';
    $segmented-disabled: '';
    $button-active: '';
    $button-hover: '';
    @if (lightness($background) > 50%) {
      $form-background: lighten($background, 13%);
      $checkbox-border: desaturate(lighten($accent, 52%), 24%);
      $button-border: lighten($text, 33%);
      $frame-border: darken($background, 15%);
      $input-border: darken($background, 35%);
      $input-hover: darken($background, 55%);
      $border-color: darken($background, 19%);
      $segmented-disabled: darken($background, 17%);
      $button-active: darken($background, 45%);
      $button-hover: darken($background, 10%);
    }
    @else {
      $form-background: darken($background, 12%);
      $checkbox-border: saturate(darken($accent, 52%), 24%);
      $button-border: darken($text, 33%);
      $frame-border: lighten($background, 15%);
      $input-border: lighten($background, 35%);
      $input-hover: lighten($background, 55%);
      $border-color: lighten($background, 19%);
      $segmented-disabled: lighten($background, 19%);
      $button-active: lighten($background, 45%);
      $button-hover: lighten($background, 10%);
    }


    // overwrite custom variables
    $button-background: if($button-background-param, $button-background-param, $frame-border);
    $button-text: if($button-text-param, $button-text-param, if($button-background-param, get-contrast-color($button-background-param), $text));
    $button-active: if($button-background-param, $button-background-param, $button-active);
    $group-title: if($group-title-param, $group-title-param, $text);

    .mbsc-#{$theme} {

      &.mbsc-form {
        background-color: $form-background;
        color: $text;
      }

      &.mbsc-control-w {
        color: $text;
      }

      &.mbsc-form *::-moz-selection,
      &.mbsc-control-w *::-moz-selection,
      &.mbsc-form *::selection,
      &.mbsc-control-w *::selection {
        color: get-contrast-color($accent);
        background: rgba($accent, .9);
      }

      .mbsc-form-group-title {
        color: $group-title;
      }

      /* Checkbox, radio */
      .mbsc-checkbox-box,
      .mbsc-radio-box {
        border: .125em solid $text;
      }

      .mbsc-checkbox-box:after {
        border: .125em solid $checkbox-border;
        border-top: 0;
        border-right: 0;
      }

      &.mbsc-checkbox input:checked+.mbsc-checkbox-box {
        background: $accent;
        border-color: $accent;
      }

      &.mbsc-checkbox input.mbsc-active+.mbsc-checkbox-box {
        border-color: $input-hover;
        background: $input-hover;
      }

      /* Radio */
      .mbsc-radio-box:after {
        background: $text;
      }

      &.mbsc-radio input:checked+.mbsc-radio-box {
        border-color: $accent;
      }

      &.mbsc-radio input.mbsc-active+.mbsc-radio-box {
        border-color: rgba($text, .6);
      }

      &.mbsc-radio input.mbsc-active+.mbsc-radio-box:after {
        background: rgba($text, .6);
      }

      /* Buttons */
      &.mbsc-btn {
        background: $button-background; // $frame-border;
        border: .125em solid $button-background; // .125em solid $frame-border;
        color: $button-text;
      }

      &.mbsc-no-touch.mbsc-btn:not(.mbsc-btn-flat):not(:disabled):hover {
        border-color: $button-border;
      }

      &.mbsc-btn.mbsc-active {
        border-color: $button-border;
        background: $button-border;
      }

      &.mbsc-no-touch.mbsc-btn-flat:not(:disabled):hover {
        background: transparent;
        border-color: transparent;
      }

      &.mbsc-btn.mbsc-btn-flat.mbsc-active:not(:disabled) {
        background: rgba($button-background, .25); // rgba($frame-border, .25);
      }

      /* Outline buttons */
      &.mbsc-btn.mbsc-btn-outline {
        background: transparent;
        border: 0.125em solid $input-border;
        color: $input-border;

        &.mbsc-active {
          background: $button-active;
          border-color: $button-active;
          color: $button-text;
        }
      }

      /* button hover style */
      &.mbsc-no-touch.mbsc-btn.mbsc-btn-outline:not(:disabled):hover {
        border-color: $button-active;
      }

      .mbsc-switch-track {
        border: 2px solid $text;
      }

      .mbsc-switch-track .mbsc-switch-handle {
        background: $text;
      }

      &.mbsc-switch input:checked+.mbsc-switch-track {
        background: $accent;
        border-color: $accent;

        .mbsc-switch-handle {
          background: $background;
        }
      }

      &.mbsc-switch input:checked:disabled+.mbsc-switch-track {
        background: $text;
        border-color: $text;
      }

      &.mbsc-form .mbsc-switch input.mbsc-active+.mbsc-switch-track {
        background: $input-hover;
        border-color: $input-hover;

        .mbsc-switch-handle {
          background: $background;
        }
      }

      /* Segmented & Stepper */
      .mbsc-segmented-content {
        color: $text;
        background: $frame-border;
      }

      .mbsc-segmented-content.mbsc-stepper-val {
        background: transparent;
        border-top: 2px solid $frame-border;
        border-bottom: 2px solid $frame-border;
      }

      &.mbsc-ltr.mbsc-segmented:not(.mbsc-stepper) .mbsc-segmented-item {
        border-right: 1px solid $border-color;
      }

      &.mbsc-rtl.mbsc-segmented:not(.mbsc-stepper) .mbsc-segmented-item {
        border-left: 1px solid $border-color;
      }

      &.mbsc-segmented:not(.mbsc-stepper) .mbsc-segmented-item:last-child,
      &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-plus,
      &.mbsc-stepper-val-left .mbsc-segmented input+.mbsc-segmented-item,
      &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control {
        border: 0;
      }

      &.mbsc-ltr.mbsc-segmented .mbsc-stepper-control+.mbsc-stepper-control {
        border-left: 1px solid $border-color;
      }

      &.mbsc-rtl.mbsc-segmented .mbsc-stepper-control+.mbsc-stepper-control {
        border-right: 1px solid $border-color;
      }

      &.mbsc-segmented .mbsc-segmented-item input:checked+.mbsc-segmented-content {
        background: $text;
        color: $form-background;
      }

      &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item input:checked+.mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content {
        background: $button-border;
      }

      .mbsc-stepper .mbsc-segmented-item.mbsc-active .mbsc-segmented-content {
        background: $button-border;
      }

      &.mbsc-segmented input:disabled~.mbsc-segmented-item .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-disabled .mbsc-segmented-content,
      .mbsc-stepper .mbsc-segmented-item.mbsc-disabled .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item input:disabled+.mbsc-segmented-content {
        background: $frame-border;
      }

      .mbsc-stepper input:disabled {
        color: $segmented-disabled;
        -webkit-text-fill-color: $segmented-disabled;
      }

      &.mbsc-segmented .mbsc-segmented-item input:disabled:checked+.mbsc-segmented-content {
        color: $form-background;
        background: $segmented-disabled;
      }

      .mbsc-stepper .mbsc-active.mbsc-disabled .mbsc-segmented-content {
        background: transparent;
      }

      .mbsc-stepper input {
        color: $text;
      }

      &.mbsc-no-touch .mbsc-segmented-item:hover .mbsc-segmented-content {
        background: $button-hover;
      }
    }
  }
}


@include exports("forms.windows") {
  .mbsc-windows {

    .mbsc-divider,
    .mbsc-form-group-title {
      font-size: 1.5em;
      padding: 0 .666667em;
      line-height: 2em;
    }

    /* Checkbox, switch */
    &.mbsc-checkbox .mbsc-err-msg,
    &.mbsc-switch .mbsc-err-msg,
    &.mbsc-radio .mbsc-err-msg {
      padding-top: 0;
    }

    /* Checkbox, radio */
    .mbsc-checkbox-box,
    .mbsc-radio-box {
      margin-top: -.6875em;
    }

    &.mbsc-checkbox input:disabled + .mbsc-checkbox-box,
    &.mbsc-checkbox input:disabled ~ .mbsc-label,
    &.mbsc-checkbox input:disabled ~ .mbsc-desc,
    &.mbsc-radio input:disabled + .mbsc-radio-box,
    &.mbsc-radio input:disabled ~ .mbsc-label,
    &.mbsc-radio input:disabled ~ .mbsc-desc,
    &.mbsc-switch input:disabled + .mbsc-switch-track,
    &.mbsc-switch input:disabled ~ .mbsc-label,
    &.mbsc-switch input:disabled ~ .mbsc-desc {
      opacity: .2;
    }

    /* Checkbox */
    &.mbsc-ltr.mbsc-checkbox {
      padding: 1.125em 1em 1.125em 2.875em;
    }

    &.mbsc-rtl.mbsc-checkbox {
      padding: 1.125em 2.875em 1.125em 1em;
    }

    .mbsc-checkbox-box {
      width: 1.3125em;
      height: 1.3125em;
      left: 1em;
    }

    &.mbsc-rtl .mbsc-checkbox-box {
      left: auto;
      right: 1em;
    }

    .mbsc-checkbox-box:after {
      top: 16%;
      left: 10%;
      width: .875em;
      height: .475em;
    }

    /* Checkbox color presets */
    &.mbsc-checkbox-primary.mbsc-checkbox input:checked + .mbsc-checkbox-box {
      background: $mbsc-windows-primary;
      border-color: $mbsc-windows-primary;
    }

    &.mbsc-checkbox-secondary.mbsc-checkbox input:checked + .mbsc-checkbox-box {
      background: $mbsc-windows-secondary;
      border-color: $mbsc-windows-secondary;
    }

    &.mbsc-checkbox-success.mbsc-checkbox input:checked + .mbsc-checkbox-box {
      background: $mbsc-windows-success;
      border-color: $mbsc-windows-success;
    }

    &.mbsc-checkbox-danger.mbsc-checkbox input:checked + .mbsc-checkbox-box {
      background: $mbsc-windows-danger;
      border-color: $mbsc-windows-danger;
    }

    &.mbsc-checkbox-warning.mbsc-checkbox input:checked + .mbsc-checkbox-box {
      background: $mbsc-windows-warning;
      border-color: $mbsc-windows-warning;
    }

    &.mbsc-checkbox-info.mbsc-checkbox input:checked + .mbsc-checkbox-box {
      background: $mbsc-windows-info;
      border-color: $mbsc-windows-info;
    }

    /* Radio */
    &.mbsc-ltr.mbsc-radio {
      padding: 1.125em 3.25em 1.125em 1em;
    }

    &.mbsc-rtl.mbsc-radio {
      padding: 1.125em 1em 1.125em 3.25em;
    }

    .mbsc-radio-box {
      right: 1.125em;
    }

    &.mbsc-rtl .mbsc-radio-box {
      right: auto;
      left: 1.125em;
    }

    /* Radio color presets */
    &.mbsc-radio-primary .mbsc-radio-box:after {
      background: $mbsc-windows-primary;
    }

    &.mbsc-radio-secondary .mbsc-radio-box:after {
      background: $mbsc-windows-secondary;
    }

    &.mbsc-radio-success .mbsc-radio-box:after {
      background: $mbsc-windows-success;
    }

    &.mbsc-radio-danger .mbsc-radio-box:after {
      background: $mbsc-windows-danger;
    }

    &.mbsc-radio-warning .mbsc-radio-box:after {
      background: $mbsc-windows-warning;
    }

    &.mbsc-radio-info .mbsc-radio-box:after {
      background: $mbsc-windows-info;
    }

    /* Buttons */
    &.mbsc-btn {
      margin: .5em .25em;
      padding: .3125em .5em;
      border-radius: 0;
    }

    .mbsc-btn-ic {
      padding-right: .5em;
    }

    .mbsc-btn-icon-only .mbsc-btn-ic {
      padding: 0;
    }

    &.mbsc-btn:disabled {
      opacity: .3;
    }

    &.mbsc-no-touch.mbsc-btn-flat:not(:disabled):hover {
      opacity: .7;
    }

    &.mbsc-btn.mbsc-btn-flat.mbsc-active:not(:disabled) {
      opacity: 1;
    }

    .mbsc-btn-group,
    .mbsc-btn-group-justified {
      margin: .5em .75em;
    }

    .mbsc-btn-group-block {
      margin: .5em 1em;
    }

    /* Button color presets*/
    &.mbsc-btn-primary.mbsc-btn {
      color: get-contrast-color($mbsc-windows-primary);
      background: $mbsc-windows-primary;
      border-color: $mbsc-windows-primary;

      &.mbsc-btn-flat {
        color: $mbsc-windows-primary;
        background: transparent;
        border-color: transparent;

        &.mbsc-active {
          background: rgba($mbsc-windows-primary, .25);
        }
      }
    }

    &.mbsc-btn-secondary.mbsc-btn {
      color: get-contrast-color($mbsc-windows-secondary);
      background: $mbsc-windows-secondary;
      border-color: $mbsc-windows-secondary;

      &.mbsc-btn-flat {
        color: $mbsc-windows-secondary;
        background: transparent;
        border-color: transparent;

        &.mbsc-active {
          background: rgba($mbsc-windows-secondary, .25);
        }
      }
    }

    &.mbsc-btn-success.mbsc-btn {
      color: get-contrast-color($mbsc-windows-success);
      background: $mbsc-windows-success;
      border-color: $mbsc-windows-success;

      &.mbsc-btn-flat {
        color: $mbsc-windows-success;
        background: transparent;
        border-color: transparent;

        &.mbsc-active {
          background: rgba($mbsc-windows-success, .25);
        }
      }
    }

    &.mbsc-btn-danger.mbsc-btn {
      color: get-contrast-color($mbsc-windows-danger);
      background: $mbsc-windows-danger;
      border-color: $mbsc-windows-danger;

      &.mbsc-btn-flat {
        color: $mbsc-windows-danger;
        background: transparent;
        border-color: transparent;

        &.mbsc-active {
          background: rgba($mbsc-windows-danger, .25);
        }
      }
    }

    &.mbsc-btn-warning.mbsc-btn {
      color: get-contrast-color($mbsc-windows-warning);
      background: $mbsc-windows-warning;
      border-color: $mbsc-windows-warning;

      &.mbsc-btn-flat {
        color: $mbsc-windows-warning;
        background: transparent;
        border-color: transparent;

        &.mbsc-active {
          background: rgba($mbsc-windows-warning, .25);
        }
      }
    }

    &.mbsc-btn-info.mbsc-btn {
      color: get-contrast-color($mbsc-windows-info);
      background: $mbsc-windows-info;
      border-color: $mbsc-windows-info;

      &.mbsc-btn-flat {
        color: $mbsc-windows-info;
        background: transparent;
        border-color: transparent;

        &.mbsc-active {
          background: rgba($mbsc-windows-info, .25);
        }
      }
    }

    &.mbsc-btn-light.mbsc-btn {
      color: get-contrast-color($mbsc-windows-light);
      background: darken($mbsc-windows-light, 25%);
      border-color: darken($mbsc-windows-light, 25%);

      &.mbsc-btn-flat {
        color: darken($mbsc-windows-light, 25%);
        background: transparent;
        border-color: transparent;

        &.mbsc-active {
          background: rgba(darken($mbsc-windows-light, 25%), .25);
        }
      }
    }

    &.mbsc-btn-dark.mbsc-btn {
      color: get-contrast-color($mbsc-windows-dark);
      background: $mbsc-windows-dark;
      border-color: $mbsc-windows-dark;

      &.mbsc-btn-flat {
        color: $mbsc-windows-dark;
        background: transparent;
        border-color: transparent;

        &.mbsc-active {
          background: rgba($mbsc-windows-dark, .25);
        }
      }
    }

    /* Outline buttons */
    &.mbsc-btn.mbsc-btn-outline.mbsc-active {
      opacity: 1;
    }

    /* Outline buttons */
    &.mbsc-btn.mbsc-btn-outline {
      &.mbsc-btn-primary {
        border-color: $mbsc-windows-primary;
        color: $mbsc-windows-primary;
        background: transparent;

        &.mbsc-active {
          background: $mbsc-windows-primary;
          color: $mbsc-windows-light;
        }
      }

      &.mbsc-btn-secondary {
        border-color: $mbsc-windows-secondary;
        color: $mbsc-windows-secondary;
        background: transparent;

        &.mbsc-active {
          background: $mbsc-windows-secondary;
          color: $mbsc-windows-light;
        }
      }

      &.mbsc-btn-success {
        border-color: $mbsc-windows-success;
        color: $mbsc-windows-success;
        background: transparent;

        &.mbsc-active {
          background: $mbsc-windows-success;
          color: $mbsc-windows-light;
        }
      }

      &.mbsc-btn-danger {
        border-color: $mbsc-windows-danger;
        color: $mbsc-windows-danger;
        background: transparent;

        &.mbsc-active {
          background: $mbsc-windows-danger;
          color: $mbsc-windows-light;
        }
      }

      &.mbsc-btn-warning {
        border-color: $mbsc-windows-warning;
        color: $mbsc-windows-warning;
        background: transparent;

        &.mbsc-active {
          background: $mbsc-windows-warning;
          color: $mbsc-windows-light;
        }
      }

      &.mbsc-btn-info {
        border-color: $mbsc-windows-info;
        color: $mbsc-windows-info;
        background: transparent;

        &.mbsc-active {
          background: $mbsc-windows-info;
          color: $mbsc-windows-light;
        }
      }

      &.mbsc-btn-light {
        border-color: darken($mbsc-windows-light, 25%);
        color: darken($mbsc-windows-light, 25%);
        background: transparent;

        &.mbsc-active {
          background: darken($mbsc-windows-light, 25%);
          color: $mbsc-windows-dark;
        }
      }

      &.mbsc-btn-dark {
        border-color: $mbsc-windows-dark;
        color: $mbsc-windows-dark;
        background: transparent;

        &.mbsc-active {
          background: $mbsc-windows-dark;
          color: $mbsc-windows-light;
        }
      }
    }

    /* button hover style */
    &.mbsc-no-touch {
      &.mbsc-btn-primary.mbsc-btn {
        &:not(.mbsc-btn-flat):not(:disabled):hover {
          border-color: darken($mbsc-windows-primary, 20%);
        }
      }

      &.mbsc-btn-secondary.mbsc-btn {
        &:not(.mbsc-btn-flat):not(:disabled):hover {
          border-color: darken($mbsc-windows-secondary, 20%);
        }
      }

      &.mbsc-btn-success.mbsc-btn {
        &:not(.mbsc-btn-flat):not(:disabled):hover {
          border-color: darken($mbsc-windows-success, 20%);
        }
      }

      &.mbsc-btn-danger.mbsc-btn {
        &:not(.mbsc-btn-flat):not(:disabled):hover {
          border-color: darken($mbsc-windows-danger, 20%);
        }
      }

      &.mbsc-btn-warning.mbsc-btn {
        &:not(.mbsc-btn-flat):not(:disabled):hover {
          border-color: darken($mbsc-windows-warning, 20%);
        }
      }

      &.mbsc-btn-info.mbsc-btn {
        &:not(.mbsc-btn-flat):not(:disabled):hover {
          border-color: darken($mbsc-windows-info, 20%);
        }
      }

      &.mbsc-btn-light.mbsc-btn {
        &:not(.mbsc-btn-flat):not(:disabled):hover {
          border-color: darken($mbsc-windows-light, 40%);
        }
      }

      &.mbsc-btn-dark.mbsc-btn {
        &:not(.mbsc-btn-flat):not(:disabled):hover {
          border-color: darken($mbsc-windows-dark, 30%);
        }
      }
    }

    /* button active style */
    .mbsc-btn-primary.mbsc-btn {
      &.mbsc-active:not(.mbsc-btn-flat):not(:disabled) {
        background: darken($mbsc-windows-primary, 20%);
        border-color: darken($mbsc-windows-primary, 20%);
      }
    }

    .mbsc-btn-secondary.mbsc-btn {
      &.mbsc-active:not(.mbsc-btn-flat):not(:disabled) {
        background: darken($mbsc-windows-secondary, 20%);
        border-color: darken($mbsc-windows-secondary, 20%);
      }
    }

    .mbsc-btn-success.mbsc-btn {
      &.mbsc-active:not(.mbsc-btn-flat):not(:disabled) {
        background: darken($mbsc-windows-success, 20%);
        border-color: darken($mbsc-windows-success, 20%);
      }
    }

    .mbsc-btn-danger.mbsc-btn {
      &.mbsc-active:not(.mbsc-btn-flat):not(:disabled) {
        background: darken($mbsc-windows-danger, 20%);
        border-color: darken($mbsc-windows-danger, 20%);
      }
    }

    .mbsc-btn-warning.mbsc-btn {
      &.mbsc-active:not(.mbsc-btn-flat):not(:disabled) {
        background: darken($mbsc-windows-warning, 20%);
        border-color: darken($mbsc-windows-warning, 20%);
      }
    }

    .mbsc-btn-info.mbsc-btn {
      &.mbsc-active:not(.mbsc-btn-flat):not(:disabled) {
        background: darken($mbsc-windows-info, 20%);
        border-color: darken($mbsc-windows-info, 20%);
      }
    }

    .mbsc-btn-light.mbsc-btn {
      &.mbsc-active:not(.mbsc-btn-flat):not(:disabled) {
        background: darken($mbsc-windows-light, 40%);
        border-color: darken($mbsc-windows-light, 40%);
      }
    }

    .mbsc-btn-dark.mbsc-btn {
      &.mbsc-active:not(.mbsc-btn-flat):not(:disabled) {
        background: darken($mbsc-windows-dark, 30%);
        border-color: darken($mbsc-windows-dark, 30%);
      }
    }

    /* Flat buttons */
    &.mbsc-btn.mbsc-btn-flat {
      background: transparent;
      border-color: transparent;
    }

    /* Switch */
    &.mbsc-ltr.mbsc-switch {
      padding: 1.125em 5.875em 1.125em 1em;
    }

    &.mbsc-rtl.mbsc-switch {
      padding: 1.125em 1em 1.125em 5.875em;
    }

    .mbsc-switch-track {
      right: 1.125em;
      width: 2.75em;
      height: 1.25em;
      margin-top: -0.645em;
      padding: 0 .5em;
      border-radius: 10px;
    }

    &.mbsc-rtl .mbsc-switch-track {
      right: auto;
      left: 1.125em;
    }

    .mbsc-switch-track .mbsc-switch-handle {
      z-index: 1;
      top: 50%;
      left: 50%;
      right: auto;
      height: .625em;
      width: .625em;
      border-radius: 10px;
      margin: -0.3125em 0 0 -0.3125em;
    }

    /* Checkbox color presets */
    &.mbsc-switch-primary.mbsc-switch input:checked + .mbsc-switch-track {
      background: $mbsc-windows-primary;
      border-color: $mbsc-windows-primary;
    }

    &.mbsc-switch-secondary.mbsc-switch input:checked + .mbsc-switch-track {
      background: $mbsc-windows-secondary;
      border-color: $mbsc-windows-secondary;
    }

    &.mbsc-switch-success.mbsc-switch input:checked + .mbsc-switch-track {
      background: $mbsc-windows-success;
      border-color: $mbsc-windows-success;
    }

    &.mbsc-switch-danger.mbsc-switch input:checked + .mbsc-switch-track {
      background: $mbsc-windows-danger;
      border-color: $mbsc-windows-danger;
    }

    &.mbsc-switch-warning.mbsc-switch input:checked + .mbsc-switch-track {
      background: $mbsc-windows-warning;
      border-color: $mbsc-windows-warning;
    }

    &.mbsc-switch-info.mbsc-switch input:checked + .mbsc-switch-track {
      background: $mbsc-windows-info;
      border-color: $mbsc-windows-info;
    }

    /* Segmented & Stepper */
    &.mbsc-segmented {
      padding: .75em 1em;
    }

    .mbsc-segmented-content {
      height: 2.285715em;
      line-height: 2.285715em;
      padding: 0 .4285715em;
    }

    .mbsc-segmented-content.mbsc-stepper-val {
      box-sizing: border-box;
    }

    &.mbsc-segmented:not(.mbsc-stepper) .mbsc-segmented-item:last-child,
    &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-plus,
    &.mbsc-stepper-val-left .mbsc-segmented input + .mbsc-segmented-item,
    &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control {
      border: 0;
    }

    .mbsc-stepper {
      margin-top: -1em;
    }

    &.mbsc-ltr.mbsc-stepper-cont {
      padding: 1.75em 13em 1.75em 1em;
    }

    &.mbsc-rtl.mbsc-stepper-cont {
      padding: 1.75em 1em 1.75em 13em;
    }

    &.mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content,
    &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-disabled .mbsc-segmented-content,
    &.mbsc-stepper .mbsc-segmented-item.mbsc-disabled .mbsc-segmented-content,
    &.mbsc-segmented .mbsc-segmented-item input:disabled + .mbsc-segmented-content {
      opacity: .3;
    }

    &.mbsc-segmented {

      /* Segmented color presets */
      .mbsc-segmented-primary {

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content,
        &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
          background: $mbsc-windows-primary;
        }
      }

      .mbsc-segmented-secondary {

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content,
        &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
          background: $mbsc-windows-secondary;
        }
      }

      .mbsc-segmented-success {

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content,
        &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
          background: $mbsc-windows-success;
        }
      }

      .mbsc-segmented-danger {

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content,
        &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
          background: $mbsc-windows-danger;
        }
      }

      .mbsc-segmented-warning {

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content,
        &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
          background: $mbsc-windows-warning;
        }
      }

      .mbsc-segmented-info {

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content,
        &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
          background: $mbsc-windows-info;
        }
      }
    }

    &.mbsc-no-touch {

      /* Segmented hover color presets*/
      &.mbsc-segmented-primary {
        &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active) + .mbsc-segmented-content {
          background: rgba($mbsc-windows-primary, .25);
        }
      }

      &.mbsc-segmented-secondary {
        &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active) + .mbsc-segmented-content {
          background: rgba($mbsc-windows-secondary, .25);
        }
      }

      &.mbsc-segmented-success {
        &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active) + .mbsc-segmented-content {
          background: rgba($mbsc-windows-success, .25);
        }
      }

      &.mbsc-segmented-danger {
        &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active) + .mbsc-segmented-content {
          background: rgba($mbsc-windows-danger, .25);
        }
      }

      &.mbsc-segmented-warning {
        &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active) + .mbsc-segmented-content {
          background: rgba($mbsc-windows-warning, .25);
        }
      }

      &.mbsc-segmented-info {
        &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active) + .mbsc-segmented-content {
          background: rgba($mbsc-windows-info, .25);
        }
      }

      /* Stepper hover color presets*/
      &.mbsc-stepper-primary {
        .mbsc-segmented .mbsc-segmented-item:not(.mbsc-disabled):hover .mbsc-segmented-content {
          background: darken($mbsc-windows-primary, 10%);
        }
      }

      &.mbsc-stepper-secondary {
        .mbsc-segmented .mbsc-segmented-item:not(.mbsc-disabled):hover .mbsc-segmented-content {
          background: darken($mbsc-windows-secondary, 10%)
        }
      }

      &.mbsc-stepper-success {
        .mbsc-segmented .mbsc-segmented-item:not(.mbsc-disabled):hover .mbsc-segmented-content {
          background: darken($mbsc-windows-success, 10%)
        }
      }

      &.mbsc-stepper-danger {
        .mbsc-segmented .mbsc-segmented-item:not(.mbsc-disabled):hover .mbsc-segmented-content {
          background: darken($mbsc-windows-danger, 10%)
        }
      }

      &.mbsc-stepper-warning {
        .mbsc-segmented .mbsc-segmented-item:not(.mbsc-disabled):hover .mbsc-segmented-content {
          background: darken($mbsc-windows-warning, 10%)
        }
      }

      &.mbsc-stepper-info {
        .mbsc-segmented .mbsc-segmented-item:not(.mbsc-disabled):hover .mbsc-segmented-content {
          background: darken($mbsc-windows-info, 10%)
        }
      }
    }

    /* Stepper color presets */
    &.mbsc-stepper-primary {
      .mbsc-segmented-content.mbsc-stepper-val {
        border-color: $mbsc-windows-primary;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control .mbsc-segmented-content {
        background: $mbsc-windows-primary;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active:not(.mbsc-disabled) .mbsc-segmented-content {
        background: darken($mbsc-windows-primary, 25%);
      }
    }

    &.mbsc-stepper-secondary {
      .mbsc-segmented-content.mbsc-stepper-val {
        border-color: $mbsc-windows-secondary;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control .mbsc-segmented-content {
        background: $mbsc-windows-secondary;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active:not(.mbsc-disabled) .mbsc-segmented-content {
        background: darken($mbsc-windows-secondary, 25%);
      }
    }

    &.mbsc-stepper-success {
      .mbsc-segmented-content.mbsc-stepper-val {
        border-color: $mbsc-windows-success;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control .mbsc-segmented-content {
        background: $mbsc-windows-success;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active:not(.mbsc-disabled) .mbsc-segmented-content {
        background: darken($mbsc-windows-success, 25%);
      }
    }

    &.mbsc-stepper-danger {
      .mbsc-segmented-content.mbsc-stepper-val {
        border-color: $mbsc-windows-danger;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control .mbsc-segmented-content {
        background: $mbsc-windows-danger;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active:not(.mbsc-disabled) .mbsc-segmented-content {
        background: darken($mbsc-windows-danger, 25%);
      }
    }

    &.mbsc-stepper-warning {
      .mbsc-segmented-content.mbsc-stepper-val {
        border-color: $mbsc-windows-warning;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control .mbsc-segmented-content {
        background: $mbsc-windows-warning;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active:not(.mbsc-disabled) .mbsc-segmented-content {
        background: darken($mbsc-windows-warning, 25%);
      }
    }

    &.mbsc-stepper-info {
      .mbsc-segmented-content.mbsc-stepper-val {
        border-color: $mbsc-windows-info;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control .mbsc-segmented-content {
        background: $mbsc-windows-info;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active:not(.mbsc-disabled) .mbsc-segmented-content {
        background: darken($mbsc-windows-info, 25%);
      }
    }
  }

  @include mbsc-windows-forms(windows, $mbsc-windows-colors);
}


// Grid Layout


@mixin mbsc-grid-sm() {
  .mbsc-col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

  .mbsc-col-sm-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .mbsc-col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .mbsc-col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .mbsc-col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .mbsc-col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .mbsc-col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .mbsc-col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .mbsc-col-sm-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .mbsc-col-sm-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .mbsc-col-sm-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .mbsc-col-sm-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .mbsc-col-sm-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .mbsc-col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .mbsc-offset-sm-0 {
    margin-left: 0;
  }

  .mbsc-offset-sm-1 {
    margin-left: 8.333333%;
  }

  .mbsc-offset-sm-2 {
    margin-left: 16.666667%;
  }

  .mbsc-offset-sm-3 {
    margin-left: 25%;
  }

  .mbsc-offset-sm-4 {
    margin-left: 33.333333%;
  }

  .mbsc-offset-sm-5 {
    margin-left: 41.666667%;
  }

  .mbsc-offset-sm-6 {
    margin-left: 50%;
  }

  .mbsc-offset-sm-7 {
    margin-left: 58.333333%;
  }

  .mbsc-offset-sm-8 {
    margin-left: 66.666667%;
  }

  .mbsc-offset-sm-9 {
    margin-left: 75%;
  }

  .mbsc-offset-sm-10 {
    margin-left: 83.333333%;
  }

  .mbsc-offset-sm-11 {
    margin-left: 91.666667%;
  }

  .mbsc-push-sm-0 {
    left: auto;
  }

  .mbsc-push-sm-1 {
    left: 8.33333333%;
  }

  .mbsc-push-sm-2 {
    left: 16.66666667%;
  }

  .mbsc-push-sm-3 {
    left: 25%;
  }

  .mbsc-push-sm-4 {
    left: 33.33333333%;
  }

  .mbsc-push-sm-5 {
    left: 41.66666667%;
  }

  .mbsc-push-sm-6 {
    left: 50%;
  }

  .mbsc-push-sm-7 {
    left: 58.33333333%;
  }

  .mbsc-push-sm-8 {
    left: 66.66666667%;
  }

  .mbsc-push-sm-9 {
    left: 75%;
  }

  .mbsc-push-sm-10 {
    left: 83.33333333%;
  }

  .mbsc-push-sm-11 {
    left: 91.66666667%;
  }

  .mbsc-push-sm-12 {
    left: 100%;
  }

  .mbsc-pull-sm-0 {
    right: auto;
  }

  .mbsc-pull-sm-1 {
    right: 8.33333333%;
  }

  .mbsc-pull-sm-2 {
    right: 16.66666667%;
  }

  .mbsc-pull-sm-3 {
    right: 25%;
  }

  .mbsc-pull-sm-4 {
    right: 33.33333333%;
  }

  .mbsc-pull-sm-5 {
    right: 41.66666667%;
  }

  .mbsc-pull-sm-6 {
    right: 50%;
  }

  .mbsc-pull-sm-7 {
    right: 58.33333333%;
  }

  .mbsc-pull-sm-8 {
    right: 66.66666667%;
  }

  .mbsc-pull-sm-9 {
    right: 75%;
  }

  .mbsc-pull-sm-10 {
    right: 83.33333333%;
  }

  .mbsc-pull-sm-11 {
    right: 91.66666667%;
  }

  .mbsc-pull-sm-12 {
    right: 100%;
  }
}

@mixin mbsc-grid-md() {
  .mbsc-col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

  .mbsc-col-md-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .mbsc-col-md-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .mbsc-col-md-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .mbsc-col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .mbsc-col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .mbsc-col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .mbsc-col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .mbsc-col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .mbsc-col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .mbsc-col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .mbsc-col-md-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .mbsc-col-md-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .mbsc-col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .mbsc-offset-md-0 {
    margin-left: 0;
  }

  .mbsc-offset-md-1 {
    margin-left: 8.333333%;
  }

  .mbsc-offset-md-2 {
    margin-left: 16.666667%;
  }

  .mbsc-offset-md-3 {
    margin-left: 25%;
  }

  .mbsc-offset-md-4 {
    margin-left: 33.333333%;
  }

  .mbsc-offset-md-5 {
    margin-left: 41.666667%;
  }

  .mbsc-offset-md-6 {
    margin-left: 50%;
  }

  .mbsc-offset-md-7 {
    margin-left: 58.333333%;
  }

  .mbsc-offset-md-8 {
    margin-left: 66.666667%;
  }

  .mbsc-offset-md-9 {
    margin-left: 75%;
  }

  .mbsc-offset-md-10 {
    margin-left: 83.333333%;
  }

  .mbsc-offset-md-11 {
    margin-left: 91.666667%;
  }

  .mbsc-push-md-0 {
    left: auto;
  }

  .mbsc-push-md-1 {
    left: 8.33333333%;
  }

  .mbsc-push-md-2 {
    left: 16.66666667%;
  }

  .mbsc-push-md-3 {
    left: 25%;
  }

  .mbsc-push-md-4 {
    left: 33.33333333%;
  }

  .mbsc-push-md-5 {
    left: 41.66666667%;
  }

  .mbsc-push-md-6 {
    left: 50%;
  }

  .mbsc-push-md-7 {
    left: 58.33333333%;
  }

  .mbsc-push-md-8 {
    left: 66.66666667%;
  }

  .mbsc-push-md-9 {
    left: 75%;
  }

  .mbsc-push-md-10 {
    left: 83.33333333%;
  }

  .mbsc-push-md-11 {
    left: 91.66666667%;
  }

  .mbsc-push-md-12 {
    left: 100%;
  }

  .mbsc-pull-md-0 {
    right: auto;
  }

  .mbsc-pull-md-1 {
    right: 8.33333333%;
  }

  .mbsc-pull-md-2 {
    right: 16.66666667%;
  }

  .mbsc-pull-md-3 {
    right: 25%;
  }

  .mbsc-pull-md-4 {
    right: 33.33333333%;
  }

  .mbsc-pull-md-5 {
    right: 41.66666667%;
  }

  .mbsc-pull-md-6 {
    right: 50%;
  }

  .mbsc-pull-md-7 {
    right: 58.33333333%;
  }

  .mbsc-pull-md-8 {
    right: 66.66666667%;
  }

  .mbsc-pull-md-9 {
    right: 75%;
  }

  .mbsc-pull-md-10 {
    right: 83.33333333%;
  }

  .mbsc-pull-md-11 {
    right: 91.66666667%;
  }

  .mbsc-pull-md-12 {
    right: 100%;
  }
}

@mixin mbsc-grid-lg() {
  .mbsc-col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

  .mbsc-col-lg-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .mbsc-col-lg-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .mbsc-col-lg-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .mbsc-col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .mbsc-col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .mbsc-col-lg-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .mbsc-col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .mbsc-col-lg-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .mbsc-col-lg-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .mbsc-col-lg-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .mbsc-col-lg-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .mbsc-col-lg-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .mbsc-col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .mbsc-offset-lg-0 {
    margin-left: 0;
  }

  .mbsc-offset-lg-1 {
    margin-left: 8.333333%;
  }

  .mbsc-offset-lg-2 {
    margin-left: 16.666667%;
  }

  .mbsc-offset-lg-3 {
    margin-left: 25%;
  }

  .mbsc-offset-lg-4 {
    margin-left: 33.333333%;
  }

  .mbsc-offset-lg-5 {
    margin-left: 41.666667%;
  }

  .mbsc-offset-lg-6 {
    margin-left: 50%;
  }

  .mbsc-offset-lg-7 {
    margin-left: 58.333333%;
  }

  .mbsc-offset-lg-8 {
    margin-left: 66.666667%;
  }

  .mbsc-offset-lg-9 {
    margin-left: 75%;
  }

  .mbsc-offset-lg-10 {
    margin-left: 83.333333%;
  }

  .mbsc-offset-lg-11 {
    margin-left: 91.666667%;
  }

  .mbsc-push-lg-0 {
    left: auto;
  }

  .mbsc-push-lg-1 {
    left: 8.33333333%;
  }

  .mbsc-push-lg-2 {
    left: 16.66666667%;
  }

  .mbsc-push-lg-3 {
    left: 25%;
  }

  .mbsc-push-lg-4 {
    left: 33.33333333%;
  }

  .mbsc-push-lg-5 {
    left: 41.66666667%;
  }

  .mbsc-push-lg-6 {
    left: 50%;
  }

  .mbsc-push-lg-7 {
    left: 58.33333333%;
  }

  .mbsc-push-lg-8 {
    left: 66.66666667%;
  }

  .mbsc-push-lg-9 {
    left: 75%;
  }

  .mbsc-push-lg-10 {
    left: 83.33333333%;
  }

  .mbsc-push-lg-11 {
    left: 91.66666667%;
  }

  .mbsc-push-lg-12 {
    left: 100%;
  }

  .mbsc-pull-lg-0 {
    right: auto;
  }

  .mbsc-pull-lg-1 {
    right: 8.33333333%;
  }

  .mbsc-pull-lg-2 {
    right: 16.66666667%;
  }

  .mbsc-pull-lg-3 {
    right: 25%;
  }

  .mbsc-pull-lg-4 {
    right: 33.33333333%;
  }

  .mbsc-pull-lg-5 {
    right: 41.66666667%;
  }

  .mbsc-pull-lg-6 {
    right: 50%;
  }

  .mbsc-pull-lg-7 {
    right: 58.33333333%;
  }

  .mbsc-pull-lg-8 {
    right: 66.66666667%;
  }

  .mbsc-pull-lg-9 {
    right: 75%;
  }

  .mbsc-pull-lg-10 {
    right: 83.33333333%;
  }

  .mbsc-pull-lg-11 {
    right: 91.66666667%;
  }

  .mbsc-pull-lg-12 {
    right: 100%;
  }
}

@mixin mbsc-grid-xl() {
  .mbsc-col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

  .mbsc-col-xl-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .mbsc-col-xl-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .mbsc-col-xl-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .mbsc-col-xl-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .mbsc-col-xl-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .mbsc-col-xl-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .mbsc-col-xl-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .mbsc-col-xl-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .mbsc-col-xl-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .mbsc-col-xl-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .mbsc-col-xl-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .mbsc-col-xl-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .mbsc-col-xl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .mbsc-offset-xl-0 {
    margin-left: 0;
  }

  .mbsc-offset-xl-1 {
    margin-left: 8.333333%;
  }

  .mbsc-offset-xl-2 {
    margin-left: 16.666667%;
  }

  .mbsc-offset-xl-3 {
    margin-left: 25%;
  }

  .mbsc-offset-xl-4 {
    margin-left: 33.333333%;
  }

  .mbsc-offset-xl-5 {
    margin-left: 41.666667%;
  }

  .mbsc-offset-xl-6 {
    margin-left: 50%;
  }

  .mbsc-offset-xl-7 {
    margin-left: 58.333333%;
  }

  .mbsc-offset-xl-8 {
    margin-left: 66.666667%;
  }

  .mbsc-offset-xl-9 {
    margin-left: 75%;
  }

  .mbsc-offset-xl-10 {
    margin-left: 83.333333%;
  }

  .mbsc-offset-xl-11 {
    margin-left: 91.666667%;
  }

  .mbsc-push-xl-0 {
    left: auto;
  }

  .mbsc-push-xl-1 {
    left: 8.33333333%;
  }

  .mbsc-push-xl-2 {
    left: 16.66666667%;
  }

  .mbsc-push-xl-3 {
    left: 25%;
  }

  .mbsc-push-xl-4 {
    left: 33.33333333%;
  }

  .mbsc-push-xl-5 {
    left: 41.66666667%;
  }

  .mbsc-push-xl-6 {
    left: 50%;
  }

  .mbsc-push-xl-7 {
    left: 58.33333333%;
  }

  .mbsc-push-xl-8 {
    left: 66.66666667%;
  }

  .mbsc-push-xl-9 {
    left: 75%;
  }

  .mbsc-push-xl-10 {
    left: 83.33333333%;
  }

  .mbsc-push-xl-11 {
    left: 91.66666667%;
  }

  .mbsc-push-xl-12 {
    left: 100%;
  }

  .mbsc-pull-xl-0 {
    right: auto;
  }

  .mbsc-pull-xl-1 {
    right: 8.33333333%;
  }

  .mbsc-pull-xl-2 {
    right: 16.66666667%;
  }

  .mbsc-pull-xl-3 {
    right: 25%;
  }

  .mbsc-pull-xl-4 {
    right: 33.33333333%;
  }

  .mbsc-pull-xl-5 {
    right: 41.66666667%;
  }

  .mbsc-pull-xl-6 {
    right: 50%;
  }

  .mbsc-pull-xl-7 {
    right: 58.33333333%;
  }

  .mbsc-pull-xl-8 {
    right: 66.66666667%;
  }

  .mbsc-pull-xl-9 {
    right: 75%;
  }

  .mbsc-pull-xl-10 {
    right: 83.33333333%;
  }

  .mbsc-pull-xl-11 {
    right: 91.66666667%;
  }

  .mbsc-pull-xl-12 {
    right: 100%;
  }
}

@include exports("grid-layout") {

  .mbsc-grid,
  .mbsc-grid-unresp,
  .mbsc-grid-fixed {
    width: 100%;
    padding-right: 1em;
    padding-left: 1em;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;

    * {
      box-sizing: border-box;
    }
  }

  .mbsc-no-padding .mbsc-col,
  .mbsc-no-padding [class*="mbsc-col-"],
  .mbsc-form-grid .mbsc-col,
  .mbsc-form-grid [class*="mbsc-col-"] {
    padding-right: 0;
    padding-left: 0;
  }

  .mbsc-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -1em;
    margin-left: -1em;
  }

  .mbsc-col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

  .mbsc-col-1,
  .mbsc-col-2,
  .mbsc-col-3,
  .mbsc-col-4,
  .mbsc-col-5,
  .mbsc-col-6,
  .mbsc-col-7,
  .mbsc-col-8,
  .mbsc-col-9,
  .mbsc-col-10,
  .mbsc-col-11,
  .mbsc-col-12,
  .mbsc-col,
  .mbsc-col-auto,
  .mbsc-col-sm-1,
  .mbsc-col-sm-2,
  .mbsc-col-sm-3,
  .mbsc-col-sm-4,
  .mbsc-col-sm-5,
  .mbsc-col-sm-6,
  .mbsc-col-sm-7,
  .mbsc-col-sm-8,
  .mbsc-col-sm-9,
  .mbsc-col-sm-10,
  .mbsc-col-sm-11,
  .mbsc-col-sm-12,
  .mbsc-col-sm,
  .mbsc-col-sm-auto,
  .mbsc-col-md-1,
  .mbsc-col-md-2,
  .mbsc-col-md-3,
  .mbsc-col-md-4,
  .mbsc-col-md-5,
  .mbsc-col-md-6,
  .mbsc-col-md-7,
  .mbsc-col-md-8,
  .mbsc-col-md-9,
  .mbsc-col-md-10,
  .mbsc-col-md-11,
  .mbsc-col-md-12,
  .mbsc-col-md,
  .mbsc-col-md-auto,
  .mbsc-col-lg-1,
  .mbsc-col-lg-2,
  .mbsc-col-lg-3,
  .mbsc-col-lg-4,
  .mbsc-col-lg-5,
  .mbsc-col-lg-6,
  .mbsc-col-lg-7,
  .mbsc-col-lg-8,
  .mbsc-col-lg-9,
  .mbsc-col-lg-10,
  .mbsc-col-lg-11,
  .mbsc-col-lg-12,
  .mbsc-col-lg,
  .mbsc-col-lg-auto,
  .mbsc-col-xl-1,
  .mbsc-col-xl-2,
  .mbsc-col-xl-3,
  .mbsc-col-xl-4,
  .mbsc-col-xl-5,
  .mbsc-col-xl-6,
  .mbsc-col-xl-7,
  .mbsc-col-xl-8,
  .mbsc-col-xl-9,
  .mbsc-col-xl-10,
  .mbsc-col-xl-11,
  .mbsc-col-xl-12,
  .mbsc-col-xl,
  .mbsc-col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 1em;
    padding-left: 1em;
  }

  .mbsc-col-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .mbsc-col-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .mbsc-col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .mbsc-col-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .mbsc-col-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .mbsc-col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .mbsc-col-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .mbsc-col-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .mbsc-col-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .mbsc-col-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .mbsc-col-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .mbsc-col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .mbsc-col-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .mbsc-offset-1 {
    margin-left: 8.333333%;
  }

  .mbsc-offset-2 {
    margin-left: 16.666667%;
  }

  .mbsc-offset-3 {
    margin-left: 25%;
  }

  .mbsc-offset-4 {
    margin-left: 33.333333%;
  }

  .mbsc-offset-5 {
    margin-left: 41.666667%;
  }

  .mbsc-offset-6 {
    margin-left: 50%;
  }

  .mbsc-offset-7 {
    margin-left: 58.333333%;
  }

  .mbsc-offset-8 {
    margin-left: 66.666667%;
  }

  .mbsc-offset-9 {
    margin-left: 75%;
  }

  .mbsc-offset-10 {
    margin-left: 83.333333%;
  }

  .mbsc-offset-11 {
    margin-left: 91.666667%;
  }

  .mbsc-grid-sm {
    &.mbsc-grid-fixed {
      max-width: 540px;
    }

    @include mbsc-grid-sm();
  }

  @media (min-width: 576px) {
    .mbsc-grid {
      &.mbsc-grid-fixed {
        max-width: 540px;
      }

      @include mbsc-grid-sm();
    }
  }

  .mbsc-grid-md {
    &.mbsc-grid-fixed {
      max-width: 720px;
    }

    @include mbsc-grid-md();
  }

  @media (min-width: 768px) {
    .mbsc-grid {
      &.mbsc-grid-fixed {
        max-width: 720px;
      }

      @include mbsc-grid-md();
    }
  }

  .mbsc-grid-lg {
    &.mbsc-grid-fixed {
      max-width: 960px;
    }

    @include mbsc-grid-lg();
  }

  @media (min-width: 992px) {
    .mbsc-grid {
      &.mbsc-grid-fixed {
        max-width: 960px;
      }

      @include mbsc-grid-lg();
    }
  }

  .mbsc-grid-xl {
    &.mbsc-grid-fixed {
      max-width: 1140px;
    }

    @include mbsc-grid-xl();
  }

  @media (min-width: 1200px) {
    .mbsc-grid {
      &.mbsc-grid-fixed {
        max-width: 1140px;
      }

      @include mbsc-grid-xl();
    }
  }

  .mbsc-align-items-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }

  .mbsc-align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }

  .mbsc-align-items-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }

  .mbsc-justify-content-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }

  .mbsc-justify-content-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }

  .mbsc-justify-content-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }

  .mbsc-justify-content-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }

  .mbsc-justify-content-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
}


// Create theme builder functions

@mixin mbsc-ios-theme($theme, $params) {
  @include mbsc-ios-forms($theme, $params);
}

@mixin mbsc-material-theme($theme, $params) {
  @include mbsc-material-forms($theme, $params);
}

@mixin mbsc-mobiscroll-theme($theme, $params) {
  @include mbsc-mobiscroll-forms($theme, $params);
}

@mixin mbsc-windows-theme($theme, $params) {
  @include mbsc-windows-forms($theme, $params);
}

@mixin mbsc-custom-theme($theme, $base-theme, $colors) {
  @if $base-theme=='ios' {
    @include mbsc-ios-theme($theme, $colors);
  }

  @else if $base-theme=='material' {
    @include mbsc-material-theme($theme, $colors);
  }

  @else if $base-theme=='mobiscroll' {
    @include mbsc-mobiscroll-theme($theme, $colors);
  }

  @else if $base-theme=='windows' {
    @include mbsc-windows-theme($theme, $colors);
  }
}

// Create dark theme variants
@include mbsc-ios-theme('ios-dark', ('background': $mbsc-ios-dark-background, 'text': $mbsc-ios-dark-text, 'accent': $mbsc-ios-dark-accent));
@include mbsc-material-theme('material-dark', ('background': $mbsc-material-dark-background, 'text': $mbsc-material-dark-text, 'accent': $mbsc-material-dark-accent));
@include mbsc-mobiscroll-theme('mobiscroll-dark', ('background': $mbsc-mobiscroll-dark-background, 'text': $mbsc-mobiscroll-dark-text, 'accent': $mbsc-mobiscroll-dark-accent));
@include mbsc-windows-theme('windows-dark', ('background': $mbsc-windows-dark-background, 'text': $mbsc-windows-dark-text, 'accent': $mbsc-windows-dark-accent));