.btn-versatile {
  --ripple-color: rgba(0, 0, 0, 0.3);
  --ripple-duration: 1.5s;
  --ripple-fuzz: 1px;
  border-color: transparent !important;
  /* Just the ripple goes to the edges */
}
.btn-versatile:focus:not(:disabled):not(.disabled),
.btn-versatile:active:not(:disabled):not(.disabled),
.btn-versatile.click-fx:not(:disabled):not(.disabled) {
  background-image: radial-gradient(circle closest-side at center, var(--ripple-color) 0%, var(--ripple-color) calc(100% - var(--ripple-fuzz, 0px)), transparent 100%), linear-gradient(180deg, var(--ripple-color) 10%, transparent 90%);
  background-size: 0% 0%, 0% 0%;
  background-repeat: no-repeat;
  background-origin: border-box;
  -webkit-animation: button-ripple var(--ripple-duration) ease-in;
          animation: button-ripple var(--ripple-duration) ease-in;
}
.btn-versatile.pre-click-fx {
  -webkit-animation: none !important;
          animation: none !important;
}
@-webkit-keyframes button-ripple {
  0% {
    background-size: 0% 0%, 0% 0%;
    background-position: calc(50% - var(--click-el-w, 0px)/2 + var(--click-offset-x, 0px)) calc(50% - var(--click-el-h, 0px)/2 + var(--click-offset-y, 0px)), 0% 0%;
  }
  33% {
    background-size: calc(2 * var(--click-max-r, 71%)) calc(2 * var(--click-max-r, 200vw)), 0% 0%;
    background-size: calc(2 * var(--click-max-r, 71%)) 100vmax, 0% 0%;
    background-position: calc(50% - var(--click-el-w, 0px)/2 + var(--click-offset-x, 0px)) calc(50% - var(--click-el-h, 0px)/2 + var(--click-offset-y, 0px)), 0% 0%;
  }
  33.1% {
    background-size: 0% 0%, 100% 1000%;
  }
  100% {
    background-size: 0% 0%, 100% 1000%;
    background-position: 0% 0%, 0% 100%;
  }
}
@keyframes button-ripple {
  0% {
    background-size: 0% 0%, 0% 0%;
    background-position: calc(50% - var(--click-el-w, 0px)/2 + var(--click-offset-x, 0px)) calc(50% - var(--click-el-h, 0px)/2 + var(--click-offset-y, 0px)), 0% 0%;
  }
  33% {
    background-size: calc(2 * var(--click-max-r, 71%)) calc(2 * var(--click-max-r, 200vw)), 0% 0%;
    background-size: calc(2 * var(--click-max-r, 71%)) 100vmax, 0% 0%;
    background-position: calc(50% - var(--click-el-w, 0px)/2 + var(--click-offset-x, 0px)) calc(50% - var(--click-el-h, 0px)/2 + var(--click-offset-y, 0px)), 0% 0%;
  }
  33.1% {
    background-size: 0% 0%, 100% 1000%;
  }
  100% {
    background-size: 0% 0%, 100% 1000%;
    background-position: 0% 0%, 0% 100%;
  }
}
.dark-ripple {
  --ripple-color: rgba(0, 0, 0, 0.6);
}
.light-ripple {
  --ripple-color: rgba(255, 255, 255, 0.3);
}
.red-ripple {
  --ripple-color: rgba(255, 0, 0, 0.3);
}
.fuzzy-ripple {
  --ripple-fuzz: 30px;
}
.fast-ripple {
  --ripple-duration: 1s;
}
.slow-ripple {
  --ripple-duration: 3s;
}
/*
.form-control {
  border-radius: 0;
  border: none;
  background-color: rgba(0, 0, 0, 0.1);
  transition: background-size 0.5s, background-color 0.5s, border-color 0.25s, color 0.2s, box-shadow 0.25s;
}
.form-control,
.form-control:hover,
.form-control:focus,
.form-control:active {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%), linear-gradient(0deg, #007bff 0%, #007bff 100%);
  background-repeat: no-repeat;
  background-position: 50% 100%, 50% 100%;
  background-size: 100% 2px, 0% 2px;
}
.form-control:focus,
.form-control:active,
.form-control.click-fx {
  background-size: 100% 2px, 100% 2px;
  -webkit-animation: input-ripple 0.5s ease-in;
          animation: input-ripple 0.5s ease-in;
}
.form-control.pre-click-fx:not(.post-click-fx) {
  -webkit-animation: none !important;
          animation: none !important;
} */
@-webkit-keyframes input-ripple {
  0% {
    background-position: 50% 100%, calc(50% - var(--click-el-w, 0px)/2 + var(--click-offset-x, 0px)) 100%;
    background-size: 100% 2px, 0% 2px, 0% 0%;
  }
  100% {
    background-position: 50% 100%, calc(50% - var(--click-el-w, 0px)/2 + var(--click-offset-x, 0px)) 100%;
    background-size: 100% 2px, calc(2 * var(--click-max-r, 71%)) 2px;
  }
}
@keyframes input-ripple {
  0% {
    background-position: 50% 100%, calc(50% - var(--click-el-w, 0px)/2 + var(--click-offset-x, 0px)) 100%;
    background-size: 100% 2px, 0% 2px, 0% 0%;
  }
  100% {
    background-position: 50% 100%, calc(50% - var(--click-el-w, 0px)/2 + var(--click-offset-x, 0px)) 100%;
    background-size: 100% 2px, calc(2 * var(--click-max-r, 71%)) 2px;
  }
}
.figure {
  position: relative;
  text-align: center;
  width: 100%;
  padding: 75px 75px;
  border: 2px dashed #ccc;
  margin-bottom: 24px;
  overflow: hidden;
}
.figure caption {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  color: inherit;
}
.figure .btn-versatile {
  position: relative;
  z-index: 0;
  background-image: none !important;
}
.figure .btn-versatile .mockup {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px dashed #111;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  z-index: -1;
}
.figure.figure-hover-animated:after,
.figure.figure-click-animated:after {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  color: inherit;
  transition: opacity 0.25s;
}
.figure.figure-hover-animated:hover:after,
.figure.figure-click-animated:hover:after,
.figure-set:hover .figure.figure-hover-animated:after,
.figure-set:hover .figure.figure-click-animated:after {
  opacity: 0;
}
.figure.figure-hover-animated:after {
  content: "Hover for Animation";
}
.figure.figure-click-animated:after {
  content: "Click Button for Animation";
}
.figure.figure-overflow-hidden .btn-versatile {
  overflow: hidden !important;
}
.figure.figure-overflow-hidden .btn-versatile .mockup {
  border-width: 0px !important;
}
.figure.figure-ripple .btn-versatile .mockup {
  width: 0px;
  height: 0px;
  border-color: transparent;
  background-image: radial-gradient(circle closest-side at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 99%, transparent 100%);
  transition: width 1s ease-in, height 1s ease-in, border-color 0.25s;
}
.figure.figure-ripple.figure-hover-animated:hover .btn-versatile .mockup,
.figure.figure-ripple.figure-click-animated .btn-versatile:focus,
.figure.figure-ripple .mockup,
.figure.figure-ripple.figure-click-animated .btn-versatile:active .mockup {
  width: 141%;
  height: 240px;
  border-color: #111;
}
.figure.figure-linear-fade .btn-versatile .mockup {
  width: calc(100% + 4px);
  height: calc(100% * var(--bg-height-multiplier));
  top: 0;
  -webkit-transform: translate(-50%, 0%) translateY(-2px);
          transform: translate(-50%, 0%) translateY(-2px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) calc(100% / var(--bg-height-multiplier)), transparent calc(100% - 100% / var(--bg-height-multiplier)));
  transition: -webkit-transform 1s ease-in;
  transition: transform 1s ease-in;
  transition: transform 1s ease-in, -webkit-transform 1s ease-in;
}
.figure-set:hover .figure.figure-linear-fade.figure-hover-animated .btn-versatile .mockup,
.figure.figure-linear-fade.figure-hover-animated:hover .btn-versatile .mockup,
.figure.figure-linear-fade.figure-click-animated .btn-versatile:focus .mockup,
.figure.figure-linear-fade.figure-click-animated .btn-versatile:active .mockup {
  -webkit-transform: translate(-50%, calc(-1 * (100% - 100% / var(--bg-height-multiplier)))) translateY(2px);
          transform: translate(-50%, calc(-1 * (100% - 100% / var(--bg-height-multiplier)))) translateY(2px);
}
.figure.figure-combined .btn-versatile .mockup {
  width: 0%;
  height: 0%;
  background-image: radial-gradient(circle closest-side at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 99%, transparent 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.3) 20%, transparent 80%);
  opacity: 0;
}
.figure-set:hover .figure.figure-combined.figure-hover-animated .btn-versatile,
.figure.figure-combined.figure-hover-animated:hover .btn-versatile,
.figure.figure-combined.figure-click-animated .btn-versatile:focus,
.figure.figure-combined.figure-click-animated .btn-versatile:active,
.figure.figure-combined .btn-versatile.click-fx {
  -webkit-animation: empty-animation 5s;
          animation: empty-animation 5s;
}
.figure-set:hover .figure.figure-combined.figure-hover-animated .btn-versatile.pre-click-fx,
.figure.figure-combined.figure-hover-animated:hover .btn-versatile.pre-click-fx,
.figure.figure-combined.figure-click-animated .btn-versatile:focus.pre-click-fx,
.figure.figure-combined.figure-click-animated .btn-versatile:active.pre-click-fx,
.figure.figure-combined .btn-versatile.click-fx.pre-click-fx {
  -webkit-animation: none !important;
          animation: none !important;
}
.figure-set:hover .figure.figure-combined.figure-hover-animated .btn-versatile.pre-click-fx .mockup,
.figure.figure-combined.figure-hover-animated:hover .btn-versatile.pre-click-fx .mockup,
.figure.figure-combined.figure-click-animated .btn-versatile:focus.pre-click-fx .mockup,
.figure.figure-combined.figure-click-animated .btn-versatile:active.pre-click-fx .mockup,
.figure.figure-combined .btn-versatile.click-fx.pre-click-fx .mockup {
  -webkit-animation: none !important;
          animation: none !important;
}
.figure-set:hover .figure.figure-combined.figure-hover-animated .btn-versatile .mockup,
.figure.figure-combined.figure-hover-animated:hover .btn-versatile .mockup,
.figure.figure-combined.figure-click-animated .btn-versatile:focus .mockup,
.figure.figure-combined.figure-click-animated .btn-versatile:active .mockup,
.figure.figure-combined .btn-versatile.click-fx .mockup {
  -webkit-animation: figure-combined 5s ease-in forwards;
          animation: figure-combined 5s ease-in forwards;
  background-size: 0px 0px;
}
@-webkit-keyframes figure-combined {
  0% {
    top: calc(50% - var(--click-el-h, 0px)/2 + var(--click-offset-y, 0px));
    left: calc(50% - var(--click-el-w, 0px)/2 + var(--click-offset-x, 0px));
    width: 0%;
    height: 0%;
    background-size: 100% 100%, 0% 0%;
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
  20% {
    width: calc(2 * var(--click-max-r, 71%));
    height: calc(2 * var(--click-max-r, 95px));
    border-color: #111;
    -webkit-transform: translate(calc(-1 * var(--click-max-r, 51px)), calc(-1 * var(--click-max-r, 95px)));
            transform: translate(calc(-1 * var(--click-max-r, 51px)), calc(-1 * var(--click-max-r, 95px)));
  }
  30% {
    border-color: transparent;
  }
  40% {
    top: calc(50% - var(--click-el-h, 0px)/2 + var(--click-offset-y, 0px));
    left: calc(50% - var(--click-el-w, 0px)/2 + var(--click-offset-x, 0px));
    width: calc(2 * var(--click-max-r, 71%));
    height: calc(2 * var(--click-max-r, 95px));
    background-size: 100% 100%, 0% 0%;
    border-color: transparent;
    -webkit-transform: translate(calc(-1 * var(--click-max-r, 51px)), calc(-1 * var(--click-max-r, 95px)));
            transform: translate(calc(-1 * var(--click-max-r, 51px)), calc(-1 * var(--click-max-r, 95px)));
  }
  40.001% {
    top: 0%;
    left: 50%;
    width: calc(100% + 4px);
    height: 500%;
    background-size: 0% 0%, 100% 100%;
    -webkit-transform: translate(-38px, 0px) translateY(-2px);
            transform: translate(-38px, 0px) translateY(-2px);
  }
  45% {
    border-color: transparent;
  }
  55% {
    border-color: #111;
  }
  60% {
    -webkit-transform: translate(-38px, 0px) translateY(-2px);
            transform: translate(-38px, 0px) translateY(-2px);
  }
  80% {
    -webkit-transform: translate(-38px, -144px) translateY(2px);
            transform: translate(-38px, -144px) translateY(2px);
    opacity: 1;
  }
  100% {
    top: 0%;
    width: calc(100% + 4px);
    height: 500%;
    background-size: 0% 0%, 100% 100%;
    -webkit-transform: translate(-38px, -144px) translateY(2px);
            transform: translate(-38px, -144px) translateY(2px);
    opacity: 0;
  }
}
@keyframes figure-combined {
  0% {
    top: calc(50% - var(--click-el-h, 0px)/2 + var(--click-offset-y, 0px));
    left: calc(50% - var(--click-el-w, 0px)/2 + var(--click-offset-x, 0px));
    width: 0%;
    height: 0%;
    background-size: 100% 100%, 0% 0%;
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
  20% {
    width: calc(2 * var(--click-max-r, 71%));
    height: calc(2 * var(--click-max-r, 95px));
    border-color: #111;
    -webkit-transform: translate(calc(-1 * var(--click-max-r, 51px)), calc(-1 * var(--click-max-r, 95px)));
            transform: translate(calc(-1 * var(--click-max-r, 51px)), calc(-1 * var(--click-max-r, 95px)));
  }
  30% {
    border-color: transparent;
  }
  40% {
    top: calc(50% - var(--click-el-h, 0px)/2 + var(--click-offset-y, 0px));
    left: calc(50% - var(--click-el-w, 0px)/2 + var(--click-offset-x, 0px));
    width: calc(2 * var(--click-max-r, 71%));
    height: calc(2 * var(--click-max-r, 95px));
    background-size: 100% 100%, 0% 0%;
    border-color: transparent;
    -webkit-transform: translate(calc(-1 * var(--click-max-r, 51px)), calc(-1 * var(--click-max-r, 95px)));
            transform: translate(calc(-1 * var(--click-max-r, 51px)), calc(-1 * var(--click-max-r, 95px)));
  }
  40.001% {
    top: 0%;
    left: 50%;
    width: calc(100% + 4px);
    height: 500%;
    background-size: 0% 0%, 100% 100%;
    -webkit-transform: translate(-38px, 0px) translateY(-2px);
            transform: translate(-38px, 0px) translateY(-2px);
  }
  45% {
    border-color: transparent;
  }
  55% {
    border-color: #111;
  }
  60% {
    -webkit-transform: translate(-38px, 0px) translateY(-2px);
            transform: translate(-38px, 0px) translateY(-2px);
  }
  80% {
    -webkit-transform: translate(-38px, -144px) translateY(2px);
            transform: translate(-38px, -144px) translateY(2px);
    opacity: 1;
  }
  100% {
    top: 0%;
    width: calc(100% + 4px);
    height: 500%;
    background-size: 0% 0%, 100% 100%;
    -webkit-transform: translate(-38px, -144px) translateY(2px);
            transform: translate(-38px, -144px) translateY(2px);
    opacity: 0;
  }
}