@use './scaling';
/*
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);
*/

// spacing needs to be set before bootstrap is imported
$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * 0.1,
  2: $spacer * 0.25,
  3: $spacer * 0.5,
  4: $spacer,
  5: $spacer * 2,
  6: $spacer * 3,
  7: $spacer * 4,
  8: $spacer * 5,
  9: $spacer * 6,
  10: $spacer * 7,
);

.compact-reactions-row {
  width: 100%;
  display: none;
}

.reaction-name-width {
  min-width: 150px;
}

.reactions-pipeline {
  min-width: 150px;
  width: 20%;
  text-align: start;
}

.reactions-creator {
  width: 10%;
  text-align: center;
}

.reactions-group {
  width: 15%;
  min-width: 100px;
  text-align: center;
}

.reactions-status {
  width: 5%;
  min-width: 100px;
  text-align: center;
}

.reactions-id {
  width: 35%;
  min-width: 200px;
  text-align: center;
}

.reactions-selection {
  width: 10%;
  text-align: end;
}

.delete-card {
  border-width: 0px;
}

.timestamp-log {
  min-width: 200px !important;
  //flex-shrink: 0;
}

.action-log {
  min-width: 200px !important;
  //flex-shrink: 0;
}

.key-log {
  min-width: 200px !important;
  //flex-shrink: 0;
}

.value-log {
  min-width: 500px !important;
  //flex-shrink: 0;
}

.timestamp-short {
  display: none;
}

.reaction-card {
  padding-top: ($spacer * 0.5);
  padding-bottom: ($spacer * 0.5);
  padding-right: ($spacer);
  padding-left: ($spacer * 0.5);
}

.pipeline-chart {
  overflow-x: auto;
  min-width: 200px;
  min-height: 200px;
}

.pipeline-col {
  min-width: 250px !important;
}

// 1400px
@media (max-width: scaling.$xxl) {
  .scroll-log {
    display: flex;
    overflow: auto;
  }

  .full-reactions-row {
    display: none;
  }

  .compact-reactions-row {
    display: block;
  }
}

// 1200px
@media (max-width: scaling.$xl) {
  .reactions-creator {
    display: none;
  }
  .reactions-pipeline {
    width: 18%;
  }
  .reactions-group {
    width: 20%;
  }
  .reactions-status {
    width: 10%;
  }
  .reactions-id {
    width: 40%;
  }
  .reactions-selection {
    width: 10%;
  }
}

// 992px
@media (max-width: scaling.$lg) {
  .reactions-creator {
    display: none;
  }
  .reactions-id {
    display: none;
  }
  .reactions-selection {
    width: 15%;
  }
  .reactions-pipeline {
    width: 30%;
  }
  .reactions-group {
    width: 25%;
  }
  .reactions-status {
    width: 30%;
  }
}

// 768px
@media (max-width: scaling.$md) {
  .reactions-creator {
    display: none;
  }
  .reactions-id {
    display: none;
  }
  .reactions-selection {
    width: 15%;
  }
  .reactions-pipeline {
    width: 30%;
  }
  .reactions-group {
    width: 25%;
  }
  .reactions-status {
    width: 30%;
  }
}

// 576px
@media (max-width: scaling.$sm) {
  .reactions-creator {
    display: none;
  }
  .reactions-id {
    display: none;
  }
  .reactions-pipeline {
    width: 35%;
  }
  .reactions-group {
    width: 20%;
  }
  .reactions-status {
    width: 30%;
  }
  .reactions-selection {
    width: 15%;
  }
}
