:root {
  --drawer-width: 16.25rem;
  --drawer-width-md: 12.5rem;
  --drawer-width-lg: var(--drawer-width);
  --drawer-navbar-dropdown-width: var(--drawer-width);
  --drawer-container-maxWidth-sm: 48rem;
  --drawer-container-maxWidth-md: 60rem;
  --drawer-container-maxWidth-lg: 70rem;

  --drawer-navbar-height: 3.75rem;

  --drawer-top-nav-maxHeight: 100%;

  --drawer-transitionDuration: .6s;
  --drawer-transitionFunction: cubic-bezier(0.190, 1.000, 0.220, 1.000);

  --drawer-gutter-x: .75rem;

  --drawer-fontSize: 1rem;
  --drawer-borderColor: #ddd;

  --drawer-color: #222;
  --drawer-bgColor: #fff;
  --drawer-link-color: var(--drawer-color);
  --drawer-hover-color: #555;
  --drawer-hover-bgColor: transparent;
  --drawer-focus-color: var(--drawer-link-color);
  --drawer-focus-bgColor: #f5f5f5;

  --drawer-brand-fontSize: 1.5rem;
  --drawer-brand-fontWeight: bold;
  --drawer-brand-color: var(--drawer-color);

  --drawer-hamburger-color: var(--drawer-color);
  --drawer-hamburger-width: 2rem;
  --drawer-hamburger-bgColor: transparent;
  --drawer-hamburger-hover-bgColor: transparent;

  --drawer-dropdown-color: var(--drawer-link-color);
  --drawer-dropdown-bgColor: var(--drawer-bgColor);
  --drawer-dropdown-hover-color: var(--drawer-hover-color);
  --drawer-dropdown-hover-bgColor: transparent;

  --drawer-pageContents-bgColor: #fff;
  --drawer-overlay-bgColor: rgba(0, 0, 0, .2);

  --drawer-overlay-zIndex: 100;
  --drawer-nav-zIndex: calc(var(--drawer-overlay-zIndex) + 1);
  --drawer-navbar-zIndex: calc(var(--drawer-overlay-zIndex) + 2);
  --drawer-brand-zIndex: calc(var(--drawer-overlay-zIndex) + 3);
  --drawer-hamburger-zIndex: calc(var(--drawer-overlay-zIndex) + 4);
}

@custom-media --drawer-viewport-sm (min-width: 40em);
@custom-media --drawer-viewport-md (min-width: 64em);
@custom-media --drawer-viewport-lg (min-width: 75em);