.to-top {
  gap: var(--space-2);
  border-radius: var(--radius-pill);
}

.to-top__icon {
  display: inline-flex;
}

.to-top__icon svg {
  inline-size: var(--icon-lg);
  block-size: var(--icon-lg);
}

@media (min-width: 769px) {
  .to-top {
    position: fixed;
    inset-block-end: calc(var(--space-gutter) + var(--to-top-lift));
    inset-inline-end: var(--space-gutter);
    z-index: var(--z-dropdown);
    border-color: var(--color-topbar);
    background: var(--color-topbar);
    box-shadow: var(--shadow-md);
    color: var(--color-topbar-text);
  }

  .to-top[data-covered] {
    visibility: hidden;
  }
}

@media (min-width: 769px) and (hover: hover) {
  .to-top.btn:hover {
    border-color: var(--color-topbar-surface);
    background: var(--color-topbar-surface);
    color: var(--color-topbar-text);
  }
}

@media (max-width: 768px) {
  .to-top {
    inline-size: clamp(var(--control-h), 8vw, var(--control-h-touch));
    block-size: clamp(var(--control-h), 8vw, var(--control-h-touch));
    min-block-size: 0;
    padding: 0;
    border-color: var(--color-topbar-border);
    background: var(--color-topbar-surface);
    color: var(--color-topbar-text);
  }

  .to-top__label {
    display: none;
  }
}