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

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

bci-page-content {
  container-type: inline-size;
}

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

mat-card.mat-mdc-card.mdc-card {
  max-width: 750px;
  container-type: inline-size;
}

.card-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 2 * $grid-size;
  > div {
    @include truncate-text();
  }
}

@container (width < 480px) {
  .card-row-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.horizontal-card-row-grid {
  display: grid;
  grid-template-columns: 24px repeat(4, 1fr) 48px;
  gap: 16px;
  align-items: center;
  > div {
    @include truncate-text();
  }
}

div.tiles {
  height: 42px;
}

div.optionalTitle {
  height: 42px;
  display: grid;
  grid-template-columns: 40px auto 48px 48px 48px;
  vertical-align: center;
  margin-bottom: 16px;
  > div {
    @include truncate-text();
  }
}

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

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

.card-icon {
  height: 24px !important;
}

.mat-slide-toggle {
  display: block;
}

.card-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 32px;
  row-gap: 16px;
}

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

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