/* 侧边栏样式 - 基于 UIPro Figma 设计 */
@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: $sidebar-width;
  background-color: #005a9c;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 13.9px 0;
  box-sizing: border-box;
  gap: 14px;
  z-index: $z-index-fixed;
  font-family: 'Noto Sans SC', $font-family-base;
  @include transition-base;

  &--collapsed {
    width: $sidebar-collapsed-width;
    align-items: center;

    .sidebar__header {
      justify-content: center;
      padding: 0;
      width: 100%;
    }

    .sidebar__logo {
      justify-content: center;
    }

    .sidebar__logoText {
      display: none;
    }

    .sidebar__navWrapper {
      width: 100%;
      align-items: center;
    }

    .sidebar__nav {
      width: 100%;
      padding: 16px 8px;
      align-items: center;
    }

    .sidebar__toggle {
      position: absolute;
      right: -12px;
    }

    .sidebar__item {
      justify-content: center;
      padding: 8px;
      width: calc(100% - 16px);
    }

    .sidebar__label {
      display: none;
    }

    .sidebar__bottomNav {
      padding: 16px 8px;
      align-items: center;
    }

    .sidebar__bottomMenu {
      align-items: center;
      width: 100%;
    }

    .sidebar__logoutItem {
      justify-content: center;
      padding: 8px;
      width: calc(100% - 16px);
    }
  }

  &__header {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 12px;
    flex-shrink: 0;
  }

  &__logo {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  &__logoIcon {
    height: 36px;
    width: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  &__logoText {
    margin: 0;
    position: relative;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: $white;
  }

  &__navWrapper {
    width: $sidebar-width;
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  &__nav {
    width: 244px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 4px 16px 16px;
    box-sizing: border-box;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;

    /* 滚动条样式 */
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 2px;
    }
  }

  &__toggle {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    border-radius: 9999px;
    width: 24px;
    height: 24px;
    background-color: $white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    @include transition-fast;

    &:hover {
      background-color: #f3f4f6;
    }

    svg {
      width: 14px;
      height: 14px;
      color: #6b7280;
    }
  }

  &__item {
    cursor: pointer;
    border: none;
    padding: 8px 16px;
    background-color: transparent;
    align-self: stretch;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    @include transition-fast;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    &--active {
      background-color: rgba(255, 255, 255, 0.2);

      .sidebar__label {
        font-weight: 700;
      }
    }
  }

  &__icon {
    height: 28px;
    width: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    img, svg {
      width: 100%;
      height: 100%;
      color: $white;
    }
  }

  &__label {
    position: relative;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: $white;
    text-align: left;
  }

  &__bottomNav {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    flex-shrink: 0;
    margin-top: auto;
  }

  &__bottomMenu {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  &__logoutItem {
    cursor: pointer;
    border: none;
    padding: 8px 16px;
    background-color: transparent;
    align-self: stretch;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    @include transition-fast;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}
