/** CSS for a graph viewer component. */

@use 'frontend/app/styles/common';

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.item-container {
  display: flex;
  padding: 20px 20px 0;
  flex: 0 0 auto;
}

.form-container {
  flex: 1;
  min-width: 0;
}

.hlo-download {
  margin-left: 8px;
  margin-top: 10px; // Align with the top mat-form-field
}

mat-sidenav {
  background: transparent;
  // set fixed width to avoid weird behavior of mat-sidenav-content width change when collapsing the xprof sidenav.
  width: 350px;
  display: flex;
  flex-direction: column;
}

mat-sidenav-container {
  flex: 1;
}

iframe {
  width: 100%;
  height: 90%;
  border: none;
}

mat-progress-bar {
  width: 300px;
  margin: 0 auto;
}

.loading-message {
  width: fit-content;
  margin: 0 auto;
}

.loading-spinner {
  margin: 0 auto;
  margin-right: 10px;
}

.progress-container {
  position: absolute;
  width: 100%;
  margin: 300px 0;
  z-index: 1;
  top: 0;
}

.progress-container-op-details {
  position: fixed;
  display: flex;
  bottom: 50px;
  padding: 20px;
}

.hlo-text-view-container {
  position: sticky;
  width: 100%;
  // Set z-index to 2 to advance the graphviz link
  // note this only works with non-static position
  z-index: 2;
}

.stack-trace-snippet-panel {
  position: sticky;
  width: 100%;
  box-shadow: none;
  border-bottom: 0.5px solid silver;
  border-radius: 0;
}

.stack-trace-snippet-container {
  min-height: 400px;
  max-height: 400px;
  overflow-y: auto;
}

.graph-container {
  width: 100%;
  height: 100%;
}

.default-graph {
  width: 100%;
  height: 100%;
  padding: 20px;
  font-weight: 100;
  font-size: 16px;
}

.progress-container-graphviz,
.graphviz-link {
  position: absolute;
  padding: 80px 40px;
  z-index: 1;
}

.progress-container-graphviz {
  display: flex;
}

.mat-subheading-2 {
  margin-bottom: 0;
}

mat-checkbox {
  padding: 5px 0;
}

.row {
  display: flex;
}

.actions {
  padding: 20px 0;
}

.search-button {
  // Override the MDC button style (not using palette contrast color somehow)
  // Seems fixed in higher angular versions
  // TODO(yinzz) remove this override once it's fixed
  color: white;
}
