@import '../../src/scss/vars';
@import '../../src/scss/mixins';
@import '../../src/scss/animate';

@mixin full {
  flex: 1;
  height: 100%;
}

@mixin flex {
  display: flex;
  align-items: center;
}

.ymu-navbar {
  position: relative;
  display: flex;
  height: $navbar-line-height;
  line-height: $navbar-line-height;
  background-color: #fff;
}

.ymu-navbar-left,
.ymu-navbar-right {
  @include flex;
  @include full;
}

.ymu-navbar-title {
  justify-content: center;
  font-size: $navbar-title-font-size;
  text-align: center;
}

.ymu-navbar-left {
  padding-left: $navbar-herizontal-padding;
  font-size: $navbar-font-size;
  color: $navbar-left-arrow-color;
}

.ymu-navbar-right {
  justify-content: flex-end;
  font-size: $navbar-font-size;
  padding-right: $navbar-herizontal-padding;
}

.icon-left {
  font-size: 26px;
  margin-left: -10px;
}

.ymu-navbar-button {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 $navbar-herizontal-padding;
  margin: 0 -$navbar-herizontal-padding;
  &:active {
    background-color: $navbar-left-button-active-bg-color;
  }
}

.ymu-navbar-button__icon {
  font-size: 24px;
}

.ymu-navbar-button--has-arrow {
  padding-left: 8px;
}