/*  ==========================================================
    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;
}

.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-50 {
  width: 50%;
  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: oklch(var(--color-light)) !important;
}

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

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

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

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

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

.text-error {
  color: light-dark(
    oklch(var(--color-error-light)),
    oklch(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;
}

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

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

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

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

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

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

.font-xs {
  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-before i {
  margin-inline-end: 0.25em;
}

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

/* ! Borders */
.top-border {
  border-block-start: var(--__thickness, var(--border-thickness))
    var(--__style, var(--border-style))
    oklch(var(--__border-color, var(--color-primary))) !important;
}

.right-border {
  border-inline-end: var(--__thickness, var(--border-thickness))
    var(--__style, var(--border-style))
    oklch(var(--__border-color, var(--color-primary))) !important;
}

.bottom-border {
  border-block-end: var(--__thickness, var(--border-thickness))
    var(--__style, var(--border-style))
    oklch(var(--__border-color, var(--color-primary))) !important;
}

.left-border {
  border-inline-start: var(--__thickness, var(--border-thickness))
    var(--__style, var(--border-style))
    oklch(var(--__border-color, var(--color-primary))) !important;
}

.inline-border {
  border-inline: var(--__thickness, var(--border-thickness))
    var(--__style, var(--border-style))
    oklch(var(--__border-color, var(--color-primary))) !important;
}

.block-border {
  border-block: var(--__thickness, var(--border-thickness))
    var(--__style, var(--border-style))
    oklch(var(--__border-color, var(--color-primary))) !important;
}

.full-border {
  border: var(--__thickness, var(--border-thickness))
    var(--__style, var(--border-style))
    oklch(var(--__border-color, var(--color-primary))) !important;
}

.error-border {
  --__border-color: var(--color-error-light);
}

.gray-border {
  --__border-color: var(--color-medium-gray);
}

ul.done-list {
  list-style-type: "\2713";
  margin-inline-start: 1em;

  & li {
    padding-inline-start: 0.5em;
  }

  & ::marker {
    color: oklch(var(--color-primary));
  }
}

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

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

/* ! 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;
  }
}

.rounded-img {
  border-radius: 100dvh;
}

.pulse-shadow {
  text-shadow: 0 0 1em oklch(var(--color-primary));
  
  &.text-error {
    text-shadow: 0 0 1em oklch(var(--color-error-light));
  }
}