$item-dense-factor                 ?= .2
$item-sparse-factor                ?= 1.4
$item-base-color                   ?= rgba(119,119,119,1)
$item-stripe-color                 ?= alpha($item-base-color, 65%)
$item-active-color                 ?= alpha($item-base-color, 40%)
$item-primary-color                ?= rgba(0, 0, 0, .54)
$item-secondary-color              ?= $item-primary-color
$item-label-color                  ?= $grey-7
$item-content-secondary-text-color ?= $grey-7
$item-separator-color              ?= rgb(224, 224, 224)
$item-min-height                   ?= 40px
$item-padding                      ?= 16px
$item-gutter                       ?= 10px
$item-primary-size                 ?= 38px
$item-inverted-icon-size           ?= round($item-primary-size * .52)
$item-icon-size                    ?= round($item-primary-size * .63)
$item-image-size                   ?= round(3 * $item-primary-size)
$item-font-size                    ?= 1rem
$item-stamp-font-size              ?= .8rem

.s-item-stamp
  font-size $item-stamp-font-size
  line-height $item-stamp-font-size
  white-space nowrap
  margin .3rem 0

.s-item-side-right
  text-align right
  color $item-secondary-color
  display flex
  flex-direction column
  align-items flex-end

.s-item-side
  color $item-primary-color
  min-width $item-primary-size
.s-item-avatar, .s-item-avatar img
  width $item-primary-size
  height $item-primary-size
  border-radius 50%

.s-item-letter, .s-item-icon
  font-size $item-icon-size
.s-item-icon-inverted
  border-radius 50%
  font-size $item-inverted-icon-size
  color white
  background $primary
  padding 9px

.s-item-main
  flex 1 1 auto
  min-width 0
.s-item-main-inset
  margin-left ($item-gutter + $item-primary-size)

.s-item-label > span
  color $item-content-secondary-text-color
.s-item-sublabel
  color $item-content-secondary-text-color
  font-size 90%
  margin-top .2rem
  > span
    font-weight 500

.s-item-section + .s-item-section
  margin-left $item-gutter

.s-item
  position relative
  display flex
  align-items center
  font-size $item-font-size
  text-align left

  padding ($item-padding / 2) $item-padding
  min-height $item-min-height

  &.active, &.router-link-active, &:focus
    background $item-active-color

  &:focus
    outline 0

.s-item-image
  min-width $item-image-size
  max-width $item-image-size
  max-height $item-image-size

.s-list-multiline > .s-item, .s-item-multiline
  align-items flex-start

.s-list-link > .s-item, .s-item-link
  cursor pointer

.s-list-highlight > .s-item, .s-item-highlight,
.s-list-link > .s-item, .s-item-link
  &:hover
    background $item-highlight-color

.s-list-separator > .s-item-division + .s-item-division, .s-item-division + .s-item-separator
  border-top 1px solid $item-separator-color
.s-list-inset-separator > .s-item-division + .s-item-division, .s-item-division + .s-item-inset-separator
  &:after
    content ''
    position absolute
    top 0
    right 0
    left ($item-padding + $item-gutter + $item-primary-size)
    height 1px
    background $item-separator-color

.s-list-dense > .s-item, .s-item-dense
  padding round($item-padding * $item-dense-factor) $item-padding
  min-height round($item-min-height * $item-dense-factor)
.s-list-sparse > .s-item, .s-item-sparse
  padding ($item-padding * $item-sparse-factor) $item-padding
  min-height ($item-min-height * $item-sparse-factor)

.s-list-striped .s-item:nth-child(even)
  background-color $item-stripe-color
.s-list-striped-odd .s-item:nth-child(odd)
  background-color $item-stripe-color

.s-list
  border 1px solid $item-separator-color
  padding ($item-padding / 2) 0

  & + .s-list
    margin-top 32px

.s-item-separator-component
  margin ($item-padding / 2) 0
  height 1px
  border 0
  background-color $item-separator-color
  &:last-child
    display none
  & + .s-list-header
    margin-top (- $item-padding / 2)
.s-item-separator-inset-component
  margin-left ($item-padding + $item-gutter + $item-primary-size)

.s-list-header
  color $item-label-color
  font-size 14px
  font-weight 500
  line-height 48px
  padding-left $item-padding
.s-list-header-inset
  padding-left ($item-padding + $item-gutter + $item-primary-size)