// hx-navbar 导航栏组件的样式
@import "./../variable.scss";

$height-navbar: 60px;
$height-admin-navbar: 50px;

.hx-nav {
  height: $height-navbar;
  background-color: white;
  width: 100%;
  display: block;
  z-index: 10;
  position: relative;
  
  box-shadow: $shadow-md;
  .nav-left, .nav-right {
    display: inline-block;
    height: $height-navbar;
    position: relative;
    padding: $height-navbar / 4;
    .logo {
      height: $height-navbar / 2;
    }
    .title {
      height: $height-navbar / 2;
      display: inline-block;
      vertical-align: top;
      line-height: $height-navbar / 2;
      margin-left: $pm-sm;
      font-weight: 800;
    }
    .tag {
      height: $height-regular/2;
      line-height: $height-regular/2;
      font-size: $font-sm;
      background-color: $color-green;
      color: white!important;
      vertical-align: top;
      padding: 2px 4px;
      border-radius: $pm-xs;
    }
  }
  .nav-right {
    float: right;
    line-height: $height-regular;
  }
  .nav-buttons {
    float: right;
    height: $height-navbar;
    .hx-dropdown {
      margin: 0 $pm-sm;
      position: relative;
      .button {
        font-size: 16px;
        background-color: transparent;
      }
      .pad-options {
        .item.selected {
          background-color: $color-main;
          color: white;
        }
      }
      &:after {
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        height: 3px;
        background-color: $color-main;
        border-radius: 10px;
        bottom: 0;
        transform: scale(.0, 1.0);
        transition: all .4s;
      }
    }
    .hx-dropdown:hover, .hx-dropdown.selected {
      &:after {
        transform: scale(.5, 1.0);
      }
    }
    .hx-dropdown.selected {
      &:after {
        background-color: $color-green;
        transform: scale(.5, 1.0);
      }
    }
  }
  & + .hx-main {
    height: calc(100% - #{$height-admin-navbar});
    background-color: white;
    display: block;
    width: 100%;
    overflow-y: auto;
  }
  &.admin {
    box-shadow: none;
    border-bottom: 1px solid $color-gray;
    height: $height-admin-navbar;
    display: block;
    .nav-left {
      padding: 10px ($height-navbar/4 + $height-normal);
      display: inline-block;
      height: $height-admin-navbar;
      .logo {
        border-radius: 50% 50%;
        margin-right: $pm-sm/2;
      }
    }
    .nav-right {
      height: $height-admin-navbar;
      padding: $pm-sm;
    }
  }
}

@media screen and (max-width: 640px) {
  .hx-nav {
    .nav-buttons {
      position: fixed;
      left: 0;
      visibility: hidden;
      width: 100%;
      display: block;
      top: $height-navbar;
      @include hcalc(calc(100% - 60px));
      .mask {
        height: 100%;
        width: 100%;
        display: block;
        opacity: .0;
        left: 0;
        top: 0;
        position: absolute;
        background-color: rgba(0,0,0,.5);
        transition: opacity .4s;
      }
      &.show {
        visibility: visible;
        .mask {
          opacity: 1.0;
        }
        .hx-dropdown {
          opacity: 1.0;
        }
      }
      .hx-dropdown {
        width: 100%;
        margin: 0;
        height: auto;
        opacity: .0;
        background-color: $color-gray-light;
        transition: all .4s;
        .button {
          background-color: white;
          height: $height-normal;
        }
        &:hover {
          .list {
            top: 0;
          }
        }
        .pad-options, .list {
          display: block;
          position: relative;
          top: 0;
          padding: 0 $pm-sm;
          opacity: 1.0;
          box-shadow: none;
          border-radius: 0;
          background-color: transparent;
          &::before {
            display: none;
          }
          .item {
            transform: .4s;
            left: 0;
            margin-bottom: $pm-sm/2;
            height: $height-normal;
            line-height: $height-normal;
            background-color: $color-gray-light;
            &.selected {
              background-color: $color-main;
              color: white;
            }
          }  
        }
        &::after {
          display: none;
        }
      }
    }
    .btn-toggle {
      height: $height-regular;
      width: $height-regular;
      @include centerVertical;
      right: $pm-md;
      position: relative;
      background-color: white;
      &::before, &::after {
        content: "";
        position: absolute;
        width: 60%;
        height: 2px;
        background-color: $color-gray-deep;
        left: 20%;
        transition: all .4s;
        transform: rotate(0deg);
      }
      &::before {
        top: 35%;
      }
      &::after {
        bottom: 35%;
      }
    }
    .btn-toggle.on {
      &::before {
        top: 50%;
        transform: rotate(45deg);
      }
      &::after {
        top: 50%;
        transform: rotate(-45deg);
      }
    }
  }
}