@use 'sass:map';
@use 'sass:meta';
@use 'sass:string';
@use 'sass:list';
@use '../function' as *;
@use '../config' as *;

/// Create center layout.
/// @param {string} $gap - The gap between the container and the content.
/// @param {string} $max-inline-size - The maximum width (inline-size) of the container.
/// @return {mixin} - The centered layout.
@mixin layout-center(
  $gap: m,
  $max-inline-size: config('container-inline-size', $layout)
) {
  @if map.has-key($spacers, $gap) {
    $gap: map.get($spacers, $gap);
  }

  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: $max-inline-size;
  padding-inline: $gap;
}

/// Create stack layout.
/// @param {string} $gap - The gap between the the elements.
/// @param {boolean} $inline-size - Whether it has explicit width (inline-size).
/// @param {string} $align - The horizontal alignment of the elements.
/// @param {boolean} $important - Whether it should use the !important keyword.
/// @return {mixin} - The stacked layout.
@mixin layout-stack(
  $gap: 'm',
  $inline-size: false,
  $align: none,
  $important: false
) {
  @if map.has-key($spacers, $gap) {
    $gap: map.get($spacers, $gap);
  }

  @if $align == left or $align == right {
    display: flex;
    flex-direction: column;
  }

  @if $align == left {
    align-items: flex-start;
  }

  @if $align == right {
    align-items: flex-end;
  }

  > * {
    margin-block-end: 0;
    margin-block-start: 0;

    @if $inline-size and $align == none {
      inline-size: 100%;
    }
  }

  > * + * {
    @if $important == true {
      margin-block-start: $gap !important;
    } @else {
      margin-block-start: $gap;
    }
  }
}

/// Create grid layout.
/// @param {string} $gap - The gap between the the elements.
/// @param {string} $minimum - The minimum width (inline-size) of the elements.
/// @return {mixin} - The grid layout.
@mixin layout-grid(
  $gap: 'm',
  $minimum: 12.5rem
) {
  @if meta.type-of($gap) == string and string.index($gap, ':') {
    $gap: spacer($gap);
  } @else if map.has-key($spacers, $gap) {
    $gap: map.get($spacers, $gap);
  }

  display: grid;
  gap: $gap;

  @supports (inline-size: min(#{$minimum}, 100%)) {
    & {
      grid-template-columns: repeat(auto-fit, minmax(min(#{$minimum}, 100%), 1fr));
    }
  }
}

/// Create sidebar layout.
/// @param {string} $gap - The gap between the the elements.
/// @param {string} $inline-size - The width (flex-basis) of the sidebar.
/// @return {mixin} - The sidebar layout.
@mixin layout-sidebar(
  $gap: 'm',
  $inline-size: 18.75rem
) {
  @if meta.type-of($gap) == string and string.index($gap, ':') {
    $gap: spacer($gap);
  } @else if map.has-key($spacers, $gap) {
    $gap: map.get($spacers, $gap);
  }

  display: flex;
  flex-wrap: wrap;
  gap: $gap;

  & > :first-child {
    flex-basis: $inline-size;
    flex-grow: 1;
  }

  & > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
  }
}

/// Create instinctive flex layout.
/// @param {string} $gap - The gap between the the elements.
/// @param {string} $inline-size - The width (inline size) of the elements.
/// @return {mixin} - The instinctive flex layout.
@mixin layout-flex(
  $gap: 'm',
  $inline-size: var(--inline-size)
) {
  @if map.has-key($spacers, $gap) {
    $gap: map.get($spacers, $gap);
  }

  display: flex;
  flex-wrap: wrap;
  gap: $gap;

  > * {
    flex: 1 1 $inline-size;
  }
}