.top-bar { background:var(--section-bg); color: var(--section-text-heading); }

@media (min-width: 1px) and (max-width: 900px) {
  .mobile-bottom-bar { background:var(--backdrop-filter-bgcolor); backdrop-filter:var(--backdrop-filter); -webkit-backdrop-filter:var(--backdrop-filter); box-shadow:0 -32px 16px -4px rgba(0, 0, 0, 0.08); }
  .mobile-bottom-bar { -webkit-border-radius: var(--space-16) var(--space-16) 0 0; -moz-border-radius: var(--space-16) var(--space-16) 0 0; border-radius: var(--space-16) var(--space-16) 0 0; }

  .mobile-bottom-bar ul li button.mobile-bar-btn svg { color:var(--accent-tertiary); fill:var(--accent-tertiary); background:none; } 
  .mobile-bottom-bar ul li button.mobile-bar-btn span { color:var(--box-light-text-primary); }
  .mobile-bottom-bar ul li button.mobile-bar-btn span { font:var(--p-xxs-regular-font); letter-spacing: calc(var(--p-xs-regular-ls)* 1.25); font-weight:600; }

  .mobile-bottom-bar .exposed button.mobile-bar-btn { background:none; }
  .mobile-bottom-bar .exposed button.mobile-bar-btn svg { background:var(--accent-primary); color:var(--accent-tertiary-foreground); fill:var(--accent-tertiary-foreground); }
}