[data-theme="light"] .control {
  --ada-lang-navbar-switch-color-checked: var(--ifm-color-primary);
  --ada-lang-navbar-switch-color-checked-hover: var(--ifm-color-primary-light);

  --ada-lang-navbar-switch-color-unchecked: var(--ifm-color-emphasis-700);
  --ada-lang-navbar-switch-color-unchecked-hover: var(--ifm-color-emphasis-500);
}

[data-theme="dark"] .control {
  --ada-lang-navbar-switch-color-checked: var(--ifm-color-primary-darker);
  --ada-lang-navbar-switch-color-checked-hover: var(--ifm-color-primary-dark);

  --ada-lang-navbar-switch-color-unchecked: var(--ifm-color-emphasis-300);
  --ada-lang-navbar-switch-color-unchecked-hover: var(--ifm-color-emphasis-500);
}

.control {
  @media (max-width: 996px) {
    // This requires div:has(.DocSearch-Button)'s position /= "absolute" in custom.scss
    margin-right: var(--ifm-navbar-item-padding-horizontal);
  }

  input ~ * {
    cursor: pointer;
  }

  input:checked + div {
    background-color: var(--ada-lang-navbar-switch-color-checked);
    border-color: var(--ada-lang-navbar-switch-color-checked);

    &:hover {
      background-color: var(--ada-lang-navbar-switch-color-checked-hover);
      border-color: var(--ada-lang-navbar-switch-color-checked-hover);
    }
  }

  input:not(:checked) + div {
    background-color: var(--ada-lang-navbar-switch-color-unchecked);
    border-color: var(--ada-lang-navbar-switch-color-unchecked);

    &:hover {
      background-color: var(--ada-lang-navbar-switch-color-unchecked-hover);
      border-color: var(--ada-lang-navbar-switch-color-unchecked-hover);
    }
  }
}
