@require '../_variables.styl';

.tabs
  position fixed
  top auto
  right 0
  left 0
  bottom 0
  z-index 10
  display block
  width 100%
  height tab-height
  background-color tab-background-color
  backface-visibility hidden
  padding 0

  .tab-items
    display flex
    align-items center
    justify-content center

    .tab-item
      position relative
      white-space nowrap
      text-overflow ellipsis

      overflow hidden

      flex-basis 100%
      width 100%

      height tab-height
      line-height tab-height
      color primary
      text-align center
      text-transform uppercase
      vertical-align middle
      padding 0
      margin 0

      .icon
        position relative
        top 3px
        width tab-icon-size
        height tab-icon-size
        vertical-align middle
        padding 0
        margin 0

  .tab-indicator
    width 50%
    position absolute
    z-index 11
    top auto
    left 0
    right 0
    margin-top auto
    margin-bottom -(tab-indicator-height)
    height tab-indicator-height
    background-color tab-indicator-color

    translate-3d(0, 0, 0)

    webkit-transform-one(300ms)

.header-tabs
  top auto
  bottom 0

  .tab-indicator
    margin-top -(tab-indicator-height)
    margin-bottom auto

@require '../_variables.styl';

.tabs
  position fixed
  top auto
  right 0
  left 0
  bottom 0
  z-index 10
  display block
  width 100%
  height tab-height
  background-color tab-background-color
  backface-visibility hidden
  padding 0

  .tab-items
    display flex
    box-orient horizontal

    .tab-item
      display flex

      flex-basis 100%
      flex-grow 1

      align-items center
      justify-content center

      height tab-height
      line-height tab-height

      white-space nowrap
      text-overflow ellipsis

      overflow hidden

      color primary
      text-align center
      text-transform uppercase
      vertical-align middle
      padding 0
      margin 0

      .icon
        position relative
        top 3px
        width tab-icon-size
        height tab-icon-size
        vertical-align middle
        text-align center
        padding 0
        margin 0

  .tab-indicator
    width 50%
    position absolute
    z-index 11
    top auto
    left 0
    right 0
    margin-top auto
    margin-bottom -(tab-indicator-height)
    height tab-indicator-height
    background-color tab-indicator-color

    translate-3d(0, 0, 0)

    webkit-transform-one(300ms)

.header-tabs
  top auto
  bottom 0

  .tab-indicator
    margin-top -(tab-indicator-height)
    margin-bottom auto

Fix tab width in JellyBean
Fix tab width in JellyBean

