@import './clinical-lowlight-theme/ClinicalResult.module';
@import './orion-fusion-theme/ClinicalResult.module';

:local {
  .clinical-result {
    max-width: 100%;  // Needed for IE10 truncation
    overflow: hidden;
  }

  .truncated {
    .decorated-result-display {
      flex-wrap: nowrap;
    }

    .concept-display,
    .datetime-display {
      max-width: 100%;  // Needed for IE10 truncation
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
      word-wrap: normal;
    }
  }

  .decorated-result-display {
    align-items: baseline;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;  // Needed for IE10 truncation
    overflow: hidden; // Needed for IE10

    /* stylelint-disable selector-max-compound-selectors */
    &.status-in-error del,
    &.status-in-error del span {
      color: var(--terra-clinical-result-display-status-entered-in-error-color, rgba(28, 31, 33, 0.65));
    }

    &.status-in-error del {
      text-decoration: line-through;
    }
    /* stylelint-enable selector-max-compound-selectors */

    &.truncated {
      flex-wrap: nowrap;

      .result-display {
        max-width: 100%;  // Needed for IE10 truncation
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
        word-wrap: normal;
      }
    }

    .result-display {
      overflow: visible;
    }

    .icon-modified,
    .icon-comment,
    .icon-unverified {
      flex: 0 0 auto;
      overflow: hidden;
      position: relative;
      vertical-align: baseline;
    }

    .icon-modified {
      color: var(--terra-clinical-result-display-icon-modified-color, #26a2e5);
      height: var(--terra-clinical-result-display-icon-modified-height, 0.875em); // Must use ems for font scaling
      margin-left: var(--terra-clinical-result-display-icon-modified-margin-left, 0.125em); // Must use ems for font scaling
      top: var(--terra-clinical-result-display-icon-modified-top); // Must use ems for font scaling
    }

    .icon-comment {
      color: var(--terra-clinical-result-display-icon-comment-color, rgba(28, 31, 33, 0.65));
      height: var(--terra-clinical-result-display-icon-comment-height, 0.875em); // 0.9375em; Must use ems for font scaling
      margin-left: var(--terra-clinical-result-display-icon-comment-margin-left, 0.25em); // Must use ems for font scaling
      top: var(--terra-clinical-result-display-icon-comment-top, 0.0625em); // Must use ems for font scaling
    }

    .icon-unverified {
      height: var(--terra-clinical-result-display-icon-unverified-height, 0.85em); // Must use ems for font scaling
      margin-left: var(--terra-clinical-result-display-icon-unverified-margin-left, 0.25em); // Must use ems for font scaling
      top: var(--terra-clinical-result-display-icon-unverified-top, 0.0625em); // Must use ems for font scaling
    }

    /* stylelint-disable selector-max-compound-selectors */
    .icon-modified + .icon-comment {
      margin-left: var(--terra-clinical-result-display-icon-comment-after-modified-margin-left, 0.0625em); // Must use ems for font scaling
      top: var(--terra-clinical-result-display-icon-comment-after-modified-top, 0); // Must use ems for font scaling
    }

    .icon-modified + .icon-unverified,
    .icon-comment + .icon-unverified {
      margin-left: var(--terra-clinical-result-display-icon-unverified-after-icons-margin-left, 0.4375em); // Must use ems for font scaling
      top: var(--terra-clinical-result-display-icon-unverified-after-icons-top, 0); // Must use ems for font scaling
    }
    /* stylelint-enable selector-max-compound-selectors */
  }

  .concept-display {
    color: var(--terra-clinical-result-concept-display-color, rgba(28, 31, 33, 0.65));
    font-size: var(--terra-clinical-result-concept-display-font-size, 0.875em); // Must use ems for font scaling
    line-height: var(--terra-clinical-result-concept-display-line-height, 1.28571);
    margin-top: var(--terra-clinical-result-concept-display-margin-top, 0.1875em); // Must use ems for font scaling
  }

  .datetime-display {
    color: var(--terra-clinical-result-datetime-display-color, rgba(28, 31, 33, 0.65));
    font-size: var(--terra-clinical-result-datetime-display-font-size, 0.78571em); // Must use ems for font scaling
    line-height: var(--terra-clinical-result-datetime-display-line-height, 1.27272);
    margin-top: var(--terra-clinical-result-datetime-display-margin-top, 0.375em); // Must use ems for font scaling
  }

  .result-display-separator {
    color: var(--terra-clinical-result-display-separator-color);
    font-weight: var(--terra-clinical-result-display-separator-font-weight, normal);
    margin-left: var(--terra-clinical-result-display-separator-margin-left, 0.25em); // Must use ems for font scaling
    margin-right: var(--terra-clinical-result-display-separator-margin-right, 0.25em); // Must use ems for font scaling
  }
}