.settings-list {
  //overwrite ul default styles
  padding: 0;
  margin: 0;
  list-style-type: none;
  max-width: $line-width-max;
  border-top: $width-border solid color("border");

  li {
    //overwrite default li style
    margin: 0;
    &::before {
      content: none;
    }
  }

  .list-navigator + & {
    border-top: none;
  }

  &__item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label action" "values action";
    align-items: end;
    justify-items: start;
    grid-column-gap: spacing(-3);

    padding: spacing(-1) 0;
    border-bottom: $width-border solid color("border");

    &__label {
      @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
      grid-area: label;

      &--with-appendix {
        display: inline-flex;
        flex-wrap: wrap;
        margin: spacing(-4, $times: -1, $divideby: 2);

        & > * {
          margin: spacing(-4, $divideby: 2);
        }
      }
    }

    &__appendix {
      display: inline-block;
      text-align: left;
      font-weight: $font-weight-normal;
      text-transform: none;
      color: color("foreground-theme");
      cursor: pointer;

      &:hover {
        color: color("foreground-theme-hover");
      }
      &:focus-visible {
        outline: $outline-width solid color("utility-focus");
        outline-offset: $outline-offset;
      }  
    }

    &__values {
      grid-area: values;
    }

    &__action {
      grid-area: action;
    }

    &__value {
      @include set-font(0, "single");
      margin-top: spacing(-5);

      &--empty {
        @include set-font(0, "single", $weight: "light");
        color: color("foreground-secondary");
      }
    }
  }
}