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

.mykn-column {
  container-name: column;
  grid-column: auto / 6 span;
  position: relative; // For debug?

  &--container-type-inline-size {
    container-type: inline-size;
  }

  &--container-type-size {
    container-type: size;
  }

  &--container-type-normal {
    container-type: normal;
  }

  &--debug {
    min-height: 1rem;
    outline: 1px solid blue;
  }

  &--debug:before {
    color: blue;
    content: "Mobile (full span)";
    display: block;
    font-family: monospace;
    text-align: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 10;
  }

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

  &--direction-column {
    display: flex;
    flex-direction: column;
  }

  &--direction-row {
    display: flex;
    flex-direction: row;
  }

  &--direction-column#{&}--gap {
    gap: var(--sizes-spacing-xs-v);
  }

  &--direction-row#{&}--gap {
    gap: var(--sizes-spacing-xs-h);
  }

  &--justify-start {
    justify-content: start;
  }

  &--justify-end {
    justify-content: end;
  }

  &--justify-center {
    justify-content: center;
  }

  &--justify-space-between {
    justify-content: space-between;
  }

  &--justify-space-around {
    justify-content: space-around;
  }

  &--justify-space-evenly {
    justify-content: space-evenly;
  }

  @for $i from 1 through 6 {
    &--mobile-span-#{$i} {
      grid-column: auto / span #{$i};
    }

    &--debug#{&}--mobile-span-#{$i}:before {
      content: "Span #{$i}";
    }

    &--start-#{$i} {
      grid-column-start: $i;
    }
  }

  @media screen and (min-width: constants.$breakpoint-desktop) {
    @for $i from 1 through 12 {
      &--span-#{$i} {
        grid-column: auto / span #{$i};
      }

      &--debug#{&}--span-#{$i}:before {
        content: "Span #{$i}";
      }

      &--start-#{$i} {
        grid-column-start: $i;
      }
    }
  }
}