@import "../ngbDiseasesPanel.variables.scss";

ngb-diseases-bubbles,
ngb-diseases-graph {
  width: 100%;
  min-height: min(75vh, 500px);
  display: block;
  overflow: hidden;
  position: relative;
  .ngb-diseases-chart-controls {
    position: relative;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: $diseases-chart-font-size;
    height: $diseases-chart-height;
    line-height: $diseases-chart-height;
    color: $diseases-chart-color;
    z-index: 2;
    md-slider {
      flex: 0 1 200px;
      min-width: unset;

      .md-track-container {
        top: calc($diseases-chart-height / 2.0);
      }
      .md-thumb-container {
        height: calc($diseases-chart-height + 10px);
      }
    }
    .info {
      white-space: nowrap;
      margin-left: 10px;
    }

    md-slider,
    .info,
    .diseases-chart-gene-select {
      height: $diseases-chart-height;
      line-height: $diseases-chart-height;
    }

    .diseases-chart-gene-select {
      height: $diseases-chart-height;
      line-height: $diseases-chart-height;
      display: inline-flex;
      align-items: center;
      margin-right: 10px;

      md-input-container,
      label {
        margin: 0;
        padding: 0;
        line-height: $diseases-chart-height;
        height: $diseases-chart-height;
        color: $diseases-chart-color;
        font-size: $diseases-chart-font-size;
      }

      label {
        margin-right: 5px;
      }

      md-input-container md-select {
        &:not([disabled]):focus .md-select-value {
          border-bottom: none;
        }

        md-select-value {
          border: none;
          min-height: $diseases-chart-height;
          padding: 0;
          font-size: $diseases-chart-font-size;
          display: flex;
          align-items: center;

          .md-select-icon {
            margin: 0 4px 0 0;
            width: 20px;
          }

          > span,
          > span > div {
            line-height: $diseases-chart-height;
            height: $diseases-chart-height;
            transform: none!important;
          }
        }
      }
    }
  }
  .ngb-diseases-chart-svg-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;

    svg .node-title,
    svg .node-image {
      cursor: pointer;
    }

    svg .node-title,
    svg .node-link,
    svg .node-image {
      transition: fill-opacity 250ms, stroke-opacity 250ms;
    }
  }
  .ngb-disease-tooltip {
    position: absolute;
    padding: 10px;
    background: white;
    border: 1px solid #cccccc;
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.15);
    display: none;
    max-width: 300px;
    z-index: 2;
    &.visible {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .ngb-disease-title,
    .ngb-disease-identifier,
    .ngb-disease-score,
    .ngb-disease-link {
      text-align: center;
      margin: 2px 0;
    }

    .ngb-disease-score,
    .ngb-disease-link,
    .ngb-disease-identifier {
      font-size: small;
    }

    .ngb-disease-link > a {
      text-decoration: none;
      color: rgb(102, 153, 255);
      cursor: pointer;
    }
  }

  .ngb-diseases-chart-loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .ngb-diseases-data-is-missing-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: #777777;

    > div {
      text-align: center;
    }
  }
}

.diseases-chart-gene-select-container {
  md-select-menu:not(.md-overflow) md-content {
    padding: 0;
  }

  md-option {
    padding: 0 8px;
    height: calc($diseases-chart-height + 2px);

    &[selected],
    &:not([disabled]):focus {
      color: $diseases-chart-color;
    }
  }

  md-select-menu,
  md-select-menu md-content {
    min-height: calc($diseases-chart-height + 2px);
  }
}
