@define refs {
  name: menu;
}

@define props {
  type: pill, custom, tab;
  bgActive: #07f;
  fgActive: #fff;
  rdBox: 0.75rem;
}

@alga {refs.name} {
  .nav, .{refs.name} {
    ref: display-flex flexWrap-wrap paddingLeft-0 paddingRight-0 margin-0 listStyle-none;
    print: display-none;
  }
    
  .{refs.name} {
    ref: flexDirection-column;
  }
    
  .nav > .item > .link,
  .{refs.name} > .item > .link {
    ref: display-block padding-0.675rem_1rem;
    ref-borderRadius: div({{props.rdBox}},2);
    ref: color-hex2f2f2f textDecoration-none cursor-pointer whiteSpace-nowrap;
    ref-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    prefers-dark: color-inherit;
    prefers-toDark: color-inherit;
    prefers-toLight: color-hex2f2f2f;
  }
    
  .nav > .item:hover > .link,
  .{refs.name} > .item:hover > .link {
    ref: backgroundColor-hexededed;
    prefers-dark: backgroundColor-hex5f5f5f;
    prefers-toDark: backgroundColor-hex5f5f5f;
    prefers-toLight: backgroundColor-hexededed;
  }
    
  .nav > .item.active > .link,
  .{refs.name} > .item.active > .link {
    ref: backgroundColor-{props.bgActive} color-{props.fgActive} cursor-default;
  }
    
  .{refs.name} > .item > .link {
    ref: paddingTop-0.75rem paddingBottom-0.75rem;
  }
    
  .nav.fill > .item {
    ref: flex-1_1_auto textAlign-center;
  }
  
  @if type has pill {
    .nav.pill {
      ref: flexWrap-nowrap width-auto overflowX-auto overflowY-hidden;
    }
  }
  
  @if type has custom {
    .nav.custom {
      ref: flexWrap-nowrap width-auto overflowX-auto overflowY-hidden;
    }
    
    .nav.custom > .item > .link {
      ref: borderRadius-0px;
    }
    
    .{refs.name}.custom > .item > .link {
      ref: borderRadius-0px;
    }
    
    .nav.custom > .item:not(.active):hover > .link {
      ref: boxShadow-inset_0px_n3px_hex7d8ca4 color-hex363d46;
      prefers-dark: color-inherit;
      prefers-toDark: color-inherit;
      prefers-toLight: color-hex363d46;
    }
    
    html[dir=rtl] .nav.custom > .item:not(.active):hover > .link {
      ref: boxShadow-inset_0px_n3px_hex7d8ca4;
    }
    
    .nav.custom > .item.active > .link {
      ref: boxShadow-inset_0px_n3px_{props.bgActive} backgroundColor-hexfff color-{props.bgActive};
      prefers-dark: backgroundColor-hex2f2f2f;
      prefers-toDark: backgroundColor-hex2f2f2f;
      prefers-toLight: backgroundColor-hexfff;
    }
    
    html[dir=rtl] .nav.custom > .item.active > .link {
      ref: boxShadow-inset_0px_n3px_{props.bgActive} color-{props.bgActive};
    }
    
    .{refs.name}.custom > .item:not(.active):hover > .link {
      ref: boxShadow-inset_3px_0px_hex7d8ca4 color-hex363d46;
      prefers-dark: color-inherit;
      prefers-toDark: color-inherit;
      prefers-toLight: color-hex363d46;
    }
    
    html[dir=rtl] .{refs.name}.custom > .item:not(.active):hover > .link {
      ref: boxShadow-inset_n3px_0px_hex7d8ca4;
    }
    
    .{refs.name}.custom > .item.active > .link {
      ref: boxShadow-inset_3px_0px_{props.bgActive} backgroundColor-hexfff color-{props.bgActive};
      prefers-dark: backgroundColor-hex2f2f2f;
      prefers-toDark: backgroundColor-hex2f2f2f;
      prefers-toLight: backgroundColor-hexfff;
    }
    
    html[dir=rtl] .{refs.name}.custom > .item.active > .link {
      ref: boxShadow-inset_n3px_0px_{props.bgActive};
    }
  }
  
  @if type has tab {
    .nav.tab {
      ref: flexWrap-nowrap width-auto position-relative zIndex-15;
      ref: borderBottom-1px_solid_hexdee2e6;
      prefers-dark: borderBottomColor-hex5f5f5f;
      prefers-toDark: borderBottomColor-hex5f5f5f;
      prefers-toLight: borderBottomColor-hexdee2e6;
    }
    
    .nav.tab > .item > .link {
      ref: borderRadius-0px;
      ref-borderTopLeftRadius: div({{props.rdBox}},2);
      ref-borderTopRightRadius: div({{props.rdBox}},2);
      ref: backgroundColor-transparent border-1px_solid_transparent marginBottom-n1px;
    }
    
    .nav.tab > .item:not(.active):hover > .link {
      ref: backgroundColor-hexededed;
      prefers-dark: backgroundColor-hex5f5f5f;
      prefers-toDark: backgroundColor-hex5f5f5f;
      prefers-toLight: backgroundColor-hexededed;
    }
    
    .nav.tab > .item.active > .link {
      ref: color-inherit backgroundColor-hexfff borderColor-hexdee2e6_hexdee2e6_transparent;
      prefers-dark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f_hex5f5f5f_transparent;
      prefers-toDark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f_hex5f5f5f_transparent;
      prefers-toLight: backgroundColor-hexfff borderColor-hexdee2e6_hexdee2e6_transparent;
    }

    .tabResponsive {
      ref: position-relative overflowX-hidden overflowY-hidden;
    }

    .tabResponsive .tab {
      ref: borderBottom-none position-relative overflow-hidden;
    }

    .tabResponsive:not(.hidden):hover .tabResponsivePrev {
      ref-content: ' ';
      ref-backgroundImage: svg('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="{{props.bgActive}}" class="bi bi-caret-left-fill" viewBox="0 0 16 16"><path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/></svg>');
      ref: backgroundPosition-center backgroundRepeat-noRepeat position-absolute zIndex-16;
      ref: top-13pct left-0 width-36px height-36px;
    }

    .tabResponsive:not(.hidden):hover .tabResponsiveNext {
      ref-content: ' ';
      ref-backgroundImage: svg('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="{{props.bgActive}}" class="bi bi-caret-right-fill" viewBox="0 0 16 16"><path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg>');
      ref: backgroundPosition-center backgroundRepeat-noRepeat position-absolute zIndex-16;
      ref: top-13pct right-0 width-36px height-36px;
    }

    .card .tabResponsive:not(.hidden):hover .tabResponsivePrev,
    .card .tabResponsive:not(.hidden):hover .tabResponsiveNext {
      ref: top-30pct;
    }

    .tabResponsive::before {
      ref-content: ' ';
      ref: position-absolute zIndex-14 left-0 bottom-0px width-100pct height-1px;
      ref: borderBottom-1px_solid_hexdee2e6;
      prefers-dark: borderBottomColor-hex5f5f5f;
      prefers-toDark: borderBottomColor-hex5f5f5f;
      prefers-toLight: borderBottomColor-hexdee2e6;
    }
  }
  
}