@define props {
  padX: 1rem;
  padY: 0.75rem;
  bgLight: #fff;
  bgDark: #2f2f2f;
  sdLight: none;
  sdDark: none;
  itemFontSize: 1rem;
  itemPadX: 0.5rem;
  itemPadY: 0.5rem;
  bgActive: rgba(0, 0, 0, 0.15);
  fgActive: inherit;
  rdActive: 0.375rem;
}

@alga sideBar {
  .sideBar {
    ref: position-relative zIndex-20 width-240px minHeight-100vh height-100pct display-block;
    ref: paddingTop-{props.padY} paddingBottom-{props.padY} backgroundColor-{props.bgLight};
    ref-boxShadow: {props.sdLight};
    screen-tb: display-none pi-fixed mnh-100vh h-100pct;
    prefers-dark: backgroundColor-{props.bgDark} boxShadow-{props.sdDark};
    prefers-toDark: backgroundColor-{props.bgDark} boxShadow-{props.sdDark};
    prefers-toLight: backgroundColor-{props.bgLight} boxShadow-{props.sdLight};
    print: display-none;
    
    .sideBackdrop {
      ref: position-fixed zIndex-18 inset-0_3em_3em_0 maxWidth-100vw maxHeight-100vh;
      ref: width-100pct height-100pct display-none cursor-default;
    }
    
    .sideWrap {
      ref: display-flex flexDirection-column flexWrap-nowrap justifyContent-spaceBetween;
      ref: height-100pct minHeight-100vh position-relative zIndex-19;
      ref-paddingRight: {props.padX};
      ref-paddingLeft: {props.padX};
      
      .sideMain {
        ref: flexGrow-1;
      }
    }
    
    &.active {
      ref: display-block overflowY-auto;
      screen-tb: display-block;
      
      .sideBackdrop {
        ref: display-block;
        screen-pd: display-none;
      }
    }
  }
  
  .sideNav {
    ref: display-flex justifyContent-flexStart flexWrap-nowrap alignItems-center width-100pct;
    
    .navBrand {
      ref: paddingTop-0.375rem paddingBottom-0.375rem paddingRight-0.75rem paddingLeft-0.75rem fontSize-1.25rem;
      ref: textDecoration-none color-inherit whiteSpace-nowrap marginRight-auto cursor-pointer;
    }
  }
  
  .sideAvatar {
    ref: marginTop-1.75rem marginBottom-1.75rem textAlign-center;
    
    .avatarImage {
      ref: width-84px height-84px borderRadius-5px;
    }
    
    .avatarTitle {
      ref: marginTop-0.5rem marginBottom-0px color-inherit fontSize-1rem;
    }
    
    .avatarDescription {
      ref: marginTop-0.15rem marginBottom-0px color-inherit opacity-0.7 fontSize-0.75rem;
    }
  }
   
  .sideTitle {
    ref: marginTop-0.625rem marginBottom-0.625rem fontSize-1rem color-inherit opacity-0.5;
  }
    
  .sideMenu {
    ref: display-flex flexDirection-column justifyContent-flexStart flexWrap-nowrap;
  }
    
  .sideMenu > .sideItem {
    ref-paddingRight: {props.itemPadX}; 
    ref-paddingLeft: {props.itemPadX};
    ref: textDecoration-none color-inherit whiteSpace-nowrap cursor-pointer;
    ref-fontSize: {props.itemFontSize};
    ref-paddingTop: {props.itemPadY};
    ref-paddingBottom: {props.itemPadY};
  }
  
  .sideMenu > .sideItem.active {
    ref-backgroundColor: {props.bgActive};
    ref-borderRadius: {props.rdActive};
    ref-color: {props.fgActive};
    ref: marginTop-2px marginBottom-2px;
  }
  
  .sideNav > .navItem,
  .sideNav > .navToggler {
    ref-paddingRight: {props.itemPadX}; 
    ref-paddingLeft: {props.itemPadX};
    ref: textDecoration-none color-inherit whiteSpace-nowrap cursor-pointer;
    ref-fontSize: {props.itemFontSize};
    ref-paddingTop: {props.itemPadY};
    ref-paddingBottom: {props.itemPadY};
  }
    
  .sideNav > .navToggler {
    ref: appearance-none border-0 backgroundColor-transparent;
  }
    
  .sideNav > .navToggler > svg,
  .sideNav > .navToggler > i {
    ref: pointerEvents-none display-block;
  }
    
  .sideMenu > .navItem:first-child,
  .sideNav > .navBrand:first-child,
  .sideNav > .navToggler:first-child {
    ref: paddingLeft-0;
  }
    
  .sideMenu > .navItem:last-child,
  .sideNav > .navToggler:last-child {
    ref: paddingRight-0;
  }
}