#article-container
  .shuoshuo-item
    @extend .cardHover
    margin-bottom: 20px
    padding: 35px 30px 30px

    +maxWidth768()
      padding: 25px 20px 20px

  .shuoshuo-item-header
    display: flex
    align-items: center
    cursor: default

  .shuoshuo-avatar
    overflow: hidden
    width: 40px
    height: 40px
    border-radius: 40px

    img
      margin: 0
      width: 100%
      height: 100%

  .shuoshuo-info
    margin-left: 10px
    line-height: 1.5

  .shuoshuo-date
    color: #858585
    font-size: .8em

  .shuoshuo-content
    padding: 15px 0 10px

    & > *:last-child
      margin-bottom: 0

  .shuoshuo-footer
    display: flex
    align-items: center

    &.flex-between
      justify-content: space-between

    &.flex-end
      justify-content: flex-end

    .shuoshuo-tag
      display: inline-block
      margin-right: 8px
      padding: 0 8px
      width: fit-content
      border: 1px solid $light-blue
      border-radius: 12px
      color: $light-blue
      font-size: .85em
      cursor: default
      transition: all .2s ease-in-out

      &:hover
        background: $light-blue
        color: var(--white)

    .shuoshuo-comment-btn
      padding: 2px
      color: #90a4ae
      cursor: pointer

      &:hover
        color: $light-blue

  .shuoshuo-comment
    padding-top: 10px

    &.no-comment
      display: none

.shuoshuo-navigation
  display: flex
  justify-content: center
  align-items: center
  margin-top: 20px
  padding: 20px 0

  button
    display: flex
    justify-content: center
    align-items: center
    width: 2.7em
    height: 2.7em
    background-color: var(--btn-bg)
    color: var(--btn-color)
    font-size: .9em
    line-height: 2.5em
    transition: all .2s ease-in-out
    addBorderRadius(6)

    &:not(:disabled)
      @extend .btn-effects

    &:hover:not(:disabled)
      background-color: var(--btn-hover-color)

    &:disabled
      background: #f5f5f5
      color: #ccc
      opacity: .5
      cursor: not-allowed

  .shuoshuo-page-info
    margin: 0 15px
    color: #858585
    white-space: nowrap
    font-size: .9em

  .shuoshuo-page-input
    margin-right: 12px
    padding: 0 15px
    height: 2.7em
    border: 1px solid var(--btn-bg)
    background: var(--card-bg)
    color: #858585
    text-align: center
    font-size: .9em
    transition: all .2s ease-in-out
    addBorderRadius(6)

    &:focus
      outline: none
      border-width: 2px

      &::placeholder
        color: transparent

    /* 隱藏 number 輸入框的上下箭頭 */
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button
      margin: 0
      -webkit-appearance: none

    /* Firefox */
    -moz-appearance: textfield

    /* 當作為頁碼按鈕時的樣式 */
    &.shuoshuo-page-num
      min-width: 40px
      width: 40px
      border: none
      background: $light-blue
      color: var(--white)
      font-weight: 500
      cursor: text

      &:focus
        border: 1px solid $light-blue
        background: var(--white)
        color: #333

    /* 超出範圍時的紅色樣式 */
    &.invalid
      border-color: #ff4757
      background-color: #ffeaea
      color: #ff4757
      animation: shake .5s ease-in-out

  /* 震動動畫 */
  @keyframes shake
    0%,
    100%
      transform: translateX(0)

    10%,
    30%,
    50%,
    70%,
    90%
      transform: translateX(-2px)

    20%,
    40%,
    60%,
    80%
      transform: translateX(2px)