.test {
  color: red;
}

.mgnl-button {
  cursor: pointer;
  width: fit-content;
  transition: all var(--mgnl-animation-duration-50) var(--mgnl-animation-timing-50);
}
.mgnl-button--primary {
  background-color: var(--mgnl-button-primary-color-background-default);
  color: var(--mgnl-button-primary-color-label-default);
  border: var(--mgnl-button-primary-border-default);
  outline: var(--mgnl-button-primary-focus-outline-default);
}
.mgnl-button--primary:hover {
  background-color: var(--mgnl-button-primary-color-background-hover);
  border: var(--mgnl-button-primary-border-hover);
}
.mgnl-button--primary:disabled, .mgnl-button--primary.is-disabled {
  background-color: var(--mgnl-button-primary-color-background-disabled);
  border: var(--mgnl-button-primary-border-disabled);
  color: var(--mgnl-button-primary-color-label-disabled);
  cursor: not-allowed;
}
.mgnl-button--primary:focus {
  border: var(--mgnl-button-primary-border-focus);
  box-shadow: var(--mgnl-button-primary-focus-outline-focus);
}
.mgnl-button--secondary {
  background-color: var(--mgnl-button-secondary-color-background-default);
  color: var(--mgnl-button-secondary-color-label-default);
  border: var(--mgnl-button-secondary-border-default);
  outline: var(--mgnl-button-secondary-focus-outline-default);
}
.mgnl-button--secondary:hover {
  background-color: var(--mgnl-button-secondary-color-background-hover);
  border: var(--mgnl-button-secondary-border-hover);
}
.mgnl-button--secondary:disabled, .mgnl-button--secondary.is-disabled {
  background-color: var(--mgnl-button-secondary-color-background-disabled);
  border: var(--mgnl-button-secondary-border-disabled);
  color: var(--mgnl-button-secondary-color-label-disabled);
  cursor: not-allowed;
}
.mgnl-button--secondary:focus {
  border: var(--mgnl-button-secondary-border-focus);
  box-shadow: var(--mgnl-button-secondary-focus-outline-focus);
}
.mgnl-button--danger {
  background-color: var(--mgnl-button-danger-color-background-default);
  color: var(--mgnl-button-danger-color-label-default);
  border: var(--mgnl-button-danger-border-default);
  outline: var(--mgnl-button-danger-focus-outline-default);
}
.mgnl-button--danger:hover {
  background-color: var(--mgnl-button-danger-color-background-hover);
  border: var(--mgnl-button-danger-border-hover);
}
.mgnl-button--danger:disabled, .mgnl-button--danger.is-disabled {
  background-color: var(--mgnl-button-danger-color-background-disabled);
  border: var(--mgnl-button-danger-border-disabled);
  color: var(--mgnl-button-danger-color-label-disabled);
  cursor: not-allowed;
}
.mgnl-button--danger:focus {
  border: var(--mgnl-button-danger-border-focus);
  box-shadow: var(--mgnl-button-danger-focus-outline-focus);
}
.mgnl-button--xs {
  transition: all var(--mgnl-button-xs-transition);
  letter-spacing: var(--mgnl-button-xs-typography-letter-spacing);
  font-weight: var(--mgnl-button-xs-typography-font-weight);
  line-height: var(--mgnl-button-xs-typography-line-height);
  font-size: var(--mgnl-button-xs-typography-font-size);
  font-family: var(--mgnl-button-xs-typography-font-family);
  gap: var(--mgnl-button-xs-gap);
  padding: var(--mgnl-button-xs-padding);
  border-radius: var(--mgnl-button-xs-border-radius-default);
}
.mgnl-button--sm {
  transition: all var(--mgnl-button-sm-transition);
  letter-spacing: var(--mgnl-button-sm-typography-letter-spacing);
  font-weight: var(--mgnl-button-sm-typography-font-weight);
  line-height: var(--mgnl-button-sm-typography-line-height);
  font-size: var(--mgnl-button-sm-typography-font-size);
  font-family: var(--mgnl-button-sm-typography-font-family);
  gap: var(--mgnl-button-sm-gap);
  padding: var(--mgnl-button-sm-padding);
  border-radius: var(--mgnl-button-sm-border-radius-default);
}
.mgnl-button--md {
  transition: all var(--mgnl-button-md-transition);
  letter-spacing: var(--mgnl-button-md-typography-letter-spacing);
  font-weight: var(--mgnl-button-md-typography-font-weight);
  line-height: var(--mgnl-button-md-typography-line-height);
  font-size: var(--mgnl-button-md-typography-font-size);
  font-family: var(--mgnl-button-md-typography-font-family);
  gap: var(--mgnl-button-md-gap);
  padding: var(--mgnl-button-md-padding);
  border-radius: var(--mgnl-button-md-border-radius-default);
}