/* Pixel Bonanza */
/* https://tiny-mighty-buttons.webflow.io/ */

/* Button Default */
.button-default {
  z-index: 1;
  user-select: none;
  display: inline-block;
  position: relative;
}

.button-default__background {
  z-index: -1;
  /* background-color: var(--color-accent); */
  border-radius: 1.1875rem;
  place-self: center;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  padding-right: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.button-default__background.is-pixel-bonanza {
  border-radius: .25rem;
  grid-template-columns: repeat(9,1fr);
  display: grid;
  overflow: clip;
}

.button-default__background-item {
  /* background-color: var(--color-background); */
  width: 100%;
  padding-bottom: 0;
  padding-right: 0;
}


/* remove background from buttons if you use <button> tag*/
:where(button) {
	background-color: transparent;
  border: 0;
  cursor: pointer;
}

/* make button click area bigger */
.button-default {
	--active-ease: cubic-bezier(0.34, 2.27, 0.64, 1);
  --active-speed: 0.3s;

  transition: transform var(--active-speed) var(--active-ease);	
}

.button-default::after {
	content: "";
  display: block;
  position: absolute;
  inset: -0.25rem;
}

.button-default:active {
	transform: scaleX(0.993) scaleY(0.992);
}
/* */

/* is-pixel-bonanza */
/* inspired by https://nextjs.org/conf */

.button-default.is-pixel-bonanza {
	--ease: cubic-bezier(0.34, 1.64, 0.64, 1);
  --opacity-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --speed-slow: 0.6s;
  --speed: 0.45s;
  --speed-fast: 0.3s;
  --speed-faster: 0.15s;
}

.button-default.is-pixel-bonanza .button-default__background {
	transition: transform var(--speed) var(--ease);
}

.button-default.is-pixel-bonanza .button-default__background-item {
	opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .button-default.is-pixel-bonanza:hover .button-default__background,
  .button-default.is-pixel-bonanza:focus-visible .button-default__background {
    transform: scaleX(1.025) scaleY(1.05);
  }
  
  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(1),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(1) {
    animation: pixel-bonanza-background var(--speed-slow) 0s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(14),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(14) {
    animation: pixel-bonanza-background var(--speed-slow) 0.05s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(6),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(6) {
    animation: pixel-bonanza-background var(--speed-slow) 0.1s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(7),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(7) {
    animation: pixel-bonanza-background var(--speed-slow) 0.15s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(16),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(16) {
    animation: pixel-bonanza-background var(--speed-slow) 0.2s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(8),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(8) {
    animation: pixel-bonanza-background var(--speed-slow) 0.25s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(11),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(11) {
    animation: pixel-bonanza-background var(--speed-slow) 0.3s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(17),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(17) {
    animation: pixel-bonanza-background var(--speed-slow) 0.35s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(13),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(13) {
    animation: pixel-bonanza-background var(--speed-slow) 0.4s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(4),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(4) {
    animation: pixel-bonanza-background var(--speed-slow) 0s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(15),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(15) {
    animation: pixel-bonanza-background var(--speed-slow) 0.05s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(24),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(24) {
    animation: pixel-bonanza-background var(--speed-slow) 0.1s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(5),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(5) {
    animation: pixel-bonanza-background var(--speed-slow) 0.15s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(20),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(20) {
    animation: pixel-bonanza-background var(--speed-slow) 0.2s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(10),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(10) {
    animation: pixel-bonanza-background var(--speed-slow) 0.25s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(26),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(26) {
    animation: pixel-bonanza-background var(--speed-slow) 0.3s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(19),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(19) {
    animation: pixel-bonanza-background var(--speed-slow) 0.35s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(22),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(22) {
    animation: pixel-bonanza-background var(--speed-slow) 0.4s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(21),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(21) {
    animation: pixel-bonanza-background var(--speed-slow) 0s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(12),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(12) {
    animation: pixel-bonanza-background var(--speed-slow) 0.05s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(3),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(3) {
    animation: pixel-bonanza-background var(--speed-slow) 0.1s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(23),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(23) {
    animation: pixel-bonanza-background var(--speed-slow) 0.15s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(2),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(2) {
    animation: pixel-bonanza-background var(--speed-slow) 0.2s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(25),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(25) {
    animation: pixel-bonanza-background var(--speed-slow) 0.25s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(18),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(18) {
    animation: pixel-bonanza-background var(--speed-slow) 0.3s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(9),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(9) {
    animation: pixel-bonanza-background var(--speed-slow) 0.35s var(--opacity-ease) normal forwards;
  }

  .button-default.is-pixel-bonanza:hover .button-default__background-item:nth-child(27),
  .button-default.is-pixel-bonanza:focus-visible .button-default__background-item:nth-child(27) {
    animation: pixel-bonanza-background var(--speed-slow) 0.4s var(--opacity-ease) normal forwards;
  }
}

@keyframes pixel-bonanza-background {
	0% {
    opacity: 0;
	}
	40% {
    opacity: 1;
	}
	100% {
		opacity: 0;
	}
}