#plugin-list-header
  clearfix()
  margin: 40px 0

#plugin-list-title
  font-family: font-title
  font-size: 36px
  font-weight: 300
  line-height: 1
  float: left

#plugin-list-count
  color: color-gray
  padding-top: 1em
  text-align: right
  @media mq-normal
    float: right
    line-height: 40px
    padding-top: 0
    padding-right: 15px

#plugin-search-input
  font-size: 16px
  font-family: inherit
  -webkit-appearance: none
  border: 1px solid color-border
  padding: 10px 10px
  width: 100%
  margin-top: 25px
  @media mq-normal
    float: right
    width: 50%
    margin-top: 0

#plugin-list
  margin: 40px -20px
  display: flex
  flex-flow: column
  @media mq-tablet
    flex-flow: row wrap

.plugin
  display: none
  padding: 20px
  @media mq-tablet
    flex: 0 0 50%
  @media mq-normal
    flex: 0 0 (100 / 3)%
  &.on
    display: block

.plugin-name
  font-family: font-title
  font-weight: bold
  color: color-link
  font-size: 20px
  text-decoration: none
  line-height: 1
  display: block
  &:hover
    color: color-link-hover

.plugin-desc
  line-height: line-height
  margin: 1em 0

.plugin-tag-list
  clearfix()
  line-height: 1.3

.plugin-tag
  color: color-gray
  font-size: 0.9em
  text-decoration: none
  float: left
  margin-right: 10px
  &:hover
    color: color-link-hover
  &:before
    content: "#"

.plugin-screenshot
  margin-bottom: 15px
  position: relative
  padding-top: (10 / 16 * 100)% // 16:10 ratio
  height: 0
  overflow: hidden

.plugin-screenshot-img
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  transition: opacity 0.3s
  &.lazyload
  &.lazyloading
    opacity: 0
  &.lazyloaded
    opacity: 1

.plugin-preview-link
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  background: rgba(0, 0, 0, 0.7)
  color: #fff
  text-align: center
  opacity: 0
  transition: 0.15s
  &:hover
    opacity: 1
    .fa
      opacity: 1
      transform: scale(1)
  .fa
    position: absolute
    top: 0
    left: 0
    bottom: 0
    right: 0
    margin: auto
    font-size: 50px
    width: @font-size
    height: @font-size
    opacity: 0
    transform: scale(6)
    transition: 0.2s
    transition-delay: 0.15s