@import "import";

.debug {
  @include fullscreen;
  @include flex;
  z-index: z(max);
  pointer-events: none;

  &.hidden {
    display: none;
  }
}

.debugStats {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: auto;
  z-index: z(max);

  label {
    margin: auto;
    width: 100%;
  }
}

.debugControls {
  position: fixed;
  bottom: 0;
  right: 0;
  pointer-events: auto;
  opacity: 0;

  @include breakpoint(medium) {
    opacity: 1;
  }

  &:hover {
    opacity: 1;
  }

  label {
    margin: auto;
    width: 100%;
  }
}

.debugAxis {
  @include fullscreen;
  pointer-events: none;

  .message {
    @include flex(row, $gap: spacer(2));
    @include debug-label($bottom: 0);
    padding: 0.5em;
    line-height: 1.2em;
  }

  .axis {
    $axis-size: 0.1em;
    position: absolute;
    transform: translateY(-50%);
    z-index: z(max);

    &.x {
      top: 50%;
      left: 0;
      width: 100%;
      height: $axis-size;
      background-color: color(red);
    }

    &.y {
      top: 0;
      left: 50%;
      width: $axis-size;
      height: 100%;
      transform: translateX(-50%);
      background-color: color(lime);
    }
  }
}

.debugMessage {
  @include flex(column, $align-items: flex-end);
  position: fixed;
  top: 0;
  right: 0;
  pointer-events: none;
  z-index: z(max);

  span {
    @include debug-label();
    position: relative;
    padding: 0.5em;
    line-height: 1.2em;
  }
}

.debugTypography {
  @include flex(column, flex-start, flex-start, $gap: spacer(3));

  &:not(:first-child) {
    margin-top: spacer(7);
  }

  & > * {
    margin: 0 !important;
  }

  .tag {
    @include flex(row, flex-start, flex-start, $gap: spacer(4));
    width: 100%;
    white-space: pre;

    .attribute {
      span:not(:last-child)::after {
        content: "/";
        margin-inline: spacer(1);
      }
    }
  }
}