/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@mixin flex($dir: column, $gap: 0) {
  display: flex;
  flex-direction: $dir;
  align-items: stretch;
  
  // By default, flex items have a `min-inline-size: min-content`. This causes issues where flex items that you expect
  // to shrink (e.g. if it has a long word) will not, even if you set `overflow-wrap: break-word`.
  > * {
    min-inline-size: 0;
  }
  
  @if $dir == column {
    row-gap: $gap;
  } @else {
    column-gap: $gap;
  }
}

@mixin flex-column($gap: 0) { @include flex($dir: column, $gap: $gap); }
@mixin flex-row($gap: 0) { @include flex($dir: row, $gap: $gap); }

@mixin flex-center() {
  @include flex;
  
  align-items: center;
  justify-content: center;
}

@mixin circle($size: 2.5rem) {
  box-sizing: border-box; // Allow padding to shrink the contents, rather than expanding the circle itself
  flex: none; // Do not allow this item to shrink/grow
  block-size: $size;
  inline-size: $size;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: currentColor;
  
  @include flex-center;
}
