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

.header-container {
  position: fixed;
  width: 64px;
  background-image: linear-gradient(179deg, #E9FBFF 0%, #F3F5FF 100%);
  height: 100%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.header-bottom-menu {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 16px;
  .menu-item {
    height: 36px;
    width: 36px;
    margin-bottom: 8px;
    border-radius: $devui-border-radius-card;
    transition: all $devui-animation-duration-base $devui-animation-ease-in-out-smooth;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:hover {
      background: $devui-base-bg;
      box-shadow: $devui-shadow-length-base $devui-light-shadow;

      svg path{
        fill: $devui-icon-fill-hover;
        stroke: none;
      }
    }
    a {
      display: flex;
      align-items: center;
    }
  }
}

:host ::ng-deep .menu-item:hover .header-language-switch,
:host ::ng-deep .header-top-menu .header-menu-container .header-menu-item .logo:hover,
:host ::ng-deep .header-top-menu .header-menu-container .menu-selected-item .logo{
  svg path{
    fill: $devui-icon-fill-hover;
    stroke: none;
  }
}

:host ::ng-deep .header-top-menu .header-menu-container .menu-selected-item .text,
:host ::ng-deep .header-top-menu .header-menu-container .header-menu-item .logo:hover + .text{
  color: $devui-text !important;
}


.expand-sidebar {
  width: 32px;
  height: 32px;
  margin-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: $devui-border-radius-card;
  transition: all $devui-animation-duration-base $devui-animation-ease-in-out-smooth;
  cursor: pointer;

  &:hover {
    background: $devui-base-bg;
    box-shadow: $devui-shadow-length-base $devui-light-shadow;

    svg path{
      fill: $devui-icon-fill-hover;
      stroke: none;
    }
  }
}