:root {
  --scrollbar-width: 0px;
}

html:not([data-griddle-booted="true"]) {
  overflow-x: hidden;
}

.griddle-container {
  @include overlay();

  .griddle-column {
    background-color: rgba($g-column-color, 0.1);
  }

  &[data-column-numbers="true"] {
    counter-reset: columnCount;

    .griddle-column {
      position: relative;
      counter-increment: columnCount;

      &:before,
      &:after {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        color: $g-column-color;
        opacity: 0.5;
        font-size: 12px;
        content: counter(columnCount);

        @media (min-width: 600px) {
          font-size: 14px;
        }
        @media (min-width: 1200px) {
          font-size: 16px;
        }
        @media (min-width: bp(max-body)) {
          font-size: 16px;
        }
      }

      &:before {
        top: 1em;
      }
      &:after {
        bottom: 1em;
      }
    }
  }

  &[data-column-borders="true"] {
    .griddle-column {
      box-shadow: inset 0 0 1px 0 $g-column-color;
    }
  }
}