@import './../scss/sipsd-animation.scss';
$header-icon:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAA8CAYAAACEhkNqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3NGE5MDQyMy1kNjc2LTQ2ZTktYWFkOC00ZjIyZWU5M2VhZjEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUQ5OUNERUUxODE4MTFFN0JCQTE4RTE4Q0IwNENFRkYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjY1OTdENTYxODE3MTFFN0JCQTE4RTE4Q0IwNENFRkYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpmNWIzZjUzMC0zYmMyLTRiZDQtYTVhNi1kMDVjNWVhYTk0ZjUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NzRhOTA0MjMtZDY3Ni00NmU5LWFhZDgtNGYyMmVlOTNlYWYx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';
$font-family: Microsoft Yahei;
$resXS: 500px;
$resS: 660px;
$resXXS: 435px;
$right-content-width:140px;

.sipsd-header-host {
  /deep/ {
    * {
      box-sizing: border-box;
      font-family: $font-family;
    }
  }
}

.clearfix {
  zoom: 1;
}

.sipsd-header {
  width: 100%;
  height: 50px;
  display: flex;
  background-color: #f8f8f8;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  min-width: 700px;
  transition: left .55s, width .55s;
}

.left-content {
  width: calc(100% - #{$right-content-width});
  height: 50px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.user-profile {
  float: right;
  min-width: 230px;
  margin-top: 10px;
}

@media screen and (max-width: $resXS) {
  .sipsd-header {
    // padding: 0 20px;
  }
}

@media (max-width: $resXXS) {
  .user-profile {
    min-width: 136px;
  }
}

.right-content {
  height: 100%;
  color: #3d3d3d;
  white-space: normal;
  position: relative;
}

.user-info {
  font-size: 14px;
  height: 50px;
  width: 140px;
  float: right;
  border-left: 1px solid #ccc;
  display: flex;
  align-items: center;
  /*justify-content: center;*/
  cursor: pointer;
  transition: background-color .55s;
}

.user-icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  background: url($header-icon) no-repeat;
  background-position: -90px 0;
}

.user-name {
  width: calc(100% - 40px - 35px);
  display: inline-block;
  margin: 0;
  overflow: hidden;
  line-height: 50px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ion-sign {
  margin-left: 5px;
  font-size: 22px;
  font-family: FontAwesome;
}

.user-info-active {
  background: #fff;

  .user-icon {
    background-position: -90px -30px !important;
  }
}

.user-operation {
  position: absolute;
  top: 50px;
  width: 140px;
  background: #fff;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  right: 0;
}

.show-user-operation {
  /deep/ {
    .sipsd-header-item-host {
      height: 40px;
    }
  }
}

.hide-user-operation {
  /deep/ {
    .sipsd-header-item-host {
      height: 0;
    }
  }
}