.heading-actions {
  align-items: center
}

.share-actions {
  display: flex;
  align-items: center;
  gap: 12px
}

.share-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  transition: transform .15s,opacity .15s
}

.share-icon:hover {
  background: transparent;
  transform: translateY(-2px);
  opacity: .72
}

.share-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}

.share-icon-x {
  padding: 7px;
  background: #000;
  border-radius: 3px
}

.share-icon-x:hover {
  background: #000
}

.refresh-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none
}

.refresh-button[hidden] {
  display: none
}

.refresh-button:hover {
  background: transparent;
  box-shadow: none
}

.refresh-button:disabled {
  cursor: default
}

.refresh-button img {
  width: 100%;
  height: 100%;
  transition: transform .15s
}

.refresh-button:hover img {
  transform: rotate(22deg)
}

.refresh-button::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 3;
  top: calc(100% + 8px);
  right: 0;
  padding: 7px 9px;
  border-radius: 6px;
  background: #263d68;
  color: #fff;
  font-size: .75rem;
  font-weight: 750;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity .15s,transform .15s
}

.refresh-button::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: calc(100% + 3px);
  right: 10px;
  border: 5px solid transparent;
  border-bottom-color: #263d68;
  opacity: 0;
  transition: opacity .15s
}

.refresh-button:hover::after,.refresh-button:hover::before,.refresh-button:focus-visible::after,.refresh-button:focus-visible::before {
  opacity: 1;
  transform: translateY(0)
}

@media(max-width:720px) {
  .heading-actions {
    justify-content: space-between
  }

  .share-actions {
    gap: 9px
  }

  .share-icon {
    width: 27px;
    height: 27px
  }

  .refresh-button {
    width: 30px;
    height: 30px
  }

}
