.language-switcher h3 {
  display: none;
}

.language-links {
  gap: 0;
}

.language-link {
  --lang-angle-adjust: 12%;
  --lang-padding: .5rem;
  background-color: var(--color-grey-lt);
  color: var(--color-black);
  display: block;
  font-size: .7rem;
  line-height: 1;
  padding: 0.35rem var(--lang-padding);
  text-transform: uppercase;

  &:is(:hover,:focus) {
    text-decoration: none;
  }

  &.is-active {
    background-color: var(--color-black);
    color: var(--color-white);
  }
}

.language-item:first-child {
  .language-link.is-active {
    clip-path: polygon(0 0, calc(100% - var(--lang-angle-adjust)) 0%, 100% 100%, 0% 100%);
    padding-right: .7rem;
    margin-right: -.3rem;
  }
  .language-link:not(.is-active) {
    padding-right: .7rem;
  }
}

.language-item:last-child {
  .language-link.is-active {
    clip-path: polygon(0 0, 100% 0%, 100% 100%, var(--lang-angle-adjust) 100%);
    padding-left: 0.7rem;
    margin-left: -0.5rem;
  }
  .language-link:not(.is-active) {
    padding-right: calc(var(--lang-padding) + var(--lang-angle-adjust));
  }
}

/* When the mobile menu is open */

.mobile-menu-wrapper.open .language-switcher {
  display: flex;
  justify-content: space-between;
  align-items: center;

  h3 {
    font-size: .8rem;
    font-weight: normal;
  }
}