/* GI Lang BG v1.0.9.2 - add-on for GI Mobile Language Bar v1.0.9 */

#gi-mobile-language-bar.gi-lang-bg-has-bg,
.gi-mobile-language-bar.gi-lang-bg-has-bg {
  background-image: var(--gi-lang-bg-image) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

#gi-mobile-language-bar.gi-lang-bg-fill,
.gi-mobile-language-bar.gi-lang-bg-fill {
  background-size: cover !important;
}

#gi-mobile-language-bar.gi-lang-bg-fit,
.gi-mobile-language-bar.gi-lang-bg-fit {
  background-size: contain !important;
}

#gi-mobile-language-bar .gi-lang-bg-scroll-wrap,
.gi-mobile-language-bar .gi-lang-bg-scroll-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

#gi-mobile-language-bar .gi-lang-bg-scroll-wrap > .gi-mobile-language-options,
.gi-mobile-language-bar .gi-lang-bg-scroll-wrap > .gi-mobile-language-options {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

#gi-mobile-language-bar .gi-lang-bg-scroll-wrap::before,
#gi-mobile-language-bar .gi-lang-bg-scroll-wrap::after,
.gi-mobile-language-bar .gi-lang-bg-scroll-wrap::before,
.gi-mobile-language-bar .gi-lang-bg-scroll-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 9;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.18s ease, visibility 0.18s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

#gi-mobile-language-bar .gi-lang-bg-scroll-wrap::before,
.gi-mobile-language-bar .gi-lang-bg-scroll-wrap::before {
  left: 1px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 9px solid currentColor;
}

#gi-mobile-language-bar .gi-lang-bg-scroll-wrap::after,
.gi-mobile-language-bar .gi-lang-bg-scroll-wrap::after {
  right: 1px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 9px solid currentColor;
}

#gi-mobile-language-bar .gi-lang-bg-scroll-wrap.gi-lang-bg-can-left::before,
.gi-mobile-language-bar .gi-lang-bg-scroll-wrap.gi-lang-bg-can-left::before,
#gi-mobile-language-bar .gi-lang-bg-scroll-wrap.gi-lang-bg-can-right::after,
.gi-mobile-language-bar .gi-lang-bg-scroll-wrap.gi-lang-bg-can-right::after {
  opacity: 0.82;
  visibility: visible;
}

#gi-mobile-language-bar .gi-lang-bg-scroll-wrap.gi-lang-bg-can-left > .gi-mobile-language-options,
.gi-mobile-language-bar .gi-lang-bg-scroll-wrap.gi-lang-bg-can-left > .gi-mobile-language-options {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
}

#gi-mobile-language-bar .gi-lang-bg-scroll-wrap.gi-lang-bg-can-right > .gi-mobile-language-options,
.gi-mobile-language-bar .gi-lang-bg-scroll-wrap.gi-lang-bg-can-right > .gi-mobile-language-options {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}

#gi-mobile-language-bar .gi-lang-bg-scroll-wrap.gi-lang-bg-can-left.gi-lang-bg-can-right > .gi-mobile-language-options,
.gi-mobile-language-bar .gi-lang-bg-scroll-wrap.gi-lang-bg-can-left.gi-lang-bg-can-right > .gi-mobile-language-options {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

@media (min-width: 992px) {
  #gi-mobile-language-bar .gi-lang-bg-scroll-wrap::before,
  #gi-mobile-language-bar .gi-lang-bg-scroll-wrap::after,
  .gi-mobile-language-bar .gi-lang-bg-scroll-wrap::before,
  .gi-mobile-language-bar .gi-lang-bg-scroll-wrap::after {
    display: none !important;
  }
}