// COMPONENT: List: the main list element used for all kinds of things -
// listing statistics, listing complex search results, etc
.list
  display: block

  .list-item
    align-items: center
    display: flex
    position: relative

    &-dashboard-metric
      justify-content: space-between

    &--has-checkbox
      margin-left: $checkbox-size + $list-padding

    &:not(.list-item--has-link),
    .list-item-link
      align-items: center
      padding: $list-padding

    &,
    .list-item-link
      > * + *
        padding-left: $gutter

    &--has-link
      &:focus-within,
      &:hover
        background-color: $highlight

    .list-item-link
      display: flex
      flex: 1
      text-decoration: none

      &:focus
        box-shadow: none

      ~ *:last-child
        padding-right: $list-padding

    // All immediate descendents should be block-level elements
    .list-item-label,
    .list-item-value
      display: block

    .list-item-label
      &:after
        content: ": "

    .list-item-value
      font-weight: bold
      text-align: right
      text-decoration: none

    + .list-item
      border-top: 1px solid $border-light
