:root {
  /**
   * Shadows
   * Shadow effects indicate elevation and, at times, interactivity.
   * Elevation is defined by levels relative to the surface where the element rests -
   *  *  Inset sits below the surface for a punched-in effect
   *  *  Level 0 is the surface level
   *  *  Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
   *  *  Level 2 is raised above all other elements on the same surface, such as dropdown menus
   *  *  Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
   */
  /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
   * The base value is intended for calculations and is not used by components directly. */
  --wa-shadow-blur-multiplier: 0.125;
  --wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.75rem);
  --wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
  --wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 1.5rem);
  --wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 2rem);

  /* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
   * or transforming elements with shadows. */
  --wa-shadow-offset-y-multiplier: 0.1;
  --wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.75rem);
  --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
  --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 1.5rem);
  --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);

  --wa-shadow-offset-x-multiplier: 0;
  --wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.75rem);
  --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
  --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 1.5rem);
  --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);

  --wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
    var(--wa-color-shadow);
  --wa-shadow-level-0: none;
  --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-color-shadow);
  --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-color-shadow);
  --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-color-shadow);
}
