@import 'functions';
@import '../variables';

/* Containers
------------------------------ */
.has-container {
  max-width: variable('container-width');
  width: 100%;
  margin: 0 auto;
}

/* Spacing
------------------------------ */
$directions: "-top" "-right" "-bottom" "-left";
$sizes: "" "-md" "-lg";

@mixin generate_spacing($property) {
  $propertyFirstLetter: get_first_chars($property, 1);
  
  @each $size in $sizes {
    .has-#{$propertyFirstLetter}#{$size} { #{$property}: variable("spacing#{$size}"); }
    @each $direction in $directions {
      .has-#{$propertyFirstLetter}#{$direction}#{$size} {
        #{$property}#{$direction}: variable("spacing#{$size}");
      }
    }
  }
  
  .has-no-#{$propertyFirstLetter} { margin: 0; } // Ex: has-no-p and has-no-m
  @each $direction in $directions {
    .has-no#{$direction}-#{$propertyFirstLetter} { #{$property}#{$direction}: 0; } // Ex: has-no-top-p and has-no-top-m
  }
}

@mixin generate_display_classes {
  $display_types: "block" "inline-block" "flex" "inline-flex" "grid" "inline-grid";
  
  @each $type in $display_types {
    .is-#{$type} { display: #{$type}; }
    
    @for $i from 1 through length($breakpoints) {
      .is-#{$type}-#{nth($breakpoints, $i)} {
        @media screen and (min-width: #{nth($breakpoint_values, $i)}) { display: #{$type}; }
      }
    }
  }
}

@include generate_spacing('margin');
@include generate_spacing('padding');

/* Positioning
------------------------------ */
.is-centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.is-centered-horizontally {
  display: flex;
  justify-content: center;
}

.is-centered-vertically {
  display: flex;
  align-items: center;
}

/* Display
------------------------------ */
@include generate_display_classes;

/* Images
------------------------------ */
img {
  &.is-responsive {
    height: auto;
    width: 100%;
  }
  
  &.is-rounded { border-radius: 50%; }
}

@mixin generate_border_radius {
  @each $size in $sizes {
    .has-rounded-corners#{$size} {
      border-radius: variable('border-radius#{$size}');
    }
  }
}

@mixin generate_background_colors {
  @for $i from 1 through length($all_colors) {
    .has-bkg-#{nth($all_colors, $i)} {
      background: variable(#{nth($all_colors, $i)});
    }
  }
}

/* Color Classes
----------------------------- */
@include generate_background_colors;

/* Lists
------------------------- */
.is-unstyled {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

/* Misc
------------------------------ */
.is-box {
  padding: 1.5rem;
  border-radius: 2px;
  border: 2px solid variable("grey");
  
  &.has-shadow {
    border: none;
    box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
  }
}

/* Display Helpers
------------------------------------ */
.is-device { display: none; }
.is-screen { display: block; }

@media only screen and (min-device-width: 1px) and (-webkit-min-device-pixel-ratio: 2) {
  .is-device { display: block; }
  .is-screen { display: none; }
}

/* Light/Dark Mode
------------------------------------ */
@media (prefers-color-scheme: dark) {
  .has-dark-preferred {
    // Dark Mode Styles
  }
}

@media (prefers-color-scheme: light) {
  .has-dark-preferred {
    // Light Mode Styles
  }
}

@include generate_border_radius;