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

.mykn-attributelist {
  --mykn-attributelist-col-span-title: 0;
  --mykn-attributelist-col-span-content: calc(
    12 - var(--mykn-attributelist-col-span-title)
  );

  display: block;

  &__header {
    margin-bottom: var(--sizes-spacing-xs-v);
  }

  &__body {
    display: grid;
    gap: var(--sizes-spacing-xs-h);
    align-items: start;

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

  .mykn-h3 {
    grid-column: span var(--mykn-attributelist-col-span-title);
    width: 100%;
  }

  &__list {
    grid-column: span var(--mykn-attributelist-col-span-content);
    display: grid;
    grid-template-columns: subgrid;
    gap: var(--sizes-spacing-xs-v);
    margin: 0;
    width: 100%;
  }

  &__pair {
    grid-column: span var(--mykn-attributelist-col-span-content);
    width: 100%;
  }

  &__key,
  &__value {
    font-family: var(--typography-font-family-body);
    font-size: var(--typography-font-size-body-xs);
    font-weight: var(--typography-font-weight-normal);
    line-height: var(--typography-line-height-body-xs);
    margin: 0;
  }

  &__key {
    color: var(--typography-color-body);
    font-weight: var(--typography-font-weight-bold);
  }

  &__value {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sizes-spacing-xs-v) var(--sizes-spacing-xs-h);
  }

  @media screen and (min-width: constants.$breakpoint-desktop) {
    @for $i from 1 through 12 {
      &--title-span-#{$i}:has(.mykn-h3) {
        --mykn-attributelist-col-span-title: #{$i};
      }

      &--col-span-#{$i} &__pair {
        grid-column: span #{$i};
      }
    }

    &--title-span-12 {
      --mykn-attributelist-col-span-content: 12;
    }
  }

  &__value .mykn-form-control,
  &__value .mykn-input {
    width: 100%;
  }
}