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

/**
 * A utility class is a class that only does one thing, but does it very well.
 * It is a single-responsibility class.
 * 
 * # What should utilities do?
 *   - Apply a single CSS property, or a concise group of related properties to create re-usable helpers
 *   - Extend design tokens to maintain a single source of truth
 *   - Abstract repeatability away from the CSS and apply it in the HTML instead
 *
 * # What shouldn’t utilities do?
 *   - Define a large group of unrelated CSS properties.
 *     For example, a utility that defined color, font-size and padding would make more sense to be a block.
 *   - Be used as a specificity hack. For example, setting all properties with !important
 *     will undoubtedly cause problems in the long-run.
 */
/* ? Display */
.d-none,
.hidden {
  display: none !important;
}

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

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

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

.grid {
  display: grid !important;
  gap: var(--gap, var(--grid-gutter));
}

@media screen and (min-width: 1240px) {
  .l\:d-block {
    display: block !important;
  }
}

/* ? Position */
.relative {
  position: relative !important;
}

.sticky {
  position: sticky !important;
  top: 0;
}

/* ? Sizes */
.h-screen {
  min-height: 100vh;
  min-block-size: 100vh;
  min-block-size: 100vb;
}

.h-dynamic-screen {
  min-height: 100dvh;
  min-block-size: 100dvh;
  min-block-size: 100dvb;
}

.max-h-screen {
  max-height: 100dvh;
  max-block-size: 100dvh;
  max-block-size: 100dvb;
}

.h-full {
  min-height: 100%;
  min-block-size: 100%;
}

.h-75 {
  height: 75vh;
  block-size: 75vh;
  block-size: 75vb;
}

.h-50 {
  height: 50vh;
  block-size: 50vh;
  block-size: 50vb;
}

.w-screen {
  min-width: 100vh;
  min-inline-size: 100vw;
  min-inline-size: 100vi;
}

.w-full {
  min-width: 100%;
  min-inline-size: 100%;
}

.w-75 {
  width: 75%;
  inline-size: 75%;
}

.w-half {
  width: 50%;
  inline-size: 50%;
}

.m-w-half {
  max-width: 50%;
  max-inline-size: 50%;
}

.w-fit {
  width: fit-content;
  inline-size: fit-content;
}

/* ? Spaces */
.p-2xs {
  padding: var(--space-2xs);
}

.pbl-xs {
  padding-block: var(--space-xs);
}

.pl-s {
  padding-left: var(--space-s);
  padding-inline-start: var(--space-s);
}

.pb-m {
  padding-bottom: var(--space-m);
  padding-block-end: var(--space-m);
}

.mt-xs {
  margin-top: var(--space-xs);
  margin-block-start: var(--space-xs);
}

.mt-s {
  margin-top: var(--space-s);
  margin-block-start: var(--space-s);
}

.mt-m {
  margin-top: var(--space-m);
  margin-block-start: var(--space-m);
}

.mt-l {
  margin-top: var(--space-l);
  margin-block-start: var(--space-l);
}

.mt-xl {
  margin-top: var(--space-xl);
  margin-block-start: var(--space-xl);
}

.mt-2xl {
  margin-top: var(--space-2xl);
  margin-block-start: var(--space-2xl);
}

.mt-3xl {
  margin-top: var(--space-3xl);
  margin-block-start: var(--space-3xl);
}

.mt-4xl {
  margin-top: var(--space-4xl);
  margin-block-start: var(--space-4xl);
}

/* ? Font family */
.ff-main {
  font-family: var(--main-font) !important;
}

.ff-accent {
  font-family: var(--accent-font) !important;
}

/* Typography */
.text-length {
  max-inline-size: var(--text-length) !important;
}

.heading-length {
    max-inline-size: var(--heading-length) !important;
    text-wrap: balance;
}

/* ? Text color & style */
.text-white {
  color: hsl(var(--color-light)) !important;
}

.text-slate {
  color: hsl(var(--color-light-gray)) !important;
}

.text-dark {
  color: hsl(var(--color-dark)) !important;
}

.text-light-gray {
  color: hsl(var(--color-light-gray)) !important;
}

.text-primary {
  color: hsl(var(--color-primary)) !important;
}

.text-success {
  color: hsl(var(--color-success-dark)) !important;
  font-weight: var(--fw-bold) !important;
}

.text-error {
  color: hsl(var(--color-error-dark)) !important;
  font-weight: var(--fw-bold) !important;
}

.length-unset {
  max-inline-size: unset !important;
}

.link-visible {
  text-decoration: underline !important;
}

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

.italic {
    font-style: italic;
}

.underline {
  text-decoration: underline;
}

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

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

p a {
  text-decoration: underline !important;
}

/* ? Text sizes */
.font-extreme {
  font-size: calc(var(--step-ultra) * 3) !important;
}

.font-ultra {
  font-size: var(--step-ultra) !important;
}

.step-4 {
  font-size: var(--step-4) !important;
}

.step-3 {
  font-size: var(--step-3) !important;
}

.step-2 {
  font-size: var(--step-2) !important;
}

.step-1 {
  font-size: var(--step-1) !important;
}

.step-0 {
  font-size: var(--step-0) !important;
}

.step--1 {
  font-size: var(--step--1) !important;
}

.step--2 {
  font-size: var(--step--2) !important;
}

/* ? Weights */
.light {
  font-weight: var(--fw-light) !important;
}

.regular {
  font-weight: var(--fw-regular) !important;
}

.medium {
  font-weight: var(--fw-medium) !important;
}

.bold {
  font-weight: var(--fw-bold) !important;
}

/* ? Icons */
.has-icon svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
}
      
.has-icon-before svg {
  margin-inline-end: 0.25em;
}

.has-icon-after svg {
  margin-inline-start: 0.25em;
}

img.cover {
  block-size: 100%;
  object-fit: cover;
}

.radius {
  border-radius: var(--radius, var(--border-radius)) !important;
}

/* ! Remove useless vertical spacing on texts */
.trim-start {
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
  /* ? Short version:  */
  text-box: trim-start cap alphabetic;
}

/* ! Remove useless vertical spacing on texts */
.trim-both {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  /* ? Short version:  */
  text-box: trim-both cap alphabetic;
}

.styled-list {
  margin-inline-start: 1em;
  list-style-type: disc;

  & > li + li {
    margin-block-start: 0.25em;
  }
}