@import '../utilities/colors'

$list-selected-color: $primary  
$list-subheader-color: rgba(0,0,0,.6)


.material-list
  box-sizing: border-box
  font-family: "Roboto", sans-serif
  -webkit-font-smoothing: antialiased
  font-size: 16px
  font-weight: 400
  margin: 0
  padding: 8px 0
  line-height: 24px
  list-style-type: none
  color: $black-alpha-87

.material-list-item
  box-sizing: border-box
  display: flex
  position: relative
  align-items: center
  justify-content: flex-start
  height: 48px
  padding: 0 16px
  text-decoration: inherit
  text-transform: inherit
  overflow: hidden

  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: $black
    opacity: 0
    transition: opacity 0.25s ease, background-color 0.25s ease
    
  &:hover:before
    opacity: 0.04

  &:focus
    outline: 0

    &:before
      opacity: 0.08

  &:active:before
    opacity: 0.16

  &.material-list-item--selected
    color: rgba($list-selected-color,.87)

    &:before
      background-color: $list-selected-color
      opacity: 0.12

    &:hover:before
      opacity: 0.16

    &:focus:before
      opacity: 0.20

    &:active:before
      opacity: 0.28

    & .material-list-item__icon
      color: $list-selected-color

.material-list-item__icon
  margin-left: 0
  margin-right: 16px
  font-size: 24px
  width: 24px
  height: 24px
  color: $black-alpha-32

.material-list-item__meta
  margin-left: auto
  margin-right: 0
  color: $black-alpha-32
  font-size: 24px
  width: 24px
  height: 24px

.material-list-divider
  height: 0
  margin: 0
  border: none
  border-bottom-width: 1px
  border-bottom-style: solid
  border-bottom-color: $black-alpha-12

.material-list-group__subheader
  font-size: 14px
  font-family: Roboto,sans-serif
  -webkit-font-smoothing: antialiased
  font-weight: 400
  letter-spacing: 0.3px
  text-decoration: inherit
  text-transform: inherit
  line-height: normal
  margin: 16px 0 8px
  padding: 0 16px
  color: $list-subheader-color