$block = ".klara-ui-list";
$small = .5;
$medium = 1;
$large = 2;

padding-horizontally($multiplier) {
  margin-right: (- 4 * $multiplier)px;
  margin-left: (- 4 * $multiplier)px;

  > li {
    padding-right: (4 * $multiplier)px;
    padding-left: (4 * $multiplier)px;
  }

  &{$block}__debug {
    > li {
      position: relative;

      &:not(:first-child):before, &:not(:last-child):after {
        position: absolute;
        top: 0;
        width: (4 * $multiplier)px;
        height: 100%;
        content: "";
      }

      &:not(:first-child):before {
        right: 100%;
        background: lighten($c-success-light, 40%);
      }

      &:not(:last-child):after {
        left: 100%;
        background: $c-success-base;
      }
    }
  }
}

padding-vertically($multiplier) {
  margin-top: (- 4 * $multiplier)px;
  margin-bottom: (- 4 * $multiplier)px;

  > li {
    padding-top: (4 * $multiplier)px;
    padding-bottom: (4 * $multiplier)px;
  }

  &{$block}__debug {
    > li {
      position: relative;

      &:not(:first-child):before, &:not(:last-child):after {
        position: absolute;
        left: 0;
        width: 100%;
        height: (4 * $multiplier)px;
        content: "";
      }

      &:not(:first-child):before {
        bottom: 100%;
        background: lighten($c-success-light, 40%);
      }

      &:not(:last-child):after {
        top: 100%;
        background: $c-success-base;
      }
    }
  }
}

{$block} {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;

  &__debug-wrapper {
    background: $c-active-lightest;
  }

  &__auto-size {
    > li {
      flex: 1;
    }
  }

  &__centered {
    align-items: center;
  }

  &__center-center {
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 100%;

    &{$block}__padding-small {
      padding-horizontally($small);
    }

    &{$block}__padding-medium {
      padding-horizontally($medium);
    }

    &{$block}__padding-large {
      padding-horizontally($large);
    }
  }

  &__right {
    flex-direction: row;
    justify-content: flex-end;

    &{$block}__padding-small {
      padding-horizontally($small);
    }

    &{$block}__padding-medium {
      padding-horizontally($medium);
    }

    &{$block}__padding-large {
      padding-horizontally($large);
    }
  }

  &__down {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;

    &{$block}__padding-small {
      padding-vertically($small);
    }

    &{$block}__padding-medium {
      padding-vertically($medium);
    }

    &{$block}__padding-large {
      padding-vertically($large);
    }
  }

  &__left {
    flex-direction: row;
    justify-content: flex-start;

    &{$block}__padding-small {
      padding-horizontally($small);
    }

    &{$block}__padding-medium {
      padding-horizontally($medium);
    }

    &{$block}__padding-large {
      padding-horizontally($large);
    }
  }

  &__up {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;

    &{$block}__padding-small {
      padding-vertically($small);
    }

    &{$block}__padding-medium {
      padding-vertically($medium);
    }

    &{$block}__padding-large {
      padding-vertically($large);
    }
  }
}