.rail-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  color: var(--color-smoke);
  text-decoration: none;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease;
}

.rail-item-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  opacity: 0.65;
  display: block;
}

.rail-item-label {
  flex: 0 1 auto;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.rail-item:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.rail-item:hover .rail-item-icon {
  opacity: 0.95;
}

.rail-item.is-active {
  background: var(--surface-selected);
  color: var(--text-primary);
}

.rail-item.is-active .rail-item-icon {
  opacity: 1;
  color: var(--color-phosphor-green);
}