Atomic BEM evolution

_atoms_border.scss

@mixin border--box {
  border: 0.1em solid grey;
}

@mixin border__radius--box {
  border-radius: 0.4em;
}

@mixin border__radius--cta {
  border-radius: 0.2em;
}

@mixin border--cta {
  border: 0.1em solid $color__primary;
}

_atoms_shadow.scss

@mixin shadow--modal {
  box-shadow: 0.2em 0.2em 0.6em rgba(0,0,0,0.2);
}

_atoms_whitespace.scss

@mixin whitespace__padding--box {
  padding: 0.8em 1.2em;
}

@mixin whitespace__padding--block {
  padding: 0.2em 0.4em;
}

@mixin whitespace__margin--block {
  margin: 1em 0 0;
}

@mixin whitespace__container--gap {
    gap: 0.4em;
}

_molecules_actions.scss

%actions--container {
  @extend %reset;
  @include whitespace__margin--block;
  @include whitespace__container--gap;
  display: flex;
  justify-content: end;
}

_molecules_cta.scss

%cta--primary {
  @extend %reset;
  @include border--cta;
  @include border__radius--cta;
  @include whitespace__padding--block;
  background-color: $color__primary;
  color: $color__primary--offset;
}

%cta--secondary {
  @extend %cta--primary;
  background-color: $color__primary--offset;
  color: $color__primary;
}

_molecules_modal.scss

%modal-dialogue {
  @include border--box;
  @include border__radius--box;
  @include shadow--modal;
  @include whitespace__padding--box;
}

_organisms_confirmation-dialog.scss

@import 'utils', 'atoms_border', 'atoms_shadow', 'atoms_whitespace', 'molecules_actions', 'molecules_cta', 'molecules_modal';

.confirmation-dialog {
  @extend %modal-dialogue;
}

.confirmation-dialog__actions {
  @extend %actions--container;
}

.confirmation-dialog__confirm {
  @extend %cta--primary;
}

.confirmation-dialog__cancel {
  @extend %cta--secondary;
}

_utils.scss

%reset {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font: inherit;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
  text-size-adjust: none;
}

$color__primary: blue;
$color__primary--offset: white;