.btn {
  display: flex;
  gap: 0.25rem;
  align-content: center;
  justify-content: center;

  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: 35.9px;
  border-radius: 10px;
}

.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-close:focus {
  box-shadow: none;
}

.btn.btn-primary {
  background-image: linear-gradient(
    to right,
    var(--m-blue-6), var(--m-blue-6),
    var(--m-blue-4), var(--m-blue-6), var(--m-blue-8),
    var(--m-blue-6), var(--m-blue-8), var(--m-blue-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-green-6), var(--m-green-6),
    var(--m-green-4), var(--m-green-6), var(--m-green-8),
    var(--m-green-6), var(--m-green-8), var(--m-green-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-red-6), var(--m-red-6),
    var(--m-red-4), var(--m-red-6), var(--m-red-8),
    var(--m-red-6), var(--m-red-8), var(--m-red-10)
  );
}

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

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

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

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

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

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

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

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

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

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

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

.btn-outline-warning:hover,
.btn-outline-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-outline-warning:active,
.btn-outline-warning.active,
.btn-check:checked + .btn.btn-outline-warning {
  color: var(--m-yellow-1) !important;
  background-color: var(--m-yellow-7) !important;
}

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

.btn-outline-secondary:hover,
.btn-outline-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-outline-secondary:active,
.btn-outline-secondary.active,
.btn-check:checked + .btn.btn-outline-secondary {
  color: var(--m-gray-1) !important;
  background-color: var(--m-gray-7) !important;
}

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

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

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


/*
 * Theme Button
 */

/* Gradient */
.btn.btn-theme {
  background-image: linear-gradient(
    to right,
    var(--theme-6), var(--theme-6),
    var(--theme-4), var(--theme-6), var(--theme-8),
    var(--theme-6), var(--theme-8), var(--theme-10)
  );
}

/* Outline */

.btn-outline-theme {
  color: var(--theme-6) !important;
  background-color: rgb(from var(--theme-6) r g b / 20%);
}

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

.btn-outline-theme:active,
.btn-outline-theme.active,
.btn-check:checked + .btn.btn-outline-theme {
  color: var(--theme-1) !important;
  background-color: var(--theme-7) !important;
}