.nb-pixels-button {
    z-index: 1;

    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--padding-left);
    padding-right: var(--padding-right);

    -webkit-user-select: none;
    user-select: none;
    place-content: center;

    display: flex;
    width: fit-content;
    position: relative;
    cursor: pointer;
}
.nb-pixels-button__container {
    z-index: 1;
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    position: relative;
    overflow: clip;
}
.nb-pixels-button__background {
    grid-template-columns: repeat(var(--pixels-cells), 1fr);
    display: grid;
    overflow: clip;
    z-index: -1;
    place-self: center;
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    padding-right: 0;
    position: absolute;
}
.nb-pixels-button .nb-pixels-button__pixel {
    opacity: 0;
}
.nb-pixels-button__pixel {
    width: 100%;
    padding-bottom: 0;
    padding-right: 0;
}
.nb-pixels-button::after {
    content: "";
    display: block;
    position: absolute;
}
.nb-pixels-button .nb-pixels-button__pixel {
	opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(1),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(1) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(14),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(14) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.083) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(6),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(6) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.167) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(7),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(7) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.25) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(16),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(16) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.333) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(8),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(8) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.417) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(11),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(11) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.5) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(17),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(17) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.583) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(13),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(13) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.667) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(4),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(4) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(15),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(15) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.083) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(24),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(24) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.167) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(5),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(5) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.25) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(20),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(20) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.333) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(10),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(10) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.417) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(26),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(26) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.5) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(19),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(19) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.583) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(22),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(22) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.667) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(21),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(21) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(12),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(12) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.083) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(3),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(3) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.167) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(23),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(23) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.25) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(2),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(2) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.333) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(25),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(25) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.417) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(18),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(18) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.5) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(9),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(9) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.583) var(--pixels-ease) normal forwards;
  }

  .nb-pixels-button:hover .nb-pixels-button__pixel:nth-child(27),
  .nb-pixels-button:focus-visible .nb-pixels-button__pixel:nth-child(27) {
    animation: pixel-bonanza-background var(--pixels-duration) calc(var(--pixels-duration) * 0.667) var(--pixels-ease) normal forwards;
  }
}
@keyframes pixel-bonanza-background {
	0% {
        opacity: 0;
	}
	40% {
        opacity: 1;
	}
	100% {
		opacity: 0;
	}
}