///****************************************************************
/// One-Nexus - A toolkit for architecting and constructing
/// front-end user-interfaces - https://github.com/esr360/One-Nexus
///
/// @author [@esr360](http://twitter.com/esr360)
///****************************************************************

// Tools/Utilities
//*****************************************************************

// Sass librarys
@import '~normalize-scss/sass/normalize';
@import '../../../Cell/Cell/src/cell';

// CSS librarys
@import '~flickity/dist/flickity';

// Theme
//*****************************************************************

@import 'ui/themes/one_nexus.js';

// Reset
//*****************************************************************

@include normalize;

#app {
  background: #ffffff;
  width: 95%;
  padding: 3em;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
}

body {
  background: theme('tokens', 'background');
  color: theme('tokens', 'text-color');
  font-family: unquote(theme('tokens', 'font-family'));
  font-size: theme('tokens', 'font-size');
  line-height: theme('tokens', 'line-height');
}

h1, h2, h3, h4, h5, h6 {
  font-size: theme('tokens', 'font-size');
}

::selection {
  background-color: theme('tokens', 'selection-background');
  color: theme('tokens', 'selection-color');
  text-shadow: none;
}

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

.is-painting {
  display: none;
}

// Utils
//*****************************************************************

@keyframes animate--spin {
  0% {
    transform: rotate(0deg);
  }

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

.animate--spin {
  animation: animate--spin 1s infinite linear;
}

// Google Fonts
//*****************************************************************

@each $google-font in theme('typography', 'google-fonts') {
  $font-family: map-get($google-font, 'name');

  // Convert to a value @import can use
  $font-name: str-replace($font-family, ' ', '+');

  // Desired font styles
  $font-styles: map-get($google-font, 'styles');

  // Convert to string and remove spaces
  $font-styles: str-replace((inspect($font-styles)), ' ', '');

  // String to be appended to Google Fonts url
  $google-font: $font-name + ':' + $font-styles;

  // import the font from the Google Fonts API
  @if this('import-fonts') {
    @import url(http://fonts.googleapis.com/css?family=#{$google-font});
  }
}