/*
 * This file contains utility classes for the back-office UI.
 * Please only add utility classes here.
 * See https://designsystem.digital.gov/utilities/
*/

/* Flexbox */
.flex {
  display: flex;
  &.wrap { flex-wrap: wrap; }
  &.space-between { justify-content: space-between; }
  &.items-start { align-items: flex-start; }
  &.items-center { align-items: center; }

  /* Responsive flex direction */
  @media (orientation: portrait) {
    &.portrait-row { flex-direction: row; }
    &.portrait-column { flex-direction: column; }
  }
  @media (orientation: landscape) {
    &.landscape-row { flex-direction: row; }
    &.landscape-column { flex-direction: column; }
  }
}

/* Grid */
.grid {
  display: grid;
  gap: var(--gap, 1rem);
  &.place-content-center {
    place-content: center;
  }
  /* Create an automatically responsive grid with minimum item size */
  &.auto {
    grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size, 16rem), 1fr));
  }
}

/* Flex and grid gap */
.gap-0 { gap: 0; }
.gap-0-25 { gap: 0.25rem; }
.gap-0-5 { gap: 0.5rem; }
.gap-0-75 { gap: 0.75rem; }
.gap-1 { gap: 1rem; }
.gap-1-5 { gap: 1.5rem; }
.gap-2 { gap: 2rem; }
.gap-2-5 { gap: 2.5rem; }
.gap-3 { gap: 3rem; }
.gap-4 { gap: 4rem; }
.gap-5 { gap: 5rem; }
.gap-6 { gap: 6rem; }

.row-gap-0 { row-gap: 0; }
.row-gap-0-25 { row-gap: 0.25rem; }
.row-gap-0-5 { row-gap: 0.5rem; }
.row-gap-0-75 { row-gap: 0.75rem; }
.row-gap-1 { row-gap: 1rem; }
.row-gap-1-5 { row-gap: 1.5rem; }
.row-gap-2 { row-gap: 2rem; }
.row-gap-2-5 { row-gap: 2.5rem; }
.row-gap-3 { row-gap: 3rem; }
.row-gap-4 { row-gap: 4rem; }
.row-gap-5 { row-gap: 5rem; }
.row-gap-6 { row-gap: 6rem; }

.column-gap-0 { column-gap: 0; }
.column-gap-0-25 { column-gap: 0.25rem; }
.column-gap-0-5 { column-gap: 0.5rem; }
.column-gap-0-75 { column-gap: 0.75rem; }
.column-gap-1 { column-gap: 1rem; }
.column-gap-1-5 { column-gap: 1.5rem; }
.column-gap-2 { column-gap: 2rem; }
.column-gap-2-5 { column-gap: 2.5rem; }
.column-gap-3 { column-gap: 3rem; }
.column-gap-4 { column-gap: 4rem; }
.column-gap-5 { column-gap: 5rem; }
.column-gap-6 { column-gap: 6rem; }

/* Content-based width */
.width-min-content { width: min-content };
.width-max-content { width: max-content };