.app__wrapper--padding-top {
  padding-top: var(--padding-top-mobile, 100px);
}

.app__wrapper--padding-bottom {
  padding-bottom: var(--padding-bottom-mobile, 100px);
}

.app-mobile {
  display: flex;
  margin: 18px var(--horizontal-padding, 16px);
}

.app-desktop {
  display: none;
}

.app__preview {
  height: 200px;
  border-radius: var(--border-radius-block-rounded);
  display: flex;
  justify-content: center;
  align-items: center;
}

.app__preview span {
  display: block;
  padding: 8px 12px;
}

.accessibe-widget {
  justify-content: flex-start !important;
  margin: 10px 0;
}

.accessibe-widget .accessibe-widget__wrapper {
  align-items: center;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--border-radius-dynamic);
  border: 1px solid transparent;
  transition: all var(--animation-duration) var(--transition-function-ease-in-out);
}

.accessibe-widget .accessibe-widget__label {
  padding-left: 4px;
}

.accessibe-widget .accessibe-widget__label,
.accessibe-widget .accessibe-widget__icon path {
  transition: all var(--animation-duration) var(--transition-function-ease-in-out);
}

.weglot-widget {
  margin: 10px 0;
}

.weglot-widget__wrapper {
  border-radius: var(--border-radius-dynamic) !important;
  transition: all var(--animation-duration) var(--transition-function-ease-in-out);
}

.weglot-widget__wrapper .weglot-widget__label {
  transition: all var(--animation-duration) var(--transition-function-ease-in-out);
}

.weglot-widget__dropdown {
  left: 50% !important;
  transform: translate(-50%, 0);
  border: 1px solid var(--color-border, #0B1A2626) !important;
  border-radius: var(--border-radius-rounded) !important;
  transition: all var(--animation-duration) var(--transition-function-ease-in-out);
}

.weglot-widget__dropdown--up {
  bottom: calc(100% + 11px) !important;
  top: auto !important;
}

.weglot-widget__dropdown--down {
  bottom: auto !important;
  top: calc(100% + 11px) !important;
}

.weglot-widget__dropdown::before,
.weglot-widget__dropdown::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-style: solid;
  transition: all var(--animation-duration) var(--transition-function-ease-in-out);
}

.weglot-widget__dropdown--up::before,
.weglot-widget__dropdown--up::after {
  top: 100%;
  border-width: 10px 10px 0;
}

.weglot-widget__dropdown--up::before {
  top: calc(100% + 1px);
}

.weglot-widget__dropdown--down::before,
.weglot-widget__dropdown--down::after {
  bottom: 100%;
  border-width: 0 10px 10px;
}

.weglot-widget__dropdown--down::before {
  bottom: calc(100% + 1px);
}

.weglot-widget__item span {
  white-space: nowrap;
  transition: all var(--animation-duration) var(--transition-function-ease-in-out);
}

.app-mobile .weglot-widget__dropdown {
  left: 0 !important;
  transform: translate(0, 0);
}

.app-mobile .weglot-widget__dropdown::before,
.app-mobile .weglot-widget__dropdown::after {
  left: 32px;
}

.palette-one.app__wrapper {
  color: var(--color-primary, #0B1A26);
  background: var(--background-primary, #FFF);
}

.palette-one .app__preview {
  background-image: repeating-linear-gradient(
    315deg,
    var(--background-primary, #FFF),
    var(--background-primary, #FFF) 6px,
    var(--color-border, #0B1A2626) 6px,
    var(--color-border, #0B1A2626) 7px
  ) !important;
}

.palette-one .app__preview span {
  background-color: var(--background-primary, #FFF);
  color: var(--color-primary, #0B1A26);
}

.palette-one .accessibe-widget .accessibe-widget__wrapper {
  border-color: var(--color-border, #0B1A2626);
}

.palette-one .accessibe-widget .accessibe-widget__icon,
.palette-one .accessibe-widget .accessibe-widget__label {
  color: var(--color-primary, #0B1A26) !important;
}

.palette-one .accessibe-widget .accessibe-widget__icon path {
  fill: var(--color-primary, #0B1A26) !important;
}

.palette-one .weglot-widget__wrapper {
  border-color: var(--color-border, #0B1A2626) !important;
}

.palette-one .weglot-widget__dropdown {
  border-color: var(--color-border, #0B1A2626) !important;
  box-shadow: 0 0 8px var(--color-border, #0B1A2626) !important;
}

.palette-one .weglot-widget__dropdown--up::before,
.palette-one .weglot-widget__dropdown--up::after {
  border-color: var(--background-primary, #FFF) transparent transparent transparent;
}

.palette-one .weglot-widget__dropdown--up::before {
  border-color: var(--color-border, #0B1A2626) transparent transparent transparent;
}

.palette-one .weglot-widget__dropdown--down::before,
.palette-one .weglot-widget__dropdown--down::after {
  border-color: transparent transparent var(--background-primary, #FFF) transparent;
}

.palette-one .weglot-widget__dropdown--down::before {
  border-color: transparent transparent var(--color-border, #0B1A2626) transparent;
}

.palette-two.app__wrapper {
  color: var(--color-primary-2, #FFF);
  background: var(--background-primary-2, #0B1A26);
}

.palette-two .app__preview {
  background-image: repeating-linear-gradient(
    315deg,
    var(--background-primary-2, #0B1A26),
    var(--background-primary-2, #0B1A26) 6px,
    var(--color-border-2, #FFFFFF47) 6px,
    var(--color-border-2, #FFFFFF47) 7px
  ) !important;
}

.palette-two .app__preview span {
  background-color: var(--background-primary-2, #0B1A26);
  color: var(--color-primary-2, #FFF);
}

.palette-two .accessibe-widget .accessibe-widget__wrapper {
  border-color: var(--color-border-2, #FFFFFF47);
}

.palette-two .accessibe-widget .accessibe-widget__icon,
.palette-two .accessibe-widget .accessibe-widget__label {
  color: var(--color-primary-2, #FFF) !important;
}

.palette-two .accessibe-widget .accessibe-widget__icon path {
  fill: var(--color-primary-2, #FFF) !important;
}

.palette-two .weglot-widget__wrapper {
  border-color: var(--color-border-2, #FFFFFF47) !important;
}

.palette-two .weglot-widget__dropdown {
  border-color: var(--color-border-2, #FFFFFF47) !important;
  box-shadow: 0 0 8px var(--color-border-2, #FFFFFF47) !important;
}

.palette-two .weglot-widget__dropdown--up::before,
.palette-two .weglot-widget__dropdown--up::after {
  border-color: var(--background-primary-2, #0B1A26) transparent transparent transparent;
}

.palette-two .weglot-widget__dropdown--up::before {
  border-color: var(--color-border-2, #FFFFFF47) transparent transparent transparent;
}

.palette-two .weglot-widget__dropdown--down::before,
.palette-two .weglot-widget__dropdown--down::after {
  border-color: transparent transparent var(--background-primary-2, #0B1A26) transparent;
}

.palette-two .weglot-widget__dropdown--down::before {
  border-color: transparent transparent var(--color-border-2, #FFFFFF47) transparent;
}

.palette-three.app__wrapper {
  color: var(--color-primary-3, #0B1A26);
  background: var(--background-primary-3, #F4B841);
}

.palette-three .app__preview {
  background-image: repeating-linear-gradient(
    315deg,
    var(--background-primary-3, #F4B841),
    var(--background-primary-3, #F4B841) 6px,
    var(--color-border-3, #0B1A2626) 6px,
    var(--color-border-3, #0B1A2626) 7px
  ) !important;
}

.palette-three .app__preview span {
  background-color: var(--background-primary-3, #F4B841);
  color: var(--color-primary-3, #0B1A26);
}

.palette-three .accessibe-widget .accessibe-widget__wrapper {
  border-color: var(--color-border-3, #0B1A2626);
}

.palette-three .accessibe-widget .accessibe-widget__icon,
.palette-three .accessibe-widget .accessibe-widget__label {
  color: var(--color-primary-3, #0B1A26) !important;
}

.palette-three .accessibe-widget .accessibe-widget__icon path {
  fill: var(--color-primary-3, #0B1A26) !important;
}

.palette-three .weglot-widget__wrapper {
  border-color: var(--color-border-3, #0B1A2626) !important;
}

.palette-three .weglot-widget__dropdown {
  border-color: var(--color-border-3, #0B1A2626) !important;
  box-shadow: 0 0 8px var(--color-border-3, #0B1A2626) !important;
}

.palette-three .weglot-widget__dropdown--up::before,
.palette-three .weglot-widget__dropdown--up::after {
  border-color: var(--background-primary-3, #F4B841) transparent transparent transparent;
}

.palette-three .weglot-widget__dropdown--up::before {
  border-color: var(--color-border-3, #0B1A2626) transparent transparent transparent;
}

.palette-three .weglot-widget__dropdown--down::before,
.palette-three .weglot-widget__dropdown--down::after {
  border-color: transparent transparent var(--background-primary-3, #F4B841) transparent;
}

.palette-three .weglot-widget__dropdown--down::before {
  border-color: transparent transparent var(--color-border-3, #0B1A2626) transparent;
}

@media (width >= 992px) {
  .app__wrapper--padding-top {
    padding-top: var(--padding-top, 50px);
  }

  .app__wrapper--padding-bottom {
    padding-bottom: var(--padding-bottom, 50px);
  }
}

@media (width >= 1100px) {
  .app-mobile {
    display: none;
  }

  .app-desktop {
    display: block;
  }

  .header__app:has(.app-desktop) {
    margin-right: 32px;
  }

  .app-desktop [data-short-names="true"] {
    width: auto !important;
  }

  .app-desktop .accessibe-widget {
    margin: 0;
  }

  .app-desktop .accessibe-widget__wrapper {
    border: none;
    padding: 0;
  }

  .app-desktop .weglot-widget {
    margin: 0;
  }

  .app-desktop .weglot-widget__wrapper {
    padding: 0 !important;
    margin: 0;
    border: none !important;
  }

  .app-desktop .weglot-widget__dropdown--up {
    bottom: auto !important;
    top: calc(100% + 11px) !important;
  }

  .app-desktop .weglot-widget__dropdown--up::before,
  .app-desktop .weglot-widget__dropdown--up::after {
    bottom: 100%;
    top: auto;
    border-width: 0 10px 10px;
  }

  .app-desktop .weglot-widget__dropdown--up::before {
    bottom: calc(100% + 1px);
  }

  .palette-one .app-desktop .weglot-widget__dropdown--up::before,
  .palette-one .app-desktop .weglot-widget__dropdown--up::after,
  .palette-one .app-desktop .weglot-widget__dropdown--down::before,
  .palette-one .app-desktop .weglot-widget__dropdown--down::after {
    border-color: transparent transparent var(--background-primary, #FFF) transparent;
  }

  .palette-one .app-desktop .weglot-widget__dropdown--up::before,
  .palette-one .app-desktop .weglot-widget__dropdown--down::before {
    border-color: transparent transparent var(--color-border, #0B1A2626) transparent;
  }

  .palette-one .weglot-widget__item span {
    color: var(--color-primary, #0B1A26);
  }

  .palette-two .app-desktop .weglot-widget__dropdown--up::before,
  .palette-two .app-desktop .weglot-widget__dropdown--up::after,
  .palette-two .app-desktop .weglot-widget__dropdown--down::before,
  .palette-two .app-desktop .weglot-widget__dropdown--down::after {
    border-color: transparent transparent var(--background-primary-2, #0B1A26) transparent;
  }

  .palette-two .app-desktop .weglot-widget__dropdown--up::before,
  .palette-two .app-desktop .weglot-widget__dropdown--down::before {
    border-color: transparent transparent var(--color-border-2, #FFFFFF47) transparent;
  }

  .palette-two .weglot-widget__item span {
    color: var(--color-primary-2, #FFF);
  }

  .palette-three .app-desktop .weglot-widget__dropdown--up::before,
  .palette-three .app-desktop .weglot-widget__dropdown--up::after,
  .palette-three .app-desktop .weglot-widget__dropdown--down::before,
  .palette-three .app-desktop .weglot-widget__dropdown--down::after {
    border-color: transparent transparent var(--background-primary-3, #F4B841) transparent;
  }

  .palette-three .app-desktop .weglot-widget__dropdown--up::before,
  .palette-three .app-desktop .weglot-widget__dropdown--down::before {
    border-color: transparent transparent var(--color-border-3, #0B1A2626) transparent;
  }

  .palette-three .weglot-widget__item span {
    color: var(--color-primary-3, #0B1A26);
  }
}

@media (hover: hover) {
  .palette-one .accessibe-widget .accessibe-widget__wrapper:hover {
    border-color: var(--color-outline-hover, #F4B841CC);
  }

  .palette-one .accessibe-widget .accessibe-widget__wrapper:active {
    border-color: var(--color-outline-active, #F4B841BA);
  }

  .palette-one .accessibe-widget .accessibe-widget__wrapper:hover .accessibe-widget__icon,
  .palette-one .accessibe-widget .accessibe-widget__wrapper:hover .accessibe-widget__label {
    color: var(--color-outline-hover, #F4B841CC) !important;
  }

  .palette-one .accessibe-widget .accessibe-widget__wrapper:active .accessibe-widget__icon,
  .palette-one .accessibe-widget .accessibe-widget__wrapper:active .accessibe-widget__label {
    color: var(--color-outline-active, #F4B841BA) !important;
  }


  .palette-one .accessibe-widget .accessibe-widget__wrapper:hover .accessibe-widget__icon path {
    fill: var(--color-outline-hover, #F4B841CC) !important;
  }

  .palette-one .accessibe-widget .accessibe-widget__wrapper:active .accessibe-widget__icon path {
    fill: var(--color-outline-active, #F4B841BA) !important;
  }

  .palette-one .weglot-widget__wrapper:hover {
    border-color: var(--color-outline-hover, #F4B841CC) !important;
  }

  .palette-one .weglot-widget__wrapper:active {
    border-color: var(--color-outline-active, #F4B841BA) !important;
  }

  .palette-one .weglot-widget__wrapper:hover .weglot-widget__label {
    color: var(--color-outline-hover, #F4B841CC);
  }

  .palette-one .weglot-widget__wrapper:active .weglot-widget__label {
    color: var(--color-outline-active, #F4B841BA);
  }

  .palette-one .weglot-widget__dropdown:hover {
    border-color: var(--color-outline-hover, #F4B841CC) !important;
  }

  .palette-one .weglot-widget__dropdown:active {
    border-color: var(--color-outline-active, #F4B841BA) !important;
  }

  .palette-one .weglot-widget__dropdown--up:hover::before {
    border-color: var(--color-outline-hover, #F4B841CC) transparent transparent transparent;
  }

  .palette-one .weglot-widget__dropdown--up:active::before {
    border-color: var(--color-outline-active, #F4B841BA) transparent transparent transparent;
  }

  .palette-one .weglot-widget__dropdown--down:hover::before {
    border-color: transparent transparent var(--color-outline-hover, #F4B841CC) transparent;
  }

  .palette-one .weglot-widget__dropdown--down:active::before {
    border-color: transparent transparent var(--color-outline-active, #F4B841BA) transparent;
  }

  .palette-one .weglot-widget__item span:hover {
    color: var(--color-outline-hover, #F4B841CC);
  }

  .palette-one .weglot-widget__item span:active {
    color: var(--color-outline-active, #F4B841BA);
  }

  .palette-one .app-desktop .weglot-widget__dropdown--up:hover::before,
  .palette-one .app-desktop .weglot-widget__dropdown--down:hover::before {
    border-color: transparent transparent var(--color-outline-hover, #F4B841CC) transparent;
  }

  .palette-one .app-desktop .weglot-widget__dropdown--up:active::before,
  .palette-one .app-desktop .weglot-widget__dropdown--down:active::before {
    border-color: transparent transparent var(--color-outline-active, #F4B841BA) transparent;
  }

  .palette-two .accessibe-widget .accessibe-widget__wrapper:hover {
    border-color: var(--color-outline-2-hover, #F4B841CC);
  }

  .palette-two .accessibe-widget .accessibe-widget__wrapper:active {
    border-color: var(--color-outline-2-active, #F4B841BA);
  }

  .palette-two .accessibe-widget .accessibe-widget__wrapper:hover .accessibe-widget__icon,
  .palette-two .accessibe-widget .accessibe-widget__wrapper:hover .accessibe-widget__label {
    color: var(--color-outline-2-hover, #F4B841CC) !important;
  }

  .palette-two .accessibe-widget .accessibe-widget__wrapper:active .accessibe-widget__icon,
  .palette-two .accessibe-widget .accessibe-widget__wrapper:active .accessibe-widget__label {
    color: var(--color-outline-2-active, #F4B841BA) !important;
  }

  .palette-two .accessibe-widget .accessibe-widget__wrapper:hover .accessibe-widget__icon path {
    fill: var(--color-outline-2-hover, #F4B841CC) !important;
  }

  .palette-two .accessibe-widget .accessibe-widget__wrapper:active .accessibe-widget__icon path {
    fill: var(--color-outline-2-active, #F4B841BA) !important;
  }

  .palette-two .weglot-widget__wrapper:hover {
    border-color: var(--color-outline-2-hover, #F4B841CC) !important;
  }

  .palette-two .weglot-widget__wrapper:active {
    border-color: var(--color-outline-2-active, #F4B841BA) !important;
  }

  .palette-two .weglot-widget__wrapper:hover .weglot-widget__label {
    color: var(--color-outline-2-hover, #F4B841CC);
  }

  .palette-two .weglot-widget__wrapper:active .weglot-widget__label {
    color: var(--color-outline-2-active, #F4B841BA);
  }

  .palette-two .weglot-widget__dropdown:hover {
    border-color: var(--color-outline-2-hover, #F4B841CC) !important;
  }

  .palette-two .weglot-widget__dropdown:active {
    border-color: var(--color-outline-2-active, #F4B841BA) !important;
  }

  .palette-two .weglot-widget__dropdown--up:hover::before {
    border-color: var(--color-outline-2-hover, #F4B841CC) transparent transparent transparent;
  }

  .palette-two .weglot-widget__dropdown--up:active::before {
    border-color: var(--color-outline-2-active, #F4B841BA) transparent transparent transparent;
  }

  .palette-two .weglot-widget__dropdown--down:hover::before {
    border-color: transparent transparent var(--color-outline-2-hover, #F4B841CC) transparent;
  }

  .palette-two .weglot-widget__dropdown--down:active::before {
    border-color: transparent transparent var(--color-outline-2-active, #F4B841BA) transparent;
  }

  .palette-two .weglot-widget__item span:hover {
    color: var(--color-outline-2-hover, #F4B841CC);
  }

  .palette-two .weglot-widget__item span:active {
    color: var(--color-outline-2-active, #F4B841BA);
  }

  .palette-two .app-desktop .weglot-widget__dropdown--up:hover::before,
  .palette-two .app-desktop .weglot-widget__dropdown--down:hover::before {
    border-color: transparent transparent var(--color-outline-2-hover, #F4B841CC) transparent;
  }

  .palette-two .app-desktop .weglot-widget__dropdown--up:active::before,
  .palette-two .app-desktop .weglot-widget__dropdown--down:active::before {
    border-color: transparent transparent var(--color-outline-2-active, #F4B841BA) transparent;
  }

  .palette-three .accessibe-widget .accessibe-widget__wrapper:hover {
    border-color: var(--color-outline-3-hover, #0B1A26CC);
  }

  .palette-three .accessibe-widget .accessibe-widget__wrapper:active {
    border-color: var(--color-outline-3-active, #0B1A26BA);
  }

  .palette-three .accessibe-widget .accessibe-widget__wrapper:hover .accessibe-widget__icon,
  .palette-three .accessibe-widget .accessibe-widget__wrapper:hover .accessibe-widget__label {
    color: var(--color-outline-3-hover, #0B1A26CC) !important;
  }

  .palette-three .accessibe-widget .accessibe-widget__wrapper:active .accessibe-widget__icon,
  .palette-three .accessibe-widget .accessibe-widget__wrapper:active .accessibe-widget__label {
    color: var(--color-outline-3-active, #0B1A26BA) !important;
  }


  .palette-three .accessibe-widget .accessibe-widget__wrapper:hover .accessibe-widget__icon path {
    fill: var(--color-outline-3-hover, #0B1A26CC) !important;
  }

  .palette-three .accessibe-widget .accessibe-widget__wrapper:active .accessibe-widget__icon path {
    fill: var(--color-outline-3-active, #0B1A26BA) !important;
  }

  .palette-three .weglot-widget__wrapper:hover {
    border-color: var(--color-outline-3-hover, #0B1A26CC) !important;
  }

  .palette-three .weglot-widget__wrapper:active {
    border-color: var(--color-outline-3-active, #0B1A26BA) !important;
  }

  .palette-three .weglot-widget__wrapper:hover .weglot-widget__label {
    color: var(--color-outline-3-hover, #0B1A26CC);
  }

  .palette-three .weglot-widget__wrapper:active .weglot-widget__label {
    color: var(--color-outline-3-active, #0B1A26BA);
  }

  .palette-three .weglot-widget__dropdown:hover {
    border-color: var(--color-outline-3-hover, #0B1A26CC) !important;
  }

  .palette-three .weglot-widget__dropdown:active {
    border-color: var(--color-outline-3-active, #0B1A26BA) !important;
  }

  .palette-three .weglot-widget__dropdown--up:hover::before {
    border-color: var(--color-outline-3-hover, #0B1A26CC) transparent transparent transparent;
  }

  .palette-three .weglot-widget__dropdown--up:active::before {
    border-color: var(--color-outline-3-active, #0B1A26BA) transparent transparent transparent;
  }

  .palette-three .weglot-widget__dropdown--down:hover::before {
    border-color: transparent transparent var(--color-outline-3-hover, #0B1A26CC) transparent;
  }

  .palette-three .weglot-widget__dropdown--down:active::before {
    border-color: transparent transparent var(--color-outline-3-active, #0B1A26BA) transparent;
  }

  .palette-three .weglot-widget__item span:hover {
    color: var(--color-outline-3-hover, #0B1A26CC);
  }

  .palette-three .weglot-widget__item span:active {
    color: var(--color-outline-3-active, #0B1A26BA);
  }

  .palette-three .app-desktop .weglot-widget__dropdown--up:hover::before,
  .palette-three .app-desktop .weglot-widget__dropdown--down:hover::before {
    border-color: transparent transparent var(--color-outline-3-hover, #0B1A26CC) transparent;
  }

  .palette-three .app-desktop .weglot-widget__dropdown--up:active::before,
  .palette-three .app-desktop .weglot-widget__dropdown--down:active::before {
    border-color: transparent transparent var(--color-outline-3-active, #0B1A26BA) transparent;
  }
}