{$class-list}
  @extend $block-xs
  margin: $var-list-margin unless $var-list-margin is false or is-ident($var-list-margin)
  padding: $var-list-padding unless $var-list-padding is false or is-ident($var-list-padding)

{$class-list--unpadded}
  margin: 0 unless $var-list-margin is false or is-ident($var-list-margin)
  padding: 0 unless $var-list-padding is false or is-ident($var-list-padding)

{$class-list--vertical}
  @extend $flex-xs, $no-padding-xs, $no-margin-xs
  flex-direction: column;

{$class-list--indented}
  unless $var-list--indented-padding is false or is-ident($var-list--indented-padding)
    +cache('padding'+ $var-list--indented-padding)
      padding: $var-list--indented-padding

{$class-list__item}
  @extend $inline-block-xs

{$class-list__item--unpadded}
  @extend {$class-list--unpadded}

{$class-list--vertical} {$class-list__item}
  @extend $position-relative
  line-height: 1
  unless $var-list--vertical__item-padding is false or is-ident($var-list--vertical__item-padding)
    +cache('padding'+ $var-list--vertical__item-padding )
      padding: $var-list--vertical__item-padding

{$class-list--vertical} {$class-list__item--unpadded}
  @extend {$class-list__item--unpadded}

// {$class-list--vertical} {$class-list__item}:before
//   @extend $absolute-top-left, $empty-block-xs, $scheme--transparent
//   height: 100%
//   unless $var-list--vertical__item__before-transition is false
//     +cache('transition'+ $var-list--vertical__item__before-transition)
//       transition: $var-list--vertical__item__before-transition
//   unless $var-list--vertical__item__before-width is false or is-ident($var-list--vertical__item__before-width)
//     +cache('width'+ $var-list--vertical__item__before-width)
//       width: $var-list--vertical__item__before-width

// {$class-list--vertical} {$class-list__item}:hover:before
//   background-color: $c--button-list__btn__before-hover-background-color unless $c--button-list__btn__before-hover-background-color is false or is-ident($c--button-list__btn__before-hover-background-color)
//
// {$class-list--vertical} {$class-list__item--current}:before
//   background-color: $c--button-list__btn__before-background-color unless $c--button-list__btn__before-background-color is false or is-ident($c--button-list__btn__before-background-color)
//
// {$class-list--vertical} {$class-list__item--current}:hover:before
//   @extend {$class-list--vertical} {$class-list__item--current}:before