.tag-cloud
  &-list
    animation: tagsFadeIn .6s cubic-bezier(.4, 0, .2, 1)

    &:hover a:not(:hover)
      opacity: .7
      transform: scale(.98)

    a
      position: relative
      display: inline-block
      margin: 5px
      padding: 3px 12px
      line-height: 1.7
      transition: all .3s cubic-bezier(.4, 0, .2, 1)
      addBorderRadius(7)
      overflow: hidden
      color: white
      transform: translateY(0) scale(1)
      will-change: transform, background-color, box-shadow

      &::before
        position: absolute
        top: 0
        left: -100%
        z-index: -1
        width: 100%
        height: 100%
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent)
        content: ''
        transition: left .6s cubic-bezier(.4, 0, .2, 1)

      &:hover
        background: var(--btn-hover-color) !important
        box-shadow:
          0 6px 20px rgba(0, 0, 0, .12),
          0 4px 8px rgba(0, 0, 0, .08),
          0 0 0 1px rgba(255, 255, 255, .05)
        color: var(--btn-color) !important
        transform: translateY(-2px) scale(1.02)

        &::before
          left: 100%

      &:active
        box-shadow:
          0 3px 8px rgba(0, 0, 0, .15),
          0 1px 3px rgba(0, 0, 0, .1)
        transition: all .15s cubic-bezier(.4, 0, .2, 1)
        transform: translateY(-1px) scale(.98)

      +maxWidth768()
        zoom: .85

        &:hover
          transform: translateY(-1px) scale(1.01)

        &:active
          transform: translateY(0) scale(.99)

        &::before
          display: none

  &-title
    font-size: 2.57em
    animation: titleSlideIn .8s cubic-bezier(.4, 0, .2, 1)

    +maxWidth768()
      font-size: 2em

@keyframes tagsFadeIn
  from
    opacity: 0
    transform: translateY(20px)

  to
    opacity: 1
    transform: translateY(0)

@keyframes titleSlideIn
  from
    opacity: 0
    transform: translateX(-30px)

  to
    opacity: 1
    transform: translateX(0)

.page-title
  & + .tag-cloud-list
    text-align: left
