:root {
  --nav-font-size-desktop: 1.5rem;
  --nav-font-size-mobile: 1.3rem;
  --pipe-font-size: 1.4rem;
  --pipe-spacing-mobile: 0.1em;
  --pipe-spacing: 0.5em;
}

.custom-switch {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: inherit;
  margin: 1em 0;
  user-select: none;
}

.switch-label {
  font-size: var(--nav-font-size-desktop);
  font-weight: 400;
  pointer-events: all;
  cursor: pointer;
  user-select: none;
}

/* .switch-label-left {}

.switch-label-right {} */

.switch-track {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0 var(--pipe-spacing);
}

.switch-track::before {
  content: "|";
  display: inline-block;
  font-size: var(--pipe-font-size);
  line-height: 1;
  vertical-align: baseline;
}

.subheadline-fade {
  transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  will-change: opacity;
}

.languages {
  font-size: var(--pipe-font-size);
}

.language-pipe {
  margin: 0 var(--pipe-spacing);
  display: inline-block;
}

@media screen and (min-width: 769px) {
  .custom-switch {
    margin: 1em 0 1em 2rem;
  }

  .switch-label {
    font-size: var(--nav-font-size-desktop);
  }

  .languages {
    margin-right: 2rem;
    font-size: var(--pipe-font-size);
  }

  .languages a {
    font-size: var(--nav-font-size-desktop);
    padding: 0;
  }
}

@media screen and (max-width: 768px) {

  .switch-label {
    font-size: var(--nav-font-size-mobile) !important;
  }

  .switch-track {
    margin: 0 var(--pipe-spacing-mobile);
  }

  .language-pipe {
    margin: 0 var(--pipe-spacing-mobile);
  }

  .languages {
    font-size: var(--pipe-font-size);
  }

  .languages a {
    font-size: var(--nav-font-size-mobile) !important;
    font-weight: normal;
  }
}