@import 'themes/global-variables.less';
@import 'ng-zorro-antd/style/color/colors.less';

:host {
  display: flex;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@app-sidebar-width: 170px; // ensure this is kept equal to <nz-sider [nzWidth]> in template
@app-sidebar-collapsed-width: 80px; // ensure this is kept equal to <nz-sider [nzCollapsedWidth]> in template
@app-header-height: 64px;
@app-header-padding: 0;

// SIDER MENU

.app-layout {
  min-height: 100vh;
}

nz-sider {
  width: @app-sidebar-width;
  overflow: auto;
  height: 100%;
  position: fixed;
  left: 0;
}

.right-layout {
  margin-left: @app-sidebar-width;
  width: 100%;
  position: relative;
  transition: all 0.2s, padding 0s;
  background-color: @layout-header-background;

  &.is-collapsed {
    margin-left: @app-sidebar-collapsed-width;
  }
}

.sidebar-menu {
  margin-top: -20px; // removes gap caused by home link's empty menu-group title
  ::ng-deep .ant-menu-title-content {
    .anticon {
      margin-right: 4px;
    }
  }
  &.is-collapsed {
    // adjusts menu for collapsed state
    margin-top: -8px;
    ::ng-deep .ant-menu-item-group-title {
      text-align: center;
    }
    // hide menu label when collapsed
    ::ng-deep .ant-menu-title-content a span {
      display: none;
    }
  }
}

.cc-notice {
  margin-top: 5em;
  text-align: center;
  width: 170px;
  .cc-glyph {
    width: 56px;
  }
  .cc-txt {
    width: 76px;
  }
  &.is-collapsed {
    width: 80px;
    .cc-glyph {
      width: 35px;
    }
    .cc-txt {
      display: none;
    }
  }
}
// BRANDING
.sidebar-logo {
  height: 90px;
  img {
    width: 133px;
    height: auto;
    margin: 12px 16px;
    transition: all 0.2s;
  }
  &.is-collapsed {
    img {
      width: 40px;
      height: auto;
      margin: 12px 20px;
      transition: all 0.2s;
    }
  }
}

// HEADER
.ant-layout-header {
  height: @app-header-height;
  line-height: @app-header-height;
  padding: @app-header-padding;
  position: fixed;
  width: calc(~'100vw - @{app-sidebar-width}');
  z-index: 10;
  color: @geekblue-2;
  transition: all 0.2s;
  &.is-collapsed {
    transition: all 0.2s;
    width: calc(~'100vw - @{app-sidebar-collapsed-width}');
  }
}

.header-trigger {
  height: @app-header-height;
  cursor: pointer;
  color: @geekblue-2;
  padding: 1em 1em 1em 0;
}

#header-row {
  flex-wrap: nowrap;
}

#header-menu {
  text-align: right;
  height: @app-header-height;
}

#header-search {
  height: @app-header-height;
  padding-right: @default-padding-md;
}

#header-viewer {
  text-align: right;
  padding-right: 1em;
}

.header-quicksearch p,
.header-menu p,
.header-user p {
  color: @geekblue-2;
}

// SIDEBAR MENU

// CONTENT
nz-content {
  margin-top: @app-header-height;
  overflow: initial;
  position: relative;
  z-index: 1;
  background-color: #273340;
  border-top: 1px solid #3e5166;
  border-left: 1px solid #3e5166;
  padding: 12px;
  border-top-left-radius: @border-radius-lg;
}
