@use "../../../../variables/index" as *;


// Base grid + column span utilities
.responsive-grid-table {
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 background: inherit;

 &-wrapper--striped{
  .responsive-grid-table:nth-child(even) {
    background: $component-background-odd;
  }
 }

 &__header{
  box-shadow: inset 0 -1px 0 var(--c8y-component-border-color, var(--c8y-root-component-border-color));

  > [class^="col-"],
  > [class*=" col-"] {
      padding-top: calc($size-base + $size-10);
      padding-bottom: calc($size-base + $size-10);
      color: var(--c8y-component-form-label-color, var(--c8y-form-label-color));
      vertical-align: bottom;
      text-transform: uppercase;
      font-size: var(--c8y-font-size-small);
      font-weight: bold;
      line-height: calc(var(--c8y-unit-base) * 2.5);
    }
    .inner-scroll &{
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--c8y-page-sticky-header-background-default);
    }
  }
  &__body{
    > [class^="col-"],
    > [class*=" col-"] {
        display: flex;
        align-items: center;
        padding-top: calc($size-base + $size-10);
        padding-bottom: calc($size-base + $size-10);
      }
  }
  &--separator{
    box-shadow: inset 0 -1px 0 var(--c8y-component-border-color, var(--c8y-root-component-border-color));
    &:last-child {
      box-shadow: none;
    }
  }
  // Padding modifiers — -x (horizontal), -y (vertical), shorthand (both)
  &--padded-x {
    &.responsive-grid-table__header > [class^="col-"],
    &.responsive-grid-table__header > [class*=" col-"],
    &.responsive-grid-table__body > [class^="col-"],
    &.responsive-grid-table__body > [class*=" col-"] {
      padding-left: $component-padding;
      padding-right: $component-padding;
    }
  }
  &--padded-y {
    &.responsive-grid-table__header > [class^="col-"],
    &.responsive-grid-table__header > [class*=" col-"],
    &.responsive-grid-table__body > [class^="col-"],
    &.responsive-grid-table__body > [class*=" col-"] {
      padding-top: $component-padding;
      padding-bottom: $component-padding;
    }
  }
  &--padded {
    &.responsive-grid-table__header > [class^="col-"],
    &.responsive-grid-table__header > [class*=" col-"],
    &.responsive-grid-table__body > [class^="col-"],
    &.responsive-grid-table__body > [class*=" col-"] {
      padding-left: $component-padding;
      padding-right: $component-padding;
      padding-top: $component-padding;
      padding-bottom: $component-padding;
    }
  }

  // Condensed modifiers — -x (horizontal), -y (vertical + font-size), shorthand (both)
  &--condensed-x {
    &.responsive-grid-table__header > [class^="col-"],
    &.responsive-grid-table__header > [class*=" col-"],
    &.responsive-grid-table__body > [class^="col-"],
    &.responsive-grid-table__body > [class*=" col-"] {
      padding-left: var(--c8y-table-cell-padding-condensed);
      padding-right: var(--c8y-table-cell-padding-condensed);
    }
  }
  &--condensed-y {
    &.responsive-grid-table__header > [class^="col-"],
    &.responsive-grid-table__header > [class*=" col-"] {
      padding-top: var(--c8y-table-cell-padding-condensed);
      padding-bottom: var(--c8y-table-cell-padding-condensed);
      font-size: calc(var(--c8y-unit-base) * 1.25);
    }
    &.responsive-grid-table__body > [class^="col-"],
    &.responsive-grid-table__body > [class*=" col-"] {
      padding-top: calc(var(--c8y-table-cell-padding-condensed) - 1px);
      padding-bottom: calc(var(--c8y-table-cell-padding-condensed) - 1px);
      font-size: var(--c8y-font-size-small);
    }
  }
  &--condensed {
    &.responsive-grid-table__header > [class^="col-"],
    &.responsive-grid-table__header > [class*=" col-"] {
      padding-top: var(--c8y-table-cell-padding-condensed);
      padding-bottom: var(--c8y-table-cell-padding-condensed);
      padding-left: var(--c8y-table-cell-padding-condensed);
      padding-right: var(--c8y-table-cell-padding-condensed);
      font-size: calc(var(--c8y-unit-base) * 1.25);
    }
    &.responsive-grid-table__body > [class^="col-"],
    &.responsive-grid-table__body > [class*=" col-"] {
      padding-top: calc(var(--c8y-table-cell-padding-condensed) - 1px);
      padding-bottom: calc(var(--c8y-table-cell-padding-condensed) - 1px);
      padding-left: var(--c8y-table-cell-padding-condensed);
      padding-right: var(--c8y-table-cell-padding-condensed);
      font-size: var(--c8y-font-size-small);
    }
  }

  .col-actions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

@for $i from 1 through 12 {
 .col-#{$i} {
    grid-column: span $i;
    &.align-right {
      justify-content: flex-end;
      text-align: right;
    }
  }
}

// Mixin to create a wrapper + container query pair
// $name  -> suffix for class/container name and width
@mixin responsive-grid-table-wrapper($name) {
 .responsive-grid-table-wrapper--#{$name} {
  container-type: inline-size;
  container-name: responsive-grid-table-wrapper--#{$name};
  width: 100%;

  // When a header is present, inline labels are redundant — hide them
  &:has(.responsive-grid-table__header) .text-label-small {
   display: none;
  }
 }

 @container responsive-grid-table-wrapper--#{$name} (max-width: #{$name}px) {
  .responsive-grid-table {
   grid-template-columns: 1fr; // stack
   &__header{
    display: none;
   }
   .col-actions{
    justify-content: flex-start;
   }
  }
  // Header is hidden when stacked — show inline labels so values stay identifiable
  .text-label-small {
    display: block !important;
  }

  // hover-only element that becomes visible when stacked
  .showOnHover {
    opacity: 1!important;
  }
  // Any class that contains "col-" becomes full-width when stacked
  .responsive-grid-table > [class^="col-"],
  .responsive-grid-table > [class*=" col-"] {
    grid-column: span 1;
    min-width: 0;

    // align-right utility becomes align-left when stacked, since right-alignment is hard to read in a single column
    &.align-right {
      justify-content: flex-start;
      text-align: left;
    }
  }
 }
}

// Generate wrappers: 600, 550, 500, ..., 200
@for $w from 600 through 200 {
 @if $w % 50 == 0 {
  @include responsive-grid-table-wrapper($w);
 }
}