/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

/* Helpers that define anything with the CSS flexbox or CSS grid. */

/* Flexbox helpers */

// FLEX CONTAINER (child helpers at end of file)
// new flex classes, these do not use !important
.flex {
  display: flex;

  // direction
  &.row-wrap {
    flex-flow: row wrap;
  }

  // alignment
  &.space-between {
    justify-content: space-between;
  }

  &.row-gap-8 {
    row-gap: $spacing-8;
  }

  &.column-gap-16 {
    column-gap: $spacing-16;
  }
}

// avoid !important flex classes below
.is-flex {
  display: flex !important;
}

.is-flex-column {
  display: flex;
  flex-direction: column;
}

.is-flex-row {
  display: flex;
  flex-direction: row;
}

.gap-16 {
  gap: $spacing-16;
}

.gap-24 {
  gap: $spacing-24;
}

.gap-36 {
  gap: $spacing-36;
}

// Alignment of the items
.is-flex-v-centered {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
}

.is-flex-center {
  display: flex;
  align-items: center;
}

.is-flex-align-start {
  display: flex;
  align-items: flex-start;
}

.is-flex-align-baseline {
  display: flex;
  align-items: baseline;
}

// Justify-content
.is-centered {
  justify-content: center;
}

.is-flex-end {
  display: flex !important;
  justify-content: flex-end;
}

.is-flex-start {
  display: flex !important;
  justify-content: flex-start;

  &.has-gap {
    gap: $spacing-16;
  }
}

.is-flex-between,
.is-grouped-split {
  display: flex;
  justify-content: space-between !important;
}

// Flex basis, grow, stretch and flow
.is-flex-full {
  flex-basis: 100%;
}

.is-flex-grow-1 {
  flex-grow: 1;
  &.basis-0 {
    flex-basis: 0;
  }
}

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

.is-no-flex-grow {
  flex-grow: 0 !important;
}

.is-flex-wrap {
  flex-flow: row wrap;
}

.is-flex-half {
  flex: 50%;
}

/* Flex Responsive */
@media screen and (min-width: 769px), print {
  .is-flex-v-centered-tablet {
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
  }
}

@include until($mobile) {
  .is-flex-row {
    flex-flow: column wrap;
  }
}

/* CSS GRID */
.is-grid {
  display: grid;
}

.grid-2-columns {
  grid-template-columns: 2fr 2fr;

  @include until($mobile) {
    grid-template-columns: 1fr;
  }
}

.grid-gap-2 {
  grid-gap: 2rem;
}

.is-grid-3-columns {
  grid-template-columns: repeat(3, 1fr);
}

.is-medium-height {
  height: 125px;
}

.is-grid-column-span-3 {
  grid-column-end: span 3;
}

.grid-align-items-start {
  align-items: start;
}

// CHILD ELEMENT HELPERS

.align-self-center {
  align-self: center;
}

.align-self-end {
  align-self: end;
}