@use "./index" as util;
@use "sass:math";

// Colors
:root {
  /*colors*/
  @each $label, $value in util.$colors {
    --color--#{$label}: #{map-get($value, base)};
    --color--#{$label}--dark: #{map-get($value, dark)};
  }
  /*spacing*/
  @each $label, $value in util.$spacing {
    --space--#{$label}: #{map-get($value, absolute)};
    --space--#{$label}-in-12: #{map-get($value, relative)};
  }
  /*family*/
  --family--serif: #{util.$family--serif};
  --family--sans: #{util.$family--sans};
  --family--mono: #{util.$family--mono};
  /*fonts*/
  @each $label, $value in util.$fonts {
    --text--#{$label}: #{map-get($value, font-size)};
    --weight--#{$label}: #{map-get($value, font-weight)};
    --leading--#{$label}: #{map-get($value, line-height)};
  }
}

@each $label, $value in util.$colors {
  .color-#{$label} {
    color: var(--color--#{$label});
  }
  .color-#{$label}-dark {
    color: var(--color--#{$label}--dark);
  }
}

@each $label, $value in util.$colors {
  .bg-#{$label} {
    background-color: var(--color--#{$label});
  }
  .bg-#{$label}-dark {
    background-color: var(--color--#{$label}--dark);
  }
}

@each $label, $value in util.$colors {
  .border-#{$label} {
    border-color: var(--color--#{$label});
  }
  .border-#{$label}-dark {
    border-color: var(--color--#{$label}--dark);
  }
}

//Spacing

//padding
@each $label, $value in util.$spacing {
  .pt-#{$label} {
    padding-top: var(--space--#{$label});
  }
  .pt-#{$label}\/12 {
    padding-top: var(--space--#{$label}-in-12);
  }
}
@each $label, $value in util.$spacing {
  .pr-#{$label} {
    padding-right: var(--space--#{$label});
  }
  .pr-#{$label}\/12 {
    padding-right: var(--space--#{$label}-in-12);
  }
}
@each $label, $value in util.$spacing {
  .pb-#{$label} {
    padding-bottom: var(--space--#{$label});
  }
  .pb-#{$label}\/12 {
    padding-bottom: var(--space--#{$label}-in-12);
  }
}
@each $label, $value in util.$spacing {
  .pl-#{$label} {
    padding-left: var(--space--#{$label});
  }
  .pl-#{$label}\/12 {
    padding-left: var(--space--#{$label}-in-12);
  }
}
@each $label, $value in util.$spacing {
  .px-#{$label} {
    padding-right: var(--space--#{$label});
    padding-left: var(--space--#{$label});
  }
  .px-#{$label}\/12 {
    padding-right: var(--space--#{$label}-in-12);
    padding-left: var(--space--#{$label}-in-12);
  }
}
@each $label, $value in util.$spacing {
  .py-#{$label} {
    padding-top: var(--space--#{$label});
    padding-bottom: var(--space--#{$label});
  }
  .py-#{$label}\/12 {
    padding-top: var(--space--#{$label}-in-12);
    padding-bottom: var(--space--#{$label}-in-12);
  }
}
@each $label, $value in util.$spacing {
  .p-#{$label} {
    padding: var(--space--#{$label});
  }
  .p-#{$label}\/12 {
    padding: var(--space--#{$label}-in-12);
  }
}

//margin
@each $label, $value in util.$spacing {
  .mt-#{$label} {
    margin-top: var(--space--#{$label});
  }
  .mt-#{$label}\/12 {
    margin-top: var(--space--#{$label}-in-12);
  }
}
@each $label, $value in util.$spacing {
  .mr-#{$label} {
    margin-right: var(--space--#{$label});
  }
  .mr-#{$label}\/12 {
    margin-right: var(--space--#{$label}-in-12);
  }
}
@each $label, $value in util.$spacing {
  .mb-#{$label} {
    margin-bottom: var(--space--#{$label});
  }
  .mb-#{$label}\/12 {
    margin-bottom: var(--space--#{$label}-in-12);
  }
}
@each $label, $value in util.$spacing {
  .ml-#{$label} {
    margin-left: var(--space--#{$label});
  }
  .ml-#{$label}\/12 {
    margin-left: var(--space--#{$label}-in-12);
  }
}
@each $label, $value in util.$spacing {
  .mx-#{$label} {
    margin-right: var(--space--#{$label});
    margin-left: var(--space--#{$label});
  }
  .mx-#{$label}\/12 {
    margin-right: var(--space--#{$label}-in-12);
    margin-left: var(--space--#{$label}-in-12);
  }
}
@each $label, $value in util.$spacing {
  .my-#{$label} {
    margin-top: var(--space--#{$label});
    margin-bottom: var(--space--#{$label});
  }
  .my-#{$label}\/12 {
    margin-top: var(--space--#{$label}-in-12);
    margin-bottom: var(--space--#{$label}-in-12);
  }
}
@each $label, $value in util.$spacing {
  .m-#{$label} {
    margin: var(--space--#{$label});
  }
  .m-#{$label}\/12 {
    margin: var(--space--#{$label}-in-12);
  }
}

//height
@each $label, $value in util.$spacing {
  .h-#{$label} {
    height: var(--space--#{$label});
  }
  .h-#{$label}\/12 {
    height: var(--space--#{$label}-in-12);
  }
}

//width
@each $label, $value in util.$spacing {
  .w-#{$label} {
    width: var(--space--#{$label});
  }
  .w-#{$label}\/12 {
    width: var(--space--#{$label}-in-12);
  }
}

// Fonts

// font-family

.family-serif {
  font-family: var(--family--serif);
}

.family-sans {
  font-family: var(--family--sans);
}

.family-mono {
  font-family: var(--family--mono);
}

// font-size
@each $label, $value in util.$fonts {
  .text-#{$label} {
    font-size: var(--text--#{$label});
  }
}
// font-weight
@each $label, $value in util.$fonts {
  .weight-#{$label + 2}00 {
    font-weight: var(--weight--#{$label});
  }
}
// line-height
@each $label, $value in util.$fonts {
  .leading-#{$label} {
    line-height: var(--leading--#{$label});
  }
}