// ====================================================================
// UTILITIES
//
//   Layout
//
//     ux-flexButtonRow        ... simple horizontal spacing of * > childrens
//
//
//   Sizes / Spacings
//
//     ux-maxWidth300/360
//
//
//   Typography
//
//     ux-text-sm/md/lg        ... responsive font sizes
//
// ====================================================================

@use "sass:list";

/* @define utilities */

// --------------------------------------------------------------------
// MIN/MAX WIDTH
//
//   Useful to align *block* and *inline-block* elements:
//
//     - Use on buttons so they are not too small when label is small.
//     - Use on centered buttons stacked vertically so they are aligned.
//
//   Example:
//
//     <div class="ux-maxWidth300 mx-auto">
//
// --------------------------------------------------------------------
$maxWidthItems: ("300" 300px, "360" 360px);
@each $item in $maxWidthItems {
  $key: list.nth($item, 1);
  $val: list.nth($item, 2);
  //////////////////////////////////////////////////////////////////
  // Output:
  //   .ux-maxWidth300 {
  //     max-width: 300px;
  //   }
  //////////////////////////////////////////////////////////////////
  .ux-maxWidth#{$key} {
    max-width: $val;
  }
}

$minWidthItems: ("100" 100px, "200" 200px);
@each $item in $minWidthItems {
  $key: list.nth($item, 1);
  $val: list.nth($item, 2);
  //////////////////////////////////////////////////////////////////
  // Output:
  //   .ux-minWidth300 {
  //     min-width: 300px;
  //   }
  //////////////////////////////////////////////////////////////////
  .ux-minWidth#{$key} {
    min-width: $val;
  }
}

// --------------------------------------------------------------------
// FLEX / BUTTON ROW
//
//   Simple spacer for button rows
//
// --------------------------------------------------------------------
.ux-flexButtonRow {
  $gutter: 0.5rem;
  @apply flex flex-wrap items-center;
  gap: $gutter;
}

// --------------------------------------------------------------------
// RESPONSIVE FONT SIZES
//
//   sm/md/lg/etc  should roughly match Tailwind's text-sm/md/etc
//                 for desktop view.
// --------------------------------------------------------------------
.ux-text-sm {
  font-size: min(11px + 0.33vw, 14px);
}
.ux-text-md {
  font-size: min(12px + 0.41vw, 16px);
}
.ux-text-lg {
  font-size: min(14px + 0.4vw, 18px);
}
.ux-text-xl {
  font-size: min(16px + 0.4vw, 20px);
}
.ux-text-2xl {
  font-size: min(20px + 1vw, 30px);
}
