﻿.language-switch-container {
   position: absolute;
   left: 0;
   bottom: 0;
}

footer .language-switch-container { 
   position: relative;
   left: unset;
   bottom: unset;
}

   footer .language-list {
      cursor: pointer;
      position: relative;
      left: unset;
      bottom: unset;
   }

   footer .language-list label { 
      cursor: pointer;
      color: black;
   }

.language_button {
   color: var(--input-background-colour);
   font-size: 1.75rem;
   margin: 1rem;
   position: absolute;
   left: 0;
   bottom: 0;
   background-color: transparent;
   border: none;
   cursor: pointer;
}

.language-list {
   flex-direction: row;
   gap: 0.25rem;
   position: absolute;
   left: 3rem;
   bottom: 1rem;
}

.language-list label {
   padding: 0 1rem;
}

   .language-list label:not(:first-of-type) {
      border-left: solid 1px white;
   }

   .language-list.show {
      opacity: 1;
      transform: scale(1);
   }

.radio-button {
   display: none;
}

.language-switch-container .language-list {
   display: flex;
   border-radius: 1rem;
   padding: 0.5rem;
   opacity: 0;
   transform: scale(0);
   flex-direction: column;
   gap: 0.5rem;
   transform-origin: bottom left;
   transition: transform 0.2s ease-in-out;
   /* From https://css.glass */
   background: var(--background-colour);
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(4.4px);
   -webkit-backdrop-filter: blur(4.4px);
   border: 1px solid var(--border-colour);
}

   .language-switch-container .language-list label {
      border: none;
      /* From https://css.glass */
      background: var(--input-background-colour);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(4.4px);
      -webkit-backdrop-filter: blur(4.4px);
      border: 1px solid var(--border-colour);
      border-radius: 1rem;
      padding: 0.5rem;
      font-size: 1rem;
      color: var(--text-colour, #fff);
      text-wrap: nowrap;
   }

      .language-switch-container .language-list label:hover {
         filter: brightness(1.2);
      }
