@import '../style/index.scss';

.#{$kara-prefix}-nav-bar {
  display: flex;
  align-items: center;
  height: 127px;
  line-height: 127px;
  padding: $nav-bar-pdx;
  border-bottom: 1px solid #bbb;
  background-color: #f5f7f6;

  @media (min-width: 414px) {
    height: 115px;
    line-height: 115px;
  }

  &-light {
    background-color: $nav-bar-bg;
  }

  &-title {
    font-size: 50px;
  }

  &-left,
  &-title,
  &-right {
    flex: 1;
    height: 100%;
  }

  &-title {
    text-align: center;
  }

  & &-left i {
    width: 127px;
    height: 100%;
    line-height: 127px;
    text-align: center;
    vertical-align: middle;
    color: #999;

    @media (min-width: 414px) {
      width: 115px;
      line-height: 115px;
    }
  }
}