////
/// Language Switcher
///
/// Displays language codes (DE, EN, FR, etc.) horizontally,
/// separated by vertical pipes, with active language underlined.
////

// Language switcher inside menu (both mobile and desktop)
.block-themekit-language-switcher {
  text-align: right;

  // Right-align the list items
  ul.language-switcher-language-url {
    justify-content: flex-end;

    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;


    li {
      display: flex;
      align-items: center;

      // Add pipe separator after each item except the last
      &:not(:last-child)::after {
        content: '|';
        margin: 0 rem-calc(8);
        color: $color-gray-500;
        // Move pipe up to vertically center with text
        transform: translateY(-1px);

        @include breakpoint(small down) {
          color: rgba($color-white, 0.5);
        }
      }
    }

    a {
      // Hide full language name, show only code via ::before
      font-size: 0;
      font-weight: 400;
      text-decoration: none;
      color: $color-gray-500;
      border-bottom: 2px solid transparent;
      transition: color 0.2s ease, border-color 0.2s ease;
      line-height: 1.4;

      &::before {
        font-size: rem-calc(14);
        content: attr(hreflang);
        text-transform: uppercase;
        line-height: 1.4;
      }

      @include breakpoint(small down) {
        color: rgba($color-white, 0.7);

        &::before {
          color: rgba($color-white, 0.7);
        }
      }

      // Active state - underlined
      &.is-active {
        color: $color-gray-900;
        border-bottom-color: $color-gray-900;

        &::before {
          color: $color-gray-900;
        }

        @include breakpoint(small down) {
          color: $color-white;
          border-bottom-color: $color-white;

          &::before {
            color: $color-white;
          }
        }
      }

      // Hover state
      &:hover:not(.is-active) {
        color: $color-gray-900;

        &::before {
          color: $color-gray-900;
        }

        @include breakpoint(small down) {
          color: $color-white;

          &::before {
            color: $color-white;
          }
        }
      }
    }
  }

  // Mobile: inside the slide-out panel
  @include breakpoint(small down) {
    margin-bottom: rem-calc(24);
    // Use same padding as menu item anchors to align text with menu items
    padding-right: rem-calc(56);
  }
}
