/* Location: D:\ironcore\frontend\vibe_beauti\assets\css\components\lang-switcher.css */
.lang-switcher {
  position: absolute;
  top: var(--lang-switcher-top);
  right: var(--lang-switcher-right);
  z-index: 4;
}

.lang-switcher__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lang-trigger-gap);
  min-height: var(--lang-trigger-height);
  padding: var(--lang-trigger-padding-y) var(--lang-trigger-padding-x);
  border: 1px solid var(--lang-trigger-border);
  border-radius: var(--lang-trigger-radius);
  background: var(--lang-trigger-bg);
  box-shadow: var(--lang-trigger-shadow);
  color: var(--lang-trigger-code-color);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

.lang-switcher__trigger:hover {
  background: var(--lang-trigger-hover-bg);
}

.lang-switcher__trigger:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
}

.lang-switcher__trigger-code {
  min-width: 2.2em;
  font-size: var(--lang-trigger-code-font-size);
  font-weight: var(--lang-trigger-code-font-weight);
  letter-spacing: var(--lang-trigger-code-letter-spacing);
  text-align: center;
}

.lang-switcher__trigger-icon {
  width: var(--lang-trigger-icon-size);
  height: var(--lang-trigger-icon-size);
  border-right: 2px solid var(--lang-trigger-icon-color);
  border-bottom: 2px solid var(--lang-trigger-icon-color);
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.18s ease;
}

.lang-switcher__trigger[aria-expanded="true"] .lang-switcher__trigger-icon {
  transform: rotate(225deg) translateY(-1px);
}

.lang-switcher__menu {
  position: absolute;
  top: calc(100% + var(--lang-menu-top));
  right: 0;
  display: grid;
  gap: var(--lang-menu-gap);
  width: var(--lang-menu-width);
  padding: var(--lang-menu-padding);
  border: 1px solid var(--lang-menu-border);
  border-radius: var(--lang-menu-radius);
  background: var(--lang-menu-bg);
  box-shadow: var(--lang-menu-shadow);
  backdrop-filter: blur(var(--lang-menu-blur));
  -webkit-backdrop-filter: blur(var(--lang-menu-blur));
}

.lang-switcher__menu[hidden] {
  display: none !important;
}

.lang-switcher__option {
  display: inline-flex;
  align-items: center;
  gap: var(--lang-option-gap);
  min-height: var(--lang-option-height);
  padding: 0 var(--lang-option-padding-x);
  border: 1px solid transparent;
  border-radius: var(--lang-option-radius);
  background: transparent;
  color: var(--lang-option-color);
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

.lang-switcher__option:hover {
  background: var(--lang-option-hover-bg);
}

.lang-switcher__option:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 1px;
}

.lang-switcher__option.is-active {
  background: var(--lang-option-active-bg);
  border-color: var(--lang-option-active-border);
}

.lang-switcher__option-label {
  font-size: var(--lang-option-font-size);
  font-weight: var(--lang-option-font-weight);
  letter-spacing: var(--lang-option-letter-spacing);
}

.flag {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--lang-flag-width);
  height: var(--lang-flag-height);
  border: 1px solid var(--lang-flag-border);
  border-radius: var(--lang-flag-radius);
  box-shadow: var(--lang-flag-shadow);
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: transparent;
}

.flag--ru {
  background-image: url("../../images/icons/flags/flag_ru.png");
}

.flag--uk {
  background-image: url("../../images/icons/flags/flag_uk.png");
}

.flag--pl {
  background-image: url("../../images/icons/flags/flag_pl.png");
}

.flag--en {
  background-image: url("../../images/icons/flags/flag_en.png");
}