@import '../bootstrap'
@import '../theme'

bottom-nav($material)
  background-color: $material.cards

theme(bottom-nav, "bottom-nav")

.bottom-nav
  bottom: 0
  box-shadow: 0 3px 14px 2px rgba(#000, .12)
  display: flex
  justify-content: center
  transform: translate(0, 60px)
  transition: all .4s $transition.swing
  width: 100%
  z-index: 4

  &--absolute
    position: absolute

  &--active
    transform: translate(0, 0)
  
  &--fixed
    position: fixed

  .btn
    background: transparent !important
    border-radius: 0
    box-shadow: none !important
    font-weight: 400
    height: 100%
    margin: 0
    max-width: 168px
    min-width: 80px
    padding: 6px 0 10px
    text-transform: none
    opacity: .5
    width: 100%

    .btn__content
      flex-direction: column-reverse
      font-size: 12px
      white-space: nowrap
      will-change: font-size

      i.icon
        color: inherit
        margin-bottom: 4px
        transition: all .4s cubic-bezier(.25, .8, .50, 1)

      span
        line-height: 1

    &--active
      opacity: 1

      .btn__content
        font-size: 14px

        &:before
          opacity: 0

        .icon
          transform: none

    &:not(.btn--active)
      filter: grayscale(100%)

  &--shift
    .btn__content
      font-size: 14px

    .btn
      transition: all .3s
      min-width: 56px
      max-width: 96px

      &--active
        min-width: 96px
        max-width: 168px

.bottom-nav--shift
  .btn:not(.btn--active) .btn__content
    .icon
      transform: scale(1, 1) translate(0, 10px)

    span
      color: transparent