@import '~elements-sk/colors';
@import '../colors';

digest-details-sk {
  font-family: sans-serif;

  > .container {
    padding: 5px;
    display: flex;
    flex-direction: column;
    // setting these to inherit will use whatever is set on digest-details-sk itself.
    min-width: inherit;
    max-width: inherit;
    width: inherit;
    overflow-x: auto;
  }

  .top_bar, .digest_labels, .comparison_data {
    display: flex;
    flex-direction: row;
  }

  .expand {
    flex-grow: 1;
  }

  .grouping_name, .digest_label {
    font-weight: bold;
  }

  .comparison {
    display: flex;
    flex-direction: column;
  }

  .trace_info {
    border-top: 1px solid var(--light-gray);
    padding: 10px;
    dots-sk {
      overflow: auto;
      display: block; // Without this, scrolling doesn't happen
      max-width: 100%;
      max-height: 550px;
    }
  }

  .metrics_and_triage {
    display: flex;
    flex-direction: column;
    padding: 5px;
    min-width: 180px;

    .metric {
      :first-child {
        font-weight: bold;
      }
    }

    triage-sk {
      margin-left: -7px;
    }
  }

  .size_warning, .negative_warning {
    font-weight: bold;
    color: var(--red);
  }

  paramset-sk {
    .highlight {
      color: var(--gold);
      animation-duration: 150ms;
      animation-name: flash;
      animation-timing-function: linear;
    }

    @keyframes flash {
      from {
        background-color: var(--transparent-white);
      }
      to {
        background-color: var(--orange);
      }
    }
  }
}