.btn {
  border: none;
  border-radius: 10px;
  background-size: 700% 200%;

  color: var(--m-lighter) !important;

  moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.btn.btn-heading {
  height: 40px;
  border-radius: 14px;
}

.btn:hover,
.btn:focus {
  color: var(--m-light) !important;
  background-position: 50% 0;
  box-shadow: none !important;
}

.btn:active,
.btn.active {
  color: var(--m-light) !important;
  background-position: 100% 0;
}

.btn.btn-primary {
  background-image: linear-gradient(
    to right,
    var(--m-indigo-6), var(--m-indigo-6),
    var(--m-indigo-4), var(--m-indigo-6), var(--m-indigo-8),
    var(--m-indigo-6), var(--m-indigo-8), var(--m-indigo-10)
  );
}

.btn.btn-secondary {
  background-image: linear-gradient(
    to right,
    var(--m-gray-6), var(--m-gray-6),
    var(--m-gray-4), var(--m-gray-6), var(--m-gray-8),
    var(--m-gray-6), var(--m-gray-8), var(--m-gray-10)
  );
}

.btn.btn-success {
  background-image: linear-gradient(
    to right,
    var(--m-emerald-6), var(--m-emerald-6),
    var(--m-emerald-4), var(--m-emerald-6), var(--m-emerald-8),
    var(--m-emerald-6), var(--m-emerald-8), var(--m-emerald-10)
  );
}

.btn.btn-warning {
  background-image: linear-gradient(
    to right,
    var(--m-yellow-6), var(--m-yellow-6),
    var(--m-yellow-4), var(--m-yellow-6), var(--m-yellow-8),
    var(--m-yellow-6), var(--m-yellow-8), var(--m-yellow-10)
  );
}

.btn.btn-danger {
  background-image: linear-gradient(
    to right,
    var(--m-scarlet-6), var(--m-scarlet-6),
    var(--m-scarlet-4), var(--m-scarlet-6), var(--m-scarlet-8),
    var(--m-scarlet-6), var(--m-scarlet-8), var(--m-scarlet-10)
  );
}

.btn.btn-info {
  background-image: linear-gradient(
    to right,
    var(--m-sky-6), var(--m-sky-6),
    var(--m-sky-4), var(--m-sky-6), var(--m-sky-8),
    var(--m-sky-6), var(--m-sky-8), var(--m-sky-10)
  );
}

.btn-transparent-primary {
  color: var(--m-indigo-6) !important;
  background-color: rgb(from var(--m-indigo-6) r g b / 20%);
}

.btn-transparent-primary:hover,
.btn-transparent-primary:focus {
  color: var(--m-indigo-1) !important;
  background-color: rgb(from var(--m-indigo-6) r g b / 60%);
  box-shadow: none !important;
}

.btn-transparent-primary:active,
.btn-transparent-primary.active,
.btn-check:checked + .btn.btn-transparent-primary {
  color: var(--m-indigo-1) !important;
  background-color: var(--m-indigo-7) !important;
}

.btn-transparent-success {
  color: var(--m-emerald-6) !important;
  background-color: rgb(from var(--m-emerald-6) r g b / 20%);
}

.btn-transparent-success:hover,
.btn-transparent-success:focus {
  color: var(--m-emerald-1) !important;
  background-color: rgb(from var(--m-emerald-6) r g b / 60%);
  box-shadow: none !important;
}

.btn-transparent-success:active,
.btn-transparent-success.active,
.btn-check:checked + .btn.btn-transparent-success {
  color: var(--m-emerald-1) !important;
  background-color: var(--m-emerald-7) !important;
}

.btn-transparent-danger {
  color: var(--m-scarlet-6) !important;
  background-color: rgb(from var(--m-scarlet-6) r g b / 20%);
}

.btn-transparent-danger:hover,
.btn-transparent-danger:focus {
  color: var(--m-scarlet-1) !important;
  background-color: rgb(from var(--m-scarlet-6) r g b / 60%);
  box-shadow: none !important;
}

.btn-transparent-danger:active,
.btn-transparent-danger.active,
.btn-check:checked + .btn.btn-transparent-danger {
  color: var(--m-scarlet-1) !important;
  background-color: var(--m-scarlet-7) !important;
}

.btn-transparent-warning {
  color: var(--m-yellow-6) !important;
  background-color: rgb(from var(--m-yellow-6) r g b / 20%);
}

.btn-transparent-warning:hover,
.btn-transparent-warning:focus {
  color: var(--m-yellow-1) !important;
  background-color: rgb(from var(--m-yellow-6) r g b / 60%);
  box-shadow: none !important;
}

.btn-transparent-warning:active,
.btn-transparent-warning.active,
.btn-check:checked + .btn.btn-transparent-warning {
  color: var(--m-yellow-1) !important;
  background-color: var(--m-yellow-7) !important;
}

.btn-transparent-secondary {
  color: var(--m-gray-6) !important;
  background-color: rgb(from var(--m-gray-6) r g b / 20%);
}

.btn-transparent-secondary:hover,
.btn-transparent-secondary:focus {
  color: var(--m-gray-1) !important;
  background-color: rgb(from var(--m-gray-6) r g b / 60%);
  box-shadow: none !important;
}

.btn-transparent-secondary:active,
.btn-transparent-secondary.active,
.btn-check:checked + .btn.btn-transparent-secondary {
  color: var(--m-gray-1) !important;
  background-color: var(--m-gray-7) !important;
}

.btn-transparent-info {
  color: var(--m-sky-6) !important;
  background-color: rgb(from var(--m-sky-6) r g b / 20%);
}

.btn-transparent-info:hover,
.btn-transparent-info:focus {
  color: var(--m-sky-1) !important;
  background-color: rgb(from var(--m-sky-6) r g b / 60%);
  box-shadow: none !important;
}

.btn-transparent-info:active,
.btn-transparent-info.active,
.btn-check:checked + .btn.btn-transparent-info {
  color: var(--m-sky-1) !important;
  background-color: var(--m-sky-7) !important;
}