.navFooter {
  padding: 18px 0;
  display: flex;
  flex-flow: row nowrap;
  border-top: 1px solid #e5e5e5;
  font-size: var(--font-size-5);
  align-items: center;

  .userInfo {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
  }

  .userSection {
    padding: 0 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .userAvatar {
      width: 32px;
      height: 32px;
    }

    .userName {
      overflow: hidden;
      color: var(--base-sidebar-foreground, #0a0a0a);
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
      max-width: 100%;
      font-family: var(--font-font-sans, Geist);
      font-size: var(--text-sm-font-size, 14px);
      font-style: normal;
      font-weight: var(--font-weight-semibold, 600);
      line-height: 100%;
    }
  }

  &.collapse {
    .userSection {
      padding: 0 14px;

      .userName {
        display: none;
      }
    }
  }
}

.navFooter2 {
  padding: 25px 30px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  background-color: var(--color-5-1);
  font-size: var(--font-size-5);

  &.collapse {
    padding-left: 0;
    padding-right: 0;
    width: 56px;
    flex-flow: column nowrap;

    .settingBtn {
      margin-top: 20px;
      user-select: none;

      .btnText {
        display: none;
      }
    }
  }

  .settingBtn {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;

    &:hover {
      cursor: pointer;
    }

    .icon {
      width: 16px;
    }

    .btnText {
      margin-top: 8px;
    }
  }
}
