#tracks-recent,
#tracks-window,
#tracks-recent ~ .tracks-recent,
#tracks-window ~ .tracks-window {
  display: none;
}

#tracks-recent:checked ~ .tracks-recent,
#tracks-window:checked ~ .tracks-window {
  display: block;
}

input[id="tracks-recent"] ~ .tracks-recent,
input[id="tracks-window"] ~ .tracks-window {
  margin-top: var(--spacing-base);
}

input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-window"]) {
  margin-right: var(--spacing-xs);
}

#tracks-recent:checked ~ [for="tracks-recent"],
#tracks-window:checked ~ [for="tracks-window"] {
  cursor: not-allowed;
  border-color: var(--accent-color);
  background-color: var(--accent-color);
}

#tracks-recent:not(:checked) ~ [for="tracks-recent"],
#tracks-window:not(:checked) ~ [for="tracks-window"] {
  color: var(--accent-color);
  background: transparent;
}

#tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover,
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:active,
#tracks-window:not(:checked) ~ [for="tracks-window"]:hover,
#tracks-window:not(:checked) ~ [for="tracks-window"]:active {
  color: var(--accent-color-hover);
}