/* http://meyerweb.com/eric/tools/css/reset/
  v2.0 | 20110126
  License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

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


$border-none: 0;

$border-sm: 1px;
$border-md: 2px;
$border-lg: 3px;

$color-transparent: transparent;

$color-blue: #17A2B8;
$color-purple: #5707EB;
$color-red: #A22027;
$color-yellow: #FFC107;

$color-white: #FFFFFF;
$color-gray-light: #F4F3F4;
$color-gray: #DCDBDC;
$color-gray-dark: #6A6A6A;
$color-gray-darkest: #232F34;
$color-black: #000000;

$colors: (
  'primary': #5707EB,
  'secondary': #03DAC6,
  'success': #28A745,
  'danger': #A22027,
  'warning': #FFC107,
  'info': #17A2B8,
  'black': #000000,
  'white': #FFFFFF
);

@function generate_color_pallete($color, $prefix-variable) {
  $i: 10;
  $limit: 90;
  $pallete: ();

  @while $i <= $limit {
    $pallete: map-merge($pallete, ('#{$prefix-variable}-#{$i}': darken($color, percentage($i / 100))));
    $i: $i + 10;
  }

  @return $pallete;
}

$colors: map-merge($colors, generate_color_pallete(map-get($colors, 'white'), 'gray'));

$cursor-pointer: pointer;
$cursor-not-allowed: not-allowed;

$font-family-primary: 'Roboto' !default;
$font-family-secondary: 'LiberationMono' !default;

$font-size-xxxs: 10px;
$font-size-xxs: 12px;
$font-size-xs: 14px;
$font-size-sm: 16px;
$font-size-md: 18px;
$font-size-lg: 20px;
$font-size-xl: 22px;
$font-size-xxl: 24px;
$font-size-xxxl: 26px;

$font-weight-thin: 100;
$font-weight-light: 200;
$font-weight-regular: 300;
$font-weight-medium: 400;
$font-weight-bold: 500;
$font-weight-black: 600;

$icon-font-family: 'material-icons';

$icon-xs: 14px;
$icon-sm: 16px;
$icon-md: 18px;
$icon-lg: 20px;
$icon-xl: 22px;

$space-xxxs: 4px;
$space-xxs: 6px;
$space-xs: 8px;
$space-sm: 12px;
$space-md: 16px;
$space-lg: 20px;
$space-xl: 24px;
$space-xxl: 28px;
$space-xxxl: 32px;

$space-none: 0;
$space-half: 50%;
$space-full: 100%;

$radius-xs: 2px;
$radius-sm: 4px;
$radius-md: 6px;
$radius-lg: 8px;

$radius-full: 50%;

$shadow-sm:
  0 2px 1px -1px rgba(0, 0, 0, 0.2),
  0 1px 1px 0 rgba(0, 0,0 , 0.14),
  0 1px 3px 0 rgba(0, 0, 0, 0.12);

$shadow-md:
  0 2px 4px -1px rgba(0, 0, 0, 0.2),
  0 4px 5px 0 rgba(0, 0, 0, 0.14),
  0 1px 10px 0 rgba(0, 0, 0, 0.12);

$shadow-lg:
  0 5px 5px -3px rgba(0, 0, 0, 0.2),
  0 8px 10px 1px rgba(0, 0, 0, 0.14),
  0 3px 14px 2px rgba(0, 0, 0, 0.12);

$zindex-level-0: 0;
$zindex-level-1: 10;
$zindex-level-2: 20;
$zindex-level-3: 30;
$zindex-level-4: 40;


$function-in: cubic-bezier(0.4, 0, 0.2, 1);
$function-out: cubic-bezier(0.25, 0.8, 0.25, 1);
$function-ease: ease;

$property-background: background;
$property-box-shadow: box-shadow;
$property-font-size: font-size;
$property-left: left;
$property-top: top;
$property-transform: transform;
$property-width: width;

$timer-xs: 135ms;
$timer-sm: 200ms;
$timer-md: 350ms;
$timer-lg: 450ms;


$prefix: 'materialize';

$materialize-fonts-path: './../fonts' !default;
$materialize-font-family: 'Roboto' !default;

$badges-background-color: map-get($colors, 'primary') !default;
$badges-color: map-get($colors, 'white') !default;
$badges-border-radius: 4px !default;
$badges-box-sizing: border-box !default;
$badges-display: inline-block !default;
$badges-font-family: $font-family-primary !default;
$badges-font-size: 75% !default;
$badges-font-weight: $font-weight-bold !default;
$badges-line-height: 100% !default;
$badges-text-align: center !default;

$badge-primary-background-color: map-get($colors, 'primary') !default;
$badge-secondary-background-color: map-get($colors, 'secondary') !default;
$badge-success-background-color: map-get($colors, 'success') !default;
$badge-danger-background-color: map-get($colors, 'danger') !default;
$badge-warning-background-color: map-get($colors, 'warning') !default;
$badge-info-background-color: map-get($colors, 'info') !default;
$badge-light-background-color: map-get($colors, 'white') !default;
$badge-dark-background-color: map-get($colors, 'black') !default;

$badge-primary-color: map-get($colors, 'white') !default;
$badge-secondary-color: map-get($colors, 'white') !default;
$badge-success-color: map-get($colors, 'white') !default;
$badge-danger-color: map-get($colors, 'white') !default;
$badge-warning-color: map-get($colors, 'black') !default;
$badge-info-color: map-get($colors, 'white') !default;
$badge-light-color: map-get($colors, 'black') !default;
$badge-dark-color: map-get($colors, 'white') !default;

$badge-notification-background-color: map-get($colors, 'primary') !default;
$badge-notification-color: map-get($colors, 'white') !default;
$badge-notification-font-size: 10px !default;
$badge-notification-size: 18px !default;
$badge-notification-line-height: 18px !default;
$badge-notification-outside-size: 10px !default;

$button-primary-background: $color-purple !default;
$button-primary-border: $border-none !default;
$button-primary-border-radius: $radius-sm !default;
$button-primary-box-shadow: $shadow-sm !default;
$button-primary-color: $color-white !default;
$button-primary-cursor: $cursor-pointer !default;
$button-primary-display: block !default;
$button-primary-font-family: $font-family-primary !default;
$button-primary-font-size: $font-size-sm !default;
$button-primary-font-weight: $font-weight-regular !default;
$button-primary-height: auto !default;
$button-primary-margin: $space-sm auto !default;
$button-primary-outline: none !default;
$button-primary-padding: $space-sm $space-md !default;
$button-primary-tap-highlight-color: $color-transparent !default;
$button-primary-text-align: center !default;
$button-primary-text-transform: uppercase !default;
$button-primary-transition: $property-background $timer-md $function-ease !default;
$button-primary-white-space: nowrap !default;
$button-primary-width: auto !default;

$button-primary-hover-background: lighten($color-purple, 5%) !default;
$button-primary-focused-background: lighten($color-purple, 10%) !default;

$button-primary-disabled-background: $color-gray !default;
$button-primary-disabled-box-shadow: none !default;
$button-primary-disabled-color: $color-gray-dark !default;

$button-primary-ripple-background: rgba(lighten($color-purple, 50%), 0.2) !default;

$button-outline-background: $color-transparent !default;
$button-outline-border: $border-sm solid $color-gray !default;
$button-outline-border-radius: $radius-sm !default;
$button-outline-color: $color-purple !default;
$button-outline-cursor: $cursor-pointer !default;
$button-outline-display: block !default;
$button-outline-font-family: $font-family-primary !default;
$button-outline-font-size: $font-size-sm !default;
$button-outline-font-weight: $font-weight-regular !default;
$button-outline-height: auto !default;
$button-outline-margin: $space-sm auto !default;
$button-outline-outline: none !default;
$button-outline-padding: $space-sm $space-md !default;
$button-outline-tap-highlight-color: $color-transparent !default;
$button-outline-text-align: center !default;
$button-outline-text-transform: uppercase !default;
$button-outline-transition: $property-background $timer-md $function-ease !default;
$button-outline-white-space: nowrap !default;
$button-outline-width: auto !default;

$button-outline-hover-background: rgba($color-purple, 0.05) !default;
$button-outline-focused-background: rgba($color-purple, 0.1) !default;

$button-outline-disabled-background: $color-transparent !default;
$button-outline-disabled-border: $border-sm solid $color-gray !default;
$button-outline-disabled-color: $color-gray !default;

$button-outline-ripple-background: rgba($color-purple, 0.2) !default;

$button-text-background: $color-transparent !default;
$button-text-border: $border-none !default;
$button-text-border-radius: $radius-sm !default;
$button-text-color: $color-purple !default;
$button-text-cursor: $cursor-pointer !default;
$button-text-display: block !default;
$button-text-font-family: $font-family-primary !default;
$button-text-font-size: $font-size-sm !default;
$button-text-font-weight: $font-weight-regular !default;
$button-text-height: auto !default;
$button-text-margin: $space-sm auto !default;
$button-text-outline: none !default;
$button-text-padding: $space-sm $space-md !default;
$button-text-tap-highlight-color: $color-transparent !default;
$button-text-text-align: center !default;
$button-text-text-transform: uppercase !default;
$button-text-transition: $property-background $timer-md $function-ease !default;
$button-text-white-space: nowrap !default;
$button-text-width: auto !default;

$button-text-hover-background: rgba($color-purple, 0.05) !default;
$button-text-focused-background: rgba($color-purple, 0.1) !default;

$button-text-disabled-background: $color-transparent !default;
$button-text-disabled-color: $color-gray !default;

$button-text-ripple-background: rgba($color-purple, 0.2) !default;

$card-background-color: $color-white !default;
$card-border-radius: $radius-sm !default;
$card-box-shadow: $shadow-sm !default;
$card-color: $color-gray-darkest !default;
$card-cursor: $cursor-pointer !default;
$card-font-family: $font-family-primary !default;
$card-font-size: $font-size-sm !default;
$card-font-weight: $font-weight-regular !default;
$card-margin: $space-none $space-md $space-sm !default;
$card-padding: $space-lg !default;
$card-tap-highlight-color: $color-transparent !default;
$card-transition: $property-box-shadow $timer-sm $function-in !default;

$card-hover-box-shadow: $shadow-md !default;

$checkbox-cursor: $cursor-pointer !default;
$checkbox-outline: none !default;
$checkbox-padding: $space-sm $space-none !default;
$checkbox-tap-highlight-color: $color-transparent !default;

$checkbox-label-color: $color-gray-darkest !default;
$checkbox-label-font-family: $font-family-primary !default;
$checkbox-label-font-size: $font-size-sm !default;
$checkbox-label-font-weight: $font-weight-regular !default;
$checkbox-label-padding: $space-none !default;
$checkbox-label-text-align: left !default;

$checkbox-indicator-background: $color-white !default;
$checkbox-indicator-border: $border-md solid $color-gray-dark !default;
$checkbox-indicator-border-radius: $radius-xs !default;
$checkbox-indicator-margin: $space-none $space-sm !default;
$checkbox-indicator-size: 18px !default;

$checkbox-indicator-arrow-color: $color-white !default;
$checkbox-indicator-arrow-left: 0 !default;
$checkbox-indicator-arrow-size: 13px !default;
$checkbox-indicator-arrow-top: 2px !default;
$checkbox-indicator-arrow-width: $border-md !default;

$checkbox-indicator-active-background: $color-purple !default;
$checkbox-indicator-active-border: $border-md solid $color-purple !default;

$checkbox-indicator-indeterminate-border: $border-md solid $color-white !default;
$checkbox-indicator-indeterminate-height: 0 !default;
$checkbox-indicator-indeterminate-width: 12px !default;

$checkbox-indicator-ripple-border-radius: $radius-full !default;
$checkbox-indicator-ripple-transition: $property-background $timer-sm $function-ease !default;
$checkbox-indicator-ripple-size: 40px !default;
$checkbox-indicator-ripple-background: rgba($color-purple, 0.3) !default;

$checkbox-indicator-active-background: $color-purple !default;
$checkbox-indicator-disabled-active-background: lighten($color-gray-dark, 30%);
$checkbox-indicator-disabled-background: $color-white !default;
$checkbox-indicator-disabled-border: $border-md solid lighten($color-gray-dark, 30%) !default;

$checkbox-indicator-ripple-hover-inactive-background: rgba($color-gray-darkest, 0.1) !default;
$checkbox-indicator-ripple-hover-active-background: rgba($color-purple, 0.2) !default;
$checkbox-indicator-ripple-focused-inactive-background: rgba($color-gray-darkest, 0.05) !default;
$checkbox-indicator-ripple-focused-active-background: rgba($color-purple, 0.1) !default;

$checkbox-ripple-active-background: rgba($color-purple, 0.2) !default;
$checkbox-ripple-background: rgba($color-gray-darkest, 0.2) !default;

$form-control-container-background: $color-gray-light !default;
$form-control-container-border-color: $color-gray-dark !default;
$form-control-container-border-radius: $radius-sm $radius-sm $space-none $space-none !default;
$form-control-container-border-style: solid !default;
$form-control-container-border-width: 0 0 $border-sm 0 !default;
$form-control-container-margin: $space-none !default;
$form-control-container-outiline: none !default;

$form-control-container-line-bottom: -1px !default;
$form-control-container-line-color: $color-purple !default;
$form-control-container-line-height: $border-md !default;
$form-control-container-line-transition: $timer-md $function-ease $property-width !default;
$form-control-container-line-width: 0 !default;
$form-control-container-line-z-index:  $zindex-level-1 !default;

$form-control-caret-color: $color-purple !default;
$form-control-color: $color-gray-darkest !default;
$form-control-font-family: $font-family-primary !default;
$form-control-font-size: $font-size-sm !default;
$form-control-font-weight: $font-weight-regular !default;
$form-control-line-height: 100% !default;
$form-control-letter-spacing: 0 !default;
$form-control-padding: $space-sm !default;

$form-control-placeholder-color: $color-gray !default;
$form-control-placeholder-font-weight: $font-weight-regular !default;

$form-control-with-label-padding-top: $space-xl !default;

$form-control-label-background: $color-gray-light !default;
$form-control-label-color: $color-gray-dark !default;
$form-control-label-font-family: $font-family-primary !default;
$form-control-label-font-size: $font-size-sm !default;
$form-control-label-font-weight: $font-weight-regular !default;
$form-control-label-letter-spacing: 0 !default;
$form-control-label-transition-duration: $timer-sm !default;
$form-control-label-transition-function: $function-ease !default;
$form-control-label-transition-property: $property-top $property-font-size !default;
$form-control-label-padding: $space-xs $space-sm $space-xxxs !default;

$form-control-active-label-font-size: $font-size-xxs !default;
$form-control-active-label-top: $space-none !default;

$form-control-focused-container-line-width: 100% !default;
$form-control-focused-label-color: $color-purple !default;

$form-control-disabled-container-border-color: $color-gray !default;
$form-control-disabled-container-backgorund: $color-gray-light !default;
$form-control-disabled-label-color: $color-gray !default;
$form-control-disabled-color: $color-gray !default;

$form-message-font-family: $font-family-primary !default;
$form-message-font-size: $font-size-sm !default;
$form-message-font-weight: $font-weight-regular !default;
$form-message-letter-spacing: 0 !default;
$form-message-line-height: 100% !default;
$form-message-margin: $space-none !default;
$form-message-padding: $space-sm !default;
$form-message-text-align: left !default;

$form-message-info-color: $color-gray-darkest !default;
$form-message-info-font-family: $form-message-font-family !default;
$form-message-info-font-size: $form-message-font-size !default;
$form-message-info-font-weight: $form-message-font-weight !default;
$form-message-info-letter-spacing: $form-message-letter-spacing !default;
$form-message-info-line-height: $form-message-line-height !default;
$form-message-info-margin: $form-message-margin !default;
$form-message-info-padding: $form-message-padding !default;
$form-message-info-text-align: $form-message-text-align !default;

$form-message-error-color: $color-red !default;
$form-message-error-font-family: $form-message-font-family !default;
$form-message-error-font-size: $form-message-font-size !default;
$form-message-error-font-weight: $form-message-font-weight !default;
$form-message-error-letter-spacing: $form-message-letter-spacing !default;
$form-message-error-line-height: $form-message-line-height !default;
$form-message-error-margin: $form-message-margin !default;
$form-message-error-padding: $form-message-padding !default;
$form-message-error-text-align: $form-message-text-align !default;

$form-message-success-color: $color-blue !default;
$form-message-success-font-family: $form-message-font-family !default;
$form-message-success-font-size: $form-message-font-size !default;
$form-message-success-font-weight: $form-message-font-weight !default;
$form-message-success-letter-spacing: $form-message-letter-spacing !default;
$form-message-success-line-height: $form-message-line-height !default;
$form-message-success-margin: $form-message-margin !default;
$form-message-success-padding: $form-message-padding !default;
$form-message-success-text-align: $form-message-text-align !default;

$form-message-warning-color: $color-yellow !default;
$form-message-warning-font-family: $form-message-font-family !default;
$form-message-warning-font-size: $form-message-font-size !default;
$form-message-warning-font-weight: $form-message-font-weight !default;
$form-message-warning-letter-spacing: $form-message-letter-spacing !default;
$form-message-warning-line-height: $form-message-line-height !default;
$form-message-warning-margin: $form-message-margin !default;
$form-message-warning-padding: $form-message-padding !default;
$form-message-warning-text-align: $form-message-text-align !default;

$icon-color: $color-gray-darkest !default;
$icon-cursor: $cursor-pointer !default;
$icon-display: inline-block !default;
$icon-outline: none !default;
$icon-text-transform: lowercase !default;

$label-color: $color-purple !default;
$label-display: block !default;
$label-font-family: $font-family-primary !default;
$label-font-size: $font-size-xxs !default;
$label-font-weight: $font-weight-regular !default;
$label-margin: $space-none !default;
$label-outline: none !default;
$label-padding: $space-xs $space-sm !default;

$modal-align-items: center !default;
$modal-justify-content: center !default;

$modal-content-background: $color-white !default;
$modal-content-border-radius: $radius-sm !default;
$modal-content-box-shadow: $shadow-lg !default;
$modal-content-max-height: calc(100% - #{ $space-xxxl }) !default;
$modal-content-max-width: calc(100% - #{ $space-xxxl }) !default;
$modal-content-padding: $space-xl !default;
$modal-content-transform: scale(0.8) !default;
$modal-content-transition-property: opacity, transform !default;
$modal-content-transition-function: cubic-bezier(0.17, 0.84, 0.44, 1) forwards !default;

$modal-backdrop-background: rgba($color-black, 0.4) !default;
$modal-backdrop-transition-property: opacity !default;
$modal-backdrop-transition-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;

$modal-icon-close-color: $color-gray-darkest !default;
$modal-icon-close-size: 12px !default;
$modal-icon-close-right: $space-xxs !default;
$modal-icon-close-top: $space-xxs !default;

$modal-active-content-transform: scale(1) !default;

$navbar-background: $color-purple !default;
$navbar-color: $color-white !default;
$navbar-box-shadow: $shadow-sm !default;
$navbar-font-family: $font-family-primary !default;
$navbar-font-size: $font-size-md !default;
$navbar-font-weight: $font-weight-regular !default;
$navbar-height: 72px !default;
$navbar-margin: $space-none $space-none $space-sm !default;
$navbar-padding: $space-none $space-xs !default;

$radio-cursor: $cursor-pointer !default;
$radio-outline: unset !default;
$radio-padding: $space-xxxs $space-none !default;

$radio-label-color: $color-gray-darkest !default;
$radio-label-font-family: $font-family-primary !default;
$radio-label-font-size: $font-size-sm !default;
$radio-label-font-weight: $font-weight-regular !default;
$radio-label-padding: $space-none !default;
$radio-label-text-align: right !default;

$radio-indicator-border: $border-md solid $color-gray-dark !default;
$radio-indicator-border-radius: $radius-full !default;
$radio-indicator-display: inline-block !default;
$radio-indicator-margin: 0 $space-sm !default;
$radio-indicator-outline: none !default;
$radio-indicator-padding: $space-none $space-sm !default;
$radio-indicator-position: relative !default;
$radio-indicator-tap-highlight-color: $color-transparent !default;
$radio-indicator-size: 20px !default;

$radio-indicator-active-border-color: $color-purple !default;
$radio-indicator-active-background: $color-purple !default;
$radio-indicator-active-size: 10px !default;

$radio-indicator-disabled-color: $color-gray !default;

$radio-indicator-ripple-background: $color-purple !default;
$radio-indicator-ripple-size: 40px !default;
$radio-indicator-ripple-transition: $property-background $timer-sm $function-ease !default;

$select-option-background: $color-white !default;
$select-option-color: $color-gray-dark !default;
$select-option-font-family: $font-family-primary !default;
$select-option-font-size: $font-size-sm !default;
$select-option-font-weight: $font-weight-regular !default;
$select-option-outline: none !default;
$select-option-padding: $space-md $space-sm !default;

$select-option-active-background: $color-gray-light !default;

$select-option-hover-background: rgba($color-purple, 0.1) !default;

$slider-margin: $space-none !default;
$slider-padding: $space-xxxl $space-xl $space-xxl !default;
$slider-tap-highlight-color: $color-transparent !default;
$slider-width: $space-full !default;

$slider-track-container-cursor: $cursor-pointer !default;
$slider-track-container-outline: none !default;
$slider-track-container-padding: $space-sm $space-none !default;
$slider-track-container-position: relative !default;
$slider-track-container-width: $space-full !default;

$slider-step-background: $color-purple !default;
$slider-step-height: $space-sm !default;
$slider-step-position: absolute !default;
$slider-step-top: 50% !default;
$slider-step-width: $border-md !default;
$slider-step-transform: translate(-50%, -50%);

$slider-track-background: $color-purple !default;
$slider-track-border-radius: $radius-sm !default;
$slider-track-height: $border-lg !default;
$slider-track-overflow: hidden !default;
$slider-track-position: relative !default;
$slider-track-width: $space-full !default;

$slider-indicator-container-left: $space-none !default;
$slider-indicator-container-position: absolute !default;
$slider-indicator-container-top: $space-half !default;
$slider-indicator-container-transform: translate(-50%, -50%) !default;
$slider-indicator-container-transition: $property-left $timer-md $function-out !default;
$slider-indicator-container-z-index: $zindex-level-1 !default;

$slider-labels-container-position: relative !default;
$slider-labels-container-width: $space-full !default;

$slider-invalid-track-background: $color-red !default;
$slider-invalid-step-background: $color-red !default;

$slider-disabled-track-background: $color-gray !default;
$slider-disabled-step-background: $color-gray !default;

$slider-option-color: $color-gray-darkest !default;
$slider-option-font-family: $font-family-primary !default;
$slider-option-font-size: $font-size-sm !default;
$slider-option-font-weight: $font-weight-regular !default;
$slider-option-height: auto !default;
$slider-option-left: $space-none !default;
$slider-option-position: absolute !default;
$slider-option-text-align: center !default;
$slider-option-text-transform: none !default;
$slider-option-top: $space-none !default;
$slider-option-transform: translateX(-50%) !default;
$slider-option-transition: $property-font-size $timer-sm $function-ease !default;
$slider-option-width: auto !default;

$slider-option-active-font-weight: $font-weight-bold !default;
$slider-option-active-font-size: $font-size-md !default;

$spinner-animation: spinner 0.75s linear infinite !default;
$spinner-border-size: 4px !default;
$spinner-color: map-get($colors, 'primary') !default;
$spinner-size: 32px !default;

$loader-animation: grow 0.75s linear infinite !default;
$loader-color: map-get($colors, 'primary') !default;
$loader-size: 32px !default;

$spinner-primary-border-color: map-get($colors, 'primary') !default;
$spinner-secondary-border-color: map-get($colors, 'secondary') !default;
$spinner-success-border-color: map-get($colors, 'success') !default;
$spinner-danger-border-color: map-get($colors, 'danger') !default;
$spinner-warning-border-color: map-get($colors, 'warning') !default;
$spinner-info-border-color: map-get($colors, 'info') !default;
$spinner-light-border-color: map-get($colors, 'white') !default;
$spinner-dark-border-color: map-get($colors, 'black') !default;

$loader-primary-color: map-get($colors, 'primary') !default;
$loader-secondary-color: map-get($colors, 'secondary') !default;
$loader-success-color: map-get($colors, 'success') !default;
$loader-danger-color: map-get($colors, 'danger') !default;
$loader-warning-color: map-get($colors, 'warning') !default;
$loader-info-color: map-get($colors, 'info') !default;
$loader-light-color: map-get($colors, 'white') !default;
$loader-dark-color: map-get($colors, 'black') !default;

$switch-cursor: $cursor-pointer !default;
$switch-padding: $space-xs $space-none !default;
$switch-outline: none !default;
$switch-tap-highlight-color: $color-transparent !default;

$switch-label-color: $color-gray-darkest !default;
$switch-label-font-family: $font-family-primary !default;
$switch-label-font-size: $font-size-sm !default;
$switch-label-font-weight: $font-weight-regular !default;
$switch-label-padding: $space-none !default;
$switch-label-text-align: left !default;

$switch-indicator-track-background: lighten($color-gray-dark, 30%) !default;
$switch-indicator-track-height: 14px !default;
$switch-indicator-track-margin: 0 $space-sm !default;
$switch-indicator-track-width: 36px !default;
$switch-indicator-track-active-background: lighten($color-purple, 30%) !default;
$switch-indicator-track-disabled-background: $color-gray !default;

$switch-indicator-background: $color-white !default;
$switch-indicator-border-radius: $radius-full !default;
$switch-indicator-box-shadow: $shadow-sm !default;
$switch-indicator-transition: $property-left $timer-sm $function-ease !default;
$switch-indicator-size: 20px !default;
$switch-indicator-active-background: $color-purple !default;
$switch-indicator-disabled-background: lighten($color-gray, 10%) !default;

$switch-indicator-ripple-hover-inactive-background: rgba($color-gray-darkest, 0.1) !default;
$switch-indicator-ripple-hover-active-background: rgba($color-purple, 0.2) !default;
$switch-indicator-ripple-focused-inactive-background: rgba($color-gray-darkest, 0.05) !default;
$switch-indicator-ripple-focused-active-background: rgba($color-purple, 0.1) !default;

$switch-indicator-ripple-background: $color-purple !default;
$switch-indicator-ripple-size: 40px !default;
$switch-indicator-ripple-transition: $property-background $timer-sm $function-ease !default;

$switch-ripple-active-background: rgba($color-purple, 0.2) !default;
$switch-ripple-background: rgba($color-gray-darkest, 0.2) !default;

$blockquote-font-family: $font-family-primary !default;
$blockquote-border-color: map-get($colors, 'primary') !default;
$blockquote-border-size: 5px !default;
$blockquote-font-color: map-get($colors, 'black') !default;
$blockquote-font-size: $font-size-sm !default;
$blockquote-font-weight: $font-weight-medium !default;
$blockquote-line-height: $font-size-xxl !default;

$heading-font-family: $font-family-primary !default;
$heading-1-font-family: $heading-font-family !default;
$heading-2-font-family: $heading-font-family !default;
$heading-3-font-family: $heading-font-family !default;
$heading-4-font-family: $heading-font-family !default;
$heading-5-font-family: $heading-font-family !default;
$heading-6-font-family: $heading-font-family !default;
$heading-1-font-size: 64px !default;
$heading-2-font-size: 54px !default;
$heading-3-font-size: 44px !default;
$heading-4-font-size: 34px !default;
$heading-5-font-size: 24px !default;
$heading-6-font-size: 18px !default;
$heading-font-weight: $font-weight-medium !default;
$heading-1-font-weight: $font-weight-medium !default;
$heading-2-font-weight: $font-weight-medium !default;
$heading-3-font-weight: $font-weight-medium !default;
$heading-4-font-weight: $font-weight-medium !default;
$heading-5-font-weight: $font-weight-medium !default;
$heading-6-font-weight: $font-weight-medium !default;


%form-control-error {
  .#{$prefix}-form-control-container::after {
    background-color: $color-red;
    width: 100%;
  }

  .#{$prefix}-form-control-label {
    color: $color-red;
  }

  .#{$prefix}-form-control {
    caret-color: $color-red;
  }
}


.badge {
  background-color: $badges-background-color;
  border-radius: $badges-border-radius;
  box-sizing: $badges-box-sizing;
  color: $badges-color;
  display: $badges-display;
  font-family: $badges-font-family;
  font-size: $badges-font-size;
  font-weight: $badges-font-weight;
  line-height: $badges-line-height;
  padding: $space-xxxs;
  text-align: $badges-text-align;
}

.badge-primary {
  background-color: $badge-primary-background-color;
  color: $badge-primary-color;
}

.badge-secondary {
  background-color: $badge-secondary-background-color;
  color: $badge-secondary-color;
}

.badge-success {
  background-color: $badge-success-background-color;
  color: $badge-success-color;
}

.badge-danger {
  background-color: $badge-danger-background-color;
  color: $badge-danger-color;
}

.badge-warning {
  background-color: $badge-warning-background-color;
  color: $badge-warning-color;
}

.badge-info {
  background-color: $badge-info-background-color;
  color: $badge-info-color;
}

.badge-light {
  background-color: $badge-light-background-color;
  color: $badge-light-color;
}

.badge-dark {
  background-color: $badge-dark-background-color;
  color: $badge-dark-color;
}

.badge-notification {
  display: inline-block;
  margin-right: $badge-notification-outside-size;
  margin-top: $badge-notification-outside-size;
  position: relative;
}

.badge-notification[data-badge]::after {
  background: $badge-notification-background-color;
  border-radius: 50%;
  color: $badge-notification-color;
  content: attr(data-badge);
  font-size: $badge-notification-font-size;
  height: $badge-notification-size;
  line-height: $badge-notification-line-height;
  position: absolute;
  right: -$badge-notification-outside-size;
  text-align: center;
  top: -$badge-notification-outside-size;
  width: $badge-notification-size;
}

.badge-notification-primary[data-badge]::after {
  background-color: $badge-primary-background-color;
  color: $badge-primary-color;
}

.badge-notification-secondary[data-badge]::after {
  background-color: $badge-secondary-background-color;
  color: $badge-secondary-color;
}

.badge-notification-success[data-badge]::after {
  background-color: $badge-success-background-color;
  color: $badge-success-color;
}

.badge-notification-danger[data-badge]::after {
  background-color: $badge-danger-background-color;
  color: $badge-danger-color;
}

.badge-notification-warning[data-badge]::after {
  background-color: $badge-warning-background-color;
  color: $badge-warning-color;
}

.badge-notification-info[data-badge]::after {
  background-color: $badge-info-background-color;
  color: $badge-info-color;
}

.badge-notification-light[data-badge]::after {
  background-color: $badge-light-background-color;
  color: $badge-light-color;
}

.badge-notification-dark[data-badge]::after {
  background-color: $badge-dark-background-color;
  color: $badge-dark-color;
}

.spinner {
  animation: $spinner-animation;
  border: $spinner-border-size solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  color: $spinner-color;
  display: inline-block;
  height: $spinner-size;
  width: $spinner-size;
}

.spinner-primary {
  color: $spinner-primary-border-color;
}

.spinner-secondary {
  color: $spinner-secondary-border-color;
}

.spinner-success {
  color: $spinner-success-border-color;
}

.spinner-danger {
  color: $spinner-danger-border-color;
}

.spinner-warning {
  color: $spinner-warning-border-color;
}

.spinner-info {
  color: $spinner-info-border-color;
}

.spinner-light {
  color: $spinner-light-border-color;
}

.spinner-dark {
  color: $spinner-dark-border-color;
}

@keyframes spinner {
  100% {
    transform: rotate(360deg);
  }
}

.loader {
  animation: $loader-animation;
  background-color: currentColor;
  border-radius: 50%;
  color: $loader-color;
  display: inline-block;
  height: $loader-size;
  opacity: 0;
  width: $loader-size;
}

.loader-primary {
  color: $loader-primary-color;
}

.loader-secondary {
  color: $loader-secondary-color;
}

.loader-success {
  color: $loader-success-color;
}

.loader-danger {
  color: $loader-danger-color;
}

.loader-warning {
  color: $loader-warning-color;
}

.loader-info {
  color: $loader-info-color;
}

.loader-light {
  color: $loader-light-color;
}

.loader-dark {
  color: $loader-dark-color;
}

@keyframes grow {
  0% {
    transform: scale(0);
  }

  50% {
    opacity: 1;
  }
}

.h1 {
  display: block;
  font-family: $heading-1-font-family;
  font-size: $heading-1-font-size;
  font-weight: $heading-1-font-weight;
  line-height: 100%;
  margin: $space-xxxl 0 $space-xxl 0;
}

.h2 {
  display: block;
  font-family: $heading-2-font-family;
  font-size: $heading-2-font-size;
  font-weight: $heading-2-font-weight;
  line-height: 100%;
  margin: $space-xxl 0 $space-xl 0;
}

.h3 {
  display: block;
  font-family: $heading-3-font-family;
  font-size: $heading-3-font-size;
  font-weight: $heading-3-font-weight;
  line-height: 100%;
  margin: $space-xl 0 $space-lg 0;
}

.h4 {
  display: block;
  font-family: $heading-4-font-family;
  font-size: $heading-4-font-size;
  font-weight: $heading-4-font-weight;
  line-height: 100%;
  margin: $space-lg 0 $space-md 0;
}

.h5 {
  display: block;
  font-family: $heading-5-font-family;
  font-size: $heading-5-font-size;
  font-weight: $heading-5-font-weight;
  line-height: 100%;
  margin: $space-md 0 $space-sm 0;
}

.h6 {
  display: block;
  font-family: $heading-6-font-family;
  font-size: $heading-6-font-size;
  font-weight: $heading-6-font-weight;
  line-height: 100%;
  margin: $space-sm 0 $space-xs 0;
}

.blockquote {
  border-left: $blockquote-border-color solid $blockquote-border-size;
  color: $blockquote-font-color;
  display: block;
  font-family: $blockquote-font-family;
  font-size: $blockquote-font-size;
  font-weight: $blockquote-font-weight;
  line-height: $blockquote-line-height;
  margin: $space-lg 0 $space-lg;
  padding-left: $space-lg;
}


.#{$prefix}-button.accent {
  background: $button-primary-background;
  border: $button-primary-border;
  border-radius: $button-primary-border-radius;
  box-shadow: $button-primary-box-shadow;
  color: $button-primary-color;
  cursor: $button-primary-cursor;
  display: $button-primary-display;
  font-family: $button-primary-font-family;
  font-size: $button-primary-font-size;
  font-weight: $button-primary-font-weight;
  height: $button-primary-height;
  margin: $button-primary-margin;
  outline: $button-primary-outline;
  padding: $button-primary-padding;
  -webkit-tap-highlight-color: $button-primary-tap-highlight-color;
  text-align: $button-primary-text-align;
  text-transform: $button-primary-text-transform;
  transition: $button-primary-transition;
  white-space: $button-primary-white-space;
  width: $button-primary-width;

  @media (hover: hover) {
    &:hover {
      background: $button-primary-hover-background;
    }
  }

  &.focused {
    background: $button-primary-focused-background;
  }

  &[disabled] {
    background: $button-primary-disabled-background;
    box-shadow: $button-primary-disabled-box-shadow;
    color: $button-primary-disabled-color;
    cursor: not-allowed;
  }

  .ripple {
    background: $button-primary-ripple-background;
  }
}

.#{$prefix}-button.outline {
  background: $button-outline-background;
  border: $button-outline-border;
  border-radius: $button-outline-border-radius;
  color: $button-outline-color;
  cursor: $button-outline-cursor;
  display: $button-outline-display;
  font-family: $button-outline-font-family;
  font-size: $button-outline-font-size;
  font-weight: $button-outline-font-weight;
  height: $button-outline-height;
  margin: $button-outline-margin;
  outline: $button-outline-outline;
  padding: $button-outline-padding;
  -webkit-tap-highlight-color: $button-outline-tap-highlight-color;
  text-align: $button-outline-text-align;
  text-transform: $button-outline-text-transform;
  transition: $button-outline-transition;
  white-space: $button-outline-white-space;
  width: $button-outline-width;

  @media (hover: hover) {
    &:hover {
      background: $button-outline-hover-background;
    }
  }

  &.focused {
    background: $button-outline-focused-background;
  }

  &[disabled] {
    background: $button-outline-disabled-background;
    border: $button-outline-disabled-border;
    color: $button-outline-disabled-color;
    cursor: not-allowed;
  }

  .ripple {
    background: $button-outline-ripple-background;
  }
}

.#{$prefix}-button.text {
  background: $button-text-background;
  border: $button-text-border;
  border-radius: $button-text-border-radius;
  color: $button-text-color;
  cursor: $button-text-cursor;
  display: $button-text-display;
  font-family: $button-text-font-family;
  font-size: $button-text-font-size;
  font-weight: $button-text-font-weight;
  height: $button-text-height;
  margin: $button-text-margin;
  outline: $button-text-outline;
  padding: $button-text-padding;
  -webkit-tap-highlight-color: $button-text-tap-highlight-color;
  text-align: $button-text-text-align;
  text-transform: $button-text-text-transform;
  transition: $button-text-transition;
  white-space: $button-text-white-space;
  width: $button-text-width;

  @media (hover: hover) {
    &:hover {
      background: $button-text-hover-background;
    }
  }

  &.focused {
    background: $button-text-focused-background;
  }

  &[disabled] {
    background: $button-text-disabled-background;
    color: $button-text-disabled-color;
    cursor: not-allowed;
  }

  .ripple {
    background: $button-text-ripple-background;
  }
}

.#{$prefix}-card {
  background-color: $card-background-color;
  border-radius: $card-border-radius;
  box-shadow: $card-box-shadow;
  color: $card-color;
  cursor: $card-cursor;
  font-family: $card-font-family;
  font-size: $card-font-size;
  font-weight: $card-font-weight;
  margin: $card-margin;
  padding: $card-padding;
  -webkit-tap-highlight-color: $card-tap-highlight-color;
  transition: $card-transition;

  &:hover {
    box-shadow: $card-hover-box-shadow;
  }
}

.#{$prefix}-checkbox {
  align-items: center;
  cursor: $checkbox-cursor;
  display: flex;
  flex-direction: row;
  outline: $checkbox-outline;
  padding: $checkbox-padding;
  -webkit-tap-highlight-color: $checkbox-tap-highlight-color;

  input[type='checkbox'] {
    display: none;
  }

  &:not(.disabled) {
    @media (hover: hover) {
      .#{$prefix}-checkbox-indicator:hover .#{$prefix}-checkbox-indicator-ripple {
        background: $checkbox-indicator-ripple-hover-inactive-background;
      }

      &.active .#{$prefix}-checkbox-indicator:hover .#{$prefix}-checkbox-indicator-ripple {
        background: $checkbox-indicator-ripple-hover-active-background;
      }
    }
  }

  &.active .#{$prefix}-checkbox-indicator::before {
    border-bottom: $checkbox-indicator-arrow-width solid $checkbox-indicator-arrow-color;
    border-left: $checkbox-indicator-arrow-width solid $checkbox-indicator-arrow-color;
  }

  &.active:not(.disabled) .#{$prefix}-checkbox-indicator {
    background: $checkbox-indicator-active-background;
    border: $checkbox-indicator-active-border;

    .ripple {
      background: $checkbox-ripple-active-background;
    }
  }

  &.focused:not(.disabled) {
    &.active .#{$prefix}-checkbox-indicator-ripple {
      background: $checkbox-indicator-ripple-focused-active-background;
    }

    .#{$prefix}-checkbox-indicator-ripple {
      background: $checkbox-indicator-ripple-focused-inactive-background;
    }
  }

  &.disabled {
    .#{$prefix}-checkbox-indicator {
      background: $checkbox-indicator-disabled-background;
      border: $checkbox-indicator-disabled-border;
      cursor: not-allowed;
    }

    &.active .#{$prefix}-checkbox-indicator {
      background: $checkbox-indicator-disabled-active-background;
    }
  }
}

.#{$prefix}-checkbox-label {
  color: $checkbox-label-color;
  flex: 1;
  font-family: $checkbox-label-font-family;
  font-size: $checkbox-label-font-size;
  font-weight: $checkbox-label-font-weight;
  padding: $checkbox-label-padding;
  text-align: $checkbox-label-text-align;
}

.#{$prefix}-checkbox-indicator-ripple {
  border-radius: $checkbox-indicator-ripple-border-radius;
  height: $checkbox-indicator-ripple-size;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: $checkbox-indicator-ripple-transition;
  width: $checkbox-indicator-ripple-size;
  z-index: $zindex-level-1;

  .ripple {
    background: $checkbox-ripple-background;
  }
}

.#{$prefix}-checkbox-indicator {
  background: $checkbox-indicator-background;
  border: $checkbox-indicator-border;
  border-radius: $checkbox-indicator-border-radius;
  height: $checkbox-indicator-size;
  margin: $checkbox-indicator-margin;
  position: relative;
  width: $checkbox-indicator-size;

  &::before {
    content: '';
    height: $checkbox-indicator-arrow-size / 2;
    left: $checkbox-indicator-arrow-left;
    position: absolute;
    top: $checkbox-indicator-arrow-top;
    transform: rotate(-45deg);
    width: $checkbox-indicator-arrow-size;
  }
}

.#{$prefix}-checkbox.indeterminate .#{$prefix}-checkbox-indicator {
  background: $checkbox-indicator-active-background;
  border: $checkbox-indicator-active-border;

  &::before {
    border-bottom: $checkbox-indicator-indeterminate-border;
    height: $checkbox-indicator-indeterminate-height;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: $checkbox-indicator-indeterminate-width;
  }
}

#{$prefix}-checkbox.ng-touched.ng-dirty.ng-invalid {
  .#{$prefix}-checkbox-indicator {
    border-color: $color-red;
  }

  .#{$prefix}-checkbox.focused .#{$prefix}-checkbox-indicator-ripple {
    background: rgba($color-red, 0.05);
  }

  @media (hover: hover) {
    .#{$prefix}-checkbox-indicator:hover .#{$prefix}-checkbox-indicator-ripple {
      background: rgba($color-red, 0.1);
    }
  }

  .ripple {
    background: rgba($color-red, 0.3);
  }
}

@font-face {
  font-family: $font-family-primary;
  font-style: normal;
  font-weight: $font-weight-thin;
  src: url('#{$materialize-fonts-path}/Roboto/Roboto-Thin.ttf');
}

@font-face {
  font-family: $font-family-primary;
  font-style: italic;
  font-weight: $font-weight-thin;
  src: url('#{$materialize-fonts-path}/Roboto/Roboto-ThinItalic.ttf');
}

@font-face {
  font-family: $font-family-primary;
  font-style: normal;
  font-weight: $font-weight-light;
  src: url('#{$materialize-fonts-path}/Roboto/Roboto-Light.ttf');
}

@font-face {
  font-family: $font-family-primary;
  font-style: italic;
  font-weight: $font-weight-light;
  src: url('#{$materialize-fonts-path}/Roboto/Roboto-LightItalic.ttf');
}

@font-face {
  font-family: $font-family-primary;
  font-style: normal;
  font-weight: $font-weight-regular;
  src: url('#{$materialize-fonts-path}/Roboto/Roboto-Regular.ttf');
}

@font-face {
  font-family: $font-family-primary;
  font-style: italic;
  font-weight: $font-weight-regular;
  src: url('#{$materialize-fonts-path}/Roboto/Roboto-Italic.ttf');
}

@font-face {
  font-family: $font-family-primary;
  font-style: normal;
  font-weight: $font-weight-medium;
  src: url('#{$materialize-fonts-path}/Roboto/Roboto-Medium.ttf');
}

@font-face {
  font-family: $font-family-primary;
  font-style: italic;
  font-weight: $font-weight-medium;
  src: url('#{$materialize-fonts-path}/Roboto/Roboto-MediumItalic.ttf');
}

@font-face {
  font-family: $font-family-primary;
  font-style: normal;
  font-weight: $font-weight-bold;
  src: url('#{$materialize-fonts-path}/Roboto/Roboto-Bold.ttf');
}

@font-face {
  font-family: $font-family-primary;
  font-style: italic;
  font-weight: $font-weight-bold;
  src: url('#{$materialize-fonts-path}/Roboto/Roboto-BoldItalic.ttf');
}

@font-face {
  font-family: $font-family-primary;
  font-style: normal;
  font-weight: $font-weight-black;
  src: url('#{$materialize-fonts-path}/Roboto/Roboto-Black.ttf');
}

@font-face {
  font-family: $font-family-primary;
  font-style: italic;
  font-weight: $font-weight-black;
  src: url('#{$materialize-fonts-path}/Roboto/Roboto-BlackItalic.ttf');
}

@font-face {
  font-family: $font-family-secondary;
  font-style: normal;
  font-weight: $font-weight-regular;
  src: url('#{$materialize-fonts-path}/liberation-mono/LiberationMono-Regular.ttf');
}

@font-face {
  font-family: $font-family-secondary;
  font-style: italic;
  font-weight: $font-weight-regular;
  src: url('#{$materialize-fonts-path}/liberation-mono/LiberationMono-Italic.ttf');
}

@font-face {
  font-family: $font-family-secondary;
  font-style: normal;
  font-weight: $font-weight-bold;
  src: url('#{$materialize-fonts-path}/liberation-mono/LiberationMono-Bold.ttf');
}

@font-face {
  font-family: $font-family-secondary;
  font-style: normal;
  font-weight: $font-weight-bold;
  src: url('#{$materialize-fonts-path}/liberation-mono/LiberationMono-BoldItalic.ttf');
}

.#{$prefix}-form-control-container {
  background: $form-control-container-background;
  border-color: $form-control-container-border-color;
  border-radius: $form-control-container-border-radius;
  border-style: $form-control-container-border-style;
  border-width: $form-control-container-border-width;
  display: flex;
  flex-direction: row;
  margin: $form-control-container-margin;
  outline: $form-control-container-outiline;
  position: relative;

  &::after {
    background: $form-control-container-line-color;
    bottom: $form-control-container-line-bottom;
    content: '';
    height: $form-control-container-line-height;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    transition: $form-control-container-line-transition;
    width: $form-control-container-line-width;
    z-index: $form-control-container-line-z-index;
  }

  &.float-label .#{$prefix}-form-control {
    padding-top: $form-control-with-label-padding-top;
  }

  &.active .#{$prefix}-form-control-label,
  &.focused .#{$prefix}-form-control-label {
    font-size: $form-control-active-label-font-size;
    top: $form-control-active-label-top;
    transform: unset;
  }

  &.focused {
    &::after {
      width: $form-control-focused-container-line-width;
    }

    .#{$prefix}-form-control-label {
      color: $form-control-focused-label-color;
    }
  }

  &.disabled {
    background: $form-control-disabled-container-backgorund;
    border-color: $form-control-disabled-container-border-color;

    .#{$prefix}-form-control,
    .#{$prefix}-form-control-label {
      cursor: not-allowed;
    }

    .#{$prefix}-form-control {
      color: $form-control-disabled-color;
    }

    .#{$prefix}-form-control-label {
      color: $form-control-disabled-label-color;
    }
  }
}

.#{$prefix}-form-control-wrapper {
  position: relative;
  width: 100%;
}

.#{$prefix}-form-control {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  box-sizing: border-box;
  caret-color: $form-control-caret-color;
  color: $form-control-color;
  font-family: $form-control-font-family;
  font-size: $form-control-font-size;
  font-weight: $form-control-font-weight;
  height: 100%;
  letter-spacing: $form-control-letter-spacing;
  line-height: $form-control-line-height;
  max-width: 100%;
  outline: none;
  padding: $form-control-padding;
  resize: vertical;
  white-space: nowrap;
  width: 100%;

  &::placeholder {
    color: $form-control-placeholder-color;
    font-weight: $form-control-placeholder-font-weight;
  }
}

.#{$prefix}-form-control-label {
  background: $form-control-label-background;
  color: $form-control-label-color;
  cursor: text;
  font-family: $form-control-label-font-family;
  font-size: $form-control-label-font-size;
  font-weight: $form-control-label-font-weight;
  left: 0;
  letter-spacing: $form-control-label-letter-spacing;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition-duration: $form-control-label-transition-duration;
  transition-property: $form-control-label-transition-property;
  transition-timing-function: $form-control-label-transition-function;
  width: 100%;

  &:not(:empty) {
    padding: $form-control-label-padding;
  }
}

.#{$prefix}-form-control-prefix,
.#{$prefix}-form-control-suffix {
  align-items: center;
  color: $form-control-color;
  display: flex;
  font-family: $form-control-font-family;
  font-size: $form-control-font-size;
  font-weight: $form-control-font-weight;
  letter-spacing: $form-control-letter-spacing;
  line-height: $form-control-line-height;
  white-space: nowrap;
}

.#{$prefix}-form-control-prefix:not(:empty) {
  padding-left: $space-sm;
}

.#{$prefix}-form-control-suffix:not(:empty) {
  padding-right: $space-sm;
}

.#{$prefix}-form-message {
  &.error {
    color: $form-message-error-color;
    font-family: $form-message-error-font-family;
    font-size: $form-message-error-font-size;
    font-weight: $form-message-error-font-weight;
    letter-spacing: $form-message-error-letter-spacing;
    line-height: $form-message-error-line-height;
    margin: $form-message-error-margin;
    padding: $form-message-error-padding;
    text-align: $form-message-error-text-align;
  }

  &.info {
    color: $form-message-info-color;
    font-family: $form-message-info-font-family;
    font-size: $form-message-info-font-size;
    font-weight: $form-message-info-font-weight;
    letter-spacing: $form-message-info-letter-spacing;
    line-height: $form-message-info-line-height;
    margin: $form-message-info-margin;
    padding: $form-message-info-padding;
    text-align: $form-message-info-text-align;
  }

  &.success {
    color: $form-message-success-color;
    font-family: $form-message-success-font-family;
    font-size: $form-message-success-font-size;
    font-weight: $form-message-success-font-weight;
    letter-spacing: $form-message-success-letter-spacing;
    line-height: $form-message-success-line-height;
    margin: $form-message-success-margin;
    padding: $form-message-success-padding;
    text-align: $form-message-success-text-align;
  }

  &.warning {
    color: $form-message-warning-color;
    font-family: $form-message-warning-font-family;
    font-size: $form-message-warning-font-size;
    font-weight: $form-message-warning-font-weight;
    letter-spacing: $form-message-warning-letter-spacing;
    line-height: $form-message-warning-line-height;
    margin: $form-message-warning-margin;
    padding: $form-message-warning-padding;
    text-align: $form-message-warning-text-align;
  }
}

.#{$prefix}-html-visualizer {
  background-color: #F8F8FA;
  border-radius: 5px;
  color: #005CC5;
  font-family: $font-family-secondary;
  font-size: 14px;
  font-weight: $font-weight-regular;
  line-height: 18px;
  margin: $space-xs 0;
  padding: $space-sm;
}

.#{$prefix}-html-visualizer-content {
  overflow-x: auto;
  white-space: pre;
}

.#{$prefix}-html-visualizer-attribute {
  color: #6F42C1;
}

.#{$prefix}-html-visualizer-value {
  color: #032F62;
}

.#{$prefix}-html-visualizer-symbol {
  color: #032F62;
}

.#{$prefix}-icon {
  color: $icon-color;
  cursor: $icon-cursor;
  display: $icon-display;
  font-family: $icon-font-family;
  outline: $icon-outline;
  text-transform: $icon-text-transform;
}

.#{$prefix}-icon-xl {
  font-size: $icon-xl;
}

.#{$prefix}-icon-lg {
  font-size: $icon-lg;
}

.#{$prefix}-icon-md {
  font-size: $icon-md;
}

.#{$prefix}-icon-sm {
  font-size: $icon-sm;
}

.#{$prefix}-icon-xs {
  font-size: $icon-xs;
}

@font-face {
  font-family: $icon-font-family;
  font-style: normal;
  font-weight: $font-weight-thin;
  src: url('#{$materialize-fonts-path}/material-icons/material-icons.woff2');
}

#{$prefix}-input.ng-touched.ng-dirty.ng-invalid {
  @extend %form-control-error;
}

.#{$prefix}-label {
  color: $label-color;
  display: $label-display;
  font-family: $label-font-family;
  font-size: $label-font-size;
  font-weight: $label-font-weight;
  margin: $label-margin;
  outline: $label-outline;
  padding: $label-padding;
}

.#{$prefix}-modal {
  align-items: $modal-align-items;
  display: flex;
  height: 100%;
  justify-content: $modal-justify-content;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;

  &.active {
    z-index: $zindex-level-4;

    .#{$prefix}-modal-backdrop {
      opacity: 1;
    }

    .#{$prefix}-modal-content {
      opacity: 1;
      transform: scale(1);
    }
  }
}

.#{$prefix}-modal-backdrop {
  background: $modal-backdrop-background;
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition-duration: inherit;
  transition-property: $modal-backdrop-transition-property;
  transition-timing-function: $modal-backdrop-transition-function;
  width: 100%;
  z-index: $zindex-level-0;
}

.#{$prefix}-modal-content {
  background: $modal-content-background;
  border-radius: $modal-content-border-radius;
  box-shadow: $modal-content-box-shadow;
  max-height: $modal-content-max-height;
  max-width: $modal-content-max-width;
  opacity: 0;
  overflow-y: auto;
  padding: $modal-content-padding;
  position: relative;
  transform: $modal-content-transform;
  transition-duration: inherit;
  transition-property: opacity, transform;
  transition-timing-function: $modal-content-transition-function;
  z-index: $zindex-level-1;
}

.#{$prefix}-modal-icon-close {
  color: $modal-icon-close-color;
  cursor: pointer;
  font-size: $modal-icon-close-size * 2;
  height: $modal-icon-close-size;
  position: absolute;
  right: $modal-icon-close-right;
  top: $modal-icon-close-top;
  width: $modal-icon-close-size;
}

.#{$prefix}-navbar {
  align-items: center;
  background: $navbar-background;
  box-shadow: $navbar-box-shadow;
  color: $navbar-color;
  display: flex;
  flex-direction: row;
  font-family: $navbar-font-family;
  font-size: $navbar-font-size;
  font-weight: $navbar-font-weight;
  height: $navbar-height;
  justify-content: center;
  margin: $navbar-margin;
  padding: $navbar-padding;
}

.#{$prefix}-radio {
  align-items: center;
  cursor: $radio-cursor;
  display: flex;
  flex-direction: row;
  outline: $radio-outline;
  padding: $radio-padding;

  input[type='radio'] {
    display: none;
  }

  &:not(.disabled) {
    @media (hover: hover) {
      .#{$prefix}-radio-indicator:hover .#{$prefix}-radio-indicator-ripple {
        background: rgba($radio-indicator-disabled-color, 0.2);
      }

      &.active .#{$prefix}-radio-indicator:hover .#{$prefix}-radio-indicator-ripple {
        background: rgba($radio-indicator-ripple-background, 0.2);
      }
    }
  }

  &.focused:not(.disabled) {
    .#{$prefix}-radio-indicator-ripple {
      background: rgba($radio-indicator-ripple-background, 0.1);
    }

    &.active .#{$prefix}-radio-indicator-ripple {
      background: rgba($radio-indicator-ripple-background, 0.1);
    }
  }

  &.active:not(.disabled) {
    .ripple {
      background: rgba($radio-indicator-ripple-background, 0.3);
    }

    .#{$prefix}-radio-indicator {
      border-color: $radio-indicator-active-border-color;

      &::before {
        height: $radio-indicator-active-size;
        width: $radio-indicator-active-size;
      }
    }
  }

  &.disabled .#{$prefix}-radio-indicator {
    border-color: $radio-indicator-disabled-color;
    cursor: not-allowed;

    &::before {
      background: $radio-indicator-disabled-color;
    }
  }
}

.#{$prefix}-radio-label {
  color: $radio-label-color;
  flex: 1;
  font-family: $radio-label-font-family;
  font-size: $radio-label-font-size;
  font-weight: $radio-label-font-weight;
  padding: $radio-label-padding;
  text-align: $radio-label-text-align;
}

.#{$prefix}-radio-indicator {
  border: $radio-indicator-border;
  border-radius: $radio-indicator-border-radius;
  display: $radio-indicator-display;
  height: $radio-indicator-size;
  margin: $radio-indicator-margin;
  outline: $radio-indicator-outline;
  position: $radio-indicator-position;
  -webkit-tap-highlight-color: $radio-indicator-tap-highlight-color;
  width: $radio-indicator-size;

  &::before {
    background: $radio-indicator-active-background;
    border-radius: $radio-indicator-border-radius;
    content: '';
    height: 0;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition-duration: 250ms;
    transition-property: height, width;
    transition-timing-function: ease;
    width: 0;
  }
}

.#{$prefix}-radio-indicator-ripple {
  border-radius: $radio-indicator-border-radius;
  height: $radio-indicator-ripple-size;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: $radio-indicator-ripple-transition;
  width: $radio-indicator-ripple-size;
  z-index: $zindex-level-1;

  .ripple {
    background: rgba($radio-indicator-ripple-background, 0.3);
  }
}

#{$prefix}-radio-group.ng-touched.ng-dirty.ng-invalid .#{$prefix}-radio {
  .#{$prefix}-radio-indicator {
    border-color: $color-red;
  }

  &.focused .#{$prefix}-radio-indicator-ripple {
    background-color: rgba($color-red, 0.1);
  }

  .ripple {
    background-color: rgba($color-red, 0.3);
  }

  &:not(.disabled) {
    @media (hover: hover) {
      .#{$prefix}-radio-indicator:hover .#{$prefix}-radio-indicator-ripple {
        background-color: rgba($color-red, 0.2);
      }
    }
  }
}

.ripple-element {
  cursor: pointer;
  -webkit-mask-image: -webkit-radial-gradient($color-black, $color-white);
  overflow: hidden;
  position: relative;

  &.ripple-disabled {
    cursor: unset;
  }
}

.ripple {
  background-color: rgba($color-black, 0.1);
  border-radius: $radius-full;
  position: absolute;
  transform: scale(0);
  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
}

.#{$prefix}-form-control-select-container {
  cursor: pointer;
  outline: none;
  position: relative;

  .#{$prefix}-form-control-container.disabled .#{$prefix}-form-control-select-icon {
    color: $color-gray;
    cursor: not-allowed;
  }

  &.open .#{$prefix}-form-control-select-icon {
    transform: translateY(-50%) rotate(180deg);
  }

  &.open .#{$prefix}-form-control-select-menu {
    display: block;
  }
}

.#{$prefix}-form-control-select-icon {
  color: $color-gray-dark;
  position: absolute;
  right: $space-xs;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 300ms ease;
}

.#{$prefix}-form-control-select-backdrop {
  background-color: transparent;
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: $zindex-level-1;
}

.#{$prefix}-form-control-select-menu {
  background: $color-white;
  box-shadow: $shadow-md;
  cursor: pointer;
  display: none;
  left: 0;
  padding: $space-xs 0;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: $zindex-level-2;
}

#{$prefix}-select.ng-touched.ng-dirty.ng-invalid {
  @extend %form-control-error;
}

.#{$prefix}-select-option {
  color: $select-option-color;
  font-family: $select-option-font-family;
  font-size: $select-option-font-size;
  font-weight: $select-option-font-weight;
  outline: $select-option-outline;
  padding: $select-option-padding;

  &:hover {
    background-color: $select-option-active-background;
  }

  &.active {
    background-color: $select-option-hover-background;
  }
}

.#{$prefix}-slider-container {
  margin: $slider-margin;
  padding: $slider-padding;
  -webkit-tap-highlight-color: $slider-tap-highlight-color;
  width: $slider-width;

  &.disabled {
    .#{$prefix}-slider-track {
      background-color: $slider-disabled-track-background;
    }

    .#{$prefix}-slider-step {
      background-color: $slider-disabled-step-background;
    }
  }
}

.#{$prefix}-slider-track-container {
  cursor: $slider-track-container-cursor;
  outline: $slider-track-container-outline;
  padding: $slider-track-container-padding;
  position: $slider-track-container-position;
  width: $slider-track-container-width;
}

.#{$prefix}-slider-step {
  background: $slider-step-background;
  height: $slider-step-height;
  position: $slider-step-position;
  top: $slider-step-top;
  transform: $slider-step-transform;
  width: $slider-step-width;
}

.#{$prefix}-slider-track {
  background: $slider-track-background;
  border-radius: $slider-track-border-radius;
  height: $slider-track-height;
  overflow: $slider-track-overflow;
  position: $slider-track-position;
  width: $slider-track-width;
}

.#{$prefix}-slider-indicator-container {
  left: $slider-indicator-container-left;
  position: $slider-indicator-container-position;
  top: $slider-indicator-container-top;
  transform: $slider-indicator-container-transform;
  transition: $slider-indicator-container-transition;
  z-index: $slider-indicator-container-z-index;
}

.#{$prefix}-slider-labels-container {
  position: $slider-labels-container-position;
  width: $slider-labels-container-width;
}

#{$prefix}-slider.ng-touched.ng-dirty.ng-invalid {
  .#{$prefix}-slider-track {
    background: $slider-invalid-track-background;
  }

  .#{$prefix}-slider-step {
    background: $slider-invalid-step-background;
  }
}

.#{$prefix}-slider-option-container {
  color: $slider-option-color;
  font-family: $slider-option-font-family;
  font-size: $slider-option-font-size;
  font-weight: $slider-option-font-weight;
  height: $slider-option-height;
  left: $slider-option-left;
  position: $slider-option-position;
  text-align: $slider-option-text-align;
  text-transform: $slider-option-text-transform;
  top: $slider-option-top;
  transform: $slider-option-transform;
  transition: $slider-option-transition;
  width: $slider-option-width;

  &.active {
    font-size: $slider-option-active-font-size;
    font-weight: $slider-option-active-font-weight;
  }
}

.#{$prefix}-stepper {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin-bottom: $space-xs;
  padding: $space-lg 0;
}

.#{$prefix}-step {
  position: relative;
}

.#{$prefix}-step-indicator {
  align-items: center;
  background-color: $color-gray-light;
  border-radius: $radius-full;
  color: $color-gray;
  display: flex;
  font-family: $font-family-primary;
  font-size: 20px;
  font-weight: $font-weight-bold;
  height: 34px;
  justify-content: center;
  margin-bottom: $space-xxxs;
  position: relative;
  width: 34px;

  &:first-child::before {
    display: none;
  }

  &::before {
    background-color: $color-gray-light;
    content: '';
    height: $space-xxxs;
    position: absolute;
    top: $space-md;
    transform: translateX(-50%);
    width: 100%;
  }
}

.#{$prefix}-switch {
  align-items: center;
  cursor: $switch-cursor;
  display: flex;
  flex-direction: row;
  outline: $switch-outline;
  padding: $switch-padding;
  -webkit-tap-highlight-color: $switch-tap-highlight-color;

  input[type='checkbox'] {
    display: none;
  }

  &.active .#{$prefix}-switch-indicator {
    left: $switch-indicator-track-width - $switch-indicator-size;
  }

  &:not(.disabled) {
    @media (hover: hover) {
      .#{$prefix}-switch-indicator:hover .#{$prefix}-switch-indicator-ripple {
        background: $switch-indicator-ripple-hover-inactive-background;
      }

      &.active .#{$prefix}-switch-indicator:hover .#{$prefix}-switch-indicator-ripple {
        background: $switch-indicator-ripple-hover-active-background;
      }
    }
  }

  &.focused:not(.disabled) {
    &.active .#{$prefix}-switch-indicator-ripple {
      background: $switch-indicator-ripple-focused-active-background;
    }

    .#{$prefix}-switch-indicator-ripple {
      background: $switch-indicator-ripple-focused-inactive-background;
    }
  }

  &.active:not(.disabled) {
    .#{$prefix}-switch-indicator-track {
      background: $switch-indicator-track-active-background;
    }

    .#{$prefix}-switch-indicator {
      background: $switch-indicator-active-background;
    }

    .ripple {
      background: $switch-ripple-active-background;
    }
  }

  &.disabled {
    .#{$prefix}-switch-indicator-track {
      background: $switch-indicator-track-disabled-background;
    }

    .#{$prefix}-switch-indicator {
      background: $switch-indicator-disabled-background;
      cursor: not-allowed;
    }

    &.active .#{$prefix}-switch-indicator-track {
      background: $switch-indicator-track-disabled-background;
    }
  }
}

.#{$prefix}-switch-label {
  color: $switch-label-color;
  flex: 1;
  font-family: $switch-label-font-family;
  font-size: $switch-label-font-size;
  font-weight: $switch-label-font-weight;
  padding: $switch-label-padding;
  text-align: $switch-label-text-align;
}

.#{$prefix}-switch-indicator-track {
  background: $switch-indicator-track-background;
  border-radius: $switch-indicator-track-height / 2;
  height: $switch-indicator-track-height;
  margin: $switch-indicator-track-margin;
  position: relative;
  width: $switch-indicator-track-width;
}

.#{$prefix}-switch-indicator {
  background: $switch-indicator-background;
  border-radius: $switch-indicator-border-radius;
  box-shadow: $switch-indicator-box-shadow;
  height: $switch-indicator-size;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: $switch-indicator-transition;
  width: $switch-indicator-size;
}

.#{$prefix}-switch-indicator-ripple {
  border-radius: $switch-indicator-border-radius;
  height: $switch-indicator-ripple-size;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: $switch-indicator-ripple-transition;
  width: $switch-indicator-ripple-size;
  z-index: $zindex-level-1;

  .ripple {
    background: $switch-ripple-background;
  }
}

#{$prefix}-switch.ng-touched.ng-dirty.ng-invalid {
  .#{$prefix}-switch-indicator-track {
    background: lighten($color-red, 40%);
  }

  .#{$prefix}-switch-indicator {
    background: $color-red;
  }

  .#{$prefix}-switch.focused .#{$prefix}-switch-indicator-ripple {
    background: rgba($color-red, 0.05);
  }

  @media (hover: hover) {
    &:hover .#{$prefix}-switch-indicator-ripple {
      background: rgba($color-red, 0.1);
    }
  }

  .ripple {
    background: rgba($color-red, 0.3);
  }
}

#{$prefix}-textarea.ng-touched.ng-dirty.ng-invalid {
  @extend %form-control-error;
}

