.scrollbar-wrapper {
  @media (width < 1024px) {
    display: none;
  }

  &::after {
    content: '';
    width: 100%;
    height: 7px;
    margin-top: -5px;
    position: absolute;
  }
}

.scrollBtn__container {
  background-color: var(--primary-main);
  padding-top: 37px;
  padding-bottom: 44px;

  .scroll-btn {
    text-align: center;
    cursor: pointer;
  }

  .scroll-text {
    background: var(--gradient-7, var(--gradient-3-arena));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .scroll-icon {
    cursor: pointer;
    width: 16px;
    height: 22.3px;
    margin-bottom: 14px;
    margin-left: auto;
    margin-right: auto;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="36" viewBox="0 0 20 36" fill="none"><rect x="1" y="1" width="18" height="28" rx="8" stroke="%23fff" stroke-width="2"></rect><circle cx="10" cy="20" r="2" fill="%23fff"><animate attributeName="cy" values="20;20;20;12;10;10;10;18;20;" dur="2s" repeatCount="indefinite"></animate></circle></svg>');
    background-size: contain;
    background-repeat: no-repeat;
  }

  @media(width >=1024px) {
    padding-top: 80px;
    padding-bottom: 64px;

    .scroll-icon {
      height: 33px;
      width: 23px;
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="36" viewBox="0 0 20 36" fill="none"><rect x="1" y="1" width="18" height="28" rx="8" stroke="%23fff" stroke-width="2"></rect><circle cx="10" cy="20" r="2" fill="%23fff"><animate attributeName="cy" values="20;20;20;12;10;10;10;18;20;" dur="2s" repeatCount="indefinite"></animate></circle></svg>');
      margin-bottom: 16px;
    }
  }

  @media(width >=1200px) {
    padding-bottom: 0px;
  }
}

body.arena {
  .scrollBtn__container {
    background: var(--dark-blue);

    @media (width >=1024px) {
      padding-bottom: 66px;
    }

    @media (width >=1200px) {
      padding-bottom: 0;
    }
  }

  .scroll-text {
    font-size: var(--heading-s-arena);
    line-height: var(--lh-20px-arena);
    min-height: 24px;
  }
}

body.hypercommercial{
  .scrollBtn__container{
    background: var(--com-text-color-dark-body);
  }
}