.foodord-language-switcher {
  position: relative;
  color: var(--header-text-color, var(--text-color));
}

.foodord-language-switcher__trigger,
.foodord-language-switcher__close,
.foodord-language-switcher__option {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: 1.5;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.foodord-language-switcher__trigger:focus-visible,
.foodord-language-switcher__close:focus-visible,
.foodord-language-switcher__option:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}

.foodord-language-switcher__flag,
.foodord-language-switcher__icon {
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

.foodord-language-switcher__flag {
  border-radius: 50%;
  object-fit: cover;
}

.foodord-language-switcher--header {
  display: none;
  flex: 0 0 40px;
}

.foodord-language-switcher--header .foodord-language-switcher__trigger {
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
}

.foodord-language-switcher--header .foodord-language-switcher__text,
.foodord-language-switcher--header .foodord-language-switcher__current {
  display: none;
}

.foodord-language-switcher--drawer {
  margin-top: 12px;
  border-top: 1px solid var(--border-color);
}

.foodord-language-switcher--drawer .foodord-language-switcher__trigger {
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 24px;
  font-size: 15px;
}

.foodord-language-switcher__text,
.foodord-language-switcher__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.foodord-language-switcher__current {
  min-width: 0;
  margin-inline-start: auto;
  color: var(--secondary-text);
  font-size: 13px;
  text-align: end;
  overflow-wrap: anywhere;
}

.foodord-language-switcher__panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--header-bg, #fff);
  color: var(--text-color);
}

.foodord-language-switcher__panel[hidden] {
  display: none;
}

.foodord-language-switcher__panel--header {
  position: absolute;
  z-index: 10001;
  inset-block-start: calc(100% + 12px);
  inset-inline-end: 0;
  width: 300px;
  max-width: calc(100vw - 32px);
  max-height: min(640px, calc(100dvh - 140px));
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.foodord-language-switcher__panel--drawer {
  position: absolute;
  z-index: 20;
  inset: 0;
  padding-block: env(safe-area-inset-top, 0) env(safe-area-inset-bottom, 0);
}

.foodord-language-switcher__heading {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 4px 16px;
}

.foodord-language-switcher__heading h2 {
  margin: 0;
  color: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.foodord-language-switcher__close {
  flex: 0 0 40px;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 6px;
}

.foodord-language-switcher__panel--header .foodord-language-switcher__heading h2 {
  order: -1;
  margin-inline-end: auto;
  padding-inline-start: 4px;
}

.foodord-language-switcher__list {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 10px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
}

.foodord-language-switcher__list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foodord-language-switcher__option {
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 400;
}

.foodord-language-switcher__option[aria-pressed="true"] {
  font-weight: 600;
}

.foodord-language-switcher__check {
  display: grid;
  flex: 0 0 22px;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-inline-start: auto;
  visibility: hidden;
}

.foodord-language-switcher__option[aria-pressed="true"] .foodord-language-switcher__check {
  visibility: visible;
}

.foodord-language-switcher__option.is-loading .foodord-language-switcher__check {
  box-sizing: border-box;
  border: 2px solid var(--border-color);
  border-inline-end-color: currentcolor;
  border-radius: 50%;
  visibility: visible;
  animation: foodord-language-progress 0.8s linear infinite;
}

.foodord-language-switcher__option.is-loading .foodord-language-switcher__check .foodord-language-switcher__icon {
  display: none;
}

.foodord-language-switcher__trigger:disabled,
.foodord-language-switcher__option:disabled {
  cursor: progress;
}

.foodord-language-switcher__option:disabled:not(.is-loading) {
  opacity: 0.55;
}

[dir="rtl"] .foodord-language-switcher__close .foodord-language-switcher__icon,
[dir="rtl"] .foodord-language-switcher__trigger > .foodord-language-switcher__icon:last-child {
  transform: scaleX(-1);
}

@media (min-width: 1081px) {
  .foodord-language-switcher--header {
    display: block;
  }

  .foodord-language-switcher--drawer,
  .foodord-language-switcher__panel--drawer {
    display: none;
  }
}

@media (hover: hover) {
  .foodord-language-switcher__trigger:hover:not(:disabled),
  .foodord-language-switcher__close:hover,
  .foodord-language-switcher__option:hover:not(:disabled) {
    background: var(--foodord-dark-hover, #f5f5f5);
  }
}

@keyframes foodord-language-progress {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .foodord-language-switcher__option.is-loading .foodord-language-switcher__check {
    animation: none;
  }
}
