/* Stuudiopunkt WPML Pill Switcher
   You can override accent with:
   .spwpml-pill { --spwpml-accent: #YOURCOLOR; }
*/

.spwpml-pill{
  --spwpml-accent: #14b8a6; /* default teal */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: #f1f5f9; /* slate-100 */
  border-radius: 12px;
  line-height: 1;
  white-space: nowrap;
}

.spwpml-pill__item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  color: #94a3b8; /* slate-400 */
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.spwpml-pill__item:hover{
  color: #475569; /* slate-600 */
}

.spwpml-pill__item.is-active{
  background: #ffffff;
  color: var(--spwpml-accent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.spwpml-pill__item:focus{
  outline: none;
}

.spwpml-pill__item:focus-visible{
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25), 0 1px 2px rgba(15, 23, 42, 0.12);
}