:host, :root {
  @function _get-umbra-map($color, $opacity) {
    @return (
      0: '0px 0px 0px 0px #{rgba($color, $opacity * 0.16)}',
      1: '0px 0px 1px 0px #{rgba($color, $opacity * 0.16)}',
      2: '0px 0px 1px 0px #{rgba($color, $opacity * 0.16)}',
      3: '0px 0px 1px 0px #{rgba($color, $opacity * 0.08)}',
      4: '0px 0px 1px 0px #{rgba($color, $opacity * 0.10)}',
      5: '0px 0px 1px 0px #{rgba($color, $opacity * 0.10)}'
    );
  }

  @function _get-penumbra-map($color, $opacity) {
    @return (
      0: '0px 0px 0px 0px #{rgba($color, $opacity * 0.16)}',
      1: '0px 1px 1px 0px #{rgba($color, $opacity * 0.16)}',
      2: '0px 3px 4px 0px #{rgba($color, $opacity * 0.10)}',
      3: '0px 8px 10px 0px #{rgba($color, $opacity * 0.20)}',
      4: '0px 16px 16px 0px #{rgba($color, $opacity * 0.12)}',
      5: '0px 24px 24px 0px #{rgba($color, $opacity * 0.12)}'
    );
  }

  $grit-elevation-opacity: 1 !default;
  $grit-elevation-color: #212b36 !default;

  @mixin grit-elevation($zValue, $color: $grit-elevation-color, $opacity: $grit-elevation-opacity) {
    @if type-of($zValue) != number or not unitless($zValue) {
      @error '$zValue must be a unitless number';
    }
    @if $zValue < 0 or $zValue > 5 {
      @error '$zValue must be between 0 and 5';
    }

    box-shadow: #{map-get(_get-umbra-map($color, $opacity), $zValue)},
    #{map-get(_get-penumbra-map($color, $opacity), $zValue)};
    z-index: $zValue;
  }

  @for $zValue from 0 through 5 {
    .grit-elevation-#{$zValue} {
      @include grit-elevation($zValue);
    }
  }
}