/* ---------- Label ---------- */

.sidebar-label {
  opacity: 0;
  max-width: 0;

  overflow: hidden;
  white-space: nowrap;

  transition:
    opacity var(--dur-fast) var(--ease-standard),
    max-width var(--dur-base) var(--ease-standard);
}

.sidebar-rail--expanded .sidebar-label {
  opacity: 1;
  max-width: 200px;
}


/* ---------- Icon ---------- */

.sidebar-icon {
  width: var(--sidebar-icon-size, 20px);
  height: var(--sidebar-icon-size, 20px);

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: currentColor;
}

.sidebar-icon svg {
  width: 100%;
  height: 100%;

  display: block;

  stroke: currentColor;
  fill: none;
}


/* ---------- Item ---------- */

.sidebar-item {
  width: var(--sidebar-item-size);
  height: var(--sidebar-item-size);

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  border: var(--border-width) solid transparent;
  border-radius: var(--radius-lg);

  background: transparent;
  color: var(--text-muted);

  cursor: pointer;

  transition:
    width var(--dur-base) var(--ease-standard),
    background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}


.sidebar-rail--expanded .sidebar-item {
  width: calc(100% - var(--space-4));
  gap: var(--sidebar-item-gap);

  justify-content: flex-start;

  padding-left: var(--sidebar-item-padding);
}


/* ---------- Item States ---------- */

.sidebar-item:hover {
  background: var(--bg-raised);
  color: var(--text-primary);
}


.sidebar-item--active {
  border-color: var(--accent-brand);
  color: var(--text-primary);
}


/* ---------- Sidebar ---------- */

.sidebar-rail {
  position: fixed;

  top: var(--header-height);
  left: 0;
  bottom: 0;

  width: var(--sidebar-width-collapsed);

  display: flex;
  flex-direction: column;

  background: var(--bg-void);

  border-right: var(--border-width) solid var(--border-hairline);

  z-index: 30;

  overflow: visible;

  transition:
    width var(--dur-base) var(--ease-standard);
}


.sidebar-rail--expanded {
  width: var(--sidebar-width-expanded);
}


/* ---------- App name ---------- */

.sidebar-app-name {
  position: absolute;

  top: var(--space-3);
  left: var(--space-4);

  height: var(--sidebar-toggle-size);

  display: flex;
  align-items: center;

  font-size: var(--font-size-sm, 13px);
  font-weight: 600;
  color: var(--text-primary);

  white-space: nowrap;
  overflow: hidden;

  opacity: 0;
  pointer-events: none;

  transition: opacity var(--dur-fast) var(--ease-standard);

  z-index: 31;
}

.sidebar-rail--expanded .sidebar-app-name {
  opacity: 1;
  pointer-events: auto;
  transition-delay: var(--dur-fast);
}


/* ---------- Scroll ---------- */

.sidebar-scroll {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: var(--space-1);

  padding: calc(var(--sidebar-toggle-size) + var(--space-3) * 2) 0 var(--space-3);

  overflow-y: auto;
}


.sidebar-rail--expanded .sidebar-scroll {
  align-items: stretch;
}


/* ---------- Toggle ---------- */

.sidebar-toggle {
  position: absolute;

  top: var(--space-3);
  left: calc((var(--sidebar-width-collapsed) - var(--sidebar-toggle-size)) / 2);

  width: var(--sidebar-toggle-size);
  height: var(--sidebar-toggle-size);

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: var(--radius-pill);

  background: var(--bg-void);
  color: var(--text-muted);

  cursor: pointer;
  padding: 0;

  box-shadow: none;

  transition:
    left var(--dur-base) var(--ease-standard),
    background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);

  z-index: 32;
}


.sidebar-rail--expanded .sidebar-toggle {
  left: calc(var(--sidebar-width-expanded) - var(--sidebar-toggle-size) - var(--space-3));
}


.sidebar-toggle:hover {
  background: var(--bg-raised);

  color: var(--text-primary);

  border-color: var(--accent-brand);
}


.sidebar-toggle:active {
  transform: scale(.92);
}

.sidebar-rail--expanded .sidebar-toggle:active {
  transform: scale(.92);
}


.sidebar-toggle-icon {
  width: 14px;
  height: 14px;
  
  transition:
    transform var(--dur-base) var(--ease-standard);
}


.sidebar-rail--expanded .sidebar-toggle-icon {
  transform: rotate(180deg);
}


/* ---------- Content ---------- */

.stage--with-sidebar {
  margin-left: var(--sidebar-width-collapsed);

  transition:
    margin-left var(--dur-base) var(--ease-standard);
}