$wpal-background ?= #f8f8f8
$wpal-breakpoint ?= 768px
$wpal-btn-color ?= #333
$wpal-btn-radius ?= 8px
$wpal-datas-color ?= #777
$wpal-font-size ?= 0.9rem
$wpal-font-size-lg ?= 1rem
$wpal-icon-width ?= 72px
$wpal-icon-width-lg ?= 88px
$wpal-margin ?= 24px
$wpal-padding ?= 16px
$wpal-radius ?= 16px

.wpal
  // clearfix
  &::after
    clear: both
    content: ''
    display: table

  background: $wpal-background
  border-radius: $wpal-radius
  font-size: $wpal-font-size
  line-height: normal

  margin-top: $wpal-margin
  margin-bottom: $wpal-margin
  padding: $wpal-padding

  a
    text-decoration: none

  p
    margin: 0 !important // WordPress autop measures

  &-icon
    float: left
    max-height: $wpal-icon-width
    text-align: center
    width: $wpal-icon-width

  &-software
    ^[0]-icon
      border-radius: 21%
      overflow: hidden

  &-content
    margin-left: $wpal-padding + $wpal-icon-width

  &-title
    font-weight: bold
    margin-bottom: 0.375rem

  &-datas
    font-size: 0.8em
    color: $wpal-datas-color
    margin-bottom: 0.6em

  &-data
    display: inline-block
    margin-right: 1em

  &-btn
    background: $wpal-btn-color
    border-radius: $wpal-btn-radius
    color: white
    display: inline-block
    line-height: 1
    padding: 0.4375em 1em 0.5em
    transition: 0.2s
    font-size: 0.95em
    border: 2px solid $wpal-btn-color
    text-decoration: none

    &:hover
      background: transparent
      color: $wpal-btn-color
      text-decoration: none

  &-screenshots
    clear: both
    border-top: 1px solid white
    margin: $wpal-margin -1% -1%

    figcaption
      font-weight: bold
      font-size: 0.9em
      margin: 12px 1% 8px
      color: #666

    img
      width: 31.333%
      margin: 1%

  &-message
    font-size: 12px
    margin: 24px 0
    padding: 8px
    background: $wpal-background
    color: #666

  @media screen and (min-width: $wpal-breakpoint)
    font-size: $wpal-font-size-lg

    &-icon
      max-height: $wpal-icon-width-lg
      width: $wpal-icon-width-lg

    &-content
      margin-left: $wpal-padding + $wpal-icon-width-lg

    &-screenshots
      margin: 20px -0.5% 0

      figcaption
        margin-left: 0.5%
        margin-right: 0.5%

      img
        width: 19%
        margin: 0.5%