:root {

  --warn-color: #e14154; // reddish for warnings/errors

  //
  // Vertical and horizontal padding for the status-article element (Status.html, Notification.html)
  //
  --status-pad-v: 10px;
  --status-pad-h: 20px;

  @media (max-width: 767px) {
    --status-pad-h: 10px;
  }

  @media (max-width: 240px) {
    --status-pad-h: 5px;
  }

  //
  // Nav and .main-content offset. This is important for things like the sticky header (ComposeStickyButton.html)
  //

  --nav-font-size: 1rem;
  --nav-indicator-height: 3px;
  --nav-border-bottom: 0px;
  --nav-icon-pad-v: 14px;
  --nav-icon-pad-h: 20px;
  --nav-icon-size: 20px;

  --nav-total-height: calc(
    (var(--nav-icon-pad-v) * 2) +
    var(--nav-icon-size) +
    var(--nav-indicator-height) +
    var(--nav-border-bottom)
  );

  --main-content-gap-top: 20px;
  --main-content-pad-vertical: calc(
    var(--nav-total-height) +
    var(--main-content-gap-top)
  );
  --main-content-pad-top: var(--main-content-pad-vertical);
  --main-content-pad-bottom: 0px;

  --main-margin-bottom: 15px;
  --main-border-size: 1px;

  @media (max-width: 991px) {
    --nav-icon-pad-v: 18px;
    --nav-icon-pad-h: 10px;
    --nav-icon-size: 25px;
    --nav-border-bottom: 0px;
  }

  @media (max-width: 767px) {
    --main-content-gap-top: 0px;
  }

  @media (max-width: 240px) {
    --nav-icon-pad-v: 10px;
    --nav-icon-pad-h: 0px;
  }

  // Used for moving the nav bar to the bottom
  --nav-top: 0px;
  --nav-bottom: initial;
  --toast-gap-bottom: 0px; // used to position the Toast and Snackbar above the bottom nav
  --fab-gap-top: var(--nav-total-height); // used to position the FAB (floating action button) below the top nav

  //
  // focus outline
  //

  --focus-width: 2px;

  @media (max-width: 240px) {
    --focus-width: 3px;
  }

}