/*
 * @file
 * Styles for pipeline component.
 */

/* pipeline variables */
:root {
  --first-column-width: 450px;
  --first-column-width-header: 350px;
}

.pipeline {
  margin: 1rem 0;
}

.pipeline text {
  p {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    font-family: inherit;
    color: inherit;
  }
}

.pipeline__intro {
  margin: 1rem 0;
}

.pipeline__header {
  font-size: 0.5em;

  @media (width > 1000px) {
    font-size: 1em;
  }
}

.pipeline__header--row {
  border-bottom: 2px var( --ib-black) solid;
  color: var(--ib-black);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.pipeline__col {
  font-size: 1.3em;
  font-weight: bold;
}

.pipeline__col--first {
  display: none;

  @media (width > 1000px) {
    display: inline;
    max-width: var(--first-column-width-header);
    width: 100%;
  }
}

.pipeline__col--second {
  @media (width > 1000px) {
    margin-left: -16px;
  }
}

.pipeline__row {
  border-bottom: 1px var(--ib-grey-dark) solid;
  padding: 0.5rem 0;

  @media (width > 1000px) {
    display: flex;
  }
}

.status {
  align-self: center;
  border: 1px solid;
  margin-top: 0.5em;
  max-height: 32px;
  width: 100%;
}

.status__bar {
  height: 1.5em;
  margin: 3px;
  padding: 0.5em;
}

.status__label { visibility: hidden; }

.indication {
  @media (width > 600px) {
    max-width: var( --first-column-width);
    width: 100%;
  }
}

.indication__label {
  color: var(--ib-black);
  display: inline;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.2;
}

.indication__details,
.indication__trial {
  color: var(--ib-black);
  font-size: 1em;
  line-height: 1.5;
}

.indication__details--first {
  font-weight: bold;
}

/* OA */
.pipeline__row--first {
  .status {
    border-color: var( --ib-blue-light);
  }

  .status__bar {
    background-color: var(--ib-blue-light);
  }
}

/* IPF */
.pipeline__row--second {

  .status {
    border-color: var( --ib-blue-med);
  }

  .status__bar {
    background-color: var(--ib-blue-med);
  }
}

/* Cardiometabolic Diseases */
.pipeline__row--third {

  .status {
    border-color: var( --ib-blue-midnight);
  }

  .status__bar {
    background-color: var(--ib-blue-midnight);
  }
}

.status__bar--indication_status_preclinical {
  width: 10%;
}

.status__bar--indication_status_phase_1 {
  width: 40%;
}

.status__bar--indication_status_phase_2 {
  width: 65%;
}

.status__bar--indication_status_phase_3 {
  width: 99.1%;
}