//
// Copyright IBM Corp. 2019, 2025
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use '@carbon/styles/scss/components/structured-list' as *;
@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;

// Overridden column spanning
@mixin structured-list-colspan($colNumber) {
  ::slotted(*:nth-child(#{$colNumber})) {
    --cols: var(--col-span-#{$colNumber}, 2);
    --width: calc((var(--cols) / var(--max-cols)) * 100%);

    @include breakpoint-down(md) {
      //Adjusting the mobile column width calculation. We're subtracting 5% of its width in mobile so that the next column 'peeks out' from the right side of the screen, indicating there's more scrollable content.
      --width: calc(
        (var(--cols) / var(--max-cols)) * 100% - var(--mobile-peek, 5%)
      );
    }

    flex: 0 0 var(--width);

    max-inline-size: var(--width);
  }

  @include breakpoint(md) {
    ::slotted(*:nth-child(#{$colNumber})) {
      --cols: var(
        --col-span-md-#{$colNumber},
        var(--col-span-#{$colNumber}, 3)
      );
      --width: calc((var(--cols) / var(--max-cols)) * 100%);

      flex: 0 0 var(--width);

      max-inline-size: var(--width);
    }
  }

  @include breakpoint(lg) {
    ::slotted(*:nth-child(#{$colNumber})) {
      --cols: var(
        --col-span-lg-#{$colNumber},
        var(
          --col-span-md-#{$colNumber},
          var(--col-span-#{$colNumber}, var(--default-cols, 2))
        )
      );
      --width: calc((var(--cols) / var(--max-cols)) * 100%);

      flex: 0 0 var(--width);

      max-inline-size: var(--width);
    }
  }
}

@function extended-box-shadow($begin: 1, $end: 20) {
  $value: null;

  @for $i from $begin through $end {
    $new-value: ($i * 50vw) 0 $layer-accent-01;
    $value: append($value, $new-value);

    @if $i != $end {
      $value: append($value, #{','});
    }
  }

  @return $value;
}

@mixin structured-list {
  // Inherited Table Styles
  .#{$prefix}--structured-list-header-row,
  :host(#{$c4d-prefix}-structured-list-header-row) {
    border-block-end: none;
  }

  .#{$prefix}--structured-list-header-cell,
  :host(#{$c4d-prefix}-structured-list-header-cell) {
    @extend .#{$prefix}--structured-list-th;

    border-block-end: 1px solid $layer-accent-01;
    padding-block-end: $spacing-05;

    padding-inline: $spacing-05;
  }

  .#{$prefix}--structured-list-group,
  :host(#{$c4d-prefix}-structured-list-group) {
    display: contents;

    tr {
      @extend .#{$prefix}--structured-list-row;

      background-color: $layer-accent-01;

      border-block-end: 1px solid $layer-accent-01;
      color: $text-primary;

      @include breakpoint-down(lg) {
        box-shadow: extended-box-shadow();
      }
    }

    th {
      @extend .#{$prefix}--structured-list-td;

      color: $text-primary;
      font-weight: bold;

      max-inline-size: 100%;
      padding-inline: $spacing-05;
      text-align: start;
    }
  }

  .#{$prefix}--structured-list-cell,
  :host(#{$c4d-prefix}-structured-list-cell) {
    @extend .#{$prefix}--structured-list-td;

    border-block-end: 1px solid $layer-accent-01;

    padding-inline: $spacing-05;
  }

  // Default Carbon Rows/Columns
  .#{$prefix}--structured-list-all-rows,
  :host(#{$c4d-prefix}-structured-list-header-row),
  :host(#{$c4d-prefix}-structured-list-row),
  :host(#{$c4d-prefix}-structured-list-group) tr {
    --max-cols: 4;

    @include breakpoint(sm) {
      @include make-row();
      --max-cols: 5;

      flex-wrap: nowrap;
    }

    @include breakpoint(md) {
      --max-cols: 8;
    }

    @include breakpoint(lg) {
      --max-cols: 16;
    }

    @for $i from 1 through 8 {
      @include structured-list-colspan(#{$i});
    }

    ::slotted(*:last-child) {
      flex-grow: 1;
      max-inline-size: none;
    }
  }

  .#{$prefix}--structured-list-all-cells,
  :host(#{$c4d-prefix}-structured-list-header-cell),
  :host(#{$c4d-prefix}-structured-list-cell),
  :host(#{$c4d-prefix}-structured-list-group) td {
    block-size: auto;
    scroll-snap-align: start;

    @include breakpoint(sm) {
      @include make-col(2, 4);
    }

    @include breakpoint(md) {
      @include make-col(2, 8);
    }

    @include breakpoint(lg) {
      @include make-col(2, 16);
    }
  }

  // Internal components
  .#{$c4d-prefix}--structured-list,
  :host(#{$c4d-prefix}-structured-list) {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    margin-inline: -#{$spacing-05};
    overflow-x: auto;
    padding-inline: $spacing-05;
    scroll-snap-type: x;

    .#{$prefix}--structured-list {
      flex: 0 0 1;
      margin: 0;
    }
    @media screen and (prefers-reduced-motion: reduce) {
      .overflow-indicator {
        position: sticky;
        z-index: 2;
        flex: 0 0 1;
        inline-size: 0;
        opacity: 0;
        transition: none;

        &::before {
          position: absolute;
          block-size: 100%;
          content: '';
          inline-size: $spacing-06;
          inset-block-start: 0;
        }

        &.left {
          inset-inline-start: 0;
          transform: translateX(-$spacing-05);

          &::before {
            background-image: linear-gradient(90deg, $layer-01, transparent);
            inset-inline-start: 0;
          }
        }

        &.right {
          inset-inline-start: calc(100%);
          transform: translateX($spacing-05);

          &::before {
            background-image: linear-gradient(90deg, transparent, $layer-01);
            inset-inline-end: 0;
          }
        }
      }
    }

    .overflow-indicator {
      position: sticky;
      z-index: 2;
      flex: 0 0 1;
      inline-size: 0;
      opacity: 0;
      transition: opacity 0.25s ease-in-out;

      &::before {
        position: absolute;
        block-size: 100%;
        content: '';
        inline-size: $spacing-06;
        inset-block-start: 0;
      }

      &.left {
        inset-inline-start: 0;
        transform: translateX(-$spacing-05);

        &::before {
          background-image: linear-gradient(90deg, $layer-01, transparent);
          inset-inline-start: 0;
        }
      }

      &.right {
        inset-inline-start: calc(100%);
        transform: translateX($spacing-05);

        &::before {
          background-image: linear-gradient(90deg, transparent, $layer-01);
          inset-inline-end: 0;
        }
      }
    }

    &.overflowing-left {
      .overflow-indicator.left {
        opacity: 1;
      }
    }

    &.overflowing-right {
      .overflow-indicator.right {
        opacity: 1;
      }
    }
  }

  .#{$prefix}--structured-list-cell-tooltip-icon,
  :host(#{$c4d-prefix}-structured-list-cell) #{$prefix}-tooltip-icon {
    display: inline-flex;
    vertical-align: sub;

    svg {
      flex-shrink: 0;
      fill: $icon-secondary;
    }
  }

  .#{$prefix}--structured-list-cell[icon],
  :host(#{$c4d-prefix}-structured-list-cell[icon]) {
    &[icon='checkmark'] svg {
      color: $support-success;
    }

    svg {
      margin-inline-end: $spacing-03;
    }
  }

  .#{$prefix}--structured-list-cell-icon-text-container {
    display: flex;
  }
}