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

$materialize-font-family: 'Roboto' !default;

// Colors
$materialize-color-primary: #5707EB !default;

// Tabs
$materialize-tab-headers-indicator-color: $materialize-color-primary;
$materialize-tab-headers-equal-size: true;


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

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

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

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

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

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

$font-family-primary: 'Roboto';
$font-family-icons: 'material-icons';

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


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

@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');
}


$color-purple: #5707EB;
$color-red: #A22027;

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

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

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

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

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

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

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

$font-family-primary: 'Roboto';
$font-family-icons: 'material-icons';

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

.ripple-element {
  cursor: pointer;
  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);
}

