#sidebar
  @media mq-normal
    column(sidebar-column)
  @media mq-tablet
    column(sidebar-column-tablet)

.widget
  @extend $base-style
  line-height: line-height
  word-wrap: break-word
  font-size: 0.9em
  ul, ol
    list-style: none
    margin: 0
    ul, ol
      margin: 0 20px
    ul
      list-style: disc
    ol
      list-style: decimal

.category-list-count
.tag-list-count
.archive-list-count
  padding-left: 5px
  color: color-grey
  font-size: 0.85em
  &:before
    content: "("
  &:after
    content: ")"

.tagcloud
  a
    margin-right: 5px

.widget-wrap
  margin: block-margin 10px
  @media mq-mini
    margin: block-margin 20px

.widget-title
  @extend $block-caption
  margin-bottom: 0

.widget
  padding: 15px 5px
  a
    color: color-sidebar-text
    text-decoration: none
    &:hover
      color: color-sidebar-text-dark
  ul, ol, dl
    ul, ol, dl
      margin-left: 15px
      list-style: disc
  ul, ol
    list-style: none
    li,
    .category-list-child
      padding: 10px 0
      font-size: font-size
      border-bottom: 1px solid border-color
      a
        color: color-sidebar-text
    ul, ol
      list-style: none
      li
        border: none
        &:last-child
          padding-bottom: 0px
  ul:not(#recent-post), ol:not(#recent-post)
    li
      a
        &:before
          color: #ccc
          content: "\f0da"
          font-size: 12px
          margin-right: 6px
          font-family: FontAwesome
          transition: 0.2s ease
        &:hover:before
          color: color-sidebar-text-dark

#toTop
  @extend $block
  cursor: pointer
  text-align: center
  width: 64px
  height: 64px
  color: white
  font-size: 32px
  line-height: 64px
  background: color-default
  border-radius: 4px
  @media mq-mobile
    width: 54px
    height: 54px
    font-size: 28px
    line-height: 54px
  @media mq-mini
    width: 54px
    height: 54px
    font-size: 28px
    line-height: 54px
  &.fix
    bottom: 20px
    position: fixed

#recent-post
  li
    clearfix()
    padding: 10px 0 10px 94px
  &.no-thumbnail
    li
      padding: 10px 0px
  li
    .item-thumbnail
      opacity: 1
      float: left
      margin-left: -94px
      transition: all 0.2s ease
      .thumbnail
        width: 80px
        height: 80px
        display: block
        position: relative
        overflow: hidden
        span
          width: 100%
          height: 100%
          display: block
        .thumbnail-image
          position: absolute
          background-size: cover
          background-position: center
        .thumbnail-none
          background-image: url(thumbnail-default-small)
          background-size: 100% 100%
    .item-inner
      a
      .item-category
        font-size: 13px
        text-transform: uppercase
        a
          color: color-link
          &:hover
            color: color-sidebar-text-dark
        a, .fa
          margin-right: 5px
      .item-title
        font-size: 15px
        a
          color: color-sidebar-text-dark
          transition: all 0.2s ease
      .item-date
        color: #aaa
        font-size: 13px
        text-transform: uppercase
    &:hover
      .item-thumbnail
        opacity: 0.8
      .item-title a
        color: color-link