.mykn-attributetable {
  display: table;
  background-color: var(--attributetable-background);
  width: 100%;
  white-space: nowrap;

  &--compact {
    width: unset;

    & .mykn-attributetable__body {
      grid-template-columns: 1fr;
      row-gap: 0;
    }

    & .mykn-attributetable__row {
      border: none;
      padding-block-end: 0;
      padding-block-start: 0;

      &:last-of-type {
        border: none;
        padding-block-end: 0;
        padding-block-start: 0;
      }
    }
  }

  &--wrap {
    white-space: normal;
  }

  &__body {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--sizes-spacing-xs-h);
    row-gap: 0;
  }

  &__row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: var(--sizes-spacing-xs-h);
    align-items: center;

    border-block-start: 1px solid var(--attributetable-border);
    padding-block-end: var(--sizes-spacing-xs-v);
    padding-block-start: var(--sizes-spacing-xs-v);

    &:last-of-type {
      border-block-end: 1px solid var(--attributetable-border);
      padding-block-end: var(--sizes-spacing-xs-v);
    }
  }

  &__cell {
    display: flex;
    align-items: center;
    color: var(--typography-color-body);
    font-family: var(--typography-font-family-body), sans-serif;
    font-size: var(--typography-font-size-body-s);
    font-weight: var(--typography-font-weight-normal);
    line-height: var(--typography-line-height-body-s);
    margin: 0;

    &--key {
      font-weight: var(--typography-font-weight-bold);
      grid-column: 1;

      > .mykn-icon:last-child {
        margin-inline-start: var(--sizes-spacing-xs-h);
      }
    }

    &--value {
      grid-column: 2;
    }

    > .mykn-icon {
      margin-inline-end: var(--sizes-spacing-xs-h);
    }
  }

  &--valign-start &__cell {
    align-items: flex-start;
  }
}