:root {
  /* if element has the .invert class, invert the color codes */

  --border-color: #283030;
  --border-background-color: #ffffff;
}

.pkbd {
  contain: layout style;
  margin: 6px;
  color: #000000;
  font-family: Pokemon;
  position: relative;
  background-color: var(--border-background-color);
  border: 2px solid var(--border-color);
  width: fit-content;
  padding: 0.2em 0.4em;
  border-top: 4px solid var(--border-color);
  /* 3. Draw the white dots using the background trick */
  background-image:
   /* Top Left */
    linear-gradient(var(--border-color), var(--border-color)),
    /* Bottom Left */ linear-gradient(var(--border-color), var(--border-color)),
    /* Bottom Right */ linear-gradient(var(--border-color), var(--border-color));

  /* Set the size of your dots */
  background-size: 2px 2px;
  background-repeat: no-repeat;

  /* Pin them to the extreme corners of this new stretched box */
  background-position:
    0px 0px,
    /* Top Right */ 0px 100%,
    /* Bottom Left */ 100% 100%;
}

/* White middle layer */
.pkbd::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -4px;
  right: -4px;
  bottom: -4px;

  /* Prevent this invisible box from blocking mouse clicks */
  pointer-events: none;

  background-image:
    linear-gradient(
      to right,
      var(--border-background-color),
      var(--border-background-color)
    ),
    linear-gradient(
      to right,
      var(--border-background-color),
      var(--border-background-color)
    ),
    linear-gradient(
      to bottom,
      var(--border-background-color),
      var(--border-background-color)
    ),
    linear-gradient(
      to bottom,
      var(--border-background-color),
      var(--border-background-color)
    ),
    linear-gradient(
      var(--border-background-color),
      var(--border-background-color)
    ),
    linear-gradient(
      var(--border-background-color),
      var(--border-background-color)
    ),
    linear-gradient(
      var(--border-background-color),
      var(--border-background-color)
    ),
    linear-gradient(
      var(--border-background-color),
      var(--border-background-color)
    );

  /* Pin them to the extreme corners of this new stretched box */
  background-position:
    /* Top border */
    0px 2px,
    /* bottom border */ 0px 100%,
    /* left border */ 0px 2px,
    /* right border */ 100% 2px,
    2px 4px,
    calc(100% - 2px) 4px,
    2px calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px);

  background-size:
    100% 2px,
    100% 2px,
    2px 100%,
    2px 100%,
    2px 2px,
    2px 2px,
    2px 2px,
    2px 2px;

  background-repeat: no-repeat;
  /* Top border 0 100%, */
}

/* Outer gray layer */
.pkbd::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -6px;
  right: -6px;
  bottom: -8px;
  z-index: 11;

  /* Prevent this invisible box from blocking mouse clicks */
  pointer-events: none;

  /* Replace border with backgrounds so corner dots appear on same layer */
  background-image:
    linear-gradient(var(--border-color), var(--border-color)),
    linear-gradient(var(--border-color), var(--border-color)),
    linear-gradient(var(--border-color), var(--border-color)),
    linear-gradient(var(--border-color), var(--border-color)),
    linear-gradient(var(--border-color), var(--border-color)),
    linear-gradient(var(--border-color), var(--border-color)),
    linear-gradient(to right, var(--border-color), var(--border-color)),
    /* Top border */
    linear-gradient(to right, var(--border-color), var(--border-color)),
    /* Bottom border */
    linear-gradient(to bottom, var(--border-color), var(--border-color)),
    /* Left border */
    linear-gradient(to bottom, var(--border-color), var(--border-color)); /* Right border */

  background-size:
    /* Corner dots size */
    2px 2px,
    2px 2px,
    2px 2px,
    2px 2px,
    2px 2px,
    2px 2px,
    /* bottom right end*/ /* TOP BORDER*/ calc(100% - 8px) 2px,
    /* BOTTOM border */ calc(100% - 8px) 4px,
    /* LEFT border  */ 2px calc(100% - 8px),
    /* RIGHT border */ 2px calc(100% - 8px);

  background-position:
    /* Corner dots positions */
    2px 2px,
    /* Top-left */ calc(100% - 2px) 2px,
    /* Top-right */ 2px calc(100% - 4px),
    /* Top-right */ 2px calc(100% - 2px),
    /* Bottom-left */ calc(100% - 2px) calc(100% - 4px),
    /* Bottom-left */ calc(100% - 2px) calc(100% - 2px),
    /* bottom right end*/ /* Border positions */ 4px 0,
    /* Top border */ 4px 100%,
    /* Bottom border */ 0 4px,
    /* Left border */ 100% 4px; /* Right border */

  background-repeat: no-repeat;
  /*#####*/
}
.pkbd-clickable {
  cursor: pointer;
  &:hover {
    transform: translate(2px, -2px);
    box-shadow: 6px 8px 0 var(--border-color);
  }
    &:focus-visible {
    outline: 3px solid #4a90d9;
    outline-offset: 3px;
  }
}