/**
* 后台头部导航
*/

$border-nav: 1px solid #383D45;
$color-nav-bg: #292D33;
$color-nav-text-normal: #BBB;
$color-nav-text-mute: #777;
$color-nav-text-hover: #FFF;
$color-nav-btn-hover: #202328;
$color-nav-child-focus: #6DA1BB;

.typecho-head-nav {
  padding: 0 10px;
  background: $color-nav-bg;
  position: relative;

  a, button.menu-bar {
    padding: 0 20px;
    height: 36px;
    line-height: 36px;
    color: $color-nav-text-normal;

    &:focus,
    &:hover {
      color: $color-nav-text-hover;
      text-decoration: none;
    }
  }

  button.menu-bar {
    display: none;
  }

  #typecho-nav-list {
    float: left;

    & > ul {
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative;
      float: left;

      &:first-child {
        border-left: $border-nav;
      }

      .parent {
        a {
          display: inline-block;
          border-right: $border-nav;
          background: $color-nav-bg;
        }
      }

      .child {
        position: absolute;
        list-style: none;
        top: 36px;
        display: none;
        margin: 0;
        padding: 0;
        min-width: 160px; 
        max-width: 240px;
        background: $color-nav-btn-hover;
        z-index: 250;

        li {
          &.return {
            display: none;
          }

          a {
            overflow: hidden;
            text-overflow : ellipsis;
            white-space: nowrap;
            display: block;

            &:hover,
            &:focus {
              background: $color-nav-bg;
            }
          }

          &.focus a {
            color: $color-nav-child-focus;
            font-weight: bold;
          }
        }
      }

      .parent a:hover,
      &.focus .parent a,
      &.root:hover .parent a {
        background: $color-nav-btn-hover;
      }

      &.focus .parent a {
        font-weight: bold;
      }

      &.root:hover .child, &.root.expanded .child {
        display: block;
      }
    }
  }

  .operate {
    float: right;
    a {
      display: inline-block;
      margin-left: -1px;
      border: $border-nav;
      border-width: 0 1px;
      
      &:hover {
        background-color: $color-nav-btn-hover;
      }
    }
  }
}

@media (max-width: $screen-phone - 1px) {
  @keyframes out {
    from {left: 0%;}
    to {left: -100%;}
  }

  @keyframes in {
    from {left: -100%;}
    to {left: 0%;}
  }

  .typecho-head-nav {
    padding: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;

    #typecho-nav-list {
      display: none;
    }

    .operate {
      a:last-child {
        border-right-width: 0;
      }
    }

    button.menu-bar {
      display: inline-block;
      border: none;
      background: $color-nav-bg;
      border-right: $border-nav;
      
      &.focus {
        color: $color-nav-text-hover;
  
        & + #typecho-nav-list {
          display: block;
          float: none;
          position: absolute;
          bottom: 36px;
          width: 100%;
          
          & > ul {
            float: none;
            border-bottom: $border-nav;
            position: static;

            &:first-child {
              border-left: none;
            }
            .parent {
              a {
                display: block;
                border: none;
                background: $color-nav-btn-hover;
              }
            }
            .child {
              position: absolute;
              bottom: 0;
              left: 100%;
              top: auto;
              z-index: 20;
              width: 100%;
              max-width: 100%;
              min-width: auto;

              li {
                border-bottom: $border-nav;
                &.return {
                  display: block;
                  text-align: center;
                  font-size: 12px;

                  a {
                    color: $color-nav-text-mute;
                  }
                }
              }
            }
          }

          &.expanded {
            animation: out .15s ease-out forwards;
          }

          &.noexpanded {
            animation: in .15s ease-out forwards;
          }
        }
      }
    }
  }
}
