.app {
  --app-display-wrap: wrap;
  --app-icon-transition: var(--transition-duration);
  --app-label-icon-color: currentcolor;
  --app-lang-display: block;
  --app-foreground-color: var(--color-primary, #000);
  --app-padding: 0 10px;
  --app-wrapper-background: var(--background-primary, #fff);
  --app-wrapper-border-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
  --app-dropdown-left: -1px;
  --app-dropdown-translate: 0;
  --app-dropdown-down-bottom: auto;
  --app-dropdown-down-top: calc(100% + 11px);
  --app-dropdown-up-bottom: calc(100% + 11px);
  --app-dropdown-up-top: auto;
  display: flex;
  flex-wrap: var(--app-display-wrap);
  gap: var(--header-content-gap, 8px);
}
@media (min-width: 992px) {
  .app {
    --app-display-wrap: nowrap;
  }
}
@media (min-width: 992px) {
  .app-mobile {
    display: none;
  }
}
.app-desktop {
  --app-label-icon-color: var(--header-color);
  --app-lang-display: none;
  --app-padding: 0;
  --app-wrapper-background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  --app-wrapper-border-color: transparent;
  --app-dropdown-up-bottom: var(--app-dropdown-down-bottom);
  --app-dropdown-up-top: var(--app-dropdown-down-top);
  --app-dropdown-left: 50%;
  --app-dropdown-translate: -50%;
  display: none;
}
@media (min-width: 992px) {
  .app-desktop {
    display: block;
  }
}
.app-desktop [data-compact=true],
.app-desktop [data-short-names=true] {
  height: var(--button-height-xs) !important;
  width: var(--button-width-xs) !important;
}
.header:not(:has(.header__inner--filled)) .app-desktop {
  --app-icon-transition: var(--header-transition-duration, var(--transition-duration)) var(--header-transition-delay, 0s);
}
.app__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  border-radius: var(--border-radius-block);
  background-image: repeating-linear-gradient(315deg, var(--background-primary, #fff), var(--background-primary, #fff) 6px, color-mix(in srgb, var(--color-primary) 15%, transparent) 6px, color-mix(in srgb, var(--color-primary) 15%, transparent) 7px) !important;
}
.app__preview span {
  display: block;
  padding: 8px 12px;
  background-color: var(--background-primary, #fff);
  color: var(--color-primary, #000);
}
.app__wrapper {
  --section-padding-bottom: var(--padding-bottom-mobile, 16px);
  --section-padding-top: var(--padding-top-mobile, 16px);
  color: var(--color-primary, #000);
  background: var(--background-primary, #fff);
}
@media (min-width: 992px) {
  .app__wrapper {
    --section-padding-bottom: var(--padding-bottom-desktop, 40px);
    --section-padding-top: var(--padding-top-desktop, 40px);
  }
}
.app__wrapper--padding-top:not(:empty) {
  padding-top: var(--section-padding-top);
}
.app__wrapper--padding-bottom:not(:empty) {
  padding-bottom: var(--section-padding-bottom);
}

.accessibe-widget {
  justify-content: flex-start !important;
}
.accessibe-widget__icon {
  transition: all var(--transition-duration) var(--transition-function);
}
.accessibe-widget__icon path {
  fill: var(--app-label-icon-color) !important;
  transition: all var(--app-icon-transition) var(--transition-function);
}
.accessibe-widget__label {
  color: var(--app-label-icon-color) !important;
  padding-left: 4px;
  transition: all var(--app-icon-transition) var(--transition-function);
  line-height: 1;
}
.accessibe-widget__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--app-padding);
  background: var(--app-wrapper-background);
  height: var(--button-height-xs);
  border: 1px solid var(--app-wrapper-border-color);
  border-radius: var(--button-border-radius);
  transition: all var(--transition-duration) var(--transition-function);
}
.accessibe-widget__wrapper:hover {
  --app-wrapper-border-color: var(--color-outline);
}
.accessibe-widget__wrapper:hover .accessibe-widget__label {
  --app-label-icon-color: var(--color-outline);
}
.accessibe-widget__wrapper:hover .accessibe-widget__icon path {
  --app-label-icon-color: var(--color-outline);
}
.app-desktop .accessibe-widget__wrapper:hover {
  --app-wrapper-border-color: transparent;
}

.weglot-widget__item span {
  color: var(--app-foreground-color);
  white-space: nowrap;
  transition: all var(--transition-duration) var(--transition-function);
}
.weglot-widget__item span:hover {
  --app-foreground-color: var(--color-outline);
}
.weglot-widget__currentlang {
  display: var(--app-lang-display) !important;
  white-space: nowrap;
}
.weglot-widget__label {
  transition: all var(--transition-duration) var(--transition-function);
  width: 100%;
}
.weglot-widget__label i,
.weglot-widget__label span {
  color: var(--app-label-icon-color);
  transition: all var(--app-icon-transition) var(--transition-function);
}
.weglot-widget__wrapper {
  padding: var(--app-padding) !important;
  background: var(--app-wrapper-background) !important;
  border: 1px solid var(--app-wrapper-border-color) !important;
  border-radius: var(--button-border-radius) !important;
  transition: all var(--transition-duration) var(--transition-function);
}
.weglot-widget__wrapper:hover {
  --app-wrapper-border-color: var(--color-outline);
}
.weglot-widget__wrapper:hover .weglot-widget__label i,
.weglot-widget__wrapper:hover .weglot-widget__label span {
  --app-label-icon-color: var(--color-outline);
}
.app-desktop .weglot-widget__wrapper:hover {
  --app-wrapper-border-color: transparent;
}
.weglot-widget__dropdown {
  left: var(--app-dropdown-left) !important;
  transform: translateX(var(--app-dropdown-translate));
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
  border-radius: var(--border-radius-block) !important;
  transition: all var(--transition-duration) var(--transition-function);
  border-color: color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
  box-shadow: none !important;
  background: var(--background-primary, #fff) !important;
}
.weglot-widget__dropdown--up {
  bottom: var(--app-dropdown-up-bottom) !important;
  top: var(--app-dropdown-up-top) !important;
}
.weglot-widget__dropdown--down {
  bottom: var(--app-dropdown-down-bottom) !important;
  top: var(--app-dropdown-down-top) !important;
}