How to use @pacote/get-style - 5 common examples

activate: onActivate => {
      button.classList.add(CLASS_CHANGING)
      button.setAttribute('aria-expanded', 'true')
      button.classList.add(CLASS_ACTIVE)

      button.insertAdjacentElement('afterend', popover)

      popover.style.maxWidth = `${document.body.clientWidth}px`
      const contentMaxHeight = getStyle(content, 'maxHeight')
      maxHeight = Math.round(pixels(contentMaxHeight, content))

      if (typeof onActivate === 'function') {
        onActivate(popover, button)
      }
    },

export function getAvailableRoom(element: HTMLElement): Room {
  const marginLeft = parseFloat(getStyle(element, 'marginLeft'))
  const width = element.offsetWidth - marginLeft
  const height = element.offsetHeight
  const rect = element.getBoundingClientRect()
  const left = rect.left + width / 2
  const top = rect.top + height / 2

  return {
    top,
    bottom: window.innerHeight - top,
    leftRelative: left / window.innerWidth
  }
}

resize: () => {
      if (popover.parentElement) {
        const room = getAvailableRoom(button)
        const maxWidth = content.offsetWidth
        const buttonMarginLeft = parseInt(getStyle(button, 'marginLeft'), 10)
        const left =
          -room.leftRelative * maxWidth +
          buttonMarginLeft +
          button.offsetWidth / 2

        popover.style.left = left + 'px'
        wrapper.style.maxWidth = maxWidth + 'px'

        repositionTooltip(popover, room.leftRelative)
      }
    },

function isPopoverOnTop(footnote: HTMLElement, room: Room): boolean {
  const marginSize = parseInt(getStyle(footnote, 'marginTop'), 10)
  const totalHeight = 2 * marginSize + footnote.offsetHeight

  return room.bottom < totalHeight && room.bottom < room.top
}

export function getAvailableHeight(footnote: HTMLElement, room: Room): number {
  const isTop = isPopoverOnTop(footnote, room)
  const marginSize = parseInt(getStyle(footnote, 'marginTop'), 10)
  return room[isTop ? TOP : BOTTOM] - marginSize - 15
}