.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;
}
.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;
	}
}