@import '~terra-mixins/lib/Mixins';
@import './mixins';

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

// Temporary until it is added to application.
:local {
  .item-view {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    width: 100%;
    word-break: break-word;
    word-wrap: break-word;
  }

  .accessory {
    display: flex;
    flex: 0 0 auto;
    margin: 5px;
    min-width: 0;
    overflow: hidden;
  }

  // Start Accessory is of fixed size and does not shrink or grow.
  .start-accessory {
    justify-content: flex-start;
    width: 2.8571rem;
  }

  .start-accessory > * {
    max-width: 2.8571rem;
  }

  .end-accessory {
    justify-content: flex-end;
    max-width: 20%;
  }

  .accessory-align-top {
    align-self: flex-start;
  }

  .accessory-align-center {
    align-self: center;
  }

  // Content Structure
  .body {
    flex: 1 1 auto;
    margin: 5px;
    min-width: 0;
    overflow: hidden; // VERY IMPORTANT FOR IE10
  }

  .content {
    align-items: flex-start;
    display: flex;
    overflow: hidden; // VERY IMPORTANT FOR IE10
  }

  .single-result-column-container {
    display: flex;
    flex-flow: row nowrap;
  }

  .column-list-container {
    display: flex;
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 0;
  }

  .column-list {
    display: flex;
    flex-flow: column nowrap;
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 0;
  }

  .row-list-container {
    display: flex;
    flex-flow: row wrap;
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 0;
  }

  .row {
    display: flex;
    width: 100%;
  }

  .row-list {
    display: flex;
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 0;
    width: 100%;
  }

  .secondary-column {
    flex: 1 0 auto;
    float: right;
    max-width: 60%;

    .content {
      @include terra-text-align-end();
      justify-content: flex-end;
      padding-left: 5px;
    }
  }

  .is-truncated,
  .is-truncated [data-terra-clinical-item-display-text] {
    @include terra-clinical-text-truncate;
  }

  // Layouts
  .one-column {
    .column-list-container {
      flex-flow: column nowrap;
    }
  }

  /* stylelint-disable selector-max-compound-selectors */
  .two-columns {
    .column-list-container {
      flex-flow: row nowrap;

      .primary-column {
        flex: 1 1 auto;
        float: left;
      }
    }
  }
  /* stylelint-enable selector-max-compound-selectors */

  .two-columns-by-row {
    .content:nth-child(odd) {
      flex: 1 1 auto;
      float: left;
      justify-content: flex-start;
    }

    .content:nth-child(even) {
      @include terra-text-align-end();
      flex: 1 0 auto;
      float: right;
      justify-content: flex-end;
      // Set a max-width and disable flexbox-squishing on the right-most displays. This will ensure that they aren't
      // prematurely squished and maximize the available space for all labels.
      max-width: 60%;
      padding-left: 5px;
    }
  }

  .truncated-two-columns {
    .primary-column {
      flex: 1 1 auto;
      float: left;
      // Without a max width set below, the content within the primary column won't truncate properly
      // Width isn't set for primary-column anywhere else because it will mess up the column spacing when isTruncated is false
      max-width: 40%;
    }
  }

  //Emphasis Content Styles
  .content-primary-color {
    color: var(--terra-clinical-item-view-content-primary-color, #1c1f21);
  }

  .content-primary-size {
    @include terra-clinical-tiny-heading;
  }

  .content-secondary-color {
    color: var(--terra-clinical-item-view-content-secondary-color, rgba(28, 31, 33, 0.65));
  }

  .content-secondary-size {
    @include terra-clinical-text-body;
  }
}