.kit-button:focus .kit-spinner-container,
.kit-button:hover .kit-spinner-container {
  --kit-shade-7: var(--kit-shade-4);
}

.kit-button-v-shadow {
  box-shadow: var(--kit-shadow);
}
.kit-button-v-shadow:not(.kit-button-secondary):hover,
.kit-button-v-shadow:not(.kit-button-secondary):focus {
  box-shadow: none;
}
.kit-button:not(.kit-button-custom):hover,
.kit-button:not(.kit-button-custom):focus {
  transform: translateY(-3px);
}
.kit-button:not(.kit-button-v-normal):not(.kit-button-secondary):not(.kit-button-custom):hover,
.kit-button:not(.kit-button-v-normal):not(.kit-button-secondary):not(.kit-button-custom):focus,
.kit-button-v-normal {
  background-color: var(--kit-foreground);
  color: var(--kit-background);
  --kit-border: var(--kit-background);
}
.kit-button-v-normal:hover,
.kit-button-v-normal:focus {
  background-color: var(--kit-background);
  color: var(--kit-foreground);
  --kit-border: var(--kit-foreground);
}
.kit-button-warning {
  --kit-background: var(--kit-warning);
  --kit-foreground: #fff;
  --kit-border: var(--kit-background);
}
.kit-button-alert {
  --kit-background: var(--kit-highlight-pink);
  --kit-foreground: #fff;
  --kit-border: var(--kit-background);
}

.kit-button-voilet {
  --kit-background: var(--kit-violet);
  --kit-foreground: #fff;
  --kit-border: var(--kit-background);
}
.kit-button-error {
  --kit-background: var(--kit-error);
  --kit-foreground: #fff;
  --kit-border: var(--kit-background);
}

.kit-button-secondary {
  --kit-border: var(--kit-shade-2);
}
.kit-button-success {
  --kit-foreground: #fff;
  --kit-background: var(--kit-success);
  --kit-border: var(--kit-background);
}

.kit-ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.kit-ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: -webkit-radial-gradient(
    circle,
    #e3e3e3 10%,
    transparent 10.01%
  );
  background-image: radial-gradient(circle, #e3e3e3 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 1s;
}
.kit-ripple:active:after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}