.OwnerStack { max-width: 100%; overflow-x: auto; flex: 1; display: flex; align-items: center; position: relative; } .Component, .Component[data-reach-menu-item] { font-family: var(--font-family-monospace); font-size: var(--font-size-monospace-normal); user-select: none; white-space: nowrap; display: flex; align-items: center; } .Component[data-reach-menu-item][data-selected], .Component[data-reach-menu-item][data-selected]:hover { color: var(--color-text-selected); background: var(--color-background-selected); } .Component[data-reach-menu-item][data-selected]:focus { outline: none; } .Bar { display: flex; flex: 1 1 auto; overflow-x: auto; } .VRule { flex: 0 0 auto; height: 20px; width: 1px; background-color: var(--color-border); margin: 0 0.5rem; } .MenuButton { border-radius: 0.25rem; display: inline-flex; align-items: center; padding: 0; flex: 0 0 auto; border: none; background: var(--color-button-background); color: var(--color-button); } .MenuButtonContent { display: inline-flex; align-items: center; border-radius: 0.25rem; padding: 0.25rem; } .MenuButton:hover { color: var(--color-button-hover); } .MenuButton[aria-expanded='true'], .MenuButton[aria-expanded='true']:active { color: var(--color-button-active); outline: none; } .MenuButton:focus, .MenuButtonContent:focus { outline: none; } .MenuButton:focus > .MenuButtonContent { background: var(--color-button-background-focus); } .Modal[data-reach-menu-list] { display: inline-flex; flex-direction: column; background-color: var(--color-background); color: var(--color-button); padding: 0.25rem 0; padding-right: 0; border: 1px solid var(--color-border); border-radius: 0.25rem; max-height: 10rem; overflow: auto; /* Make sure this is above the DevTools, which are above the Overlay */ z-index: 10000002; position: relative; /* Reach UI tries to set its own :( */ font-family: var(--font-family-monospace); font-size: var(--font-size-monospace-normal); } .NotInStore, .NotInStore:hover { color: var(--color-dimmest); } .Badge { margin-left: 0.25rem; }