/* Shared by React departments and the embedded SDO/PTO views. */
:is(.department-views, .workspace-views) {
  display: flex;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 5px;
  border: 1px solid #dce4ef;
  border-radius: 12px;
  background: #fff;
}
:is(.department-views, .workspace-views) > :is(button, a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 40px;
  margin: 0;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #405570;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
:is(.department-views, .workspace-views) > :is(button, a):hover { background: #edf3fd; color: #234f88; }
:is(.department-views, .workspace-views) > :is([aria-current=page], [aria-pressed=true]) { background: #2672d8; color: #fff; }
:is(.department-views, .workspace-views) > :is(button, a):focus-visible { outline: 2px solid #347bdd; outline-offset: -2px; }
:is(.department-views, .workspace-views) > :is(button, a)::after { content: none; }
.workspace-views, .team-view-navigation { margin-bottom: 20px; }
:root[data-theme=dark] :is(.department-views, .workspace-views) { background: #16263d; border-color: #354a63; }
:root[data-theme=dark] :is(.department-views, .workspace-views) > :is(button, a) { color: #b6c6d8; }
:root[data-theme=dark] :is(.department-views, .workspace-views) > :is(button, a):hover { background: #273d5e; color: #e2ebf4; }
:root[data-theme=dark] :is(.department-views, .workspace-views) > :is([aria-current=page], [aria-pressed=true]) { background: #2672d8; color: #fff; }