1. .OwnerStack {
    
  2.   max-width: 100%;
    
  3.   overflow-x: auto;
    
  4.   flex: 1;
    
  5.   display: flex;
    
  6.   align-items: center;
    
  7.   position: relative;
    
  8. }
    
  9. 
    
  10. .Component,
    
  11. .Component[data-reach-menu-item] {
    
  12.   font-family: var(--font-family-monospace);
    
  13.   font-size: var(--font-size-monospace-normal);
    
  14.   user-select: none;
    
  15.   white-space: nowrap;
    
  16.   display: flex;
    
  17.   align-items: center;
    
  18. }
    
  19. 
    
  20. .Component[data-reach-menu-item][data-selected],
    
  21. .Component[data-reach-menu-item][data-selected]:hover {
    
  22.   color: var(--color-text-selected);
    
  23.   background: var(--color-background-selected);
    
  24. }
    
  25. .Component[data-reach-menu-item][data-selected]:focus {
    
  26.   outline: none;
    
  27. }
    
  28. 
    
  29. .Bar {
    
  30.   display: flex;
    
  31.   flex: 1 1 auto;
    
  32.   overflow-x: auto;
    
  33. }
    
  34. 
    
  35. .VRule {
    
  36.   flex: 0 0 auto;
    
  37.   height: 20px;
    
  38.   width: 1px;
    
  39.   background-color: var(--color-border);
    
  40.   margin: 0 0.5rem;
    
  41. }
    
  42. 
    
  43. .MenuButton {
    
  44.   border-radius: 0.25rem;
    
  45.   display: inline-flex;
    
  46.   align-items: center;
    
  47.   padding: 0;
    
  48.   flex: 0 0 auto;
    
  49.   border: none;
    
  50.   background: var(--color-button-background);
    
  51.   color: var(--color-button);
    
  52. }
    
  53. .MenuButtonContent {
    
  54.   display: inline-flex;
    
  55.   align-items: center;
    
  56.   border-radius: 0.25rem;
    
  57.   padding: 0.25rem;
    
  58. }
    
  59. .MenuButton:hover {
    
  60.   color: var(--color-button-hover);
    
  61. }
    
  62. .MenuButton[aria-expanded='true'],
    
  63. .MenuButton[aria-expanded='true']:active {
    
  64.   color: var(--color-button-active);
    
  65.   outline: none;
    
  66. }
    
  67. 
    
  68. .MenuButton:focus,
    
  69. .MenuButtonContent:focus {
    
  70.   outline: none;
    
  71. }
    
  72. .MenuButton:focus > .MenuButtonContent {
    
  73.   background: var(--color-button-background-focus);
    
  74. }
    
  75. 
    
  76. .Modal[data-reach-menu-list] {
    
  77.   display: inline-flex;
    
  78.   flex-direction: column;
    
  79.   background-color: var(--color-background);
    
  80.   color: var(--color-button);
    
  81.   padding: 0.25rem 0;
    
  82.   padding-right: 0;
    
  83.   border: 1px solid var(--color-border);
    
  84.   border-radius: 0.25rem;
    
  85.   max-height: 10rem;
    
  86.   overflow: auto;
    
  87. 
    
  88.   /* Make sure this is above the DevTools, which are above the Overlay */
    
  89.   z-index: 10000002;
    
  90.   position: relative;
    
  91. 
    
  92.   /* Reach UI tries to set its own :( */
    
  93.   font-family: var(--font-family-monospace);
    
  94.   font-size: var(--font-size-monospace-normal);
    
  95. }
    
  96. 
    
  97. .NotInStore,
    
  98. .NotInStore:hover {
    
  99.   color: var(--color-dimmest);
    
  100. }
    
  101. 
    
  102. .Badge {
    
  103.   margin-left: 0.25rem;
    
  104. }