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

$container-left-padding: 10px

.specsContainer
  width: 100%
  .innerSpecsContainer
    display: block

  .specContainer
    display: flex
    flex-direction: column
    flex-wrap: wrap
    align-content: flex-start
    flex-grow: 1
    width: 100%

    .specSection
      display: flex
      flex-direction: column
      flex-wrap: wrap
      align-content: flex-start
      flex-grow: 1
      width: 100%

      .blockSectionHeader
        padding-top: 0
        margin: 20px 0 -10px 15px
        height: 22px
        color: $black

        i
          bottom: 2px
          font-size: 16px

        .blockSectionHeaderTitle
          text-transform: capitalize
          font-size: 15px
          line-height: 0.9em

        strong
          font-weight: 500

        .exactTitleField, .subsetTitleField, .baselineTitleField, .expandedTitleField
          + .exactTitleField:before
            content: ' and '

          + .subsetTitleField:before, + .expandedTitleField:before, + .baselineTitleField:before
            content: ' or '

      .specs
        display: flex
        width: 100%
        flex-direction: row
        flex-wrap: wrap
        align-content: flex-start
        flex-grow: 1
        margin-bottom: 5px
        padding: 5px 0 0 $container-left-padding
        margin-right: -6px

        &.expandedPlaceholder
          justify-content: center
          padding-top: 20px



$block-height: 187px
$min-aspect-ratio: 1.4
$default-aspect-ratio: 1.6
$max-aspect-ratio: 2.0
$block-padding: 8px

$min-block-width: $block-height * $min-aspect-ratio
$default-block-width: $block-height * $default-aspect-ratio
$max-block-width: $block-height * $max-aspect-ratio

.visualizationBlockContainer
  display: flex
  flex-direction: column
  position: relative
  padding: $block-padding
  // background-color: black

  $blocks-per-row: 5
  width: calc(20% - (#{$container-left-padding} / #{$blocks-per-row}))		  

  // &.exact
  //   width: $height * $aspect-ratio
  //   // width: 50%

  // &.subset, &.baseline
  //   width: $height * $aspect-ratio
  //   // width: 33.33333%

  // &.expanded
  //   width: 25%

  &:hover .starContainer i
    opacity: 0.5

  .starContainer
    position: absolute
    top: 17px
    right: 15px
    font-size: 13px
    color: $orange
    cursor: pointer

    i
      opacity: 0.5

      &.starred
        color: $orange
        opacity: 0.6

    &:hover i
      opacity: 1

    &.starred:hover i
      opacity: 0.8

// $break-1: 3 * ($min-block-width + 2 * $block-padding) + $container-left-padding + $left-sidebar-width + $right-sidebar-width
// $break-2: 2 * ($min-block-width + 2 * $block-padding) + $container-left-padding + $left-sidebar-width + $right-sidebar-width
// $break-3: 1 * ($min-block-width + 2 * $block-padding) + $container-left-padding + $left-sidebar-width + $right-sidebar-width

$break-1: 4 * ($max-block-width + 2 * $block-padding) + $container-left-padding + $left-sidebar-width + $right-sidebar-width
$break-2: 3 * ($max-block-width + 2 * $block-padding) + $container-left-padding + $left-sidebar-width + $right-sidebar-width
$break-3: 2 * ($max-block-width + 2 * $block-padding) + $container-left-padding + $left-sidebar-width + $right-sidebar-width
$break-4: 1 * ($max-block-width + 2 * $block-padding) + $container-left-padding + $left-sidebar-width + $right-sidebar-width

@media screen and (max-width: $break-1)
  .visualizationBlockContainer
    // background-color: blue
    $blocks-per-row: 4
    width: calc(25% - (#{$container-left-padding} / #{$blocks-per-row}))      

@media screen and (max-width: $break-2)
  .visualizationBlockContainer
    // background-color: green
    $blocks-per-row: 3
    width: calc(33% - (#{$container-left-padding} / #{$blocks-per-row}))      		

@media screen and (max-width: $break-3)
	.visualizationBlockContainer
		// background-color: yellow	
		$blocks-per-row: 2
		width: calc(50% - (#{$container-left-padding} / #{$blocks-per-row}))

@media screen and (max-width: $break-4)
	.visualizationBlockContainer
		// background-color: red	
		$blocks-per-row: 1
		width: calc(100% - #{$container-left-padding})		

.visualizationBlock
  +block
  padding: 0px
  display: flex
  flex-direction: column
  border: 1px solid transparent
  max-height: 187px
  height: 187px
  overflow: hidden

  .header
    display: flex
    text-align: left
    font-size: 14px
    overflow: hidden
    text-overflow: ellipsis
    padding: 8px 10px
    padding-right: 25px
    min-height: 48px
    height: 28px
    line-height: 14px

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

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

  .overflowText
    display: flex
    color: #999
    align-content: center
    justify-content: center
    flex-grow: 1
    flex-direction: column
    min-height: 150px

  .visualization
    height: 100%
    padding: 11px 0 0px

    &.tree
      svg
        text
          fill: rgba(0, 0, 0, 0)

    svg
      g
        cursor: pointer!important

.stats
  padding: 10px 15px
  background-color: white
  .type
    text-transform: capitalize

  .value
    margin-left: 4px

  > div
    display: flex