@import '../styles/themes/themes.less';

.@{bk-prefix}-navigation {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  &-title {
    display: flex;
    flex: 0 0 260px;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding: 0 16px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, .05);

    .title-icon {
      display: flex;
      flex: 0 0 28px;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #768197;
    }

    .title-desc {
      display: inline-block;
      margin-left: 16px;
      overflow: hidden;
      font-size: 16px;
      font-weight: bold;
      line-height: 24px;
      color: #96a2b9;
      white-space: nowrap;
    }
  }

  &-header {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    padding-right: 24px;
    overflow: hidden;
    background: @nav-header-bg-color;

    .header-right {
      display: flex;
      flex: 1;
      align-items: center;
      height: 100%;
    }
  }

  &-wrapper {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: row;
    min-height: 0;

    .navigation-nav {
      position: relative;
      z-index: 101;
      display: flex;
      flex: 0 1 auto;
      flex-direction: column;
      width: 60px;
      min-width: 0;
      min-height: 0;
      overflow: visible;
      transition: width cubic-bezier(.4, 0, .2, 1) .3s;

      &:hover {
        cursor: pointer;
      }

      .nav-slider {
        display: flex;
        flex: 1;
        flex-direction: column;
        width: 60px;
        height: 100%;
        background-color: @nav-bg-color;
        transition: width cubic-bezier(.4, 0, .2, 1) .3s;

        &-list {
          flex: 1 1 auto;
          max-height: calc(100vh - 100px);
          padding: 12px 0 4px 0;
          margin: 0;
          overflow: auto;

          &::-webkit-scrollbar {
            display: none;
            width: 6px;
            height: 5px;

            &:hover {
              transition: opacity 340ms ease-out;
              transform: none;
            }
          }
        }

        &-footer {
          display: flex;
          flex: 0 0 56px;
          align-items: center;
          justify-content: flex-start;
          padding-left: 14px;

          .footer-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            font-size: 14px;
            color: #63656e;
            border-radius: 100%;
            transform-origin: center center;

            &-svg {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 16px;
              height: 16px;
              font-size: 16px;
              transition: transform cubic-bezier(.4, 0, .2, 1) .3s;
              transform-origin: center center;
            }

            &.is-left {
              color: #96a2b9;

              &:hover {
                color: #d3d9e4;
                cursor: pointer;
                background: linear-gradient(270deg, rgba(37, 48, 71, 1) 0%, rgba(38, 50, 71, 1) 100%);
              }
            }

            &:hover {
              color: #B0BDD5;
              cursor: pointer;
              background: #424A5F;
            }
          }
        }
      }
    }

    .navigation-container {
      position: relative;
      display: flex;
      flex: 1 1 1px;
      flex-direction: column;
      min-width: 0;
      max-width: calc(100vw - 60px);
      min-height: 0; 

      .container-header {
        display: flex;
        flex-basis: 60px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 60px;
        padding: 0 24px;
        background: #fff;
        border-bottom: 1px solid #dcdee5;
        box-shadow: 0px 3px 4px 0px rgba(64, 112, 203, .06);

        &-title {
          height: 21px;
          font-size: 16px;
          line-height: 21px;
          color: #313238;
        }

        &-sets {
          display: flex;
          flex: 1 1 auto;
          align-items: center;
          justify-content: flex-end;
        }
      }

      .container-content {
        flex: 1;
        max-height: calc(100vh - 60px);
        padding: 20px 24px 0;
        overflow: auto;
        background: #f5f7fa;
      }

      .container-footer {
        display: flex;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
