@import "./variables.scss";

.sp-header-wrapper {
  background: #272636;
  height: 64px;
  line-height: 64px;
  p {
    margin: 0;
  }
  .sp-header {
    margin: 0 auto;
    position: relative;
  }
  .sp-header-logo {
    .tyler-p {
      font-size: 18px;
      font-weight: bold;
      float: left;
      width: 160px;
      color: #0f95e6;
      padding-left: 25px;
    }
  }
  .channel-info {
    position: absolute;
    top: 20px;
    height: 40px;
    left: 10px;
    .current-channel-select {
      display: inline-block;
      .next-select.medium {
        height: 18px;
        line-height: 18px;
        padding-left: 8px;
        padding-right: 33px;
        font-size: 12px;
        border-width: 1px;
        border-radius: 20px;
        text-align: center;
      }
    }
    .channle-lable {
      font-size: 12px;
      line-height: 20px;
      position: relative;
      vertical-align: middle;
      top: -5px;
      color: #fff !important;
    }
  }
  .current-env {
    position: absolute;
    right: 60px;
    .next-navigation-item-text {
      color: #319adb;
    }
  }
  .user-info {
    position: absolute;
    right: 20px;
    top: 15px;
    color: #fff;
    span {
      position: relative;
      top: -9px;
      left: 5px;
    }
    img {
      width: 30px;
      height: 30px;
      border-radius: 15px;
    }
  }

  .sp-header-nav {
    margin-left: 160px;
    height: 100%;
    .next-navigation-item-content-inner {
      color: #fff;
    }
    .next-navigation-item-content {
      height: 64px;
      line-height: 64px;
    }
  }
  .tyler-p {
    top: -15px;
    vertical-align: top;
    position: absolute;
  }
}