@use "../../../settings/constants";

.mykn-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;

  &--debug {
    outline: 1px solid green;
  }

  &--debug[data-testid]:before {
    content: attr(data-testid);
    color: green;
    display: block;
    font-family: monospace;
    grid-column: 1 / 6 span;
    text-align: center;
  }

  &--debug[data-testid]:before {
    content: attr(data-testid);
  }

  &--gutter-true {
    gap: var(--sizes-spacing-s-v) var(--sizes-spacing-s-h);
  }

  &--gutter-v {
    gap: var(--sizes-spacing-s-v) 0;
  }

  &--sizes-spacing-xs-h {
    gap: 0 var(--sizes-spacing-s-h);
  }

  &--full-height {
    min-height: 100%;
  }

  &--valign-middle {
    align-items: center;
  }

  @media screen and (min-width: constants.$breakpoint-desktop) {
    & {
      grid-template-columns: repeat(12, 1fr);
    }

    &--debug[data-testid]:before {
      grid-column: 1 / 12 span;
    }

    &--gutter-true {
      gap: var(--sizes-spacing-s-v) var(--sizes-spacing-s-h);
    }

    &--sizes-spacing-xs-h {
      gap: 0 var(--sizes-spacing-s-h-desktop);
    }

    &--gutter-v {
      gap: var(--sizes-spacing-s-v) 0;
    }

    @for $i from 1 through 12 {
      &--cols-#{$i} {
        grid-template-columns: repeat($i, 1fr) !important;
      }
    }
  }
}