@import '~ng-devui/styles-var/devui-var.scss';

d-nav-sprite {
  width: 200px;
  position: fixed;
  top: 22px;
  right: 40px;
  height: 100%;
  z-index: calc(#{$devui-z-index-framework} + 1);
  padding: 8px 0 8px 8px;
  border-radius: 16px;
}

:host ::ng-deep d-nav-sprite div.devui-nav-sprite-header {
  display: none !important;
}

@media (max-width: 1800px) {
  d-nav-sprite {
    width: 150px !important;
  }
}

@media (max-width: 1250px) {
  d-nav-sprite {
    display: none;
  }
}

.devui-api-container {
  background-color: $devui-base-bg;
  padding: 20px;
  margin-top: 20px;
  box-shadow: $devui-shadow-length-base $devui-light-shadow;
  border-radius: 16px;
  margin-bottom: 20px;
}

:host ::ng-deep d-nav-sprite .devui-nav-sprite-content .devui-nav-sprite-menus > li:not(.disabled):hover {
  background: $devui-list-item-hover-bg;
}

:host ::ng-deep d-nav-sprite .devui-nav-sprite-content .devui-nav-sprite-menus > li {
  padding-left: 16px;
  border-radius: $devui-border-radius-full;
  line-height: 36px;
  height: 36px;
  font-size: $devui-font-size-sm;

  &.active {
    background: $devui-list-item-active-bg;
  }
}

:host ::ng-deep d-nav-sprite .devui-nav-sprite-content .devui-nav-sprite-menus > li .nav-item a:hover {
  color: #252b3a !important;
}
