/* Pris-periode-toggle — segmentert kontroll for å bytte mellom månedlig
 * og årlig visning på kostnads-sider. Se docs/05-frontend.md §11.
 *
 * Plasseres typisk i .verktoylinje (toolbar) på de relevante data-sidene
 * (/tjenester, /organisasjoner, /prismatrise, /oversikt).
 */

.prisperiode {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--farge-kant);
  border-radius: var(--radius-stor);
  overflow: hidden;
  background: var(--farge-overflate);
  font-size: var(--font-base);
  line-height: 1;
}

.prisperiode__valg {
  appearance: none;
  background: transparent;
  border: none;
  padding: var(--avstand-2) var(--avstand-3);
  color: var(--farge-tekst-dempet);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.prisperiode__valg + .prisperiode__valg {
  border-left: 1px solid var(--farge-kant);
}

.prisperiode__valg:hover {
  background: var(--farge-overflate-hover);
  color: var(--farge-tekst);
}

.prisperiode__valg--aktiv,
.prisperiode__valg--aktiv:hover {
  background: var(--farge-bakgrunn);
  color: var(--farge-tekst);
  box-shadow: inset 0 -2px 0 0 var(--farge-primary);
}

.prisperiode__valg:focus-visible {
  outline: 2px solid var(--farge-primary);
  outline-offset: -2px;
}