tahnik/devRantron

.bottom_bar_container
  user-select: none
  font-size: 1.5rem
  display: flex
  align-items: center
  background-color: #40415A
  padding: 0.5rem
  .left_items
    margin-right: auto
    display: flex
    align-items: center
    .score
      font-size: 1rem
      margin: 0 1rem
      display: flex
      align-items: center
      justify-content: center
    .upvote, .downvote
      border-radius: 100%
      font-size: 1.2rem
      height: 2rem
      width: 2rem
      cursor: pointer
      position: relative
      .ud_icon
        z-index: 100
        transform: translatey(-2px)
      &.disabled
        opacity: 0.5
        cursor: default
          cursor: default
      .votebefore
        transform: scale(1) !important
      .voteafter
        border: 4px solid
        transform: scale(1.4) !important
        opacity: 0 !important
        transition: all 0.64s cubic-bezier(0.4, 0, 0, 1.3)
      .before
        content: " "
        height: 2rem
        width: 2rem
        position: absolute
        top: 0px
        right: 0px
        border-radius: 100%
        background-color: #D55161
        z-index: 95
        transform: scale(0)
        transition: all 0.32s cubic-bezier(0.4, 0, 0, 1.3)
      .after
        content: " "
        height: calc(2rem - 4px)
        width: calc(2rem - 4px)
        position: absolute
        top: -2px
        right: -2px
        border: 4px solid rgba(0,0,0,0)
        border-radius: 100%
        transform: scale(1)
        opacity: 1
        z-index: 100
        transition: all 0.64s cubic-bezier(0.4, 0, 0, 1.3)
    .upvote
      span:nth-child(1)
        padding-right: 0.1rem
    .downvote
      span:nth-child(1)
        padding-right: 0.2rem
  .right_items
    margin-left: auto
    display: flex
    align-items: center
    .togglable
      display: flex
      overflow: hidden
      margin-right: 1rem
      position: relative
      .trigger
        display: flex
        align-items: center
        justify-content: center
        position: absolute
        right: 0
        &.active
          opacity: 0
          z-index: -1
        p
          margin: 0
          opacity: 0.2
          transition: all 0.3s
          &:hover
            cursor: pointer
            opacity: 1
      .toggle_items
        display: flex
        align-items: center
        justify-content: center
        opacity: 0
        z-index: -1
        transform: translateX(12px)
        &.active
          opacity: 1
          z-index: 99
          transform: translateX(0px)
        .toggle_item
          display: flex
          align-items: center
          justify-content: center
        p
          margin: 0
          margin-left: 1rem
          margin-right: 0.1rem
          transition: all 0.3s
          &:hover
            cursor: pointer
          i
            display: inline-block
            position: relative
            font-family: "Ionicons"
            speak: none
            font-style: normal
            font-weight: normal
            font-variant: normal
            text-transform: none
            text-rendering: auto
            line-height: 1
            -webkit-font-smoothing: antialiased
            -moz-osx-font-smoothing: grayscale
            transition: all 1s
        @keyframes icons
          0%
            transform: scale(0.5)
            opacity: 0.2
          50%
            transform: scale(1.2)
            opacity: 0.8
          100%
            transform: scale(1)
            opacity: 1
        .favorite
          &.active
            p
              i::before
                opacity: 0
              i::after
                position: absolute
                top: 0
                left: 0
                content: "\f388"
                color: #D55161
                animation: icons 0.3s forwards
    .addMention
      display: flex
      align-items: center
      p
        margin: 0
        i
          transition: all 0.3s
          opacity: 0.4
          transform: scale(0.9)
          &:hover
            cursor: pointer
            opacity: 1
            transform: scale(1)

    .comments
      display: flex
      align-items: center
      justify-content: center
      &:hover
        cursor: pointer
      p
        margin: 0
      span
        padding-left: 0.5rem
        font-size: 1rem
  .upvote, .downvote, .comments
    display: flex
    justify-content: center
    align-items: center
  div
    text-align: center
    transition: all 0.2s ease