:root {
  --debug-column-gap: 0;
}
.debug.debug-wrapper {
  display: block;

  & * {
    pointer-events: none;
  }
}

.debug-grid {
  height: 100%;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-template-rows: 1fr;
  column-gap: var(--debug-column-gap);
  grid-column-gap: var(--debug-column-gap);
}

.debug-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  display: none;

  .debug-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: calc(100%);
    height: 100%;
    border-right-style: dashed;
    border-right-width: 1px;
    border-right-color: transparent;

    &:first-of-type {
      width: calc(100%);
      border-left-style: dashed;
      border-left-width: 1px;
      border-left-color: transparent;
    }

    .col-number {
      font-family: sans-serif;
      font-weight: 500;
      color: var(--color-dark);
      opacity: 0;
    }
  }

  &.border {
    .debug-item {
      border-right-color: rgba(255, 0, 0, 0.6);

      &:first-of-type {
        border-left-color: rgba(255, 0, 0, 0.6);
      }
    }
  }

  &.fill {
    .debug-item:nth-child(odd) {
      background-color: rgba(255, 0, 0, 0.3);
    }

    .debug-item:nth-child(even) {
      background-color: rgba(255, 0, 0, 0.4);
    }

    .col-number {
      color: var(--color-white);
    }
  }

  &.numbers {
    .col-number {
      opacity: 1;
    }
  }

  &.info {
    .debug-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      width: calc(var(--column-width) * 2);
      top: 1rem;
      right: calc(50% - var(--column-width));
      padding: var(--padding-size-base);
      background-color: var(--color-dark-transparent-30);
      border-radius: 0.5rem;
      border: solid 1px rgba(255, 0, 0, 0.6);

      @include breakpoint-max-sm {
        width: calc(var(--column-width) * 3);
        right: calc(50% - (var(--column-width) * 1.5));
      }

      .debug__text {
        font-family: sans-serif;
        font-size: var(--font-size-h1);
        color: var(--color-white);
        margin-bottom: var(--margin-size-sm);
        text-align: center;
      }

      .debug__width {
        font-family: sans-serif;
        font-size: var(--font-size-lg);
        color: var(--color-white);
        text-align: center;
      }
    }
  }
}

.has-debug.show-padding .section-block,
.has-debug.show-padding .content-block {
  position: relative;

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--block-spacer);
    background-color: rgba(128, 0, 128, 0.25);
  }

  &:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--block-spacer);
    background-color: rgba(128, 0, 255, 0.25);
  }

  &.--no-padding-top {
    &:after {
      content: none;
    }
  }

  &.--no-padding-bottom {
    &:before {
      content: none;
    }
  }
}