@use 'sass:math';
@use 'helpers';
@use "sass:map";
@use "sass:meta";

// SPACING utilities: m- p- (margin/padding) with directions
$space-map: (0: 0rem, 1: 0.5rem, 2: 1rem, 3: 1.5rem, 4: 2rem);
$directions: ("" : "", t: "-top", r: "-right", b: "-bottom", l: "-left", x: ("-left", "-right"), y: ("-top", "-bottom"));
$scales: 0 1 2 3 4;

@function helpers-space($key) {
  @if map.has-key($space-map, $key) {
    @return map.get($space-map, $key);
  } @else {
    @warn "Unknown spacing key `#{$key}`. Returning 0rem.";
    @return 0rem;
  }
}

@each $d, $prop in $directions {
  @each $s in $scales {

    // =====================
    // Margin
    // =====================
    @if $d == "" {
      .m-#{$s} {
        margin: helpers-space($s);
      }
    } @else {
      .m-#{$d}-#{$s} {
        @if meta.type-of($prop) == 'list' {
          @each $p in $prop {
            margin#{$p}: helpers-space($s);
          }
        } @else {
          margin#{$prop}: helpers-space($s);
        }
      }
    }

    // =====================
    // Padding
    // =====================
    @if $d == "" {
      .p-#{$s} {
        padding: helpers-space($s);
      }
    } @else {
      .p-#{$d}-#{$s} {
        @if meta.type-of($prop) == 'list' {
          @each $p in $prop {
            padding#{$p}: helpers-space($s);
          }
        } @else {
          padding#{$prop}: helpers-space($s);
        }
      }
    }

  }
}

/* DISPLAY utilities */
$display-map: (d-none: none, d-block: block, d-inline: inline, d-inline-block: inline-block, d-flex: flex, d-inline-flex: inline-flex, d-grid: grid);
@each $class, $val in $display-map {
  .#{$class} {
    display: $val;
  }
}

/* TEXT ALIGN */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

/* VISIBILITY */
.visible {
  visibility: visible;
  opacity: 1;
}

.invisible {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* FLEX helpers */
.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* FLEX DIRECTION (extend existing) */
.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

/* FLEX WRAP */
.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* ALIGN ITEMS */
.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

/* JUSTIFY CONTENT */
.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

/* GAP (uses existing space-map scale) */
@each $s in $scales {
  .gap-#{$s} {
    gap: helpers-space($s);
  }

  .gap-x-#{$s} {
    column-gap: helpers-space($s);
  }

  .gap-y-#{$s} {
    row-gap: helpers-space($s);
  }
}

/* FLEX GROW / SHRINK / BASIS */
.flex-1 {
  flex: 1 1 0;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-none {
  flex: none;
}

.grow {
  flex-grow: 1;
}

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

.shrink {
  flex-shrink: 1;
}

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

/* GRID helpers */
.grid {
  display: grid;
}

.grid-center {
  display: grid;
  place-items: center;
}

/* WIDTH / HEIGHT utilities (percent / auto) */
.w-100 {
  width: 100%;
}

.w-auto {
  width: auto;
}

.h-100 {
  height: 100%;
}

.h-auto {
  height: auto;
}

/* TEXT TRUNCATE */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* TITLES */
.title-h1 {
  font-size: 2rem;
  font-weight: 700;
}

.title-h2 {
  font-size: 1.6rem;
  font-weight: 700;
}

.title-h3 {
  font-size: 1.375rem;
  font-weight: 700;
}

.title-h4 {
  font-size: 1.125rem;
  font-weight: 700;
}

.title-h5 {
  font-size: 1rem;
  font-weight: 700;
}

.title-h6 {
  font-size: .875rem;
  font-weight: 700;
}

/* TEXT COLORS */
.brand-50 {
  color: var(--brand-50);
}

.brand-100 {
  color: var(--brand-100);
}

.brand-500 {
  color: var(--brand-500);
}

.brand-600 {
  color: var(--brand-600);
}

.brand-700 {
  color: var(--brand-700);
}

.slate-50 {
  color: var(--slate-50);
}

.slate-100 {
  color: var(--slate-100);
}

.slate-200 {
  color: var(--slate-200);
}

.slate-300 {
  color: var(--slate-300);
}

.slate-400 {
  color: var(--slate-400);
}

.slate-500 {
  color: var(--slate-500);
}

.slate-900 {
  color: var(--slate-900);
}

.color-success {
  color: var(--success);
}

.color-warning {
  color: var(--warning);
}

.color-error {
  color: var(--error);
}

.color-info {
  color: var(--info);
}

/* BACKGROUND COLORS */
.bg-brand-50 {
  background-color: var(--brand-50);
}

.bg-brand-100 {
  background-color: var(--brand-100);
}

.bg-brand-500 {
  background-color: var(--brand-500);
}

.bg-brand-600 {
  background-color: var(--brand-600);
}

.bg-brand-700 {
  background-color: var(--brand-700);
}

.bg-slate-50 {
  background-color: var(--slate-50);
}

.bg-slate-100 {
  background-color: var(--slate-100);
}

.bg-slate-200 {
  background-color: var(--slate-200);
}

.bg-slate-300 {
  background-color: var(--slate-300);
}

.bg-slate-400 {
  background-color: var(--slate-400);
}

.bg-slate-500 {
  background-color: var(--slate-500);
}

.bg-slate-900 {
  background-color: var(--slate-900);
}

.bg-success {
  background-color: var(--success);
}

.bg-warning {
  background-color: var(--warning);
}

.bg-error {
  background-color: var(--error);
}

.bg-info {
  background-color: var(--info);
}