%scroll-button {
  @extend %btn-common;
  min-width: 1rem;
  min-height: 1rem;
  padding: .5em;
  margin-left: -$space-1;
  font-size: 1.5em;
  line-height: 0;
  color: $scroll-button-color;
  background-color: rgba($scroll-button-bg-color, .5);
  @include border-radius(50%);
  outline: none;
  box-sizing: content-box;
  @include transition(background-color $transition-duration $transition-timing-function);

  &:hover { background-color: $scroll-button-bg-color; }
}

.scroll-button-container {
  position: fixed;
  right: 4%;
  bottom: 4%;
  z-index: $z-index-scroll-button;

  .scroll-button-top,
  .scroll-button-bottom {
    @extend %scroll-button;
  }
}