@use 'functions/color' as *;
@use 'functions/get-var' as *;
@use 'variables' as *;

// Empty states (or Blank slates)
.empty {
  // background: $bg-color; // old spectre.css
  background: color('bg-color');
  // border-radius: $border-radius; // old spectre.css
  border-radius: get-var('border-radius');
  // color: $gray-color-dark; // old spectre.css
  color: color('gray-color-dark');
  text-align: center;
  // padding: $unit-16 $unit-8; // old spectre.css
  padding: get-var('unit-16') get-var('unit-8');

  .empty-icon {
    // margin-bottom: $layout-spacing-lg; // old spectre.css
    margin-bottom: get-var('layout-spacing', $suffix: 'lg', $unit: 1);
  }

  .empty-title,
  .empty-subtitle {
    // margin: $layout-spacing auto; // old spectre.css
    margin: get-var('layout-spacing', $unit: 1) auto;
  }

  .empty-action {
    // margin-top: $layout-spacing-lg; // old spectre.css
    margin-top: get-var('layout-spacing', $suffix: 'lg', $unit: 1);
  }
}