@import './baseline';
@import './breakpoints';
@import './capitalize';

$spacingZero: 0;
$spacingXxxs: 0.5 * $typographyBaseline;
$spacingXxs: 1 * $typographyBaseline;
$spacingXs: 1 * $baseline;
$spacingSm: 2 * $baseline;
$spacingMd: 3 * $baseline;
$spacingLg: 4 * $baseline;
$spacingXlg: 6 * $baseline;
$spacingXxlg: 12 * $baseline;

$layout-0: 0px;
$layout-1: 8px;
$layout-2: 12px;
$layout-3: 16px;
$layout-4: 24px;
$layout-5: 32px;
$layout-6: 48px;
$layout-7: 64px;
$layout-8: 80px;
$layout-9: 96px;

$component-0: 0px;
$component-1: 2px;
$component-2: 4px;
$component-3: 8px;
$component-4: 12px;
$component-5: 16px;
$component-6: 20px;
$component-7: 24px;
$component-8: 32px;
$component-9: 48px;

$zero: $spacingZero;
$xxxs: $spacingXxxs;
$xxs: $spacingXxs;
$xs: $spacingXs;
$sm: $spacingSm;
$md: $spacingMd;
$lg: $spacingLg;
$xlg: $spacingXlg;
$xxlg: $spacingXxlg;

$spacings: (
  zero: $zero,
  xxxs: $xxxs,
  xxs: $xxs,
  xs: $xs,
  sm: $sm,
  md: $md,
  lg: $lg,
  xlg: $xlg,
  xxlg: $xxlg,
);

$responsiveSpacingsForZero: ($zero, $zero, $zero, $zero, $zero, $zero);
$responsiveSpacingsForXxxs: ($xxxs, $xxxs, $xxxs, $xxxs, $xxxs, $xxxs);
$responsiveSpacingsForXxs: ($xxs, $xxs, $xxs, $xxs, $xxs, $xxs);
$responsiveSpacingsForXs: ($xs, $xs, $xs, $xs, $xs, $xs);
$responsiveSpacingsForSm: ($sm, $sm, $sm, $sm, $sm, $sm);
$responsiveSpacingsForMd: ($md, $md, $md, $md, $md, $md);
$responsiveSpacingsForLg: ($md, $lg, $lg, $lg, $lg, $lg);
$responsiveSpacingsForXlg: ($md, $lg, $xlg, $xlg, $xlg, $xlg);
$responsiveSpacingsForXxlg: ($md, $lg, $xlg, $xxlg, $xxlg, $xxlg);

@mixin spacing(
  $spacingType,
  $sizeCategory,
  $direction,
  $xsSize,
  $smSize,
  $mdSize,
  $lgSize,
  $xlgSize,
  $xxlgSize
) {
  .#{$spacingType}__size#{capitalize($sizeCategory)}#{capitalize($direction)} {
    #{$spacingType}-#{$direction}: $xsSize;

    @include from('sm') {
      #{$spacingType}-#{$direction}: $smSize;
    }

    @include from('md') {
      #{$spacingType}-#{$direction}: $mdSize;
    }

    @include from('lg') {
      #{$spacingType}-#{$direction}: $lgSize;
    }

    @include from('xlg') {
      #{$spacingType}-#{$direction}: $xlgSize;
    }

    @include from('xxlg') {
      #{$spacingType}-#{$direction}: $xxlgSize;
    }
  }
}

@mixin spacings(
  $spacingType,
  $sizeCategory,
  $xsSize,
  $smSize,
  $mdSize,
  $lgSize,
  $xlgSize,
  $xxlgSize
) {
  @include spacing(
    $spacingType,
    $sizeCategory,
    'left',
    $xsSize,
    $smSize,
    $mdSize,
    $lgSize,
    $xlgSize,
    $xxlgSize
  );
  @include spacing(
    $spacingType,
    $sizeCategory,
    'right',
    $xsSize,
    $smSize,
    $mdSize,
    $lgSize,
    $xlgSize,
    $xxlgSize
  );
  @include spacing(
    $spacingType,
    $sizeCategory,
    'top',
    $xsSize,
    $smSize,
    $mdSize,
    $lgSize,
    $xlgSize,
    $xxlgSize
  );
  @include spacing(
    $spacingType,
    $sizeCategory,
    'bottom',
    $xsSize,
    $smSize,
    $mdSize,
    $lgSize,
    $xlgSize,
    $xxlgSize
  );
}