@import '../../../css/flexbox.sass'
@import '../../../css/mixins.sass'
@import '../Base/BareDataGrid.sass'
@import './Comparison.sass'

.analysisMenuPageContainer
  flex-grow: 1
  display: flex
  flex-direction: row
  align-items: center

  .menuOption
    display: flex
    flex-direction: column
    padding: 20px
    height: 200px
    width: 250px

    margin-left: 10px

    align-items: center
    justify-content: center
    text-align: center

    background-color: $white
    color: $black

    cursor: pointer
    text-decoration: none

    &.disabled
      opacity: 0.3
      pointer-events: none

    .menuOptionIcon
      padding-top: 10px
      font-size: 48px

    .description
      padding-top: 15px

.recommendModelButton
  margin-bottom: 10px

.watermark
  +watermark
  padding: 200px 0 260px

  &.watermarkNoSpacer
    padding: 0

.interactionTermsSidebarGroup
  display: flex
  flex-direction: column
  .sideBySideDropdowns
    display: flex
    padding-bottom: 8px


.analysisContainer
  overflow: hidden

.regressionContainer, .summaryContainer, .correlationContainer, .comparisonContainer
  display: flex
  flex-direction: row
  overflow: hidden

.analysisViewContainer
  background-color: $center-grey
  +fillContainer
  overflow-y: auto
  overflow-x: auto
  max-width: 100%

.summaryVariableContainer
  display: flex
  flex-direction: column

  .summaryChartContainer
    display: flex
    position: relative
    height: 300px
    margin: 10px

    > div:first-child
      position: absolute
      width: 100%
      top: 0
      height: 300px

.contributionToRSquared, .anovaBoxplot
  display: flex
  justify-content: center
  position: relative
  min-height: 400px

  > div
    padding: 20px
    position: absolute
    left: 0
    top: 0
    right: 0
    bottom: 0

  &.minimalBoxplot
    min-height: 187px
    max-height: 187px
    height: 187px

    > div
      padding: 0

.regressionTable, .summaryTable, .comparisonTable, .correlationTable
  margin: 0 20px 10px
  background-color: white

  .pValueLegend
    display: flex
    > span
      margin-right: 10px
      display: flex

.anovaSummary
  display: flex
  flex-direction: column
  padding: 10px 22px 20px

.regressionSummary
  display: flex
  padding: 10px 22px 20px

  strong
    font-weight: 500

  .regressionSummaryColumn
    display: flex
    flex-direction: column
    width: 50%

    &:first-child
      padding-right: 20px

    &:last-child
      padding-left: 20px

    > div
      margin-bottom: 10px
      margin-top: 5px
      white-space: break-word


.rSquared, .rSquaredAdjust
  +cmu
  display: inline-block
  font-weight: 500

  .r
    display: inline-block
    position: relative

.rSquaredAdjust
  .r:before
    content: ""
    border-top: 1px solid black
    width: 89%
    height: 100%
    position: absolute

.tableHeaderColumn
  background-color: $regression-header-grey // #F6F6F6
  font-weight: 500
  padding: 8px

.comparisonTableHeaderCell
  text-transform: uppercase

.standardError
  color: #999

.dataCell, .textCell
  height: 100%
  width: 100%
  padding: 4px
  display: flex
  flex-direction: column
  justify-content: center

  > div
    display: flex
    padding: 4px
    justify-content: center

.correlationDiagonal
  width: 100%
  height: 100%
  // Draw an SVG top left to bottom right 
  // background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M0 0 L0 10 L10 10' fill='#CFCFCF' /></svg>")
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M0 0 L10 10' stroke='#CFCFCF' stroke-width='0.1' /></svg>")
  background-repeat:no-repeat
  background-position:center center
  //scale it 
  background-size: 100% 100%, auto

.dataColumn, .footerColumn
  &:first-child
    padding: 8px

  &:not(:first-child)
    font-size: 13px

.correlationDataColumn
  min-height: 80px

  .dataCell, .dataCell > div
    padding: 0px


.aggregationTable
  padding: 0 20px 20px

  .columnFieldLabel, .rowFieldLabel
    font-size: 13px
    color: #555
    font-weight: 600
    text-transform: uppercase

  .columnFieldLabel
    display: flex
    align-items: center
    justify-content: center
    margin: 10px 0

  .gridWithRowFieldLabel
    display: flex
    flex-direction: row
    align-items: center
    justify-content: center

  .rowFieldLabel
    transform: rotate(-90deg)
    margin-left: -10px
    width: 40px

.titleField
  font-weight: 500
  color: #444444
  text-transform: lowercase

  + .titleField:before
    content: ', '

.correlationScatterplots
  display: flex
  flex-direction: row
  flex-wrap: wrap
  align-content: flex-start
  flex-grow: 1

  .correlationScatterplot
    width: 33.333333%
    display: flex
    flex-direction: column
    position: relative
    padding: 15px
    height: 200px
    min-height: 200px

    .header
      text-align: center
      font-size: 14px

  .scatterplotWithYLabel
    display: flex
    flex-direction: row
    align-items: center
    justify-content: center
    height: 200px
    min-height: 200px

    .yLabel
      position: absolute
      left: -20px
      transform: rotate(-90deg)
      font-weight: 500
      font-size: 12px
      line-height: 12px

  .xLabel
    margin-top: 0px
    text-align: center
    font-weight: 500
    font-size: 12px

.nestedRow
  .footerRow
    border-top-width: 0px !important

.nestedFooterColumn
  border-top-width: 0px !important