.button {
  display: inline-block;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  border-radius: 10px;
  padding: 0;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #19192c;
  border-radius: inherit;
}

.buttonInner {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 1px solid #19192c;
  border-radius: inherit;
  padding: 0 1rem;
  height: 2rem;
  display: flex;
  font-size: 0.875rem;
  line-height: 1rem;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: #19192c;
  transition: 0.3s ease-out;
  white-space: nowrap;
  background: #b9a0ff;
  font-family: var(--bentoml-font-family);
}

.buttonIcon {
  height: 0.5rem;
  transition: 0.3s ease-out;
}

.button:hover .buttonInner {
  transform: translate3d(3px, -3px, 0);
}

.button:hover .buttonIcon {
  transform: rotate(-45deg);
}

.buttonBlue .buttonInner {
  border-color: #003f30;
  color: #003f30;
  background: #90a7ff;
}

.buttonLightBlue .buttonInner {
  border-color: #003f30;
  color: #003f30;
  background: #deecec;
}

.buttonGreen .buttonInner {
  border-color: #003f30;
  color: #003f30;
  background: #8dff6d;
}

.buttonLightGreen .buttonInner {
  border-color: #003f30;
  color: #003f30;
  background: #c3ffb2;
}

.buttonPink .buttonInner {
  border-color: #003f30;
  color: #003f30;
  background: #f0d4d2;
}

.buttonLightPurple .buttonInner {
  border-color: #003f30;
  color: #003f30;
  background: #b9a0ff;
}

.buttonYellow .buttonInner {
  border-color: #003f30;
  color: #003f30;
  background: #f9f0d2;
}
