@use '../../style/theming';

// MARK: Variables
$dbx-flex-group-padding: 8px;
$dbx-flex-group-columns-count: 6;

// MARK: Mixin
@mixin core() {
  /// @dbx-utility flex-bar
  /// @intent horizontal action bar — flex row that scrolls horizontally before wrapping
  /// @role flex
  /// @see-also dbx-flex-center, dbx-flex-fill, card-horizontal
  .dbx-flex-bar {
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;

    // `overflow-x: auto` makes this a scroll container, and a `box-shadow` never
    // contributes to the scrollable overflow region — so an elevated child's shadow is
    // CLIPPED at the edge rather than scrolled to. With `align-items: center` and no
    // fixed height the bar hugs its tallest child exactly, putting the clip edge right on
    // a raised button's border box. Reserve the shadow's reach as vertical padding so it
    // lives INSIDE the padding box (the same fix `.dbx-card-horizontal` uses for its
    // poking tab). Block axis only: `padding-inline` would push the first button off the
    // bar's leading edge, and the horizontal cut is not what reads as broken.
    padding-block: var(--dbx-shadow-gutter, 4px);

    // Constrain touch targets to prevent overflow scrollbar (48px default > 40px button)
    --mat-icon-button-touch-target-size: 40px;
    --mat-button-text-touch-target-size: 40px;
    --mat-button-filled-touch-target-size: 40px;
    --mat-button-outlined-touch-target-size: 40px;
    --mat-button-tonal-touch-target-size: 40px;
    --mat-button-protected-touch-target-size: 40px;
    --mat-fab-touch-target-size: 40px;
    --mat-fab-small-touch-target-size: 40px;
  }

  /// @dbx-utility flex-center
  /// @intent center children both axes via flex
  /// @role flex
  /// @see-also dbx-flex-bar, dbx-flex-column
  .dbx-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /// @dbx-utility flex-column
  /// @intent vertical flex stack — children laid out top-to-bottom
  /// @role flex
  /// @see-also dbx-flex-bar
  .dbx-flex-column {
    display: flex;
    flex-direction: column;
  }

  /// @dbx-utility flex-fill
  /// @intent fill remaining space inside a flex container
  /// @role flex
  /// @see-also dbx-flex-fill-0
  /// @anti-use Use dbx-flex-fill-0 when the fill child must also truncate or otherwise shrink below its intrinsic width.
  .dbx-flex-fill {
    flex: 1;
  }

  /// @dbx-utility flex-fill-0
  /// @intent fill remaining flex space and allow the child to truncate (`min-width: 0` overrides the default flex-item `min-width: auto`)
  /// @role flex
  /// @see-also dbx-flex-fill, dbx-text-truncate
  // `min-width: 0` lets the flex item shrink below its content's intrinsic
  // width — required for child truncation (e.g. `.dbx-text-truncate`) to
  // actually clip inside the fill region.
  .dbx-flex-fill-0 {
    flex: 1;
    min-width: 0;
  }

  /// @dbx-utility flex-group
  /// @intent responsive flex grid — children opt into widths via .dbx-flex-1 ... .dbx-flex-6
  /// @role flex
  /// @see-also dbx-flex-bar
  .dbx-flex-group {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: stretch;
    box-sizing: border-box;

    margin: 0 #{-$dbx-flex-group-padding} #{-$dbx-flex-group-padding} 0;

    @for $i from 1 through 6 {
      .dbx-flex-#{$i} {
        box-sizing: border-box;
        padding: 0 $dbx-flex-group-padding $dbx-flex-group-padding 0;
        flex: 1 1 calc((100% * (#{$i}/#{$dbx-flex-group-columns-count})));
        max-width: calc((100% * (#{$i}/#{$dbx-flex-group-columns-count})));
      }
    }
  }

  .dbx-flex-group-relative > .dbx-flex-group,
  .dbx-flex-group.dbx-flex-group-relative {
    @for $i from 1 through 6 {
      .dbx-flex-#{$i} {
        max-width: unset;
      }
    }
  }

  .dbx-flex-group-small > .dbx-flex-group,
  .dbx-flex-group.dbx-flex-group-small {
    @for $i from 1 through 5 {
      .dbx-flex-#{$i} {
        box-sizing: border-box;
        flex: 1 1 calc(100%);
        max-width: 100%;
      }
    }
  }

  .dbx-flex-group-break-to-column.dbx-flex-group-small > .dbx-flex-group,
  .dbx-flex-group.dbx-flex-group-break-to-column.dbx-flex-group-small {
    flex-wrap: nowrap; // wrapping unnecessary
    flex-direction: column;
  }
}

@mixin theme($theme-config) {
}