@import '../../global.less';
@action-size: 50px;

.header {
  height: @header-height;
  position: relative;
  background-color: rgba(255, 255, 255, .8);
  z-index: 10;
  color: @primary-color;
  user-select: none;
}

.left {
  width: @action-size;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  text-align: center;
  line-height: @header-height;
  font-size: 1.5rem;
  transition: background-color .15s;

  &:active {
    background-color: rgba(255, 255, 255, .2);
  }
}

.title {
  height: 100%;
  position: relative;
  width: 100%;
  padding: 0 @action-size;
  text-align: center;
  line-height: @header-height;
  z-index: 1;
  font-size: 1.2rem;
  font-weight: bold;
}

.right {
  width: @action-size;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  text-align: center;
  line-height: @header-height;
}
