@import 'core';
@import 'colors';
@import 'space';

/* Colors by type */
$colors: (
  'primary': $primary-700,
  'danger': $danger-700,
  'warning': $warning-700,
  'caution': $caution-700,
  'success': $success-700,
  'info': $info-700,
  'accent-1': $accent-1-700,
  'accent-2': $accent-2-700,
  'grey': $grey-700,
  'white': $white,
  'transparent': $transparent,
);

@each $type, $color in $colors {
  .color-#{$type} {
    color: $color !important;
  }
  .background-#{$type} {
    background-color: $color !important;
  }
  .border-#{$type} {
    border: 1px solid $color !important;
  }
}

/* Margins and paddings */
$spacings: (
  '3xs': $space-3xs,
  '2xs': $space-2xs,
  'xs': $space-xs,
  'normal': $space-normal,
  'small': $space-small,
  'medium': $space-medium,
  'large': $space-large,
  'xl': $space-xl,
  '2xl': $space-2xl,
  '3xl': $space-3xl,
  '4xl': $space-4xl,
  '5xl': $space-5xl,
  '6xl': $space-6xl,
);

$directions: (
  'left': [ 'left' ],
  'right': [ 'right' ],
  'top': [ 'top' ],
  'bottom': [ 'bottom' ],
  'horizontal': [ 'left',
  'right' ],
  'vertical': [ 'top',
  'bottom' ],
  'all': [ 'top',
  'bottom',
  'left',
  'right' ],
);

@each $spaceName, $spaceValue in $spacings {
  @each $directionName, $directionValues in $directions {
    .#{$prefix}-margin-#{$directionName}-#{$spaceName} {
      @each $directionValue in $directionValues {
        margin-#{$directionValue}: $spaceValue;
      }
    }
    .#{$prefix}-padding-#{$directionName}-#{$spaceName} {
      @each $directionValue in $directionValues {
        padding-#{$directionValue}: $spaceValue;
      }
    }
  }
}