:root {
  --button-background: var(--color-surface-tertiary);
  --button-background-hover: var(--color-surface-secondary);
  --button-color-hover: var(--color-text-secondary);
  --button-icon-hover-filter: grayscale(1) brightness(5);
  --button-color: var(--color-text-primary);
}

:root {
  --basic-button-background: var(--color-surface-neutral);
  --basic-button-color: var(--color-text-primary);
}

.block__sdc-jump-to {
  position: fixed;
  top: calc(var(--spacing-sm) * 2);
  left: calc(var(--header-width) + (100vw - var(--header-width)) / 2);
  transform: translateX(-50%);
  background: var(--color-surface-blur);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  border-radius: 50px;
  transition: transform 0.5s;
}
.block__sdc-jump-to.scrolled {
  transform: translateX(-50%) translateY(calc(0.001px - var(--spacing-sm)));
}
.block__sdc-jump-to .wrapper {
  display: flex;
  gap: var(--spacing-smd);
}
.block__sdc-jump-to .wrapper a {
  font: var(--type-b2);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 50px;
  transition: background 0.5s;
}
.block__sdc-jump-to .wrapper a:hover {
  background: var(--color-surface-tertiary);
}
@media screen and (max-width: 1100px) {
  .block__sdc-jump-to {
    top: auto;
    bottom: calc(var(--spacing-sm) * 2);
  }
  .block__sdc-jump-to.scrolled {
    transform: translateX(-50%) translateY(calc(0.001px + var(--spacing-sm)));
  }
}
@media screen and (max-width: 768px) {
  .block__sdc-jump-to {
    display: none;
  }
  .block__sdc-jump-to .wrapper {
    gap: var(--spacing-xs);
  }
}