.language-selector {
  position: relative;
}
.language-selector:hover > button > svg {
  transform: rotate(-180deg);
}
.language-selector:hover .language-selector__list-wrapper {
  opacity: 1;
  padding-top: 1.25rem;
  visibility: visible;
}
.language-selector svg {
  transition: transform 0.3s ease-in-out;
  fill: var(--epcido-dark);
}
.language-selector button {
  display: flex;
  align-items: center;
  column-gap: 0.25rem;
}
.language-selector__language-list li a {
  white-space: nowrap;
  display: block;
}
.language-selector__language-list {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.language-selector__list-wrapper {
  opacity: 0;
  z-index: 999;
  position: absolute;
}
@media (min-width: 1025px) {
  .language-selector__language-list {
    padding: 1rem 2rem;
  }
  
  .language-selector__list-wrapper {
    top: 100%;
    left: -3.5625rem;
    visibility: hidden;
    transition: padding-top 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }
  .language-selector__language-list li {
      padding: 0.5rem;
      column-gap: 0.25rem;
      transition: background-color 0.3s ease-out;
      position: relative;
    }
  .language-selector__language-list li::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(to left, transparent 0%, transparent 50%, #F7F7F7 50%, #F7F7F7 0%);
      background-repeat: no-repeat;
      background-size: 200% 100%;
      background-position: right;
      opacity: 0;
      z-index: 0;
    }
  .language-selector__language-list li:hover::before {
      animation: removeBG 0.4s ease-in-out forwards;
    }
  .language-selector__language-list li:hover a {
      z-index: 1;
      position: relative;
  }