@use "../../wc";

:host {
  display: block;
  --zn-col-basis: 250px;
  --col-width: 23%;
}

:host([contents]) {
  display: contents;
}

.cols {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  flex-shrink: 1;
  width: 100%;
  container-type: inline-size;
  overflow: hidden;
  gap: var(--zn-spacing-small);

  max-width: 100%;

  @for $i from 1 through 12 {
    ::slotted(.zn-col-#{$i}) {
      flex-basis: calc(var(--zn-col-basis) * #{$i});
      min-width: calc(var(--col-width) * #{$i});
      flex-grow: #{$i}
    }
  }

  @for $i from 1 through 12 {
    &--mc-#{$i} {
      --col-width: calc(100% / #{$i + 1});
    }
  }

  &--layout-121 {
    ::slotted(.zn-col-2) {
      order: -1;
      min-width: 100%;

      @include wc.container-query(hd) {
        order: initial;
        min-width: 46%;
      }
    }
  }

  &--divide {
    ::slotted(*:not(:last-child)) {
      position: relative;

      &:after {
        content: "";
        position: absolute;
        display: block;
        width: 1px;
        top: 0;
        height: 100%;
        max-height: 100%;
        right: calc((var(--zn-spacing-small) / 2) * -1);
        background-color: rgb(var(--zn-border-color));
      }
    }
  }

  &--no-gap {
    gap: 0;
  }

  &--border ::slotted(*) {
    position: relative;
    padding-bottom: var(--zn-spacing-small); // Add spacing between element and border
  }

  // Adds full-width lines between bordered cols
  // Last row elements get overflow:hidden via JS to clip this pseudo
  &--border ::slotted(*):before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -100vw;
    right: -5px;
    z-index: 1111;
    border-bottom: 1px solid rgb(var(--zn-border-color)) !important;
  }

  &--pad {
    padding: var(--zn-spacing-2x-small);
  }

  &--pad-x {
    padding-inline: var(--zn-spacing-2x-small);
  }

  &--pad-y {
    padding-block: var(--zn-spacing-2x-small);
  }
}