@import './../../variable/config.scss';
@import './../../mixins/rem.scss';

.header {
  width: 100%;

  .header-row {
    .header-primary {
      display: flex;
      width: 100%;

      .logo {
        display: flex;
        width: pxToRem(585.05px);
        height: pxToRem(80.02px);
        background: url('/src/assets/logo/logo.png') no-repeat;
        background-size: 100% 100%;
        flex: none;
        align-items: center;

        .logo-text {
          display: inline-block;
          font-size: pxToRem(30px);
          font-weight: bold;
          line-height: pxToRem(40px);
          margin-left: pxToRem(164.28px);
          color: rgba(89, 240, 251,1);
        }
      }

      .logo-resource {
        width: pxToRem(518px);
        height: pxToRem(90px);
        margin-left: pxToRem(50px);
        background-size: cover;
        flex: none;
      }
    }

    .header-secondary {
      position: absolute;
      right: 0;
      display: flex;
    }

    .header-logo {
      display: flex;
      height: $top-height;
      padding-right: 0.12rem;
      justify-content: center;
      align-items: center;

      .logo-img {
        height: $top-height;

        &:hover {
          transform: scaleX(-1);
          transition: transform 1s;
        }
      }

      .logo-text {
        margin-left: 0.12rem;
        font-size: 0.24rem;
        text-shadow: 3px 2px 2px $text-shadow-color;
      }
    }

    .sys-extend {
      width: 100%;
      height: pxToRem(42px);
      margin-top: pxToRem(13.35px);
      margin-left: pxToRem(-32.24px);
      background: url('/src/assets/logo/nav.png') no-repeat;
      background-size: 100% 100%;
      .amos-nav-horizontal .amos-nav-item:hover > a::after,
      .amos-nav-horizontal .amos-nav-item.amos-nav-item-active > a::after {
        background: none;
      }

      .amos-nav-horizontal {
        display: flex;
        align-items: center;
        margin-left: pxToRem(21.18px);
      }

      & > .amos-nav-horizontal > ul {
        float: right;
      }

      .amos-nav-item {
        height: pxToRem(42px);
        width: pxToRem(194.16px);
        background-size: 100% 100%;
        &.amos-nav-item-active {
          background: url('/src/assets/logo/nav-item.png') no-repeat;
          background-size: pxToRem(194.16px) pxToRem(60px);
          a {
            color:rgba(247, 255, 0,1);
          }
          &:after {
            position: absolute;
            bottom: 0;
            left: pxToRem(52px);
            width: pxToRem(90px);
            height: pxToRem(2px);
            background: #FFF700;
            content: '';
          }
        }
        &:hover {
          transform: none;
        }

        a {
          width: 100%;
          height: 100%;
          padding: 0;
          font-size: pxToRem(25px);
          line-height: pxToRem(43px);
          font-weight:500;
          color:rgba(0, 202, 206,1);
          opacity: 1;
          text-align: center;
        }
      }
    }

    .header-search {
      width: 1.8rem;
      padding: 0 0.06rem;
      border-left: 1px solid transparent;

      .tip-search {
        height: $top-height - 0.144rem;
        line-height: $top-height - 0.144rem;
        color: white;
        background-color: rgba(255, 255, 255, 0.2);
        border: 1px solid transparent;
      }
    }

    .sys-tools {
      border-left: 1px solid transparent;

      .ui-menu {
        .ui-menu-item {
          display: flex;
          height: $top-height;
          padding: 0 0.06rem;
          margin: 0;
          border-right: 1px solid transparent;
          justify-content: center;
          align-items: center;

          &:hover {
            color: white;
            background: #431d6a;
          }

          &:last-child {
            border-right: 0;
          }
        }

        &.horizontal {
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }

      &.sys-tools-min {
        .ui-menu {
          &.horizontal {
            display: flex;
            padding-right: 0;
            justify-content: flex-end;
            align-items: center;

            .ui-menu-item {
              padding: 0 0.06rem;
              border-right: 1px solid transparent;

              &:last-child {
                border-right: 0;
              }
            }
          }
        }
      }
    }
  }
}

.header-logo.mixin-log {
  justify-content: start !important;

  .logo-bg {
    width: $top-height;
    height: $top-height - 0.06rem;
    margin-left: 0.06rem;
    text-align: center;
    background-size: 100% 100%;

    .mixin-logo-img {
      height: 0.216rem;
      cursor: pointer;
      transform: rotate(360deg);
      animation: logoRotation 6s linear infinite;
    }

    .mixin-logo-img-hover-rotate {
      height: 0.216rem;
      cursor: pointer;
      transition: all 1s ease-in-out;

      &:hover {
        transform: rotate(360deg);
      }
    }
  }

  .mixin-logo-title {
    height: $top-height - 0.06rem;
  }
}

@keyframes logoRotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
