@import '../../../css/mixins.sass'
@import '../../../css/flexbox.sass'
@import './ExplorePage.sass'
@import './SingleVisualizationPage.sass'

.headerText
  display: flex
  flex-direction: row
  width: 100%

  .right
    display: flex
    margin-left: auto
    padding-right: 20px

    .colorLegend
      display: flex
      margin-left: auto
      padding-right: 10px

      .colorLegendBox
        min-height: 20px
        min-width: 20px

.headerFragment
  margin-right: 3px
  &:first-child
    text-transform: capitalize

  &.field

  &:nth-last-child(1)
    .field:before
      content: ', and'

  &.operation, &.plain, &.transformation, &.tooMuchData
    color: $left-sidebar-grey

.galleryContainer, .SingleVisualizationContainer
  background-color: $center-grey

  .specsContainer, .visualizationViewContainer
    +fillContainer
    max-width: 100%
    max-height: 100%
    overflow-y: auto
    overflow-x: hidden

.watermark
  +watermark
  padding: 200px 0 260px

  &.watermarkNoSpacer
    padding: 0

.subsetMarker
  position: absolute
  bottom: 14px
  right: 20px
  font-size: 12px
  background-color: $orange
  padding: 2px 5px
  border-radius: 2px
  color: white
  z-index: 10

.renderChartText
  display: flex
  width: 100%
  height: 100%
  flex-grow: 1

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

.visualization
  .colorGrid
    height: 100%
    padding: 0 15px
    .columnFieldLabel, .rowFieldLabel
      font-size: 13px
      color: #555
      font-weight: 600

    .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: -40px
      width: 40px

    .dataRow
      .dataColumn
        &:first-child
          align-items: flex-start

    .dataRow, .footerRow
      .dataColumn, .footerColumn
        white-space: normal
        text-overflow: ellipsis
        overflow: hidden
        word-break: break-word

        &:first-child
          background-color: #F6F6F6
          font-weight: 500

      .dataColumnOneD
        white-space: normal
        text-overflow: ellipsis
        overflow: hidden
        word-break: break-word
        padding: 8px

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

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

    .dataRow
      .dataColumn
        &:first-child
          align-items: flex-start


    .tableHeaderColumn
      background-color: #F6F6F6
      font-weight: 500
      padding: 8px

    .dataCell, .textCell
      width: 100%
      padding: 4px

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

  &.tree
    svg
      g
        outline: none
      text
        fill: rgba(0, 0, 0, 0.4)
        font-size: 16px

    &.minimal
      svg
        pointer-events: none
        g
          outline: none
          pointer-events: none

  svg
    g text[font-weight="bold"][text-anchor="middle"]
      font-weight: 500

    g:last-child
      rect[stroke-width="5"], rect[stroke-width="4"], rect[stroke-width="3"]
        display: none
