.c-totop {
  all           : unset;
  display       : none;
  position      : fixed;
  right         : var(--margin-xs);
  bottom        : var(--to-top-position);
  z-index       : 10;
  cursor        : pointer;
  pointer-events: initial;
  opacity       : 0.5;
}

.c-totop.is-visible {
  display: initial;
}

.c-totop-icon {
  stroke: var(--main-fg);
  fill  : var(--main-bg);
}

@media screen and (min-width: 48rem) {
  .c-totop {
    right : unset;
    bottom: var(--margin-xxl);
  }

  .c-totop-c {
    text-align  : right;
    margin-right: var(--margin-xxl);
  }
}

@media (prefers-reduced-motion: reduce) {

  .c-totop,
  .c-totop.is-visible {
    transition: none;
  }
}