@import '../../styles/common.scss';
@import '../../styles/mixin.scss';

$color-white : #fff;
$color-blue : #108ee9;
$color-blue-deeper: #34495E;
$color-grey-deep : #929aac;
$color-black-light : #404040;
/* .header-box.css */
.header-box {
  @include wrap-width-limit;
  display: block;
  font-size: 0.14rem;
  z-index: 99;
  .content {
    @include row-width-limit;
    margin: 0 auto;
    zoom: 1;
    overflow: hidden;
  }
  .logo {
    font-size: .3rem;
    float: left;
    margin: 0 .2rem 0 0;
    color: $color-white;
    //cursor: pointer;
    a{
      color: $color-white;
      &:hover {
        color: $color-white;
      }
      &:focus{
        text-decoration: none;
      }
    }
  }

  .nav-toolbar {
    font-size: .15rem;
    float: left;
  }

  .user-toolbar{
    float: right;
    height: .64rem;
    display: flex;
    align-items: center;
    .toolbar-li{
      &:first-child{
        width: 2rem;
      }
      float: left;
      margin: 0 0 0 .12rem;
      font-size: .2rem;
      cursor: pointer;
      color: $color-white;
      &:not(:last-child){
        margin: 0 .12rem;
      }
      &:hover{
        color: $color-blue;
        a{
          color: $color-blue;
        }
      }
      a{
        color: $color-white;
        &:hover{
          color: $color-blue;
        }
        &:focus{
          text-decoration: none;
        }
      }
      i{
        margin-right: .03rem;
      }
    }
  }
}