@import './_var.styl'
@import './_mixin.styl'

.tn-header
  z-index 9998
  overflow hidden
  box-sizing border-box
  position fixed
  top 0
  left 0
  width 100%
  height 44px
  border-bottom 1px solid #c5c5c5
  background-color #f8f8f8
  font-weight bold
  &__bg
    overflow hidden
    box-sizing border-box
    position absolute
    top 0
    left 0
    right 0
    bottom: 0
    opacity 1
    transition opacity .3s ease
    &-line
      line-1px(bottom, transparent)
  &__area
    display flex
    position relative
    height 100%
    padding 0 12px
    align-items center
    font-size 15px
    justify-content space-between
    // &-shadow
    //   flex 1
    &-title
      position absolute
      top 0
      left 15%
      right 15%
      bottom 0
      width 70%
      color #000
      text-align center
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      line-height 44px

// iphonex兼容
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)
  .tn-header
    --safe-area-inset-top: env(safe-area-inset-top)
    height calc(40px + var(--safe-area-inset-top))
    padding-top calc(var(--safe-area-inset-top))