/**
 * @layer utilities {
 *   .text-shadow {
 *     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
 *   }
 * }
 */
@utility flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@utility inline-flex-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@utility hidden-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**
  * smartphone width: 375px
  * 0.5rem <1col> gap: 0.5rem <1col> 0.5rem
  * 1col = (375px - (1.5rem = 24px)) / 2 = 175.5px
  * on laisse une petite marge 170
  *
  * 1col = (360px - 24px) / 2 = 168 px
  * on laisse une petite marge 160 px
  */

@utility grid-cols-repeat-fill-* {
  grid-template-columns: repeat(auto-fill, minmax(calc(--value(integer) * 1px), 1fr));
  grid-template-columns: repeat(auto-fill, minmax(--value([length]), 1fr));
}

@utility grid-cols-repeat-fit-* {
  grid-template-columns: repeat(auto-fit, minmax(calc(--value(integer) * 1px), 1fr));
  grid-template-columns: repeat(auto-fit, minmax(--value([length]), 1fr));
}
/* @utility grid-cols-repeat-fill-160 {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

@utility grid-cols-repeat-fit-160 {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

@utility grid-cols-repeat-fill-300 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@utility grid-cols-repeat-fill-200 {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
} */

/**
        auto: "auto",
        0: "0",
        10: "10",
        20: "20",
        30: "30",
        40: "40",
        50: "50",
*/
@utility z-toast {
  z-index: 200;
}
@utility z-dialog {
  z-index: 150;
}
@utility z-modal-overlay {
  z-index: 120;
}
@utility z-modal {
  z-index: 121;
}
@utility z-overlay {
  z-index: 100;
}
@utility z-tooltip {
  z-index: 100;
}
@utility z-context-menu {
  z-index: 90;
}