/*
 * 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; }
  &.items-end { align-items: flex-end; }
  &.justify-end { justify-content: flex-end; }

  /* Flex direction */
  &.direction-row { flex-direction: row; }
  &.direction-row-reverse { flex-direction: row-reverse; }
  &.direction-column { flex-direction: column; }

  /* Responsive flex direction */
  @media (width <= 50rem) {
    &.direction-row-small {
      flex-direction: row;
    }
    &.direction-column-small {
      flex-direction: column;
    }
  }
  @media (width > 50rem) {
    &.direction-row-large {
      flex-direction: row;
    }
    &.direction-column-large {
      flex-direction: column;
    }
  }

  /* NOTE: Portrait-based and landscape-based flex directions are deprecated */
  @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; }
  }

  .grow-1 { flex-grow: 1; }
}

/* 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));
  }
  &.auto-flow-40 {
    grid-template-columns: repeat(2, 40rem);
    grid-auto-flow: row dense;
  }
}

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


/* Create a simple non-grid column layout that fills down and then across. */
.auto-columns {
  columns: var(--auto-grid-min-size, 16rem) auto;
}

/* Width */
.max-w-8 { max-width: 8rem; }
.max-w-12 { max-width: 12rem; }
.max-w-16 { max-width: 16rem; }
.max-w-20 { max-width: 20rem; }
.max-w-24 { max-width: 24rem; }
.max-w-28 { max-width: 28rem; }
.max-w-32 { max-width: 32rem; }
.max-w-40 { max-width: 40rem; }
.max-w-44 { max-width: 44rem; }
.max-w-48 { max-width: 48rem; }
.max-w-56 { max-width: 56rem; }
.max-w-64 { max-width: 64rem; }
.max-w-72 { max-width: 72rem; }
.max-w-80 { max-width: 80rem; }
.width-min-content { width: min-content; }
.width-max-content { width: max-content; }

/* Padding */
.padding-inline-0 { padding-inline: 0rem; }
.padding-inline-0-25 { padding-inline: 0.25rem; }
.padding-inline-0-5 { padding-inline: 0.5rem; }
.padding-inline-0-75 { padding-inline: 0.75rem; }
.padding-inline-1 { padding-inline: 1rem; }
.padding-inline-1-5 { padding-inline: 1.5rem; }
.padding-inline-2 { padding-inline: 2rem; }
.padding-inline-2-5 { padding-inline: 2.5rem; }
.padding-inline-3 { padding-inline: 3rem; }
.padding-inline-4 { padding-inline: 4rem; }
.padding-block-0 { padding-block: 0rem; }
.padding-block-0-25 { padding-block: 0.25rem; }
.padding-block-0-5 { padding-block: 0.5rem; }
.padding-block-0-75 { padding-block: 0.75rem; }
.padding-block-1 { padding-block: 1rem; }
.padding-block-1-5 { padding-block: 1.5rem; }
.padding-block-2 { padding-block: 2rem; }
.padding-block-2-5 { padding-block: 2.5rem; }
.padding-block-3 { padding-block: 3rem; }
.padding-block-4 { padding-block: 4rem; }
.padding-block-end-0 { padding-block-end: 0rem; }
.padding-block-end-0-25 { padding-block-end: 0.25rem; }
.padding-block-end-0-5 { padding-block-end: 0.5rem; }
.padding-block-end-0-75 { padding-block-end: 0.75rem; }
.padding-block-end-1 { padding-block-end: 1rem; }
.padding-block-end-1-5 { padding-block-end: 1.5rem; }
.padding-block-end-2 { padding-block-end: 2rem; }
.padding-block-end-2-5 { padding-block-end: 2.5rem; }
.padding-block-end-3 { padding-block-end: 3rem; }
.padding-block-end-4 { padding-block-end: 4rem; }

/* Margin */
.margin-block-end-10 {
  margin-block-end: 10rem;
}

/* Font sizes */
.fs-9 { font-size: var(--step-9); }
.fs-8 { font-size: var(--step-8); }
.fs-7 { font-size: var(--step-7); }
.fs-6 { font-size: var(--step-6); }
.fs-5 { font-size: var(--step-5); }
.fs-4 { font-size: var(--step-4); }
.fs-3 { font-size: var(--step-3); }
.fs-2 { font-size: var(--step-2); }
.fs-1 { font-size: var(--step-1); }

.fs-9,
.fs-8,
.fs-7,
.fs-6 {
  line-height: 1.1;
}

/* Inline text alignment */
.text-align-center {
  text-align: center;
}