@import 'mixins';

@include b(nav-bar) {
  @include define(background, rgba(249, 249, 249, 0.94));
  @include define(height, 44px);
  @include define(title-color, var(--za-color-text));
  @include define(title-font-size, var(--za-font-size-md));
  @include define(title-font-weight, 500);
  @include define(side-font-size, var(--za-font-size-md));
  @include define(padding-horizontal, 16px);

  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: var(--height);
  background: var(--background);

  @include e(title) {
    position: absolute;
    left: 50%;
    white-space: nowrap;
    color: var(--title-color);
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    transform: translate(-50%, 0);
    margin-left: auto;
  }

  @include e(side) {
    display: flex;
    justify-content: center;
    color: var(--za-theme-primary);
    font-size: var(--side-font-size);
    margin-left: auto;

    @include m(left) {
      margin-left: var(--padding-horizontal);
    }

    @include m(right) {
      margin-right: var(--padding-horizontal);
    }
  }
}