// Core styles that can be used to apply material design treatments to any element.
@import 'a11y/a11y';
@import 'style/elevation';
@import 'overlay/overlay';
@import 'ripple/ripple';

// Mixin that renders all of the core styles that are not theme-dependent.
@mixin np-core() {

  // Provides external CSS classes for each elevation value. Each CSS class is formatted as
  // `np-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
  // elevated.
  @for $zValue from 0 through 24 {
    .np-elevation-z#{$zValue} {
      @include np-elevation($zValue);
    }
  }

  @include np-ripple();
  @include np-a11y();
  @include np-overlay();
}

// Mixin that renders all of the core styles that depend on the theme.
@mixin np-core-theme($theme) {
  @include np-ripple-theme($theme);
}