@define props {
  padX: 1.5rem;
  padY: 0.75rem;
  bgLight: #fff;
  bgDark: #2f2f2f;
  sdLight: none;
  sdDark: none;
}

@provide navItem {
  ref: padding-0.75rem fontSize-1rem textDecoration-none color-inherit whiteSpace-nowrap cursor-pointer appearance-none background-transparent border-none;
}

@provide navItemFirstChild {
  ref: paddingLeft-0;
}

@provide navItemLastChild {
  ref: paddingRight-0;
}

@alga navBar {
  .navBar {
    ref: position-relative zIndex-25 w-100pct paddingTop-{props.padY} paddingBottom-{props.padY};
    ref: backgroundColor-{props.bgLight} boxShadow-{props.sdLight};
    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;
    
    .navWrap {
      ref: display-flex flexDirection-row flexWrap-nowrap alignItems-center justifyContent-spaceBetween;
      ref-paddingRight: {props.padX};
      ref-paddingLeft: {props.padX};
      screen-tb: position-relative;
      
      .navStart {
        ref: display-flex justifyContent-flexStart flexWrap-nowrap alignItems-center;
        ref: width-100pct maxWidth-100pct;
        screen-pd: maxWidth-240px;
        
        .navBrand {
          ref: paddingTop-0.375rem paddingBottom-0.375rem paddingRight-0.75rem paddingLeft-0.75rem fontSize-1.25rem textDecoration-none color-inherit whiteSpace-nowrap flexGrow-1 cursor-pointer;
        }
        
        .navBrand:first-child {
          inject: navItemFirstChild;
        }
        
        .navToggler {
          inject: navItem;
          
          svg, i {
            ref: pointerEvents-none display-block;
          }
        }
        
        .navToggler:first-child {
          inject: navItemFirstChild;
        }
        
        .navToggler:last-child {
          inject: navItemLastChild;
        }
        
        .navToggler.navMobile {
          screen-pd: display-none;
        }
      }
      
      .navEnd {
        ref: display-flex justifyContent-spaceBetween flexWrap-nowrap alignItems-center flexGrow-1 paddingLeft-0.75rem;
        screen-tb: display-none position-absolute width-auto right-10px border-1px_solid_hexcac7c7 flexDirection-column borderRadius-5px padding-0.5rem_0px backgroundColor-hexfff minWidth-240px top-calc({{props.padY}}*_2_+_26px);
          
        .navBackdrop {
          ref: position-fixed zIndex-74 inset-0_3em_3em_0 maxWidth-100vw maxHeight-100vh;
          ref: width-100pct height-100pct display-none cursor-default;
        }
    
        .navMenu {
          ref: display-flex justifyContent-flexStart flexWrap-nowrap alignItems-center;
          screen-tb: flexDirection-column minWidth-inherit position-relative zIndex-75;
          
          .navItem {
            inject: navItem;
            screen-tb: padding-0.5rem_0.75rem minWidth-inherit;
          }
          
          .navItem:first-child {
            inject: navItemFirstChild;
            screen-tb: padding-0.5rem_0.75rem minWidth-inherit;
          }
          
          .navItem:last-child {
            inject: navItemLastChild;
            screen-tb: padding-0.5rem_0.75rem minWidth-inherit;
          }
        }
        
        &.active {
          screen-tb: display-flex;
          prefers-dark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f;
          prefers-toDark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f;
          prefers-toLight: backgroundColor-hexfff borderColor-hexcac7c7;
          
          .navBackdrop {
            ref: display-block;
            screen-pd: display-none;
          }
          
          .navMenu .navItem:hover {
            screen-tb: backgroundColor-hexcac7c7;
            prefers-dark: backgroundColor-hex5f5f5f;
            prefers-toDark: backgroundColor-hex5f5f5f;
            prefers-toLight: backgroundColor-hexcac7c7;
          }
        }
      }
    }
  }
}