.discount-notification {
    --heading-color: 255, 255, 255;
    --text-color: 255, 255, 255;
    --discount-notification-background: rgb(var(--success-color));
    transform: translateY(var(--discount-notification-offset, 0px));
    color: rgb(var(--text-color));
    visibility: visible;
    width: 100%;
    transition: visibility 0.25s ease-in-out, transform 0.25s ease-in-out;
    display: block;
    position: absolute;
    top: 100%;
    overflow: hidden;
    background: rgb(var(--success-color));
    z-index: 9999;
  }
  
  .discount-notification--error {
    --discount-notification-background: rgb(var(--error-color));
  }
  
  .discount-notification--drawer {
    --discount-notification-offset: 0;
    top: var(--header-height-without-bottom-nav);
    z-index: 1;
  }
  
  .discount-notification--fixed {
    position: fixed;
    top: 0;
  }
  
  .discount-notification[hidden] {
    visibility: hidden;
  }
  
  .discount-notification__overflow {
    background: var(--discount-notification-background);
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
    transform: translateY(0);
  }
  
  .discount-notification[hidden] .discount-notification__overflow {
    opacity: 0;
    transform: translateY(-100%);
  }
  
  .discount-notification__wrapper {
    justify-content: center;
    align-items: flex-start;
    padding-block-start: 14px;
    padding-block-end: 14px;
    display: flex;
    position: relative;
  }
  
  .discount-notification .icon--discount-notification {
    position: relative;
    top: 2px;
  }
  
  .discount-notification__text-wrapper {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-inline-start: 12px;
    display: flex;
  }
  
  .discount-notification__heading {
    margin-inline-end: 12px;
    font-size: 14px;
  }
  
  .discount-notification__close {
    margin-block-start: -1px;
    position: absolute;
  }
  
  .discount-notification__close:not(
      :lang(ae),
      :lang(ar),
      :lang(arc),
      :lang(bcc),
      :lang(bqi),
      :lang(ckb),
      :lang(dv),
      :lang(fa),
      :lang(glk),
      :lang(he),
      :lang(ku),
      :lang(mzn),
      :lang(nqo),
      :lang(pnb),
      :lang(ps),
      :lang(sd),
      :lang(ug),
      :lang(ur),
      :lang(yi)
    ) {
    right: 0;
  }
  
  .discount-notification__close:is(
      :lang(ae),
      :lang(ar),
      :lang(arc),
      :lang(bcc),
      :lang(bqi),
      :lang(ckb),
      :lang(dv),
      :lang(fa),
      :lang(glk),
      :lang(he),
      :lang(ku),
      :lang(mzn),
      :lang(nqo),
      :lang(pnb),
      :lang(ps),
      :lang(sd),
      :lang(ug),
      :lang(ur),
      :lang(yi)
    ) {
    left: 0;
  }
  
  .discount-notification--drawer .discount-notification__text-wrapper {
    flex-grow: 1;
    justify-content: space-between;
  }
  
  @media screen and (max-width: 740px) {
    .discount-notification__text-wrapper {
      flex-grow: 1;
      justify-content: space-between;
    }
  }
  
  @media screen and (max-width: 999px) {
    .discount-notification {
      transform: none !important;
    }
  }
  
  @media screen and (min-width: 741px) {
    .discount-notification__wrapper {
      padding-block-start: 19px;
      padding-block-end: 19px;
    }
  
    .discount-notification .icon--discount-notification {
      top: 4px;
    }
  
    .discount-notification__heading {
      margin-inline-end: 16px;
      font-size: 16px;
    }
  
    .discount-notification__close svg {
      width: 15px;
      height: 15px;
    }
  }