a:focus,
button:focus,
summary:focus,
[role="button"]:focus {
  outline: none;
}

.button-primary,
.button-secondary {
  transition:
    background-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.button-primary svg,
.button-secondary svg {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .button-primary.bg-\[\#ff6a1a\]:hover {
    background-color: #fff !important;
    color: #000 !important;
  }

  .button-primary.bg-white:hover {
    background-color: #ff6a1a !important;
    color: #000 !important;
  }

  .button-primary.bg-black:hover {
    background-color: #fff !important;
    color: #000 !important;
  }

  .button-secondary:hover {
    border-color: rgb(255 255 255 / 85%);
    background-color: rgb(255 255 255 / 12%);
  }

  .button-primary:hover [data-lucide="arrow-up-right"],
  .button-secondary:hover [data-lucide="arrow-up-right"],
  .button-primary:hover .lucide-arrow-up-right,
  .button-secondary:hover .lucide-arrow-up-right {
    transform: translate(3px, -3px) !important;
  }

  .button-primary:hover [data-lucide="arrow-right"],
  .button-secondary:hover [data-lucide="arrow-right"],
  .button-primary:hover .lucide-arrow-right,
  .button-secondary:hover .lucide-arrow-right {
    transform: translateX(3px) !important;
  }

  .button-primary:hover [data-lucide="arrow-down-right"],
  .button-secondary:hover [data-lucide="arrow-down-right"],
  .button-primary:hover .lucide-arrow-down-right,
  .button-secondary:hover .lucide-arrow-down-right {
    transform: translate(3px, 3px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button-primary,
  .button-secondary,
  .button-primary svg,
  .button-secondary svg {
    transition-duration: 0.01ms;
  }
}