Workspace Switcher

<div class="nuda-wsswitch">
  <button class="nuda-wsswitch__chip" aria-label="Workspace A">A</button>
  <button class="nuda-wsswitch__chip is-active" aria-label="Workspace B">B</button>
  <button class="nuda-wsswitch__chip" aria-label="Workspace C">C</button>
  <button class="nuda-wsswitch__chip" aria-label="Workspace D">D</button>
  <button class="nuda-wsswitch__chip nuda-wsswitch__chip--add"
          aria-label="Add workspace">+</button>
</div>

.nuda-wsswitch {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
}

.nuda-wsswitch__chip {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg,#62b6ff,#9d6dff);
  color: #fafafa;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: transform .25s,border-radius .35s cubic-bezier(.16,1,.3,1);
}

.nuda-wsswitch__chip:nth-child(2) {
  background: linear-gradient(135deg,#ff6dd4,#ffb45e);
}

.nuda-wsswitch__chip:nth-child(3) {
  background: linear-gradient(135deg,#e4ff54,#6ee7b7);
  color: #09090b;
}

.nuda-wsswitch__chip:nth-child(4) {
  background: linear-gradient(135deg,#9d6dff,#62b6ff);
}

.nuda-wsswitch__chip:hover {
  transform: scale(1.08);
  border-radius: 50%;
}

.nuda-wsswitch__chip.is-active {
  border-color: #e4ff54;
  box-shadow: 0 0 0 2px #e4ff54;
}

.nuda-wsswitch__chip.is-active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: #e4ff54;
  border-radius: 99px;
}

.nuda-wsswitch__chip--add {
  background: transparent;
  color: #a0a0a8;
  font-weight: 400;
  border-style: dashed;
}

.nuda-wsswitch__chip--add:hover {
  color: #e4ff54;
  border-color: #e4ff54;
}