.vxe-backtop {
  display: inline-flex;
  position: absolute;
  opacity: 0;
  right: 1.6em;
  bottom: 1.6em;
  color: var(--vxe-ui-font-color);
  font-family: var(--vxe-ui-font-family);
  background-color: var(--vxe-ui-layout-background-color);
  border-radius: var(--vxe-ui-base-border-radius);
  transition: all 0.3s;
  cursor: pointer;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
  z-index: 9;
}
.vxe-backtop.is--visible {
  opacity: 1;
}
.vxe-backtop.is--circle {
  border-radius: 50%;
}
.vxe-backtop.is--circle .vxe-backtop--inner {
  border-radius: 50%;
}
.vxe-backtop.is--fixed {
  position: fixed;
}
.vxe-backtop.is--absolute {
  position: absolute;
}

.vxe-backtop--inner {
  min-width: 3em;
  min-height: 3em;
  padding: 0.4em;
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--vxe-ui-base-border-radius);
}

.vxe-backtop:hover {
  color: var(--vxe-ui-font-primary-color);
}
.vxe-backtop:hover .vxe-backtop--inner {
  background-color: rgba(0, 0, 0, 0.1);
}
.vxe-backtop.theme--primary {
  color: #fff;
  background-color: var(--vxe-ui-font-primary-color);
}
.vxe-backtop.theme--success {
  color: #fff;
  background-color: var(--vxe-ui-status-success-color);
}
.vxe-backtop.theme--info {
  color: #fff;
  background-color: var(--vxe-ui-status-info-color);
}
.vxe-backtop.theme--warning {
  color: #fff;
  background-color: var(--vxe-ui-status-warning-color);
}
.vxe-backtop.theme--danger {
  color: #fff;
  background-color: var(--vxe-ui-status-danger-color);
}
.vxe-backtop.theme--error {
  color: #fff;
  background-color: var(--vxe-ui-status-error-color);
}

.vxe-backtop--icon {
  font-size: 1.4em;
}

.vxe-backtop {
  font-size: var(--vxe-ui-font-size-default);
}
.vxe-backtop.size--medium {
  font-size: var(--vxe-ui-font-size-medium);
}
.vxe-backtop.size--small {
  font-size: var(--vxe-ui-font-size-small);
}
.vxe-backtop.size--mini {
  font-size: var(--vxe-ui-font-size-mini);
}