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