// This file contains helper utilities for setting (typically) one style property
// Please keep this sorted alphabetically by util type, then smallest to largest
// within utility.
//
// These typically expand the builtin set provided by uswds, so use
// those first, then if needed add one following their naming conventions.

@use "variables" as *;

// ==== background color ==== //

.bg-container {
  background-color: $background;
}

// ==== flex ==== //

.flex-0 {
  flex: 0 0;
}

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

// ==== font size ==== //
// https://designsystem.digital.gov/utilities/font-size-and-family/ for t-shirt sizing map

.font-size-xs {
  font-size: 1rem;
}

.font-size-md {
  font-size: 1.25rem;
}

.font-size-lg {
  font-size: 1.5rem;
}

// ==== gap ==== //

.gap-05 {
  gap: 0.25rem;
}

.gap-1 {
  gap: 0.5rem;
}

.gap-105 {
  gap: 0.75rem;
}

.gap-5 {
  gap: 2.5rem;
}

// ==== gutter ==== //

.gutter-3:nth-child(1) {
  margin-top: inherit;
}
.gutter-3 {
  margin-top: 1.5rem;
}

// ==== height ==== //

.height-half {
  height: 50vh;
}

// ==== isolation ==== //

.isolate {
  isolation: isolate;
}

// ==== left ==== //

.left-12 {
  left: 6rem;
}

// ==== line height ==== //

.line-height-13 {
  line-height: 1.3;
}

// ==== margin ==== //

.margin-right-1025 {
  margin-right: 0.625rem;
}

// ==== max[h/w] ==== //

.maxh-38 {
  max-height: 19rem;
}

.maxh-6205 {
  max-height: 31.25rem;
}

.maxw7 {
  max-width: 68%;
}

// ==== min[h/w] ==== //

.minh-30 {
  min-height: 15rem;
}

.minw-1605 {
  min-width: 8.25rem;
}

.minw-1705 {
  min-width: 8.75rem;
}

.minw-20 {
  min-width: 10rem;
}

.minw-23 {
  min-width: 11.5rem;
}

.minw-2305 {
  min-width: 11.75rem;
}

.minw-28 {
  min-width: 14rem;
}

.minw-40 {
  min-width: 20rem;
}

// ==== padding ==== //

.padding-top-1-25 {
  padding-top: 0.625rem;
}

// ==== top ==== //

.top-550 {
  top: 2.75rem;
}

.top-3950 {
  top: 19.75rem;
}

// ==== width ==== //

.width-11075 {
  width: 5.875rem;
}

.width-20 {
  width: 10rem;
}

.width-28 {
  width: 14rem;
}

.width-38 {
  width: 19rem;
}

.width-40 {
  width: 20rem;
}

.width-4305 {
  width: 21.75rem;
}

.width-21-9375 {
  width: 21.9375rem;
}

.width-62 {
  width: 31rem;
}

.width-20p {
  width: 20%;
}
.width-10p {
  width: 10%;
}

// ==== visibility-hidden ==== //

.visibility-hidden {
  visibility: hidden;
}
