window.preferences > contents > leaflet > box > stack > stack > scrolledwindow > viewport > clamp > list,
preferencespage > scrolledwindow > viewport > clamp > box {
  margin: 0 12px;

  transition: margin-bottom 200ms ease,
              margin-top 200ms ease,
              border-spacing 200ms ease;

  $sizes: ("small": 18px, "medium": 24px, "large": 30px);

  @each $name, $size in $sizes {
    &.#{$name} {
      margin-top: $size;
      margin-bottom: $size;
      border-spacing: $size;
    }
  }
}

preferencesgroup > box {
  // Add space between the description and the title.
  > label:not(:first-child) {
    margin-top: 6px;
  }

  // Add space between the box and the labels.
  > box:not(:first-child) {
    margin-top: 12px;
  }
}
