@import "../styles/vars.less";
@import "../styles/animate.less";

@prefixCls : cuke-back-top;
.@{prefixCls} {
  position: fixed;
  bottom: @back-top-offset-bottom;
  right: @back-top-offset-right;
  z-index: 98;
  transition: transform @default-transition;
  display: flex;
  flex-direction: column;
  transform: scale(0);
  &.@{prefixCls}-open {
    animation: cuke-fade-in @default-transition forwards;
  }
  &.@{prefixCls}-close {
    animation: cuke-fade-out @default-transition forwards;
  }
  &-inner {
    border-radius: 50%;
      &-icon {
        height: @back-top-inner-height;
        width: @back-top-inner-width;
        border-radius: 50%;
        // border:1px solid @border-color;
        box-shadow: @default-shadow;
        transition: all @default-transition;
        color: @font-color;
        font-size: 24px;
        padding: 0;
        background-color: #fff;
        cursor: pointer;
        text-align: center;
        line-height: @back-top-inner-height;
        outline: none;
        -webkit-appearance: none;
        i {
          display: block;
        }
        &:hover {
          border-color: @primary-color;
          background-color: @primary-color;
          color: #fff;
        }
      }
  }
}
