@use "kit-deps" as *;
@use "components/typography" as *;

/* =========================
   SPACING UTILITIES
========================= */

@each $key, $value in $spaces {

  /* margin */
  .m-#{$key}  { margin:        $value !important; }
  .mt-#{$key} { margin-top:    $value !important; }
  .mr-#{$key} { margin-right:  $value !important; }
  .mb-#{$key} { margin-bottom: $value !important; }
  .ml-#{$key} { margin-left:   $value !important; }
  .mx-#{$key} {
    margin-left:  $value !important;
    margin-right: $value !important;
  }
  .my-#{$key} {
    margin-top:    $value !important;
    margin-bottom: $value !important;
  }

  /* padding */
  .p-#{$key}  { padding:        $value !important; }
  .pt-#{$key} { padding-top:    $value !important; }
  .pr-#{$key} { padding-right:  $value !important; }
  .pb-#{$key} { padding-bottom: $value !important; }
  .pl-#{$key} { padding-left:   $value !important; }
  .px-#{$key} {
    padding-left:  $value !important;
    padding-right: $value !important;
  }
  .py-#{$key} {
    padding-top:    $value !important;
    padding-bottom: $value !important;
  }

  /* gap */
  .g-#{$key} {
    gap: $value !important;
  }

  .gx-#{$key} {
    column-gap: $value !important;
  }

  .gy-#{$key} {
    row-gap: $value !important;
  }
}

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

  &.adaptive {
    @include media_down("xl") {
      flex-direction: column;
    }
  }
} 

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

.f-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.grid {
  display: grid;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.items-start {
  align-items: flex-start !important;
}

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

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

.justify-start {
  justify-content: flex-start !important;
}

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

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

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

.w-100 {
  width: 100%;
}

.w-auto {
  width: auto !important;
}

.w-fit {
  width: fit-content !important;
}

.w-200 {
  width: 200%;
}

.h-100 {
  height: 100%;
}

.min-w-0 {
  min-width: 0 !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-auto {
  overflow: auto !important;
}

$font-sizes: (
  xs: $font-size-xs,
  sm: $font-size-sm,
  md: $font-size-md,
  base: $font-size-base,
  lg: $font-size-lg,
  xl: $font-size-xl
);

@each $name, $size in $font-sizes {
  .fs-#{$name} {
    font-size: $size;
  }
}

.text-left {
  text-align: left !important;
}

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

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

.text-uppercase {
  text-transform: uppercase !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-flex {
  display: flex !important;
}

.d-grid {
  display: grid !important;
}

@include media_down("md") {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}