/* Keypad Component Styles */

:root {
  --travel: 20;
}

.keypad {
  position: relative;
  aspect-ratio: 400 / 310;
  display: flex;
  place-items: center;
  width: clamp(350px, 43.75vw, 500px);
  -webkit-tap-highlight-color: #0000;
  transition-property: translate, transform;
  transition-duration: 0.26s;
  transition-timing-function: ease-out;
  transform-style: preserve-3d;
  opacity: 1;
}

.key {
  transform-style: preserve-3d;
  border: 0;
  background: #0000;
  padding: 0;
  cursor: pointer;
  outline: none;
}

.key[data-pressed="true"],
.key:active {
  .key__content {
    translate: 0 calc(var(--travel) * 1%);
  }
}

.key__content {
  width: 100%;
  display: inline-block;
  height: 100%;
  transition: translate 0.12s ease-out;
  container-type: inline-size;
}

.keypad__single .key__text {
  width: 60%;
  height: 62%;
  translate: 35% -16%;
}

.key__text {
  height: 46%;
  width: 86%;
  position: absolute;
  font-size: 12cqi;
  z-index: 21;
  top: 5%;
  left: 0;
  mix-blend-mode: normal;
  color: hsl(0 0% 94%);
  translate: 8% 10%;
  transform: rotateX(36deg) rotateY(45deg) rotateX(-90deg) rotate(0deg);
  text-align: left;
  padding: 1ch;
}

.keypad__single {
  position: absolute;
  width: 40.5%;
  left: 54%;
  bottom: 36%;
  height: 46%;
  clip-path: polygon(
    0 0,
    54% 0,
    89% 24%,
    100% 70%,
    54% 100%,
    46% 100%,
    0 69%,
    12% 23%,
    47% 0%
  );
  mask: url(/assets/images/applogical/keypad-single.webp) 50% 50% / 100% 100%;
}

.keypad__single.keypad__single--left {
  left: 29.3%;
  bottom: 54.2%;
}

.keypad__single .key__text {
  font-size: 18cqi;
}

.keypad__single img {
  top: 0;
  opacity: 1;
  width: 96%;
  position: absolute;
  left: 50%;
  translate: -50% 1%;
}

.key__mask {
  width: 100%;
  height: 100%;
  display: inline-block;
}

.keypad__double {
  position: absolute;
  background: hsl(10 100% 50% / 0);
  width: 64%;
  height: 65%;
  left: 6%;
  bottom: 17.85%;
  clip-path: polygon(
    34% 0,
    93% 44%,
    101% 78%,
    71% 100%,
    66% 100%,
    0 52%,
    0 44%,
    7% 17%,
    30% 0
  );
  mask: url(/assets/images/applogical/keypad-double.webp) 50% 50% / 100% 100%;
}

.keypad__double img {
  top: 0;
  opacity: 1;
  width: 99%;
  position: absolute;
  left: 50%;
  translate: -50% 1%;
}

.key img {
  filter: hue-rotate(calc(var(--hue, 0) * 1deg)) saturate(var(--saturate, 1))
    brightness(var(--brightness, 1));
}

.keypad__base {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.keypad img {
  transition: translate 0.12s ease-out;
  width: 100%;
}

/* Exploded state animations */
[data-exploded="true"] .keypad {
  translate: calc(-50% - 1rem) 0;
  transition-delay: 0s, 0.26s;
}

@media (max-width: 768px) {
  [data-exploded="true"] .keypad {
    translate: 0 calc(50% + 1rem);
  }
}

[data-exploded="true"] .keypad__base {
  --depth: 2.5;
}

[data-exploded="true"] .keypad__single {
  --depth: -1;
}

[data-exploded="true"] .keypad__single--left {
  --depth: -2;
}

[data-exploded="true"] .keypad__double {
  --depth: 0;
}

[data-exploded="true"] .keypad__base,
[data-exploded="true"] .key {
  translate: 0 calc(var(--depth) * 10vh);
  transition-delay: 0.52s;
}

.keypad {
  transition-delay: 0.26s, 0.52s;
}

.key,
.keypad__base {
  transition-property: translate;
  transition-duration: 0.26s;
  transition-timing-function: ease-out;
}

[data-exploded="true"] .key::after {
  opacity: 1;
  transition-delay: 0.52s;
}

.key::after {
  z-index: -1;
  content: "";
  position: absolute;
  opacity: 0;
  inset: 0;
  transition-property: opacity;
  transition-duration: 0.26s;
  transition-timing-function: ease-out;
  background: repeating-linear-gradient(
    -45deg,
    #0000 0 5px,
    hsl(220 100% 70%) 5px 6px
  );
}

/* Default button styles */
#one {
  --travel: 26;
  --hue: 30;
  --saturate: 1.4;
  --brightness: 1.2;
}

#two {
  --travel: 26;
  --hue: 120;
  --saturate: 1.4;
  --brightness: 1.4;
}

#three {
  --travel: 18;
  --hue: 0;
  --saturate: 0;
  --brightness: 0.4;
}

#four {
  --travel: 26;
  --hue: 200;
  --saturate: 1.2;
  --brightness: 1.3;
}

/* Specific adjustment for Games button text */
#two .key__text {
  translate: 25% -16% !important;
  padding-left: 0.5ch !important;
  width: 65% !important;
}