//spacing variables
$cbp-spacing-micro: 8px;
$cbp-spacing-xsmall: 12px;
$cbp-spacing-small: 16px;
$cbp-spacing-regular: 20px;
$cbp-spacing-large: 40px;
$cbp-spacing-xlarge: 80px;

//spacing inline classes//

//Applies 8px of padding to the right padding
.cbp-spacing-inline-micro {
  padding-right: $cbp-spacing-micro;
}

//Applies 12px of padding to the right padding
.cbp-spacing-inline-xsmall {
  padding-right: $cbp-spacing-xsmall;
}

//Applies 16px of padding to the right padding
.cbp-spacing-inline-small {
  padding-right: $cbp-spacing-small;
}

//Applies 20px of padding to the right padding
.cbp-spacing-inline-regular {
  padding-right: $cbp-spacing-regular;
}

 //Applies 40px of padding to the right padding
.cbp-spacing-inline-large {
  padding-right: $cbp-spacing-large;
}

//Applies 80px of padding to the right padding
.cbp-spacing-inline-xlarge {
  padding-right: $cbp-spacing-xlarge;
}


//used for demonstration purposes only
body {
  width: 400px;
  margin: auto;
}
div {
  color: #1460aa;
  background-color: #1460aa;
  background-clip: padding-box;
  margin-bottom: 10px;
}

p {
  background-color: #edf3f9;
}