/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[5]!./src/components/general/promobar/index.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.promobar {
  width: 100%;
  max-height: 40px;
  overflow: hidden;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1025;
}

@media (max-width: 1280px) {
  .promobar {
    --promobar-height: 40px;
  }
}
.promobar.has_tsns {
  transition: var(--def-transition-300ms);
  will-change: max-height;
}

.promobar.inactive {
  max-height: 0;
}

.promobar.inactive ~ .toolbar {
  top: 0;
}

.promobar.inactive ~ .navbar {
  background-color: var(--color-aqua-haze);
}

.promobar.inactive ~ .navbar .navbar .search__field input {
  background-color: var(--color-white);
}

.promobar.inactive ~ .navbar {
  top: calc(var(--promobar-height) + var(--toolbar-height));
}

.promobar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  background-color: var(--color-amber);
  padding: 0 15px;
  position: relative;
}

.promobar__inner p {
  display: inline-block;
  font-weight: var(--semi-bold);
  font-size: 12px;
  color: var(--color-midnight);
}

.promobar__close {
  color: var(--color-midnight);
  transform: translate(-15px, -50%);
  transition: transform var(--def-transition-300ms);
  position: absolute;
  top: 50%;
  right: 0;
}

.promobar__close:hover {
  transform: translate(-15px, -50%) scale(1.2);
}

.promobar__close * {
  pointer-events: none;
}