.back-to-top {
  display: none;
  position: fixed;
  padding-right: 0;
  padding-left: 0;
  z-index: $back-to-top;
  background-color: $blue-transparent20;
  border: 0;
  width: 40px;
  height: 40px;
  line-height: 2rem;
  bottom: 20px !important;
  right: 16px !important;

  &--with-chat {
    bottom: 88px !important;
  }

  &:hover {
    background-color: $blue;
  }

  .icon {
    color: $white;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    svg {
      max-width: 11px;
      height: auto;
    }
  }

  body:has(.summary__aside) & {
    bottom: 193px !important;

    &.single-button {
      bottom: 141px !important;
    }
  }

  body.summary-hidden & {
    bottom: 16px !important;
    right: 16px !important;
  }
}

@include media-breakpoint-up(sm) {
  .back-to-top {
    body:has(.summary__aside) & {
      bottom: 198px !important;

      &.single-button {
        bottom: 146px !important;
      }
    }

    // Required to resolve a specificity tie. By coming last, this 'hidden'
    // state correctly overrides the ':has' state above.
    body.summary-hidden & {
      bottom: 16px !important;
      right: 16px !important;
    }
  }
}

@include media-breakpoint-up(lg) {
  .back-to-top {
    right: 48px !important;
    bottom: 24px !important;

    &--with-chat {
      bottom: 120px !important;
    }

    body:has(.summary__aside):not(.summary-hidden) & {
      &,
      &.single-button {
        right: 48px !important;
        bottom: 24px !important;
      }
    }

    body.summary-hidden & {
      right: 48px !important;
      bottom: 24px !important;
    }
  }
}