@use '../../theme/styles' as theme;

.wr-back-top {
  position: fixed;
  // Safe-area: lift the floating button clear of the home indicator / rounded
  // corner on mobile. env() is 0 without insets, so desktop stays 1.5rem.
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  right: calc(1.5rem + env(safe-area-inset-right));
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.5rem);
  transition:
    opacity var(--wr-duration-base) var(--wr-ease-out),
    transform var(--wr-duration-base) var(--wr-ease-out);

  &--visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  &__button {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--wr-color-primary);
    color: var(--wr-color-primary-contrast, var(--wr-color-white));
    cursor: pointer;
    box-shadow: var(--wr-shadow-float);
    transition:
      background var(--wr-transition-base),
      transform var(--wr-transition-base);

    &:hover {
      background: var(--wr-color-primary-dark, var(--wr-color-primary));
      transform: translateY(-2px);
    }
  }
}