.msp-button {
  --_button-height: var(--button-height-md);
  --_button-padding-x: var(--button-padding-x-md);
  --_button-font-size: var(--button-font-size-md);

  --_button-bg: var(--button-primary-bg);
  --_button-bg-hover: var(--button-primary-bg-hover);
  --_button-text: var(--button-primary-text);
  --_button-border: var(--button-primary-border);
  --_button-shadow: var(--button-primary-shadow);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--_button-height);
  padding-left: var(--_button-padding-x);
  padding-right: var(--_button-padding-x);
  border: 1px solid var(--_button-border);
  border-radius: var(--button-radius);
  background-color: var(--_button-bg);
  box-shadow: var(--_button-shadow);
  color: var(--_button-text);
  font-family: var(--font-body);
  font-size: var(--_button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--button-transition);
  cursor: pointer;
}

.msp-button:hover {
  background-color: var(--_button-bg-hover);
  color: var(--_button-text);
  transform: translateY(-1px);
}

.msp-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.msp-button:visited {
  color: var(--_button-text);
}

.msp-button[aria-disabled="true"],
.msp-button.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* VARIANTS */
.msp-button--primary {
  --_button-bg: var(--button-primary-bg);
  --_button-bg-hover: var(--button-primary-bg-hover);
  --_button-text: var(--button-primary-text);
  --_button-border: var(--button-primary-border);
  --_button-shadow: var(--button-primary-shadow);
}

.msp-button--secondary {
  --_button-bg: var(--button-secondary-bg);
  --_button-bg-hover: var(--button-secondary-bg-hover);
  --_button-text: var(--button-secondary-text);
  --_button-border: var(--button-secondary-border);
  --_button-shadow: var(--button-secondary-shadow);
}

.msp-button--outline {
  --_button-bg: var(--button-outline-bg);
  --_button-bg-hover: var(--button-outline-bg-hover);
  --_button-text: var(--button-outline-text);
  --_button-border: var(--button-outline-border);
  --_button-shadow: var(--button-outline-shadow);
}

/* SIZES */
.msp-button--sm {
  --_button-height: var(--button-height-sm);
  --_button-padding-x: var(--button-padding-x-sm);
  --_button-font-size: var(--button-font-size-sm);
}

.msp-button--md {
  --_button-height: var(--button-height-md);
  --_button-padding-x: var(--button-padding-x-md);
  --_button-font-size: var(--button-font-size-md);
}

.msp-button--lg {
  --_button-height: var(--button-height-lg);
  --_button-padding-x: var(--button-padding-x-lg);
  --_button-font-size: var(--button-font-size-lg);
}

/* UTILITIES */
.msp-button--standard {
  min-width: min(100%, 9.5rem);
}

.msp-button--block {
  width: 100%;
}

.msp-button--center {
  justify-content: center;
}