.fact-list {
  $component-name: ".fact-list";
  $margin-vertical: -2;
  $margin-horizontal: 0;

  max-width: none; //overwrite default of ul

  display: flex;
  flex-wrap: wrap;
  //TODO: change to gap when safari has widespread support for gap in flexbox
  margin: 0 spacing($margin-horizontal, $times: -0.5) spacing($margin-vertical, $times: -1) spacing($margin-horizontal, $times: -0.5);

  //TODO: remove when safari has widespread support for gap in flexbox
  .page__content__block > &:last-child {
    margin-bottom: spacing($margin-vertical, $times: -1);
  }

  .horizontal-scroll__scrollable-content > & {
    flex-wrap: nowrap;

    //TODO: remove when safari has wide spread support of gap in flexbox
    #{$component-name}__item {
      padding-bottom: 0;

      &__value {
        white-space: nowrap;
      }
    }
  }

  &__item {
    //overwrite default of li
    margin: 0;
    padding: 0;

    //overwrite default of li
    &::before {
      content: none;
    }

    //TODO: remove when safari has widespread support for gap in flexbox
    padding: 0 spacing($margin-horizontal, $times: 0.5) spacing($margin-vertical) spacing($margin-horizontal, $times: 0.5);

    &--verbose {
      width: 100%;

      & #{$component-name}__item__value {
        @include set-font(0, "single", $weight: "regular");
      }
    }

    &--empty {
      & #{$component-name}__item__value {
        color: color("foreground");
      }

      &#{$component-name}__item--verbose {
        & #{$component-name}__item__value {
          color: color("foreground-secondary");

          border-top: $width-border solid color("border");
          border-bottom: $width-border solid color("border");
          text-align: center;
          padding: spacing(-2) spacing(-1);
        }
      }
    }

    &__label {
      @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
      margin: 0;
    }

    &__value {
      margin-top: spacing(-5);
      @include set-font($typography-h1-fontsize - 1, "single", $weight: "light");
      line-height: 1.1em; //overwrite default line-height to make it align visually nicer at bottom when, side by side with other elements. Has to be a little more than 1em to avoid descenders from being clipped

      &__unit {
        @include set-font(0, "single", $weight: "light");
        display: inline-block;
        margin-left: spacing(-5);

        @include breakpoint("wide") {
          font-weight: $font-weight-normal;
        }
      }
    }

    &__remark {
      @include set-font(-1, "single", $weight: "regular");
      margin-top: spacing(-5);
      color: color("foreground-secondary");
    }

    a {
      //overwrite default link style in ul
      background-image: none;
      text-shadow: none;
      word-break: normal;

      white-space: nowrap;

      &:hover {
        & > * {
          color: color("foreground-theme");
        }

        #{$component-name}__item__label::after {
          transform: translateX($width-border);
        }
      }

      &:active {
        & > * {
          color: color("foreground-theme-hover");
        }
      }

      #{$component-name}__item__label {
        @include icon-style($position: "after") {
          @include set-icon("link-internal");
          margin-left: spacing(-5);
          display: inline-block;
          white-space: nowrap;
          transition: transform $animation-timing-link-icon-translate $easing-in-out;
        }
      }
    }
  }

  &--large {
    #{$component-name}__item__value {
      @include set-font($typography-h1-fontsize, "single", $weight: "light");
    }
  }
}