:root {
  --semantic: #61d4b3;
  --semantic-soft: rgba(97, 212, 179, .14);
}

:root[data-theme=light] {
  --semantic-soft: rgba(39, 164, 133, .10);
}

.layer-toggle.semantic {
  color: var(--semantic);
  background: var(--semantic-soft);
}

.layer-toggle.semantic i { background: var(--semantic); }

.layer-toggle.dynamic-layer {
  color: var(--layer-color);
  background: color-mix(in srgb, var(--layer-color) 14%, transparent);
}

.layer-toggle.dynamic-layer i { background: var(--layer-color); }

.mlb-btn.dynamic-layer { color: var(--layer-color); }

.mlb-btn.dynamic-layer.active {
  color: var(--layer-color);
  border-color: var(--layer-color);
  background: color-mix(in srgb, var(--layer-color) 14%, transparent);
}

.node-layer-badge.semantic {
  color: var(--semantic);
  background: var(--semantic-soft);
}

.node-layer-badge[style*="--layer-color"] {
  color: var(--layer-color);
  background: color-mix(in srgb, var(--layer-color) 14%, transparent);
}

.mlb-btn.utility {
  color: var(--muted);
  border-style: dashed;
}

.mlb-btn.utility.active {
  color: var(--text);
  border-color: var(--line2);
  border-style: solid;
  background: rgba(255, 255, 255, .09);
}

@media (max-width: 760px) {
  .brand-block {
    width: 95px;
    max-width: 95px;
    flex-basis: 95px;
  }

  .brand-block h1 {
    max-width: 66px;
    font-size: 10px;
  }

  .brand-title.language-en .brand-title-primary { max-width: 66px; }
  .brand-title.language-bilingual .brand-title-primary { font-size: 11px; }
  .brand-title-secondary { font-size: 5.5px; }

  .graph-picker {
    width: 90px;
    max-width: 90px;
  }

  .top-actions .stage-language-button {
    height: 28px;
    min-width: 34px;
    padding: 0 5px;
  }
}