@import "chembl_base";


/* ---------------------------------------------------------------------------------------------------------------------
 Browse as circles
----------------------------------------------------------------------------------------------------------------------*/

.browser-as-circles {
  position: relative;

  .instructions {
    position: absolute;
    pointer-events: none;
  }

  .node {
    cursor: pointer;

    &.hoverable {
      stroke-width: 1px;
      stroke: $teal-3;

      &:hover, &.force-hover {
        stroke: $teal-3;
        stroke-width: 2px;
      }
    }

    &.selected {
      stroke: $teal-3;
      stroke-width: 2px;
      stroke-dasharray: 8;
    }
  }

  .node--leaf {
    fill: white;
  }

  .label {
    text-anchor: middle;
    text-shadow: 0 0.8px 0 white, 0.8px 0 0 white, -0.8px 0 0 #fff, 0 -0.8px 0 white;
    fill: $teal-1;
    font-family: $open-sans;
  }

  .label,
  .node--root {
    pointer-events: none;
  }

  .incomplete {
    stroke: $teal-3;
    stroke-width: 2;
    stroke-dasharray: 10;
  }

}

/* ----------------------------------------------------------------------------------------------------------------------
 Matrix Visualisation
----------------------------------------------------------------------------------------------------------------------*/

.es-results-matrix {
  position: relative;

  .vis-container {
    cursor: context-menu;

    &:hover {
      stroke-width: 2;
      stroke: black;
    }
  }

  .matrix-vis-options {
    position: absolute;
    right: 20px;
    top: 0;
    padding: 5px;
    opacity: 0.8;
    user-select: none;

    a {

      &.disabled {
        color: $button-disabled-color;
      }

      &:not(.disabled):hover {
        color: $teal-accent;
      }
    }
  }

  .rows-text, .columns-text {
    font-weight: bold;
  }

  .columns-text {
    text-decoration: underline;
    cursor: pointer;

    &:hover {
      fill: $teal-accent;
    }
  }

  .headers-text, .footers-text {
    text-decoration: underline;
    cursor: pointer;

    &:hover {
      fill: $teal-accent;
    }

    &.emphasis {
      font-weight: bold;
    }
  }

  .cells-container-g {

    &.grab-activated {
      cursor: move; /* fallback if grab cursor is unsupported */
      cursor: grab;
      cursor: -moz-grab;
      cursor: -webkit-grab;
    }

    &.grabbing {
      cursor: grabbing;
      cursor: -moz-grabbing;
      cursor: -webkit-grabbing;
    }
  }

  .square2-g {

    .divider-triangle {
      fill: white;
    }
  }
}

.simple-qtip {
  max-width: 1000px !important;

  .qtip-content {
    max-width: 1000px !important;
    margin: 0;
    padding: 0;
  }
}

.matrix-full-screen {
  margin-top: 20px;
}

.matrix-qtip {

  .qtip-content {
    padding: 0;
    font-size: 120%;
  }
  .card {
    margin: 0;

    .card-content {
      padding: 12px;
    }
  }
}

/* ----------------------------------------------------------------------------------------------------------------------
 Word Cloud
----------------------------------------------------------------------------------------------------------------------*/

.wordcloud-word:hover {
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all .15s ease-in-out;
  color: $red-2 !important;
}

/* ----------------------------------------------------------------------------------------------------------------------
 Legend
----------------------------------------------------------------------------------------------------------------------*/

.legend {

  .legend-rect:hover {
    stroke: $teal-accent;
  }

  .legend-rect.selected {
    stroke: color('green', 'base');
  }

  .legend-range-selector:hover {
    cursor: -webkit-grab;
    cursor: grab;

    .legend-rect {
      stroke: $teal-accent;
    }
  }

  .legend-range-selector:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;

    .legend-rect {
      stroke: $teal-accent;
    }
  }

  .tick {

    text {
      font-size: 80%
    }
  }
}

.histogram-legend {
  max-height: 100px;
  overflow-x: hidden;
  overflow-y: hidden;
  margin: 15px;
  padding: 15px;

  .legend-text {
    font-size: 65%;
    fill: $grey-dark;
    font-family: $verdana;
  }
}

/* ----------------------------------------------------------------------------------------------------------------------
 Scatter plot
----------------------------------------------------------------------------------------------------------------------*/

.plot {

  .plot-container {
    position: relative;
  }

  .total-items {
    position: absolute;
    bottom: 0;
    left: 2px;
  }

  .tooltip-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .tooltip-background {
      width: 100%;
      height: 100%;
      background-color: black;
      opacity: 0.4;
    }

    .tooltip-item {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 40%;
      margin: auto;
      transform: translate(50%, 50%);

    }
  }
}

/* ----------------------------------------------------------------------------------------------------------------------
 Mini Histograms
----------------------------------------------------------------------------------------------------------------------*/
.histogram {

  .mainSVGContainer {
    background-color: white;
  }

  &.mini {

    .mainSVGContainer {
      background-color: transparent;
    }

    .title {
      text-decoration: underline;
      font-size: 80%;
    }
  }

  .title {
    cursor: pointer;
    font-size: 90%;
    font-family: $chembl-helvetica;
    fill: $grey-dark;
  }

  .title:hover {
    fill: $teal-accent;
  }

  .bars-background {
    fill: white;
    opacity: 0;
  }

  .bar-group {

    .background-bar {
      fill: white;
      opacity: 0;
    }

    .front-bar {
      opacity: 0;
      cursor: pointer;
    }

    .front-bar:hover {
      stroke-width: 1;
      stroke: black;
      fill: black;
      opacity: 0.07;
    }

    .hovered {
      opacity: 0.7;
      stroke: $teal-4;
      stroke-width: 2px;

    }
  }

  .x-axis, .y-axis {

    .axis-line {
      stroke-width: 0.5;
      stroke: grey;
    }

    .property-label {
      font-size: 80%;
    }

    .tick {
      font-size: 60%;

      .axis-helper-line {
        stroke-width: 0.5;
        stroke: $grey-medium;
      }

      .rotated {
        font-size: 70%;
      }
    }

    path {
      display: none;
    }

    text {
      fill: $grey-medium;
    }
  }

  .y-axis {

    .tick {


      line {
        stroke-width: 0.1;
        stroke: color('grey', 'lighten-1');
      }
    }
  }
}


/* ---------------------------------------------------------------------------------------------------------------------
 Report card Piechart
----------------------------------------------------------------------------------------------------------------------*/

.piechart-group {
  display: flex;
  flex-flow: wrap;

  .piechart-col {
    display: flex;

    .piechart-section {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      width: 100%;

      .layout {
        display: flex;
        flex-grow: 1;

        .chembl-card {
          display: flex;
          flex-grow: 1;
          width: 100%;

          .card-content {
            width: 100%;

            .container {
              display: flex;
              flex-direction: column;
              height: 100%;

              .pie-with-error {
                height: 100%;

                .valign-wrapper {
                  height: 100%;
                  text-align: center;
                }
              }

              .pie-content {
                overflow: scroll;
              }
            }
          }
        }
      }
    }
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
 Simple Piechart
----------------------------------------------------------------------------------------------------------------------*/

.pie-action-buttons-container{
  text-align: center;
}

.principal-pie-container {
  height: 100%;
}

.simple-pie-container {
  background-color: white;

  .pie-title {

    a {
      max-width: 80%;
    }
  }

  .pie-content {
    margin: 0;

    .arc {

      text {
        fill: $grey-dark;
        font-size: 70%;
        font-family: $chembl-helvetica;
      }
    }

    .arc:hover {

      path {
        opacity: 0.7;
        stroke: white;
        stroke-width: 2px;
        transition: all 100ms ease-in-out;
      }

      text {
        font-size: 80%;
      }
    }
  }

  .simple-pie-legend {

    .legend-text {
      font-size: 65%;
      fill: $grey-dark;
      font-family: $verdana;
    }
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
 Stacked donut Piechart
----------------------------------------------------------------------------------------------------------------------*/

.main-pie-container {
  display: flex !important;
  background-color: white;

  .legend {
    width: 100%;
    margin-left: -10px;
    margin-top: 40px;
    overflow-y: hidden;
    overflow-x: hidden !important;

    .legend-text {
      font-size: 65%;
      fill: $grey-dark;
      font-family: $verdana;
    }
  }

  .title {
    cursor: pointer;
    font-size: 90%;
    font-family: $chembl-helvetica;
    fill: $grey-dark;
  }

  .title:hover {
    fill: $teal-accent;
  }

  .sub-arc:hover {
    fill-opacity: 0.7;
    cursor: pointer;
  }

  .arc:hover {
    cursor: pointer;
  }

  .arc {

    text {
      font-family: $chembl-helvetica;
      font-size: 100%;
    }
  }
}


/* ---------------------------------------------------------------------------------------------------------------------
 Visualisations Page
----------------------------------------------------------------------------------------------------------------------*/

.color-block {
  background: #f9f9f9;

  h2 {
    margin-bottom: 0;
  }
}

.vis-section{
  height: 80vh;
  box-sizing: content-box;
  padding-top: 50px;
  padding-bottom: 70px;
  .vis-container{
    height: 100%;
  }
}

.text-section {
  flex-direction: column;
  height: fit-content !important;
}

.btn-container {
    padding: 30px 0 50px 0;

  .button {
    font-size: 1em;
    padding: 10px 20px;
    background-color: $teal-3;
    color: white;
    border-radius: 4px;
    letter-spacing: 0.02em;

    -webkit-transition: background-color 100ms ease;
    transition: background-color 100ms ease;

    &:hover {
      background-color: $teal-1;
    }
  }

  .hollow-button {
    padding: 8px 12px;
    background-color: white;
    color: $teal-3;
    border: solid $teal-3 2px;
    border-radius: 1px;
    letter-spacing: 0.02em;

  }
}

.header-dark-grey {
  color: $grey-dark;
}

.dark-green-header{
  color: $darker-teal;
}

.vis-paragraph {
  color: $grey-dark;
}

/**
* Visualisation Cards
* ----------------------------------------------------------------------------------------------------------------------
*/

.main-histogram-container {
  .histogram-title {
    padding-bottom: 20px;
  }
}

.visualisation-card {
  height: 100%;

  .card-content {
    padding: 5px;
    height: 100%;

    .row {
      margin: 0;
    }

    .main-histogram-container {
      height: 100%;
      background-color: white;

      .histogram {
        height: calc(100% - 85px);
      }

      .histogram-legend {
        max-height: 80px;
        margin: 0;
      }
    }

    .principal-pie-container {
      height: calc(100% - 30px);

      .main-pie-container {
        height: 100%;

        .pie-content {
          height: 100%;
        }
      }
    }

    .target-browser {
      height: 100%;

      .browser-as-circles {
        height: 100%;

        .vis-container {
          height: calc(100% - 10px);
        }
      }
    }
  }
}

.all-sources-link {
  font-size: 80%;
}