/* Load after app.css. Compact is a desktop preference, separate from the mobile dialog. */
.brand-text,
.workspace-name {
  min-width: 0;
}

.nav-item > .nav-text {
  flex: 1;
  width: auto;
  min-width: 0;
  font: inherit;
  line-height: inherit;
  text-align: left;
}

.connection > .connection-text {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
}

[data-toggle-compact-sidebar] {
  display: none;
}

@media screen and (width > 700px) {
  html {
    --sidebar-width: 204px;
  }

  html[data-sidebar="compact"] {
    --sidebar-width: 68px;
  }

  .app-shell {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  .sidebar {
    padding: 20px 10px 14px;
    height: 100dvh;
    min-width: 0;
  }

  .brand {
    gap: 10px;
    padding: 0 8px 20px;
    font-size: 23px;
  }

  .brand-symbol {
    width: 34px;
    height: 36px;
    font-size: 26px;
  }

  .workspace-label {
    margin: 0 2px 18px;
    padding: 10px 8px;
    gap: 8px;
    font-size: 12px;
  }

  .company-avatar {
    flex: none;
  }

  .nav-label {
    margin: 18px 12px 8px;
    letter-spacing: 1.3px;
  }

  .nav-item {
    gap: 9px;
    padding: 9px 10px;
    font-size: 12px;
  }

  .nav-item > .nav-text {
    white-space: nowrap;
  }

  [data-toggle-compact-sidebar] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }

  [data-toggle-compact-sidebar] > svg {
    transition: transform .15s;
  }

  [data-toggle-compact-sidebar][aria-expanded="false"] > svg {
    transform: rotate(180deg);
  }

  html[data-sidebar="compact"] .sidebar {
    padding: 20px 8px 14px;
  }

  /* Keep the brand/company/connection names available to assistive technology. */
  html[data-sidebar="compact"] .nav-text,
  html[data-sidebar="compact"] .brand-text,
  html[data-sidebar="compact"] .workspace-name,
  html[data-sidebar="compact"] .connection-text,
  html[data-sidebar="compact"] .nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  html[data-sidebar="compact"] .brand {
    justify-content: center;
    padding: 0 0 20px;
    gap: 0;
  }

  html[data-sidebar="compact"] .workspace-label {
    justify-content: center;
    padding: 8px 0;
    margin: 0 2px 14px;
    gap: 0;
  }

  html[data-sidebar="compact"] .nav-item {
    justify-content: center;
    gap: 0;
    min-height: 42px;
    padding: 10px 0;
  }

  html[data-sidebar="compact"] .connection {
    justify-content: center;
    margin: 16px 0 0;
    min-height: 12px;
  }

  html[data-sidebar="compact"] .sidebar-bottom {
    margin-top: 14px;
  }
}

@media screen and (max-width: 700px) {
  body.sidebar-open {
    overflow: hidden;
  }

  .sidebar {
    height: 100dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-toggle-compact-sidebar] > svg {
    transition: none;
  }
}