// The following mixins, are helpers that Mercury expose publicly.
// Instead of bundling the actual stylesheets, these mixins have been
// copied by hand, since scss-bundle does not works with @use, which is
// the actual way for including sass modules, that Mercury is using.

// - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// copied from "src/base/components/_grid.scss"
// - - - - - - - - - - - - - - - - - - - - - - - - - - - -

$cellPaddingBlock: 6.5px;
$cellPaddingInline: var(--spacing-padding-l);

@mixin grid-cell-remove-padding() {
  padding-block: 0;
  padding-inline: 0;
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// copied from "src/base/_common.scss"
// - - - - - - - - - - - - - - - - - - - - - - - - - - - -

@mixin focus-visible() {
  outline: var(--border-width-focus) solid var(--color-border-primary-focused);
  outline-offset: -2px;
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// copied from "src/base/_control.scss"
// - - - - - - - - - - - - - - - - - - - - - - - - - - - -

@mixin control-remove-border() {
  // This resets the border applied
  // (for controls inside the property grid)
  --control-border-width: 0;
  --control-border-color: transparent;
  --control-border-radius: 0;
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// copied from "src/components/tabular-grid/_helpers.scss"
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

@mixin cell-node-type-element() {
  @include control-remove-border();
  @include grid-cell-remove-padding();
  --control-padding-inline: #{$cellPaddingInline};
  --control-padding-block: #{$cellPaddingBlock};
  // to stretch the control
  display: grid;
  align-items: stretch;
  justify-content: stretch;
}

@mixin cell-node-type-element--hover() {
  outline: 1px solid var(--color-border-primary-focused);
  outline-offset: calc(var(--size-2) * -1);
}

// cell alignment block
@mixin cell-alignment-block-start() {
  align-items: start;
}

@mixin cell-alignment-block-center() {
  align-items: center;
}

@mixin cell-alignment-block-end() {
  align-items: end;
}

// cell alignment inline
@mixin cell-alignment-inline-start() {
  justify-content: start;
}

@mixin cell-alignment-inline-center() {
  justify-content: center;
}

@mixin cell-alignment-inline-end() {
  justify-content: center;
}

// cell with ellipsis
@mixin cell-ellipsis() {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/// @group Grid
/// @param {String} $tabular-grid-selector [".tabular-grid"] -
/// @param {("text" | "element")} $tabular-grid-cell-node-type ["text"] -
/// @param {("start" | "center" | "end")} $tabular-grid-cell-block-alignment ["start"] -
/// @param {("start" | "center" | "end")} $tabular-grid-cell-inline-alignment ["start"] -
/// @param {Boolean} $tabular-grid-cell-apply-ellipsis [false] -
/// @param {List} $tabular-grid-affected-columns-nth-list [null] -

@mixin tabular-grid-cell-layout(
  $tabular-grid-selector: ".tabular-grid",
  $tabular-grid-cell-node-type: "text",
  $tabular-grid-cell-block-alignment: "start",
  $tabular-grid-cell-inline-alignment: "start",
  $tabular-grid-cell-apply-ellipsis: false,
  $tabular-grid-cell-min-inline-size: 0,
  $tabular-grid-affected-columns-nth-list: null
) {
  $selector: null;
  $cell-tag-name: "ch-tabular-grid-cell";
  $where-pseudo-class: ":is";
  $where-selector: ();
  // the selector varies depending on wether $tabular-grid-affected-columns-nth-list is null or not.
  // if it is null, all cells should be affected.
  @if $tabular-grid-affected-columns-nth-list != null {
    @each $nth in $tabular-grid-affected-columns-nth-list {
      $where-selector: append($where-selector, ":nth-child(#{$nth})", comma);
    }
    $selector: #{$tabular-grid-selector}
      #{$cell-tag-name}#{$where-pseudo-class
      }(#{$where-selector});
  } @else {
    // if no $editable-columns-nth was provided, apply to all cells
    $selector: #{$tabular-grid-selector} #{$cell-tag-name};
  }
  #{$selector} {
    // node type
    @if $tabular-grid-cell-node-type == "element" {
      @include cell-node-type-element();
    }
    &:hover {
      @if $tabular-grid-cell-node-type == "element" {
        @include cell-node-type-element--hover();
      }
    }
    // block alignment (only should apply if $tabular-grid-cell-node-type == "text"
    @if $tabular-grid-cell-node-type ==
      "text" and
      $tabular-grid-cell-block-alignment ==
      "start"
    {
      @include cell-alignment-block-start();
    }
    @if $tabular-grid-cell-node-type ==
      "text" and
      $tabular-grid-cell-block-alignment ==
      "center"
    {
      @include cell-alignment-block-center();
    }
    @if $tabular-grid-cell-node-type ==
      "text" and
      $tabular-grid-cell-block-alignment ==
      "end"
    {
      @include cell-alignment-block-end();
    }
    // inline alignment
    @if $tabular-grid-cell-node-type ==
      "text" and
      $tabular-grid-cell-inline-alignment ==
      "start"
    {
      @include cell-alignment-inline-start();
    }
    @if $tabular-grid-cell-node-type ==
      "text" and
      $tabular-grid-cell-inline-alignment ==
      "center"
    {
      @include cell-alignment-inline-center();
    }
    @if $tabular-grid-cell-node-type ==
      "text" and
      $tabular-grid-cell-inline-alignment ==
      "end"
    {
      @include cell-alignment-inline-end();
    }
    // ellipsis (only should apply if $tabular-grid-cell-node-type == "text"
    @if $tabular-grid-cell-node-type ==
      "text" and
      $tabular-grid-cell-apply-ellipsis ==
      true
    {
      @include cell-ellipsis();
    }
    @if $tabular-grid-cell-min-inline-size != "auto" {
      min-inline-size: $tabular-grid-cell-min-inline-size;
    }
  }
}
