.floating-buttons {
  position: fixed;
  bottom: var(--op-space-x-large);
  right: var(--op-space-x-large);
  z-index: 1;
  gap: var(--op-space-2x-small);
  background: rgba(227, 227, 227, 0.58);
  display: flex;
  justify-content: space-around;
  padding: var(--op-space-2x-small) var(--op-space-2x-small);
  box-shadow: var(--op-border-all) var(--op-color-neutral-plus-seven);
  border-radius: var(--op-radius-large);

  @media (width < 768px) {
    right: calc(50%);
    transform: translateX(50%);
    bottom: var(--op-space-large);
  }
}

.floating-button {
  --size: 4.5rem;
  box-shadow: var(--op-shadow-large);
  opacity: 0.95;
  border-radius: 24px;

  height: var(--size);
  width: var(--size);
  min-width: var(--size);
  color: var(--op-color-neutral-plus-max);

  &:hover {
    opacity: 1;
  }
}

.floating-button--purple {
  background-image: linear-gradient(to right bottom, #d20000, #cf0057, #a62f8d, #6651a2, #245e96);
}

.floating-button--green {
  background-image: linear-gradient(to right bottom, #00d200, #00cf57, #2fa62f, #51a265, #5e9649);
}