:host {
  position: fixed;
  display: flex;
  z-index: var(--hb-z-index-fixed);
  transition:
    opacity var(--hb-transition-duration) var(--hb-transition-function),
    visibility var(--hb-transition-duration) var(--hb-transition-function);
  cursor: pointer;
}

.hb-backtop__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--hb-border-radius-round);
  background: var(--hb-color-bg-container);
  color: var(--hb-color-text);
  font-size: var(--hb-font-size-xl);
  line-height: 1;
  box-shadow: var(--hb-box-shadow);
  transition:
    background var(--hb-transition-duration) var(--hb-transition-function),
    color var(--hb-transition-duration) var(--hb-transition-function);
}

.hb-backtop__inner:hover {
  background: var(--hb-color-fill-secondary);
  color: var(--hb-color-primary);
}

.hb-backtop__icon { font-size: inherit; }
