@import './../theme/vars.scss';

$backtopPrefixCls: #{$vender-prefix}-totop;
$totop-size: 42px;
$totop-bottom: 60px;
$totop-right: 24px;

.#{$backtopPrefixCls} {
  position: fixed;
  right: $totop-right;
  bottom: $totop-bottom;
  z-index: $zindex-totop;
  width: $totop-size;
  height: $totop-size;
  cursor: pointer;

  &-content {
    width: $totop-size;
    height: $totop-size;
    line-height: $totop-size;
    color: $totop-color;
    text-align: center;
    background-color: $totop-bg;
    border-radius: 24px;
    transition: all 0.3s $ease-in-out;

    &:hover {
      background-color: $totop-hover-bg;
      transition: all 0.3s $ease-in-out;
    }
  }

  &-icon {
    margin-top: 10px;
    font-size: 20px;
  }
}