/********** VARS **********/

:root {
  /********** FONT FAMILY **********/
  @each $key, $value in $font-family {
    --ani-#{$key}: #{$value};
    }

  /********** COLORS **********/
  /* hue */
  --ani-hue: 0;
  
  /* saturation */
  --ani-min: 0%;
  --ani-max: 100%;

  /* lightness */
  --ani-base: #{$lightness-base};
  --ani-dark: #{$lightness-dark};
  --ani-light: #{$lightness-light};

  /* opacity */
  --ani-darker: 0.8;
  --ani-lighter: 0.2;

  /* color hues */
  @each $key, $value in $hues {
    --ani-#{$key}-hue: #{$value};
  }

  /* grayscale lightness */
  @each $key, $value in $grayscale {
    --ani-#{$key}-light: #{$value};
  }

  /* colors */
  @each $key, $value in $hues {
    --ani-#{$key}: hsl(var(--ani-#{$key}-hue), var(--ani-max), var(--ani-base));
    --ani-#{$key}-dark: hsl(var(--ani-#{$key}-hue), var(--ani-max), var(--ani-dark));
    --ani-#{$key}-light: hsl(var(--ani-#{$key}-hue), var(--ani-max), var(--ani-light));
    --ani-#{$key}-darker: hsla(var(--ani-#{$key}-hue), var(--ani-max), var(--ani-dark), var(--ani-darker));
    --ani-#{$key}-lighter: hsla(var(--ani-#{$key}-hue), var(--ani-max), var(--ani-light), var(--ani-lighter));
  }

  /* grayscale */
  @each $key, $value in $grayscale {
    --ani-#{$key}: hsl(var(--ani-hue), var(--ani-min), var(--ani-#{$key}-light));
    --ani-#{$key}-darker: hsla(var(--ani-hue), var(--ani-min), var(--ani-#{$key}-light), var(--ani-darker));
    --ani-#{$key}-lighter: hsla(var(--ani-hue), var(--ani-min), var(--ani-#{$key}-light), var(--ani-lighter));
  }

  /********** TRANSFORM **********/
  @each $key, $value in $transforms {
    --ani-#{$key}: #{$value};
  }
}

/********** TAGS **********/
* {
  --ani-target-margins: 7rem;
}

html {
  --ani-html-font-size: 62.5%;
}

body {
  --ani-body-font-size: 2rem;
  --ani-body-line-height: 1.6;
  --ani-body-margin: auto;
  --ani-body-max-width: 100%;
  --ani-body-overflow: break-word;
  --ani-body-padding: 0;
}

main {
  --ani-main-text-align: center;
}

article {
  --ani-article-margin-bottom: 20px;
}

h1 {
  --ani-title-font-size: calc(var(--ani-body-font-size) * 2);
  --ani-title-margin: 20px 0;
}

h2 {
  --ani-title-font-size: calc(var(--ani-body-font-size) * 1.8);
  --ani-title-margin: 15px 0;
}

h3 {
  --ani-title-font-size: calc(var(--ani-body-font-size) * 1.6);
  --ani-title-margin: 10px 0;
}

h4 {
  --ani-title-font-size: calc(var(--ani-body-font-size) * 1.4);
  --ani-title-margin: 5px 0;
}

h5 {
  --ani-title-font-size: calc(var(--ani-body-font-size) * 1.2);
  --ani-title-margin: 0;
}

h6 {
  --ani-title-font-size: var(--ani-body-font-size);
  --ani-title-margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --ani-title-text-align: center;
  --ani-title-text-transform: capitalize;
}

ul {
  --ani-ul-margin: 0 0 10px;
  --ani-ul-padding: 0;
  --ani-ul-style: none;
}

table {
  --ani-table-border-collapse: collapse;
  --ani-table-margin: auto;
  --ani-table-text-align: center;
  --ani-table-vertical-align: middle;
}

figure {
  --ani-figure-margin: 0;
}

img,
video {
  --ani-img-max-width: 100%;
  --ani-img-height: auto;
  --ani-img-object-fit: contain;
}

code,
pre {
  --ani-code-font-size: 1em;
  --ani-code-margin: auto;
  --ani-code-overflow: auto;
  --ani-code-padding: 10px;
  --ani-code-text-align: initial;
  --ani-code-white-space: pre-line;
  --ani-code-width: 100%;
}

p {
  --ani-p-margin: 5px;
}

a {
  --ani-a-color: var(--sky);
  --ani-a-outline: 0;
  --ani-a-text-decoration: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  --ani-button-cursor: pointer;
}

/********** GRID **********/
[class*="grid"] {
  --ani-grid-max-width: 100vw;
  --ani-grid-margin: auto;
}

[class*="gap-"] {
  @each $key, $value in $gap {
    --ani-gap#{$key}: #{$value};
  }
}

/********** MARGIN **********/
[class*="mar-"] {
  @each $key, $value in $margins {
    --ani-margin-#{$key}: #{$value};
  }
}

/********** BORDER **********/
[class*="bord"] {
  @each $key, $value in $border-width {
    --ani-border-width-#{$key}: #{$value};
  }
  @each $key, $value in $border-radius {
    --ani-border-radius-#{$key}: #{$value};
  }
}

/********** PADDING **********/
[class*="pad-"] {
  @each $key, $value in $paddings {
    --ani-padding-#{$key}: #{$value};
  }
}

/********** CONTAINER **********/
[class*="container"] {
  --ani-container-max-width: 100%;
}

/********** HEIGHT **********/
[class*="height-"] {
  @each $key, $value in $height {
    --ani-height-#{$key}: #{$value};
  }
}

/********** MAX HEIGHT **********/
[class*="max-h-"] {
  @each $key, $value in $height {
    --ani-max-height-#{$key}: #{$value};
  }
}

/********** MIN HEIGHT **********/
[class*="min-h-"] {
  @each $key, $value in $height {
    --ani-min-height-#{$key}: #{$value};
  }
}

/********** WIDTH **********/
[class*="width-"] {
  @each $key, $value in $width {
    --ani-width-#{$key}: #{$value};
  }
}

/********** MAX WIDTH **********/
[class*="max-w-"] {
  @each $key, $value in $width {
    --ani-max-width-#{$key}: #{$value};
  }
}

[class*="min-w-"] {
  @each $key, $value in $width {
    --ani-min-width-#{$key}: #{$value};
  }
}

/********** ANIMATION **********/
[class*="ani-"] {
  --ani-animation-duration: 2s;

  @each $type, $option in $animation-options {
    @each $key, $value in $option {
      --ani-animation-#{$type}-#{$key}: #{$value};
    }
  }
}