$backtop-prefix-cls-top: "#{$css-prefix}back-top";
$backtop-prefix-cls-bottom: "#{$css-prefix}back-bottom";

@mixin inner() {
  background-color: $backtop-inner-background-color;
  border-radius: $backtop-inner-border-radius;
  box-shadow: $backtop-inner-box-shadow;
  transition: all $transition-time $ease-in-out;
  padding: $backtop-inner-padding;
  font-size: $backtop-inner-font-size;
  color: $backtop-inner-color;

  &:hover {
    background-color: $backtop-inner-hover-background-color;
  }
}

.#{$backtop-prefix-cls-top},
.#{$backtop-prefix-cls-bottom} {
  z-index: $zindex-back-top;
  position: fixed;
  cursor: pointer;
  display: none;
}

.#{$backtop-prefix-cls-top} {
  &.#{$backtop-prefix-cls-top}-show {
    display: block;
  }

  &-inner {
    @include inner();

    i {
      color: $backtop-top-inner-i-color;
      font-size: $backtop-top-inner-i-font-size;
      padding: $backtop-top-inner-i-padding;
    }
  }
}
.#{$backtop-prefix-cls-bottom} {
  display: block;
  &.#{$backtop-prefix-cls-bottom}-hidden {
    display: none;
  }

  &-inner {
    @include inner();

    i {
      color: $backtop-bottom-inner-i-color;
      font-size: $backtop-bottom-inner-i-font-size;
      padding: $backtop-bottom-inner-i-padding;
    }
  }
}