base.scss

html {
  box-sizing: border-box;
  height: 100%;
  perspective: 50vw;
  background-color: mc('grey', '900');
}
*, *:before, *:after {
  box-sizing: inherit;
}

[v-cloak], .is-hidden {
  display: none;
}

#root {
  position: relative;
  min-height: 100%;

  &.is-fullscreen {
    height: 100vh;
  }
}

.application--wrap {
  transition: all 1.2s ease;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  background-color: #FFF;

  @at-root .theme--dark & {
    background-color: mc('grey', '900');
  }
}


@for $i from 0 through 25 {
  .radius-#{$i} {
    border-radius: #{$i}px;
  }
}

@for $i from 1 through 5 {
  .grey.darken-2-d#{$i} {
    background-color: darken(mc('grey', '700'), percentage($i/100)) !important;
    border-color: darken(mc('grey', '700'), percentage($i/100)) !important;
  }
  .grey.darken-2-l#{$i} {
    background-color: lighten(mc('grey', '700'), percentage($i/100)) !important;
    border-color: lighten(mc('grey', '700'), percentage($i/100)) !important;
  }
  .grey.darken-3-d#{$i} {
    background-color: darken(mc('grey', '800'), percentage($i/100)) !important;
    border-color: darken(mc('grey', '800'), percentage($i/100)) !important;
  }
  .grey.darken-3-l#{$i} {
    background-color: lighten(mc('grey', '800'), percentage($i/100)) !important;
    border-color: lighten(mc('grey', '800'), percentage($i/100)) !important;
  }
  .grey.darken-4-d#{$i} {
    background-color: darken(mc('grey', '900'), percentage($i/100)) !important;
    border-color: darken(mc('grey', '900'), percentage($i/100)) !important;
  }
  .grey.darken-4-l#{$i} {
    background-color: lighten(mc('grey', '900'), percentage($i/100)) !important;
    border-color: lighten(mc('grey', '900'), percentage($i/100)) !important;
  }
}