/* ===== Buttons Css ===== */
.primary-btn {
  background: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.active.primary-btn, .primary-btn:hover, .primary-btn:focus {
  background: var(--primary-dark);
  color: var(--white);
  box-shadow: var(--shadow-4);
}
.deactive.primary-btn {
  background: var(--gray-4);
  color: var(--dark-3);
  pointer-events: none;
}

.primary-btn-outline {
  border-color: var(--primary);
  color: var(--primary);
}
.active.primary-btn-outline, .primary-btn-outline:hover, .primary-btn-outline:focus {
  background: var(--primary-dark);
  color: var(--white);
}
.deactive.primary-btn-outline {
  color: var(--dark-3);
  border-color: var(--gray-4);
  pointer-events: none;
}

.primary-btn-link {
  color: var(--primary);
}
.active.primary-btn-link, .primary-btn-link:hover, .primary-btn-link:focus {
  color: var(--primary-dark);
}
.deactive.primary-btn-link {
  color: var(--dark-3);
  pointer-events: none;
}

.success-btn {
  background: var(--success);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.active.success-btn, .success-btn:hover, .success-btn:focus {
  background: var(--success-dark);
  color: var(--white);
  box-shadow: var(--shadow-4);
}
.deactive.success-btn {
  background: var(--success-light);
  color: var(--dark-3);
  pointer-events: none;
}

.success-btn-outline {
  border-color: var(--success);
  color: var(--success);
}
.active.success-btn-outline, .success-btn-outline:hover, .success-btn-outline:focus {
  background: var(--success-dark);
  color: var(--white);
}
.deactive.success-btn-outline {
  color: var(--dark-3);
  border-color: var(--success-light);
  pointer-events: none;
}

.success-btn-link {
  color: var(--success);
}
.active.success-btn-link, .success-btn-link:hover, .success-btn-link:focus {
  color: var(--success-dark);
}
.deactive.success-btn-link {
  color: var(--dark-3);
  pointer-events: none;
}

.info-btn {
  background: var(--info);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.active.info-btn, .info-btn:hover, .info-btn:focus {
  background: var(--info-dark);
  color: var(--white);
  box-shadow: var(--shadow-4);
}
.deactive.info-btn {
  background: var(--info-light);
  color: var(--dark-3);
  pointer-events: none;
}

.info-btn-outline {
  border-color: var(--info);
  color: var(--info);
}
.active.info-btn-outline, .info-btn-outline:hover, .info-btn-outline:focus {
  background: var(--info-dark);
  color: var(--white);
}
.deactive.info-btn-outline {
  color: var(--dark-3);
  border-color: var(--info-light);
  pointer-events: none;
}

.info-btn-link {
  color: var(--info);
}
.active.info-btn-link, .info-btn-link:hover, .info-btn-link:focus {
  color: var(--info-dark);
}
.deactive.info-btn-link {
  color: var(--dark-3);
  pointer-events: none;
}

.caution-btn {
  background: var(--caution);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.active.caution-btn, .caution-btn:hover, .caution-btn:focus {
  background: var(--caution-dark);
  color: var(--white);
  box-shadow: var(--shadow-4);
}
.deactive.caution-btn {
  background: var(--caution-light);
  color: var(--dark-3);
  pointer-events: none;
}

.caution-btn-outline {
  border-color: var(--caution);
  color: var(--caution);
}
.active.caution-btn-outline, .caution-btn-outline:hover, .caution-btn-outline:focus {
  background: var(--caution-dark);
  color: var(--white);
}
.deactive.caution-btn-outline {
  color: var(--dark-3);
  border-color: var(--caution-light);
  pointer-events: none;
}

.caution-btn-link {
  color: var(--caution);
}
.active.caution-btn-link, .caution-btn-link:hover, .caution-btn-link:focus {
  color: var(--caution-dark);
}
.deactive.caution-btn-link {
  color: var(--dark-3);
  pointer-events: none;
}

.error-btn {
  background: var(--error);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.active.error-btn, .error-btn:hover, .error-btn:focus {
  background: var(--error-dark);
  color: var(--white);
  box-shadow: var(--shadow-4);
}
.deactive.error-btn {
  background: var(--error-light);
  color: var(--dark-3);
  pointer-events: none;
}

.error-btn-outline {
  border-color: var(--error);
  color: var(--error);
}
.active.error-btn-outline, .error-btn-outline:hover, .error-btn-outline:focus {
  background: var(--error-dark);
  color: var(--white);
}
.deactive.error-btn-outline {
  color: var(--dark-3);
  border-color: var(--error-light);
  pointer-events: none;
}

.error-btn-link {
  color: var(--error);
}
.active.error-btn-link, .error-btn-link:hover, .error-btn-link:focus {
  color: var(--error-dark);
}
.deactive.error-btn-link {
  color: var(--dark-3);
  pointer-events: none;
}

/*# sourceMappingURL=button-page.css.map */