@use 'sass:math';
@use '../../compiled/tokens/scss/breakpoint';
@use '../../compiled/tokens/scss/size';
@use '../../mixins/fluid';
@use '../../mixins/media-query';

/// Override browser defaults. Note that this means it's very important to
/// include `[role="list"]` to prevent disruption of list navigation in Safari
/// VoiceOver, unless the content itself makes its nature obvious.
///
/// @link https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html

.o-list {
  list-style: none;
  padding-inline-start: 0;
}

/// Modifier: Inline

.o-list--inline {
  column-gap: size.$spacing-list-inline-gap;
  display: flex;
  flex-wrap: wrap;
}

/// Modifier: Columns

@for $i from 2 through 3 {
  .o-list--#{$i}-column {
    @include media-query.breakpoint-classes($from: s, $to: xl) {
      column-gap: fluid.fluid-clamp(
        size.$spacing-gap-fluid-min,
        size.$spacing-gap-fluid-max,
        breakpoint.$s,
        breakpoint.$xl
      );
      columns: #{$i};
      position: relative;

      /// Safari has some odd bugs related to CSS multi-column. Specifically:
      ///
      /// 1. Without this, the top of an item may appear in one column with the
      ///    bottom half in the following column.
      /// 2. Without this, `position: absolute` elements will impact the overall
      ///    window scroll height, even if they're invisible (as with our
      ///    `u-hidden-visually` utility).
      > * {
        break-inside: avoid; // 1
        position: relative; // 2
      }
    }
  }
}