@import '../variables/default.scss';
@import '../mixins/index.scss';

.at-nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: $color-bg;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  height: $at-nav-bar-height;
  line-height: 0;
  @include hairline-bottom();

  /* elements */
  &__left-view {
    flex: 2;
    display: flex;
    align-items: center;
    height: 100%;
    color: $at-nav-bar-link-color;
    font-size: $at-nav-bar-font-size;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: $at-nav-bar-spacing-h * 2;
  }

  &__left-container {
    display: inline-block;
    padding: $at-nav-bar-spacing-v $at-nav-bar-spacing-h;
    text-align: center;
    @include active;
  }

  &__text {
    display: inline-block;
    padding-left: $at-nav-bar-spacing-h;
    height: 100%;
    font-size: $at-nav-bar-back-font-size;
    vertical-align: middle;
    line-height: 1;
    @include line;
  }

  &__right-view {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    color: $at-nav-bar-link-color;
    text-align: right;
    overflow: hidden;
    padding-right: $at-nav-bar-spacing-h * 2;
  }

  &__title {
    flex: 5;
    color: $at-nav-bar-title-color;
    font-size: $at-nav-bar-font-size;
    text-align: center;
    vertical-align: middle;
    line-height: $line-height-base;
    @include line;
  }

  &__right-container {
    display: inline-block;
    padding: $at-nav-bar-spacing-v $at-nav-bar-spacing-h;
    height: 100%;
    font-size: $at-nav-bar-font-size;
    text-align: center;
    box-sizing: border-box;
    @include active;
  }
}