%button-standard { width: 85%; max-width: 300px; margin-left: auto; margin-right: auto; display: block; } .button, .onboarding .button { &.button-primary { @include button-style($v-button-primary-bg, $v-button-primary-border, $v-button-primary-active-bg, $v-button-primary-active-border, $v-button-primary-color); @include button-clear($v-button-primary-bg); @include button-outline($v-button-primary-bg); } &.button-primary, &.button-secondary, &.button-light, &.button-assertive { &.button-standard { @extend %button-standard; & + .button-standard { margin-top: 1rem; } } } } .onboarding .button { &.button-secondary { @include button-style($v-onboarding-button-secondary-bg, $v-onboarding-button-secondary-border, $v-onboarding-button-secondary-active-bg, $v-onboarding-button-secondary-active-border, $v-onboarding-button-secondary-color); @include button-clear($v-onboarding-button-secondary-color); @include button-outline($v-onboarding-button-secondary-color); } } .button { &.button-secondary { @include button-style($v-button-secondary-bg, $v-button-secondary-border, $v-button-secondary-active-bg, $v-button-secondary-active-border, $v-button-secondary-color); @include button-clear($v-button-secondary-color); @include button-outline($v-button-secondary-color); } }