@import 'mixins/typography';
@import 'mixins/card';
@import 'mixins/spacing';
@import 'mixins/border';

/**
  For generating typography styles
*/
$font-header-sizes: (
  'h1': 2.75rem,
  'h2': 2rem,
  'h3': 1.5rem,
  'h4': 1.125rem,
  'h5': 1rem,
  'h6': 0.875rem,
  'h7': 0.75rem,
);
@each $name, $size in $font-header-sizes {
  .fw-type-#{$name} {
    @include typography('header', $size, $text-default, 600);
  }
}
$font-body-sizes: (
  '3xl': 2.75rem,
  '2xl': 2rem,
  'xl': 1.5rem,
  'lg': 1.125rem,
  'base': 1rem,
  'sm': 0.875rem,
  'xs': 0.75rem,
);
@each $name, $size in $font-body-sizes {
  .fw-type-#{$name} {
    @include typography('body', $size);
  }
}

$font-weight: (
  'light': 300,
  'regular': 400,
  'semibold': 600,
  'bold': 700,
);
@each $name, $size in $font-weight {
  .fw-type-#{$name} {
    font-weight: #{$size};
  }
}

.fw-type-anchor {
  @include anchor;
}

/**
  For generating border styles
*/

.fw-b-0 {
  border: none;
}

$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
);
@each $width, $value in $border-widths {
  .fw-b-#{$width} {
    @include border($value, $value, $value, $value);
  }
  .fw-b-t-#{$width} {
    @include border($value, 0, 0, 0);
  }
  .fw-b-r-#{$width} {
    @include border(0, $value, 0, 0);
  }
  .fw-b-b-#{$width} {
    @include border(0, 0, $value, 0);
  }
  .fw-b-l-#{$width} {
    @include border(0, 0, 0, $value);
  }
}

$border-radii: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
);
@each $radius, $value in $border-radii {
  .fw-br-#{$radius} {
    @include border-radius($value, $value, $value, $value);
  }
  .fw-br-tr-#{$radius} {
    @include border-radius($value, 0, 0, 0);
  }
  .fw-br-br-#{$radius} {
    @include border-radius(0, $value, 0, 0);
  }
  .fw-br-bl-#{$radius} {
    @include border-radius(0, 0, $value, 0);
  }
  .fw-br-tl-#{$radius} {
    @include border-radius(0, 0, 0, $value);
  }
}

$border-styles: (solid);
@each $style in $border-styles {
  .fw-b-#{$style} {
    border-style: $style;
    border-color: $color-azure-100;
  }
}

$border-colors: (
  'smoke-100': #cfd7df,
  'azure-100': #bbdcfe,
  'persimmon-100': #ffd0d6,
  'casablanca-100': #fddbb5,
);
@each $color, $value in $border-colors {
  .fw-b-#{$color} {
    border-color: $value;
  }
}

/**
  For generating card styles
*/
@for $i from 0 through 3 {
  .fw-card-#{$i} {
    @include card($i, 8px);
  }
}

/**
  For generating spacing styles
*/
$relative-spacing: (
  0: 0px,
  4: 0.25rem,
  8: 0.5rem,
  12: 0.75rem,
  16: 1rem,
  20: 1.25rem,
  24: 1.5rem,
  28: 1.75rem,
);

/**
  For generating padding styles
*/
$spacing: 28;
@while $spacing >= 0 {
  $spacevalue: map-get($relative-spacing, $spacing);
  .fw-p-#{$spacing} {
    @include padding($spacevalue, $spacevalue, $spacevalue, $spacevalue);
  }
  .fw-px-#{$spacing} {
    @include padding(null, $spacevalue, null, $spacevalue);
  }
  .fw-py-#{$spacing} {
    @include padding($spacevalue, null, $spacevalue, null);
  }
  .fw-pt-#{$spacing} {
    @include padding($spacevalue, null, null, null);
  }
  .fw-pr-#{$spacing} {
    @include padding(null, $spacevalue, null, null);
  }
  .fw-pb-#{$spacing} {
    @include padding(null, null, $spacevalue, null);
  }
  .fw-pl-#{$spacing} {
    @include padding(null, null, null, $spacevalue);
  }
  $spacing: $spacing - 4;
}

/**
  For generating margin styles
*/
$spacing: 28;
@while $spacing >= 0 {
  $spacevalue: map-get($relative-spacing, $spacing);
  .fw-m-#{$spacing} {
    @include margin($spacevalue, $spacevalue, $spacevalue, $spacevalue);
  }
  .fw-mx-#{$spacing} {
    @include margin(null, $spacevalue, null, $spacevalue);
  }
  .fw-my-#{$spacing} {
    @include margin($spacevalue, null, $spacevalue, null);
  }
  .fw-mt-#{$spacing} {
    @include margin($spacevalue, null, null, null);
  }
  .fw-mr-#{$spacing} {
    @include margin(null, $spacevalue, null, null);
  }
  .fw-mb-#{$spacing} {
    @include margin(null, null, $spacevalue, null);
  }
  .fw-ml-#{$spacing} {
    @include margin(null, null, null, $spacevalue);
  }
  $spacing: $spacing - 4;
}

/**
  For generating font colors
*/
$colors: (
  smoke-700: #475867,
  smoke-300: #92a2b1,
  azure-800: #2c5cc5,
  azure-100: #bbdcfe,
  elephant-900: #12344d,
  elephant-800: #264966,
  jungle-800: #005c3f,
  jungle-500: #00a886,
  persimmon-900: #c82124,
  persimmon-800: #d72d30,
  casablanca-700: #e86f25,
);
@each $color, $value in $colors {
  .fw-color-#{$color} {
    color: #{$value};
  }
}

/**
  For generating background colors
*/
$background-colors: (
  elephant-900: #12344d,
  smoke-100: #cfd7df,
  smoke-50: #ebeff3,
  smoke-25: #f5f7f9,
  jungle-50: #e0f5f1,
  azure-50: #e5f2fd,
  persimmon-50: #ffecf0,
  casablanca-50: #fef1e1,
);
@each $color, $value in $background-colors {
  .fw-bg-#{$color} {
    background-color: #{$value};
  }
}

/** 
  For generating flex related styles
*/
.fw-flex {
  display: flex;
}

$flex-direction: (row, row-reverse, column, column-reverse);
@each $direction in $flex-direction {
  .fw-flex-#{$direction} {
    flex-direction: $direction;
  }
}

$flex-wrap: (wrap, wrap-reverse, nowrap);
@each $wrap in $flex-wrap {
  .fw-flex-#{$wrap} {
    flex-wrap: $wrap;
  }
}

.fw-flex-grow-0 {
  flex-grow: 0;
}
.fw-flex-grow {
  flex-grow: 1;
}

.fw-flex-shrink-0 {
  flex-shrink: 0;
}
.fw-flex-shrink {
  flex-shrink: 1;
}

@for $i from 0 through 12 {
  .fw-order-#{$i} {
    order: $i;
  }
}
$flex-order: (
  first: -9999,
  last: 9999,
  none: 0,
);
@each $name, $value in $flex-order {
  .fw-order-#{$name} {
    order: $value;
  }
}

$flex-justify: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
  evenly: space-evenly,
);
@each $name, $value in $flex-justify {
  .fw-justify-#{$name} {
    justify-content: $value;
  }
}

$flex-align-items: (
  start: flex-start,
  end: flex-end,
  center: center,
  baseline: baseline,
  stretch: stretch,
);
@each $name, $value in $flex-align-items {
  .fw-items-#{$name} {
    align-items: $value;
  }
}

$flex-align-content: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
  evenly: space-evenly,
);
@each $name, $value in $flex-align-content {
  .fw-content-#{$name} {
    align-content: $value;
  }
}

$gap: 1rem;
$gap-values: (
  0: 0,
  1: $gap * 0.25,
  2: $gap * 0.5,
  3: $gap,
  4: $gap * 1.5,
  5: $gap * 2,
  6: $gap * 3,
  7: $gap * 4,
  8: $gap * 5,
);

@for $i from 0 through 8 {
  $gap-val: map-get($gap-values, $i);

  .fw-gap-#{$i} {
    gap: $gap-val;
  }

  .fw-row-gap-#{$i} {
    row-gap: $gap-val;
  }

  .fw-column-gap-#{$i} {
    column-gap: $gap-val;
  }
}
