@import "https://unpkg.com/open-props";

:root {
  font-family: var(--font-sans);
}

.container {
  width: 60vw;
  margin: 2em auto;
}

h1 {
  font-size: var(--font-size-8);
}

[role="button"] {
  font-size: var(--font-size-4);
  display: inline-block;
  position: relative;
  padding-inline: 0.7em;
  padding-block: 0.4em;
  border: 1px solid hsl(213deg 71% 49%);
  border-radius: var(--radius-4);
  box-shadow: 0 1px 2px hsl(216deg 27% 55%);
  color: #fff;
  text-shadow: 0 -1px 1px hsl(216deg 27% 25%);
  background-color: hsl(216deg 82% 51%);
  background-image: linear-gradient(
    to bottom,
    hsl(216deg 82% 53%),
    hsl(216deg 82% 47%)
  );
}

[role="button"]:hover {
  border-color: hsl(213deg 71% 29%);
  background-color: hsl(216deg 82% 31%);
  background-image: linear-gradient(
    to bottom,
    hsl(216deg 82% 33%),
    hsl(216deg 82% 27%)
  );
  cursor: default;
}

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

[role="button"]:focus::before {
  position: absolute;
  z-index: -1;

  /* button border width - outline width - offset */
  top: calc(-1px - 3px - 3px);
  right: calc(-1px - 3px - 3px);
  bottom: calc(-1px - 3px - 3px);
  left: calc(-1px - 3px - 3px);
  border: 3px solid hsl(213deg 71% 49%);

  /* button border radius + outline width + offset */
  border-radius: calc(5px + 3px + 3px);
  content: "";
}

[role="button"]:active {
  border-color: hsl(213deg 71% 49%);
  background-color: hsl(216deg 82% 31%);
  background-image: linear-gradient(
    to bottom,
    hsl(216deg 82% 53%),
    hsl(216deg 82% 47%)
  );
  box-shadow: inset 0 3px 5px 1px hsl(216deg 82% 30%);
}

const button = document.getElementById("action");

function printWindow() {
  window.print();
}

function handlePointerDown(event) {
  console.log("Pointer Down Event");
  printWindow();
}

function handleKeyDown(event) {
  if (event.key === "Space" || event.key === " " || event.key === "Enter") {
    console.log("Key pressed event");
    printWindow();
  }
}

button.addEventListener("pointerdown", handlePointerDown);
button.addEventListener("keydown", handleKeyDown);