.sx-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 38px;
}

.sx-sidebar-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--color-bg-sidebar);
  background: var(--color-primary);
  border-radius: 14px;
  font-size: 25px;
  font-weight: 900;
}

.sx-sidebar-brand h2 {
  font-size: 19px;
  letter-spacing: 0.08em;
}

.sx-sidebar-brand p,
.sx-sidebar-footer {
  color: var(--color-text-muted);
}

.sx-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sx-sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: 160ms ease;
}

a.sx-sidebar-nav-item:hover,
.sx-sidebar-nav-item.active {
  color: var(--color-text-main);
  background: rgba(var(--color-primary-rgb), 0.12);
}

.sx-sidebar-nav-item.active {
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.sx-sidebar-nav-item.unavailable {
  cursor: default;
  opacity: 0.62;
}

.sx-sidebar-nav svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.sx-sidebar-footer {
  margin-top: auto;
  padding-top: 24px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .sx-sidebar-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sx-sidebar-footer {
    display: none;
  }
}

@media (max-width: 650px) {
  .sx-sidebar-nav {
    grid-template-columns: 1fr;
  }
}