@import "./element-ui/common/var";
@import "./element-ui/mixins/mixins";

@include b(back-top) {
  background-color: $--backtop-bg-color;
  position: fixed;
  right: 100px;
  bottom: 150px;
  width: $--backtop-width;
  height: $--backtop-height;
  border-radius: $--backtop-width / 2;
  cursor: pointer;
  transition: .3s;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  z-index: 5;

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

  i {
    color: $--backtop-icon-color;
    display: block;
    line-height: $--backtop-height;
    text-align: center;
    font-size: $--backtop-icon-size;
  }
}

.back-top-fade-enter,
.back-top-fade-leave-active {
  transform: translateY(-30px);
  opacity: 0;
}