@use 'sass:math';
@use '../../_styles/variables' as *;
@use "pkg:@ohu-mobile/styles" as *;
@use '../../_styles/mixins' as *;

$navBarPrefixClass: #{$prefix}nav-bar;

@mixin nav-bar-btns($color) {
  > .#{$prefix}btn {
    padding: 0 20px;
    color: $color;
    @content;
  }
  > .is-icon-only {
    font-size: 36px;
  }
}

.#{$navBarPrefixClass} {
  &.is-primary {
    background: $navBarPrimaryBackground;
    .#{$navBarPrefixClass}__left {
      @include nav-bar-btns($navBarPrimaryColor) {
        &:active {
          background: $navBarPrimaryActiveBackground;
        }
      };
    }
    .#{$navBarPrefixClass}__right {
      @include nav-bar-btns($navBarPrimaryColor) {
        &:active {
          background: $navBarPrimaryActiveBackground;
        }
      };
    }
    .#{$navBarPrefixClass}__center {
      color: $colorTextBaseInverse;
    }
  }
  &-inner {
    display: flex;
    height: $navBarHeight - 2px;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
  }
  &__left {
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    @include nav-bar-btns($navBarColor) {
      &:active {
        color: $navBarColor
      }
    };
  }
  &__center {
    height: 100%;
    color: $navBarColor;
  }
  &__title {
    box-sizing: border-box;
    padding: math.div(($navBarHeight - $navBarTitleLineHeight), 2) 0;
    text-align: center;
    font-size: $navBarFontSize;
    font-weight: normal;
    line-height: math.div($navBarTitleLineHeight, $navBarFontSize) * 1em;
    @include ellipsis;
  }
  &__right {
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    @include nav-bar-btns($navBarColor) {
      &:active {
        color: $navBarColor;
      }
    };
  }
}