/* Micro grid utilities for admin layouts */

/* Gaps */
:root {
  --gap-1: 0.25rem;
  --gap-2: 0.5rem;
  --gap-3: 1rem;
  --gap-4: 1.5rem;
  --gap-5: 2rem;
}

/* GRID (recommended) */
.grid {
  display: grid;
  gap: var(--gap, 1rem);
}

.gap-1 { --gap: var(--gap-1); }
.gap-2 { --gap: var(--gap-2); }
.gap-3 { --gap: var(--gap-3); }
.gap-4 { --gap: var(--gap-4); }
.gap-5 { --gap: var(--gap-5); }

.grid-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Auto-fill variant based on minimum column width */
.grid-auto-200 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid-auto-250 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid-auto-300 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* Responsive modifiers */
@media (min-width: 640px) {
  .sm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Make children stretch nicely */
.grid > * { min-width: 0; }

/* FLEX (optional alternative) */
.flex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 1rem);
}

.cols-2 > * {
  flex: 0 1 calc((100% - 1 * var(--gap, 1rem)) / 2);
}
.cols-3 > * {
  flex: 0 1 calc((100% - 2 * var(--gap, 1rem)) / 3);
}
.cols-4 > * {
  flex: 0 1 calc((100% - 3 * var(--gap, 1rem)) / 4);
}

/* Ensure nested form elements don’t overflow */
.flex-grid > * { min-width: 0; }

/** @todo move this to a twig specific css file **/
.ui-dialog.media-library-widget-modal {
  height: 92% !important;
  top: 5px !important;
}
.ui-dialog.media-library-widget-modal #drupal-modal {
  height: 92% !important;
}