$list-background-color: $white !default $list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default $list-radius: $radius !default
$list-item-border: 1px solid $border !default $list-item-color: $text !default $list-item-active-background-color: $link !default $list-item-active-color: $link-invert !default $list-item-hover-background-color: $background !default
.list
@extend %block background-color: $list-background-color border-radius: $list-radius box-shadow: $list-shadow // &.is-hoverable > .list-item:hover:not(.is-active) // background-color: $list-item-hover-background-color // cursor: pointer
.list-item
display: block padding: 0.5em 1em &:not(a) color: $list-item-color &:first-child border-top-left-radius: $list-radius border-top-right-radius: $list-radius &:last-child border-top-left-radius: $list-radius border-top-right-radius: $list-radius &:not(:last-child) border-bottom: $list-item-border &.is-active background-color: $list-item-active-background-color color: $list-item-active-color
a.list-item
background-color: $list-item-hover-background-color cursor: pointer