@import "../../style/base.styl"

.header {
  width 100%
  height 100%
  background var(--background-color)
  padding 0 20rem
  box-sizing border-box
  display flex
  justify-content space-between
  align-items center

  .header-left {
    height 100%
    display flex
    justify-content flex-start

    .brand {
      height 100%
      display flex
      justify-content flex-start
      align-items center
      cursor pointer

      .logo {
        width 46rem
        height 46rem
        margin-right 10rem

        img {
          width 100%
        }

      }


      .title {
        font-size 36rem
        font-weight bold
      }
    }


    .website-count {
      box-sizing border-box
      display flex
      align-items flex-end
      font-size 14rem
      margin-left 10rem
      padding-bottom 12rem
      cursor pointer

      +picx-mobile() {
        display none
      }
    }
  }


  .header-right {
    .user-info {
      display: flex;
      align-items: center;
      cursor: pointer;

      .username {
        font-size: 16rem;
      }

      .avatar {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38rem;
        height: 38rem;
        color: var(--default-text-color);
        border-radius: 50%;
        border: 1rem solid var(--default-text-color);
        margin-left: 10rem;
        padding: 1rem;
        box-sizing: border-box;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

    }
  }
}