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

@use "sass:string";
@use "../../../mixins/shadows-helper";

/**
 * Card Grid - Grid layout card variant
 *
 * Note: Uses $size-* tokens, $component-padding, and component color variables.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions (118px, 150px, 165px): Layout-specific heights for fullpage mode
 * - Percentages (100%, 100vh): Layout
 * - Z-index values (15, 90): Stacking order for sticky elements
 * - Negative offsets (-1px): Fine-tuning for shadow borders
 * - Calc expressions: Complex computed values with string.unquote
 */

.card--grid,
.card.card--grid {
  display: grid;

  .c8y-list__item__block.sticky-top {
    z-index: 90;
    background-color: inherit;

    @include shadows-helper.shadow-border(-1px, $component-border-color);
  }

  .c8y-list__item__collapse--container {
    padding: $component-padding;
  }

  .expanded {
    .c8y-list__item__block.sticky-top {
      background-color: $component-background-active !important;

      @include shadows-helper.shadow-border(-1px, $component-border-color);
    }

    .c8y-list__item__collapse--container {
      padding: $component-padding;
    }
  }
}

.card--grid__separator-top--white {
  border-top: $size-4 solid $component-background-default;
}

.card--grid__separator-top {
  border-top: $size-4 solid $component-border-color;
}

.card--grid--fullpage {
  margin-bottom: 0 !important;

  @media (min-width: $screen-md-min) {
    height: calc(string.unquote('100vh - 118px'));

    .has-tabs.horizontal-tabs & {
      height: calc(string.unquote('100vh - 165px'));
    }

    .has-action-bar & {
      height: calc(string.unquote('100vh - 150px'));
    }
  }
}

.card--grid__inner-scroll {
  position: relative;
  overflow: auto;
  height: 100%;

  .card-header {
    position: sticky;
    top: 0;
    z-index: 15;
    background-color: inherit;
  }

  .card-footer {
    position: sticky;
    bottom: 0;
    z-index: 15;
    background-color: inherit;
  }

  .card-block {
    .legend:first-child {
      margin-top: 0;
    }
  }
}