/*
 * Copyright (C) 2023 Robert Bosch GmbH Copyright (C) 2023 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

@import '@bci-web-core/common-styles/sass/bci/bci-variables';

@mixin truncate-text() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

mat-card.mat-mdc-card.mdc-card {
  container-type: inline-size;
  .mat-mdc-card-title {
    @include truncate-text();
  }
}

div.status {
  margin-top: 2 * $grid-size;
  > div {
    @include truncate-text();
  }
}

.card-label {
  display: block;
  color: $boschBlack;
  font-size: 12px;
  line-height: 18px;
  @include truncate-text();
}

.card-header {
  container-type: inline-size;
  height: 42px;
  display: grid;
  grid-template-columns: 40px 1fr 48px 48px 48px;
  vertical-align: center;
  > div {
    @include truncate-text();
  }
}

.visible-in-mobile {
  display: none !important;
}

.hidden-in-mobile {
  display: block;
}

.card-inner-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;

  > *:nth-child(3n-2):nth-last-of-type(1) {
    grid-column: span 2;
  }
}

@container (width < 380px) {
  .card-inner-layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: $screen-sm-min) {
  .hidden-in-mobile {
    display: none;
  }
  .visible-in-mobile {
    display: flex !important;
  }
  .card-header {
    grid-template-columns: 48px 1fr 48px;
  }
}
