@import "../common/PredefinedMixins.scss";
@import "./partial.scss";
@import "./Variables.scss";

@keyframes color {
  100%, 0% { stroke: var(--loader_color1); }
  40% {  stroke: var(--loader_color2); }
  66% { stroke: var(--loader_color3); }
  80%, 90% {  stroke: var(--loader_color4); }
}

@-webkit-keyframes color {
  100%, 0% { stroke: var(--loader_color1); }
  40% {  stroke: var(--loader_color2); }
  66% { stroke: var(--loader_color3); }
  80%, 90% {  stroke: var(--loader_color4); }
}

.grid-canvas {
  @include partial-box-sizing;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow-x: auto;
  overflow-y: scroll;
  transition: color 100ms ease;

  .grid-canvas-overflow {
    overflow: hidden;
  }
}

.grid-canvas-cards {
  @include partial-row-start-wrap;
  background-color: $grid_cards_bg;
  padding-top: 5px;
}