@import './plot-box.scss';

.visualizations-page .bx--row {
  padding-top: $spacing-05;
  padding-bottom: $spacing-05;
}

// GRID Test

$feature-flags: (
  grid-columns-16: true,
);
//
//// If you're including all the styles for Carbon
@import 'carbon-components/scss/globals/scss/styles.scss';
//
//// If you want to import the grid
@import 'carbon-components/scss/globals/grid/grid';

.plot-tile-bck {
  // margin-top: $spacing-09;
  display: flex;
  flex-direction: column;

  //svg {
  //  margin-top: $spacing-09;
  //}

  // top border in only small breakpoints to prevent overrides
  @include carbon--breakpoint-down(md) {
    &:not(:nth-child(2)) {
      border-top: 1px solid $ui-03;
      padding-top: $spacing-09;
    }
  }

  // left border in just the 2nd column items
  @include carbon--breakpoint(md) {
    &:nth-child(odd) {
      border-left: 1px solid $ui-03;
    }
  }

  // left border in all items
  @include carbon--breakpoint(lg) {
    margin-top: 0;
    border-left: 1px solid $ui-03;

    svg {
      margin-top: $layout-06;
    }
  }
}

.plot-tile {
  //margin-top: $spacing-06;
  flex-grow: 1; // fill space so icons are bottom aligned
  @include type-style('body-long-01');

  // prevent large line lengths between small and medium viewports
  @include carbon--breakpoint-between(321px, md) {
    max-width: 75%;
  }

  width: 100%;
  height: 100%;
  //width: inherit;
  //height: inherit;
}

.bx--tile {
  overflow: visible;
  white-space: normal;
}

.assessments {
  white-space: nowrap;
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
}

.assessments .assessment {
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.assessments .assessment .orion-plots {
  width: 100%;
  position: relative;
  display: flex;
}

.assessments .assessment .orion-plot {
  width: 100%;
}
