/* Button base */
.btn .btn__text {
  transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn .btn__circle {
  transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1),
    background-color 0.4s cubic-bezier(0.625, 0.05, 0, 1);
  transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
  background-color: #000000;
}

.btn:hover .btn__circle {
  transform: translate(-50%, -50%) scale(1.2) rotate(0.001deg);
}

/* Dark */
.btn[data-theme="dark"] .btn__circle {
  background-color: #000000;
}

.btn[data-theme="dark"]:hover .btn__text {
  color: #9fccc8;
}

/* Light */
.btn[data-theme="light"] .btn__bg {
  background-color: #efede3;
}

.btn[data-theme="light"] .btn__text {
  color: #9fccc8;
}

.btn[data-theme="light"] .btn__circle {
  background-color: #9fccc8;
}

/* Primary */
.btn[data-theme="primary"] .btn__bg {
  background-color: #d1fd88;
}

.btn[data-theme="primary"] .btn__text {
  color: #efede3;
}

.btn[data-theme="primary"] .btn__circle {
  background-color: #b8ec6f;
}