$header-height: 55px;
$sidenav-width: 255px;
$sidenav-width-mini: 55px;

.app-layout {
  .app-header {
    position: relative;
    height: $header-height;
    border-bottom: 1px solid;

    .branding {
      display: flex;
      flex-shrink: 0;
      width: $sidenav-width - 56;
      height: $header-height;
      margin: 0 -16px;

      ~.mat-icon-button {
        margin-right: -8px;
      }

      >img {
        height: $header-height;
      }

      >.mat-icon {
        width: $sidenav-width-mini;
        height: $header-height;
        line-height: $header-height;
        text-align: center;
        font-size: 24px;
      }

      >span {
        line-height: $header-height;
        font-size: 18px;
      }
    }

    .spacer {
      flex: 1 1 auto;
    }

    .mat-button {
      height: $header-height;
      margin: 0;
      border-radius: 0;
      min-width: $header-height;

      &:last-of-type {
        margin-right: -16px;
      }

      .mat-icon+span,
      span+.mat-icon,
      span+.avatar {
        margin-left: 8px;
      }

      .avatar {
        width: .7*$header-height;
        height: .7*$header-height;
        border-radius: 50%;
      }
    }

    .mat-icon-button {
      margin: 0 4px;

      &:first-of-type {
        margin-left: 0;
      }

      &:last-of-type {
        margin-right: 0;
      }
    }
  }

  .app-body {
    position: relative;
    width: 100%;
    height: calc(100% - #{$header-height});
  }

  .app-sidenav-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    .app-sidenav-wrap {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .app-sidenav {
      width: $sidenav-width;
      box-shadow: 0 $header-height 3px rgba(0, 0, 0, .2);

      .app-body {
        overflow: hidden;

        >div {
          width: $sidenav-width + 17px;
          height: 100%;
          overflow-x: hidden;
          overflow-y: scroll;
          -webkit-overflow-scrolling: touch;

          &::-webkit-scrollbar {
            -webkit-appearance: none;

            &:vertical {
              width: 17px;
            }
          }
        }
      }

      .app-menu {
        width: $sidenav-width;
        margin: 0;
        padding: 0;
        list-style: none;

        .app-menu-item {
          display: block;
          height: auto;
          padding: 0;

          >a {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 48px;
            padding: 0 16px;
            line-height: 18px;
            text-decoration: none;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -webkit-box-align: center;

            .spacer {
              flex: 1 1 0%;
            }

            .app-menu-icon {
              width: 18px;
              height: 18px;
              margin-left: 2px;
              margin-right: 20px;
              font-size: 18px;
              line-height: 16px;
            }

            .app-menu-name {
              margin-right: 5px;
            }

            .app-menu-caret {
              display: block;
              text-align: center;
              transition: transform 200ms cubic-bezier(.4, 0, .2, 1), -webkit-transform 200ms cubic-bezier(.4, 0, .2, 1);
            }
          }

          .app-menu {
            margin-left: -20px;
            overflow: hidden;
            opacity: 0;
            transition: all 200ms cubic-bezier(.4, 0, .2, 1);
          }
        }

        .app-menu-item.focus {
          >a {
            .app-menu-caret {
              -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
            }
          }

          >.app-menu {
            margin-left: 0;
            opacity: 1;
          }
        }
      }

      .app-setting {
        display: flex;
        flex-direction: column;
        padding: 16px;

        >button:not(:last-of-type) {
          margin-bottom: 8px;
        }

        .avatar {
          width: .4*$sidenav-width;
          height: .4*$sidenav-width;
          padding: 0;
          background: none;
          border: none;
          border-radius: 50%;
          align-self: center;

          >img {
            width: 100%;
            height: 100%;
          }

          &+h3 {
            align-self: center;
          }
        }

        .mat-radio-group {
          display: inline-flex;
          flex-direction: column;
          margin-bottom: 16px;

          .mat-radio-button {
            margin-bottom: 8px;
          }
        }

        .theme {
          margin-bottom: 16px;

          >button {
            width: 36px;
            height: 36px;
            padding: 0;
            border: 1px solid;
            overflow: hidden;
            cursor: pointer;

            &:not(:last-child) {
              margin-right: 12px;
            }

            >div {
              width: 0;
              height: 0;
              padding: 0;
              border-bottom: 35px solid;
              border-left: 35px solid transparent;
            }
          }
        }

      }
    }

    .app-sidenav-content {
      .app-header {
        box-shadow: 0 0 3px rgba(0, 0, 0, .2);
      }

      .app-body {
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
  }

  .media-monitor :host & .app-sidenav.mat-drawer-over,
  .media-tablet :host & .app-sidenav.mat-drawer-over {
    width: $sidenav-width-mini;
    transition: width 300ms cubic-bezier(.25, .8, .25, 1);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);

    .app-menu>.app-menu-item.focus>.app-menu {
      display: none;
    }

    &:hover {
      width: $sidenav-width;

      .app-menu>.app-menu-item.focus>.app-menu {
        display: block;
      }
    }

    &~.app-sidenav-content {
      .app-sidenav-wrap {
        width: calc(100% - #{$sidenav-width-mini});
        margin-left: $sidenav-width-mini;
      }
    }
  }
}

.mat-icon {
  &.flag {
    background-position: left center;
  }

  &.theme {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid;
    overflow: hidden;

    >div {
      width: 0;
      height: 0;
      padding: 0;
      border-bottom: 23px solid;
      border-left: 23px solid transparent;
    }
  }
}
.mat-menu-box{
  // 最大像素
  max-height: 300px;
  overflow-y: auto;
  //  max-width: 600;
  .mat-menu-item {
    &.mat-menu-item-header {
      display: flex;
      margin-top: -8px;
      min-width: 360px;
      flex-direction: row;
      align-items: center;
      cursor: default;
  
      :first-child {
        flex: auto;
      }
  
      .mat-icon-button {
        margin-right: -8px;
  
        .mat-icon {
          margin-right: 0;
        }
      }
    }
  
    &.mat-menu-item-footer {
      margin-bottom: -8px;
    }
  
    &.mat-menu-item-empty {
      height: 96px;
      text-align: center;
      line-height: 96px;
    }
  
    &.mat-menu-item-content {
      display: flex;
      align-items: center;
      padding: 0.8px 10px;
      // margin: 5px;
      // mat-menu-list-item
      

      >img {
        width: 36px;
        height: 36px;
        margin-right: 16px;
        border-radius: 50%;
  
        +div {
          >p {
            margin: 0;
            line-height: 1.5;
          }
        }
      }
    }
    
  }
}

.mat-sidenav-content {
  .app-sidenav-wrap {
    .app-body {
      background: url(../../../assets/images/kkk.jpg) no-repeat fixed center/100% 100%;
    }
  }
}