@import "~styles/themes/colors";
@import "~styles/themes/typography";
@import "~styles/themes/elements";
@import "~@czi-sds/components/dist/variables";

// These variables help to keep the loading and no data screens the same height as the viz screen.
$body-height: 248px;
$accession-label-height: 22px;
$accession-count-label-height: 20px;
$genome-viz-height: 18px;
$genome-viz-spacing: $sds-spaces-xs;

.contents {
  margin-top: 30px;
  margin-bottom: 40px;
  text-align: left;

  // Leave a place for the sidebar close button on narrow screens.
  // 160px is based on the close button position and size. (multipled by 2)
  @media (max-width: $narrow-container-width + 160px) {
    padding-top: 50px;
  }
}

.header {
  margin-bottom: 30px;
  display: flex;

  .headerText {
    padding-top: 24px;

    .taxonLabel {
      @include font-header-xs;
      color: $sds-color-gray-500;
      display: flex;
      align-items: center;
    }

    .accessionSelectMenu {
      min-width: 500px !important;
      width: 100%;
      margin-top: 5px;
    }

    .accessionLabel {
      @include font-header-m;
      max-width: 550px;
      margin-right: $sds-spaces-m;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      height: $accession-label-height;
    }

    .accessionCountLabel {
      @include font-body-xs;
      color: $sds-color-gray-300;
      height: $accession-count-label-height;
      display: flex;
      align-items: center;
    }

    .notShownMsg {
      margin-left: 5px;
    }

    .helpIcon {
      margin-left: 5px;
      height: 14px;
    }
  }

  .fill {
    flex: 1 1 0;
    min-width: 0;
  }

  .headerControls {
    text-align: right;

    .vizLinkContainer {
      text-align: right;
      margin-top: $sds-spaces-xxxs;
      margin-right: 12px;
    }

    .actionIcons {
      margin-top: $sds-spaces-l;
      margin-right: 12px;

      .iconButton {
        .icon {
          height: $sds-icon-sizes-xl-height;
          width: $sds-icon-sizes-xl-height;
        }
        &:not(:first-child) {
          margin-left: $sds-spaces-xl;
        }
      }
    }
  }
}

:global(.ui):global(.popup).actionIconPopup {
  @include font-header-xs;
}

// Used to style multiple links in different locations in coverage viz sidebar.
.linkWithArrow {
  @include font-header-xxs;
  // Override color: inherit in _header.scss.
  color: $sds-color-primary-400 !important;

  .rightArrow {
    font-size: 0.75em;
    margin-left: $sds-spaces-xxs;
  }
}

.refAccessionVizLink {
  display: inline-block;
}

.body {
  height: $body-height;

  &.withReads {
    height: $body-height + $genome-viz-height + $genome-viz-spacing;
  }

  .metrics {
    display: flex;
    margin-bottom: 30px;

    .column {
      flex: 1 1 0;
      min-width: 0;
      margin-right: $sds-spaces-m;

      &:last-child {
        margin-right: 0;
      }
    }

    .metric {
      display: flex;
      align-items: center;
      height: 30px;
      padding: 0 $sds-spaces-m;

      &:first-child {
        background-color: $sds-color-gray-100;
      }

      .label,
      .value {
        flex: 1 1 0;
        min-width: 0;
      }

      .label {
        @include font-header-xxs;
      }

      .value {
        @include font-body-xxs;
      }

      .ncbiLinkWrapper {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .ncbiLink {
        // Override color: inherit in _header.scss.
        color: $sds-color-primary-400 !important;
      }
    }
  }

  .coverageVizHistogram {
    height: 110px;
    background-color: $sds-color-gray-100;
  }

  .genomeVizRow {
    height: $genome-viz-height;
    margin-top: $genome-viz-spacing;
    display: flex;

    .rowLabel {
      @include font-body-xxs;
      width: 170px;
      text-align: right;
      padding-right: $sds-spaces-s;
      color: $sds-color-gray-600;
    }

    .genomeViz {
      margin-right: 40px;
      flex: 1 1 0;
      min-width: 0;

      .genomeVizInner {
        height: 100%;
      }
    }
  }

  .referenceAccession {
    background-color: $sds-color-gray-200;
  }
}

.noDataBody {
  display: flex;
  align-items: center;
  justify-content: center;
  height: (
    $body-height + $accession-count-label-height + $accession-label-height
  );

  .noDataContainer {
    display: flex;
  }

  .text {
    margin-top: $sds-spaces-xl;
    margin-right: $sds-spaces-xl;
    width: 350px;

    .message {
      @include font-header-m;
      margin-bottom: $sds-spaces-s;
    }

    .vizLink {
      margin-top: $sds-spaces-m;
    }
  }

  .icon {
    fill: $sds-color-gray-200;
    width: $img-m;
    height: $img-m;
  }
}

.loadingContainer,
.unknownErrorContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: $body-height;
  color: $sds-color-gray-500;

  .loadingMessage,
  .unknownErrorMessage {
    margin-bottom: 20px;
  }

  .helpLink {
    color: $sds-color-primary-400 !important;
  }

  .loadingIcon {
    margin-right: 5px;
  }
}

.hoverTooltip {
  position: fixed;
  background-color: white;
  z-index: 104;
  // So the tooltip appears on the top-right instead of bottom-right of mouse.
  transform: translateY(-100%);
}

.contigDownloader {
  position: fixed;
  z-index: 105;
  // So the tooltip appears on the top-left instead of bottom-right of the top-right corner of bar.
  transform: translate(-100%, -100%);
  background-color: $sds-color-gray-white;
  box-shadow: $sds-drop-shadows-shadow-m;
  border: $sds-borders-gray-300;
  border-radius: $sds-corners-corner-m;
  padding: 5px $sds-spaces-m;
  display: flex;
  align-items: center;

  .icon {
    cursor: pointer;
    height: $icon-l;
    width: $icon-l;

    svg {
      width: 100%;
      height: 100%;
      color: $sds-color-gray-400;
      fill: $sds-color-gray-400;
    }

    &:hover {
      svg {
        color: $sds-color-primary-400;
        fill: $sds-color-primary-400;
      }
    }
  }

  .downloadIcon {
    margin-right: 12px;
  }
}

// TODO(mark):
// If text-subtext options become more common, add this to BareDropdown as an official alternative option.
.option {
  padding: $sds-spaces-xs 16px;

  .optionText {
    @include font-body-xs;
    color: $sds-color-gray-600;
  }

  .optionSubtext {
    @include font-body-xxs;
    color: $sds-color-gray-300;
    font-weight: $font-weight-regular;
  }

  .optionText,
  .optionSubtext {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
