html.cyberpunk {
  --j-color-multiplier: -1;
  --j-color-subtractor: 110%;
  --j-font-family: monospace;
  --j-border-radius: 0px;
  --j-border-color: var(--j-color-primary-200);
  --j-border-color-strong: var(--j-color-primary-400);
  --j-size-sm: 30px;
  --j-size-md: 40px;
  --j-size-lg: 50px;
}

html.cyberpunk j-text[variant^="heading"] {
  display: block;
  position: relative;
  animation-name: glitched;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
  animation-timing-function: ease-out;
  --j-text-color: var(--j-color-primary-500);
}

html.cyberpunk j-button::part(base) {
  cursor: pointer;
  clip-path: polygon(
    -15px 0%,
    calc(100% + 15px) 0%,
    calc(100% + 15px) 100%,
    20px 100%,
    -15px calc(100% - 35px)
  );
}

html.cyberpunk j-button:hover {
  display: inline-block;
  animation-name: glitched;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
  animation-timing-function: ease-out;
}

html.cyberpunk j-menu-item::part(base) {
  margin-top: var(--j-space-100);
  margin-left: var(--j-space-300);
  margin-right: 0;
  clip-path: polygon(90% 0, 0 0, 0 50%, 5% 100%, 0% 100%, 100% 100%, 100% 0%);
}

html.cyberpunk j-tab-item::part(base) {
  clip-path: polygon(87% 0, 0 0, 0 50%, 13% 100%, 88% 100%, 100% 100%, 99% 16%);
}

html.cyberpunk j-input::part(input-wrapper) {
  height: 60px;
  font-size: 16px;
  border: 10px solid var(--j-color-primary-500);
  border-left: 2px solid var(--j-color-primary-500);
  border-right: 2px solid var(--j-color-primary-500);
  border-bottom: 10px solid var(--j-color-primary-500);
  border-color: var(--j-color-primary-200);
  clip-path: polygon(
    0px 5px,
    5px 0px,
    calc(60% - 5px) 0px,
    60% 5px,
    100% 5px,
    100% calc(100% - 5px),
    calc(100% - 5px) calc(100% - 3px),
    calc(80% - 3px) calc(100% - 3px),
    calc(80% - 5px) calc(100% - 0px),
    0px calc(100% - 0px),
    0% calc(100% - 0px)
  );
}

html.cyberpunk j-input::part(input-wrapper):focus-within {
  border-color: var(--j-color-primary-500);
}

html.cyberpunk j-text[variant^="heading"]::after {
  display: block;
  content: "";
  width: 100%;
  bottom: -10px;
  left: 0;
  height: 10px;
  clip-path: polygon(
    0px 0px,
    85px 0px,
    90px 5px,
    100% 5px,
    100% 6px,
    85px 6px,
    80px 10px,
    0px 10px
  );
  background: var(--j-color-primary-500);
}

@keyframes glitched {
  0% {
    transform: skew(-15deg);
    left: -4px;
  }
  10% {
    transform: skew(-15deg);
    left: -4px;
  }
  11% {
    transform: skew(0deg);
    left: 2px;
  }
  50% {
    transform: skew(0deg);
  }
  51% {
    transform: skew(5deg);
  }
  59% {
    transform: skew(5deg);
  }
  60% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(0deg);
  }
}