flyonui/components/tab.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.tabs-lifted>.tab:focus-visible{border-end-end-radius:0;border-end-start-radius:0}.tabs{--tabs-height:auto;--tabs-direction:row;height:var(--tabs-height);flex-direction:var(--tabs-direction);display:flex}.tab{cursor:pointer;appearance:none;text-align:center;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);-webkit-user-select:none;user-select:none;height:var(--size);--size:calc(var(--size-field,.25rem)*9.5);--tab-p:1rem;--tab-bg:var(--color-base-100);--tab-border-color:color-mix(in oklab,var(--color-base-content),#0000 90%);padding-inline:var(--tab-p,1rem);justify-content:center;align-items:center;display:inline-flex;position:relative;&:focus,&:focus-visible{--tw-outline-style:none;outline-style:none}&[disabled]{pointer-events:none;opacity:.4}@media (hover:hover){&[disabled]:hover{pointer-events:none;opacity:.4}}}.tab-active:not([disabled]){border-color:var(--color-primary);color:var(--color-primary)}.tabs-bordered>.tab{border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);@media (hover:hover){&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}&:hover{@media (hover:hover){color:var(--color-primary)}}}border-style:solid;border-bottom-width:calc(var(--border,1px) + 1px)}.tabs-bordered.tabs-vertical{--tabs-direction:column;&>.tab{border-bottom-style:var(--tw-border-style);border-bottom-width:0;border-inline-end-width:calc(var(--border,1px) + 1px);justify-content:flex-start;width:100%}}.tabs-lifted>.tab{@media (hover:hover){&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}&:hover{@media (hover:hover){color:var(--color-primary)}}}border:var(--tab-border,1px)solid transparent;border-width:0 0 var(--tab-border,1px)0;border-radius:var(--radius-field,.375rem);border-bottom-color:var(--tab-border-color);padding-inline-start:var(--tab-p,1rem);padding-inline-end:var(--tab-p,1rem);padding-top:var(--tab-border,1px)}.tabs-lifted>.tab.tab-active:not([disabled]){background-color:var(--tab-bg);border-width:var(--tab-border,1px)var(--tab-border,1px)0 var(--tab-border,1px);border-color:var(--tab-border-color);padding-inline-start:calc(var(--tab-p,1rem) - var(--tab-border,1px));padding-inline-end:calc(var(--tab-p,1rem) - var(--tab-border,1px));padding-bottom:var(--tab-border,1px);border-end-end-radius:0;border-end-start-radius:0;padding-top:0}.tabs-lifted>.tab.tab-active:not([disabled]):before{content:"";z-index:1;width:calc(100% + var(--radius-field,.375rem)*2);height:var(--radius-field,.375rem);background-size:var(--radius-field,.375rem);--tab-grad:calc(69% - var(--tab-border,1px));--radius-start:radial-gradient(circle at top left,transparent var(--tab-grad),var(--tab-border-color)calc(var(--tab-grad) + .25px),var(--tab-border-color)calc(var(--tab-grad) + var(--tab-border,1px)),var(--tab-bg)calc(var(--tab-grad) + var(--tab-border,1px) + .25px));--radius-end:radial-gradient(circle at top right,transparent var(--tab-grad),var(--tab-border-color)calc(var(--tab-grad) + .25px),var(--tab-border-color)calc(var(--tab-grad) + var(--tab-border,1px)),var(--tab-bg)calc(var(--tab-grad) + var(--tab-border,1px) + .25px));background-position:0 0,100% 0;background-repeat:no-repeat;background-image:var(--radius-start),var(--radius-end);display:block;position:absolute;bottom:0}.tabs-lifted>.tab.tab-active:not([disabled]):first-child:before{background-image:var(--radius-end);background-position:100% 0}.tabs-lifted>.tab.tab-active:not([disabled]):last-child:before,[dir=rtl] .tabs-lifted>.tab.tab-active:not([disabled]):first-child:before{background-image:var(--radius-start);background-position:0 0}[dir=rtl] .tabs-lifted>.tab.tab-active:not([disabled]):last-child:before{background-image:var(--radius-end);background-position:100% 0}.tabs-lifted>.tab-active:not([disabled])+.tabs-lifted .tab-active:not([disabled]){&:before{background-image:var(--radius-end);background-position:100% 0}}.tabs-lifted{&:has(.tab-content[class^=rounded-]) .tab:first-child:not(.tab-active),&:has(.tab-content[class*=\ rounded-]) .tab:first-child:not(.tab-active){border-bottom-color:#0000}}.tabs-xl :where(.tab){font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--size:calc(var(--size-field,.25rem)*14);--tab-p:1.5rem}.tabs-lg :where(.tab){font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-field,.25rem)*11.5);--tab-p:1.25rem}.tabs-md :where(.tab){font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-field,.25rem)*9.5);--tab-p:1rem}.tabs-sm :where(.tab){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-field,.25rem)*7.5);--tab-p:.75rem}.tabs-xs :where(.tab){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-field,.25rem)*6);--tab-p:.5rem}@media (width>=640px){.sm\:tabs-lifted>.tab:focus-visible{border-end-end-radius:0;border-end-start-radius:0}.sm\:tabs{--tabs-height:auto;--tabs-direction:row;height:var(--tabs-height);flex-direction:var(--tabs-direction);display:flex}.sm\:tab{cursor:pointer;appearance:none;text-align:center;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);-webkit-user-select:none;user-select:none;height:var(--size);--size:calc(var(--size-field,.25rem)*9.5);--tab-p:1rem;--tab-bg:var(--color-base-100);--tab-border-color:color-mix(in oklab,var(--color-base-content),#0000 90%);padding-inline:var(--tab-p,1rem);justify-content:center;align-items:center;display:inline-flex;position:relative;&:focus,&:focus-visible{--tw-outline-style:none;outline-style:none}&[disabled]{pointer-events:none;opacity:.4}@media (hover:hover){&[disabled]:hover{pointer-events:none;opacity:.4}}}.sm\:tab-active:not([disabled]){border-color:var(--color-primary);color:var(--color-primary)}.sm\:tabs-bordered>.tab{border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);@media (hover:hover){&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}&:hover{@media (hover:hover){color:var(--color-primary)}}}border-style:solid;border-bottom-width:calc(var(--border,1px) + 1px)}.sm\:tabs-bordered.tabs-vertical{--tabs-direction:column;&>.tab{border-bottom-style:var(--tw-border-style);border-bottom-width:0;border-inline-end-width:calc(var(--border,1px) + 1px);justify-content:flex-start;width:100%}}.sm\:tabs-lifted>.tab{@media (hover:hover){&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}&:hover{@media (hover:hover){color:var(--color-primary)}}}border:var(--tab-border,1px)solid transparent;border-width:0 0 var(--tab-border,1px)0;border-radius:var(--radius-field,.375rem);border-bottom-color:var(--tab-border-color);padding-inline-start:var(--tab-p,1rem);padding-inline-end:var(--tab-p,1rem);padding-top:var(--tab-border,1px)}.sm\:tabs-lifted>.tab.tab-active:not([disabled]){background-color:var(--tab-bg);border-width:var(--tab-border,1px)var(--tab-border,1px)0 var(--tab-border,1px);border-color:var(--tab-border-color);padding-inline-start:calc(var(--tab-p,1rem) - var(--tab-border,1px));padding-inline-end:calc(var(--tab-p,1rem) - var(--tab-border,1px));padding-bottom:var(--tab-border,1px);border-end-end-radius:0;border-end-start-radius:0;padding-top:0}.sm\:tabs-lifted>.tab.tab-active:not([disabled]):before{content:"";z-index:1;width:calc(100% + var(--radius-field,.375rem)*2);height:var(--radius-field,.375rem);background-size:var(--radius-field,.375rem);--tab-grad:calc(69% - var(--tab-border,1px));--radius-start:radial-gradient(circle at top left,transparent var(--tab-grad),var(--tab-border-color)calc(var(--tab-grad) + .25px),var(--tab-border-color)calc(var(--tab-grad) + var(--tab-border,1px)),var(--tab-bg)calc(var(--tab-grad) + var(--tab-border,1px) + .25px));--radius-end:radial-gradient(circle at top right,transparent var(--tab-grad),var(--tab-border-color)calc(var(--tab-grad) + .25px),var(--tab-border-color)calc(var(--tab-grad) + var(--tab-border,1px)),var(--tab-bg)calc(var(--tab-grad) + var(--tab-border,1px) + .25px));background-position:0 0,100% 0;background-repeat:no-repeat;background-image:var(--radius-start),var(--radius-end);display:block;position:absolute;bottom:0}.sm\:tabs-lifted>.tab.tab-active:not([disabled]):first-child:before{background-image:var(--radius-end);background-position:100% 0}.sm\:tabs-lifted>.tab.tab-active:not([disabled]):last-child:before,[dir=rtl] .tabs-lifted>.tab.tab-active:not([disabled]):first-child:before{background-image:var(--radius-start);background-position:0 0}[dir=rtl] .tabs-lifted>.tab.tab-active:not([disabled]):last-child:before{background-image:var(--radius-end);background-position:100% 0}.sm\:tabs-lifted>.tab-active:not([disabled])+.tabs-lifted .tab-active:not([disabled]){&:before{background-image:var(--radius-end);background-position:100% 0}}.sm\:tabs-lifted{&:has(.tab-content[class^=rounded-]) .tab:first-child:not(.tab-active),&:has(.tab-content[class*=\ rounded-]) .tab:first-child:not(.tab-active){border-bottom-color:#0000}}.sm\:tabs-xl :where(.tab){font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--size:calc(var(--size-field,.25rem)*14);--tab-p:1.5rem}.sm\:tabs-lg :where(.tab){font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-field,.25rem)*11.5);--tab-p:1.25rem}.sm\:tabs-md :where(.tab){font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-field,.25rem)*9.5);--tab-p:1rem}.sm\:tabs-sm :where(.tab){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-field,.25rem)*7.5);--tab-p:.75rem}.sm\:tabs-xs :where(.tab){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-field,.25rem)*6);--tab-p:.5rem}}@media (width>=768px){.md\:tabs-lifted>.tab:focus-visible{border-end-end-radius:0;border-end-start-radius:0}.md\:tabs{--tabs-height:auto;--tabs-direction:row;height:var(--tabs-height);flex-direction:var(--tabs-direction);display:flex}.md\:tab{cursor:pointer;appearance:none;text-align:center;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);-webkit-user-select:none;user-select:none;height:var(--size);--size:calc(var(--size-field,.25rem)*9.5);--tab-p:1rem;--tab-bg:var(--color-base-100);--tab-border-color:color-mix(in oklab,var(--color-base-content),#0000 90%);padding-inline:var(--tab-p,1rem);justify-content:center;align-items:center;display:inline-flex;position:relative;&:focus,&:focus-visible{--tw-outline-style:none;outline-style:none}&[disabled]{pointer-events:none;opacity:.4}@media (hover:hover){&[disabled]:hover{pointer-events:none;opacity:.4}}}.md\:tab-active:not([disabled]){border-color:var(--color-primary);color:var(--color-primary)}.md\:tabs-bordered>.tab{border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);@media (hover:hover){&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}&:hover{@media (hover:hover){color:var(--color-primary)}}}border-style:solid;border-bottom-width:calc(var(--border,1px) + 1px)}.md\:tabs-bordered.tabs-vertical{--tabs-direction:column;&>.tab{border-bottom-style:var(--tw-border-style);border-bottom-width:0;border-inline-end-width:calc(var(--border,1px) + 1px);justify-content:flex-start;width:100%}}.md\:tabs-lifted>.tab{@media (hover:hover){&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}&:hover{@media (hover:hover){color:var(--color-primary)}}}border:var(--tab-border,1px)solid transparent;border-width:0 0 var(--tab-border,1px)0;border-radius:var(--radius-field,.375rem);border-bottom-color:var(--tab-border-color);padding-inline-start:var(--tab-p,1rem);padding-inline-end:var(--tab-p,1rem);padding-top:var(--tab-border,1px)}.md\:tabs-lifted>.tab.tab-active:not([disabled]){background-color:var(--tab-bg);border-width:var(--tab-border,1px)var(--tab-border,1px)0 var(--tab-border,1px);border-color:var(--tab-border-color);padding-inline-start:calc(var(--tab-p,1rem) - var(--tab-border,1px));padding-inline-end:calc(var(--tab-p,1rem) - var(--tab-border,1px));padding-bottom:var(--tab-border,1px);border-end-end-radius:0;border-end-start-radius:0;padding-top:0}.md\:tabs-lifted>.tab.tab-active:not([disabled]):before{content:"";z-index:1;width:calc(100% + var(--radius-field,.375rem)*2);height:var(--radius-field,.375rem);background-size:var(--radius-field,.375rem);--tab-grad:calc(69% - var(--tab-border,1px));--radius-start:radial-gradient(circle at top left,transparent var(--tab-grad),var(--tab-border-color)calc(var(--tab-grad) + .25px),var(--tab-border-color)calc(var(--tab-grad) + var(--tab-border,1px)),var(--tab-bg)calc(var(--tab-grad) + var(--tab-border,1px) + .25px));--radius-end:radial-gradient(circle at top right,transparent var(--tab-grad),var(--tab-border-color)calc(var(--tab-grad) + .25px),var(--tab-border-color)calc(var(--tab-grad) + var(--tab-border,1px)),var(--tab-bg)calc(var(--tab-grad) + var(--tab-border,1px) + .25px));background-position:0 0,100% 0;background-repeat:no-repeat;background-image:var(--radius-start),var(--radius-end);display:block;position:absolute;bottom:0}.md\:tabs-lifted>.tab.tab-active:not([disabled]):first-child:before{background-image:var(--radius-end);background-position:100% 0}.md\:tabs-lifted>.tab.tab-active:not([disabled]):last-child:before,[dir=rtl] .tabs-lifted>.tab.tab-active:not([disabled]):first-child:before{background-image:var(--radius-start);background-position:0 0}[dir=rtl] .tabs-lifted>.tab.tab-active:not([disabled]):last-child:before{background-image:var(--radius-end);background-position:100% 0}.md\:tabs-lifted>.tab-active:not([disabled])+.tabs-lifted .tab-active:not([disabled]){&:before{background-image:var(--radius-end);background-position:100% 0}}.md\:tabs-lifted{&:has(.tab-content[class^=rounded-]) .tab:first-child:not(.tab-active),&:has(.tab-content[class*=\ rounded-]) .tab:first-child:not(.tab-active){border-bottom-color:#0000}}.md\:tabs-xl :where(.tab){font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--size:calc(var(--size-field,.25rem)*14);--tab-p:1.5rem}.md\:tabs-lg :where(.tab){font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-field,.25rem)*11.5);--tab-p:1.25rem}.md\:tabs-md :where(.tab){font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-field,.25rem)*9.5);--tab-p:1rem}.md\:tabs-sm :where(.tab){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-field,.25rem)*7.5);--tab-p:.75rem}.md\:tabs-xs :where(.tab){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-field,.25rem)*6);--tab-p:.5rem}}@media (width>=1024px){.lg\:tabs-lifted>.tab:focus-visible{border-end-end-radius:0;border-end-start-radius:0}.lg\:tabs{--tabs-height:auto;--tabs-direction:row;height:var(--tabs-height);flex-direction:var(--tabs-direction);display:flex}.lg\:tab{cursor:pointer;appearance:none;text-align:center;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);-webkit-user-select:none;user-select:none;height:var(--size);--size:calc(var(--size-field,.25rem)*9.5);--tab-p:1rem;--tab-bg:var(--color-base-100);--tab-border-color:color-mix(in oklab,var(--color-base-content),#0000 90%);padding-inline:var(--tab-p,1rem);justify-content:center;align-items:center;display:inline-flex;position:relative;&:focus,&:focus-visible{--tw-outline-style:none;outline-style:none}&[disabled]{pointer-events:none;opacity:.4}@media (hover:hover){&[disabled]:hover{pointer-events:none;opacity:.4}}}.lg\:tab-active:not([disabled]){border-color:var(--color-primary);color:var(--color-primary)}.lg\:tabs-bordered>.tab{border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);@media (hover:hover){&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}&:hover{@media (hover:hover){color:var(--color-primary)}}}border-style:solid;border-bottom-width:calc(var(--border,1px) + 1px)}.lg\:tabs-bordered.tabs-vertical{--tabs-direction:column;&>.tab{border-bottom-style:var(--tw-border-style);border-bottom-width:0;border-inline-end-width:calc(var(--border,1px) + 1px);justify-content:flex-start;width:100%}}.lg\:tabs-lifted>.tab{@media (hover:hover){&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}&:hover{@media (hover:hover){color:var(--color-primary)}}}border:var(--tab-border,1px)solid transparent;border-width:0 0 var(--tab-border,1px)0;border-radius:var(--radius-field,.375rem);border-bottom-color:var(--tab-border-color);padding-inline-start:var(--tab-p,1rem);padding-inline-end:var(--tab-p,1rem);padding-top:var(--tab-border,1px)}.lg\:tabs-lifted>.tab.tab-active:not([disabled]){background-color:var(--tab-bg);border-width:var(--tab-border,1px)var(--tab-border,1px)0 var(--tab-border,1px);border-color:var(--tab-border-color);padding-inline-start:calc(var(--tab-p,1rem) - var(--tab-border,1px));padding-inline-end:calc(var(--tab-p,1rem) - var(--tab-border,1px));padding-bottom:var(--tab-border,1px);border-end-end-radius:0;border-end-start-radius:0;padding-top:0}.lg\:tabs-lifted>.tab.tab-active:not([disabled]):before{content:"";z-index:1;width:calc(100% + var(--radius-field,.375rem)*2);height:var(--radius-field,.375rem);background-size:var(--radius-field,.375rem);--tab-grad:calc(69% - var(--tab-border,1px));--radius-start:radial-gradient(circle at top left,transparent var(--tab-grad),var(--tab-border-color)calc(var(--tab-grad) + .25px),var(--tab-border-color)calc(var(--tab-grad) + var(--tab-border,1px)),var(--tab-bg)calc(var(--tab-grad) + var(--tab-border,1px) + .25px));--radius-end:radial-gradient(circle at top right,transparent var(--tab-grad),var(--tab-border-color)calc(var(--tab-grad) + .25px),var(--tab-border-color)calc(var(--tab-grad) + var(--tab-border,1px)),var(--tab-bg)calc(var(--tab-grad) + var(--tab-border,1px) + .25px));background-position:0 0,100% 0;background-repeat:no-repeat;background-image:var(--radius-start),var(--radius-end);display:block;position:absolute;bottom:0}.lg\:tabs-lifted>.tab.tab-active:not([disabled]):first-child:before{background-image:var(--radius-end);background-position:100% 0}.lg\:tabs-lifted>.tab.tab-active:not([disabled]):last-child:before,[dir=rtl] .tabs-lifted>.tab.tab-active:not([disabled]):first-child:before{background-image:var(--radius-start);background-position:0 0}[dir=rtl] .tabs-lifted>.tab.tab-active:not([disabled]):last-child:before{background-image:var(--radius-end);background-position:100% 0}.lg\:tabs-lifted>.tab-active:not([disabled])+.tabs-lifted .tab-active:not([disabled]){&:before{background-image:var(--radius-end);background-position:100% 0}}.lg\:tabs-lifted{&:has(.tab-content[class^=rounded-]) .tab:first-child:not(.tab-active),&:has(.tab-content[class*=\ rounded-]) .tab:first-child:not(.tab-active){border-bottom-color:#0000}}.lg\:tabs-xl :where(.tab){font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--size:calc(var(--size-field,.25rem)*14);--tab-p:1.5rem}.lg\:tabs-lg :where(.tab){font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-field,.25rem)*11.5);--tab-p:1.25rem}.lg\:tabs-md :where(.tab){font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-field,.25rem)*9.5);--tab-p:1rem}.lg\:tabs-sm :where(.tab){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-field,.25rem)*7.5);--tab-p:.75rem}.lg\:tabs-xs :where(.tab){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-field,.25rem)*6);--tab-p:.5rem}}@media (width>=1280px){.xl\:tabs-lifted>.tab:focus-visible{border-end-end-radius:0;border-end-start-radius:0}.xl\:tabs{--tabs-height:auto;--tabs-direction:row;height:var(--tabs-height);flex-direction:var(--tabs-direction);display:flex}.xl\:tab{cursor:pointer;appearance:none;text-align:center;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);-webkit-user-select:none;user-select:none;height:var(--size);--size:calc(var(--size-field,.25rem)*9.5);--tab-p:1rem;--tab-bg:var(--color-base-100);--tab-border-color:color-mix(in oklab,var(--color-base-content),#0000 90%);padding-inline:var(--tab-p,1rem);justify-content:center;align-items:center;display:inline-flex;position:relative;&:focus,&:focus-visible{--tw-outline-style:none;outline-style:none}&[disabled]{pointer-events:none;opacity:.4}@media (hover:hover){&[disabled]:hover{pointer-events:none;opacity:.4}}}.xl\:tab-active:not([disabled]){border-color:var(--color-primary);color:var(--color-primary)}.xl\:tabs-bordered>.tab{border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);@media (hover:hover){&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}&:hover{@media (hover:hover){color:var(--color-primary)}}}border-style:solid;border-bottom-width:calc(var(--border,1px) + 1px)}.xl\:tabs-bordered.tabs-vertical{--tabs-direction:column;&>.tab{border-bottom-style:var(--tw-border-style);border-bottom-width:0;border-inline-end-width:calc(var(--border,1px) + 1px);justify-content:flex-start;width:100%}}.xl\:tabs-lifted>.tab{@media (hover:hover){&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}&:hover{@media (hover:hover){color:var(--color-primary)}}}border:var(--tab-border,1px)solid transparent;border-width:0 0 var(--tab-border,1px)0;border-radius:var(--radius-field,.375rem);border-bottom-color:var(--tab-border-color);padding-inline-start:var(--tab-p,1rem);padding-inline-end:var(--tab-p,1rem);padding-top:var(--tab-border,1px)}.xl\:tabs-lifted>.tab.tab-active:not([disabled]){background-color:var(--tab-bg);border-width:var(--tab-border,1px)var(--tab-border,1px)0 var(--tab-border,1px);border-color:var(--tab-border-color);padding-inline-start:calc(var(--tab-p,1rem) - var(--tab-border,1px));padding-inline-end:calc(var(--tab-p,1rem) - var(--tab-border,1px));padding-bottom:var(--tab-border,1px);border-end-end-radius:0;border-end-start-radius:0;padding-top:0}.xl\:tabs-lifted>.tab.tab-active:not([disabled]):before{content:"";z-index:1;width:calc(100% + var(--radius-field,.375rem)*2);height:var(--radius-field,.375rem);background-size:var(--radius-field,.375rem);--tab-grad:calc(69% - var(--tab-border,1px));--radius-start:radial-gradient(circle at top left,transparent var(--tab-grad),var(--tab-border-color)calc(var(--tab-grad) + .25px),var(--tab-border-color)calc(var(--tab-grad) + var(--tab-border,1px)),var(--tab-bg)calc(var(--tab-grad) + var(--tab-border,1px) + .25px));--radius-end:radial-gradient(circle at top right,transparent var(--tab-grad),var(--tab-border-color)calc(var(--tab-grad) + .25px),var(--tab-border-color)calc(var(--tab-grad) + var(--tab-border,1px)),var(--tab-bg)calc(var(--tab-grad) + var(--tab-border,1px) + .25px));background-position:0 0,100% 0;background-repeat:no-repeat;background-image:var(--radius-start),var(--radius-end);display:block;position:absolute;bottom:0}.xl\:tabs-lifted>.tab.tab-active:not([disabled]):first-child:before{background-image:var(--radius-end);background-position:100% 0}.xl\:tabs-lifted>.tab.tab-active:not([disabled]):last-child:before,[dir=rtl] .tabs-lifted>.tab.tab-active:not([disabled]):first-child:before{background-image:var(--radius-start);background-position:0 0}[dir=rtl] .tabs-lifted>.tab.tab-active:not([disabled]):last-child:before{background-image:var(--radius-end);background-position:100% 0}.xl\:tabs-lifted>.tab-active:not([disabled])+.tabs-lifted .tab-active:not([disabled]){&:before{background-image:var(--radius-end);background-position:100% 0}}.xl\:tabs-lifted{&:has(.tab-content[class^=rounded-]) .tab:first-child:not(.tab-active),&:has(.tab-content[class*=\ rounded-]) .tab:first-child:not(.tab-active){border-bottom-color:#0000}}.xl\:tabs-xl :where(.tab){font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--size:calc(var(--size-field,.25rem)*14);--tab-p:1.5rem}.xl\:tabs-lg :where(.tab){font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-field,.25rem)*11.5);--tab-p:1.25rem}.xl\:tabs-md :where(.tab){font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-field,.25rem)*9.5);--tab-p:1rem}.xl\:tabs-sm :where(.tab){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-field,.25rem)*7.5);--tab-p:.75rem}.xl\:tabs-xs :where(.tab){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-field,.25rem)*6);--tab-p:.5rem}}@media (width>=1536px){.\32 xl\:tabs-lifted>.tab:focus-visible{border-end-end-radius:0;border-end-start-radius:0}.\32 xl\:tabs{--tabs-height:auto;--tabs-direction:row;height:var(--tabs-height);flex-direction:var(--tabs-direction);display:flex}.\32 xl\:tab{cursor:pointer;appearance:none;text-align:center;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);-webkit-user-select:none;user-select:none;height:var(--size);--size:calc(var(--size-field,.25rem)*9.5);--tab-p:1rem;--tab-bg:var(--color-base-100);--tab-border-color:color-mix(in oklab,var(--color-base-content),#0000 90%);padding-inline:var(--tab-p,1rem);justify-content:center;align-items:center;display:inline-flex;position:relative;&:focus,&:focus-visible{--tw-outline-style:none;outline-style:none}&[disabled]{pointer-events:none;opacity:.4}@media (hover:hover){&[disabled]:hover{pointer-events:none;opacity:.4}}}.\32 xl\:tab-active:not([disabled]){border-color:var(--color-primary);color:var(--color-primary)}.\32 xl\:tabs-bordered>.tab{border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);@media (hover:hover){&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}&:hover{@media (hover:hover){color:var(--color-primary)}}}border-style:solid;border-bottom-width:calc(var(--border,1px) + 1px)}.\32 xl\:tabs-bordered.tabs-vertical{--tabs-direction:column;&>.tab{border-bottom-style:var(--tw-border-style);border-bottom-width:0;border-inline-end-width:calc(var(--border,1px) + 1px);justify-content:flex-start;width:100%}}.\32 xl\:tabs-lifted>.tab{@media (hover:hover){&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}&:hover{@media (hover:hover){color:var(--color-primary)}}}border:var(--tab-border,1px)solid transparent;border-width:0 0 var(--tab-border,1px)0;border-radius:var(--radius-field,.375rem);border-bottom-color:var(--tab-border-color);padding-inline-start:var(--tab-p,1rem);padding-inline-end:var(--tab-p,1rem);padding-top:var(--tab-border,1px)}.\32 xl\:tabs-lifted>.tab.tab-active:not([disabled]){background-color:var(--tab-bg);border-width:var(--tab-border,1px)var(--tab-border,1px)0 var(--tab-border,1px);border-color:var(--tab-border-color);padding-inline-start:calc(var(--tab-p,1rem) - var(--tab-border,1px));padding-inline-end:calc(var(--tab-p,1rem) - var(--tab-border,1px));padding-bottom:var(--tab-border,1px);border-end-end-radius:0;border-end-start-radius:0;padding-top:0}.\32 xl\:tabs-lifted>.tab.tab-active:not([disabled]):before{content:"";z-index:1;width:calc(100% + var(--radius-field,.375rem)*2);height:var(--radius-field,.375rem);background-size:var(--radius-field,.375rem);--tab-grad:calc(69% - var(--tab-border,1px));--radius-start:radial-gradient(circle at top left,transparent var(--tab-grad),var(--tab-border-color)calc(var(--tab-grad) + .25px),var(--tab-border-color)calc(var(--tab-grad) + var(--tab-border,1px)),var(--tab-bg)calc(var(--tab-grad) + var(--tab-border,1px) + .25px));--radius-end:radial-gradient(circle at top right,transparent var(--tab-grad),var(--tab-border-color)calc(var(--tab-grad) + .25px),var(--tab-border-color)calc(var(--tab-grad) + var(--tab-border,1px)),var(--tab-bg)calc(var(--tab-grad) + var(--tab-border,1px) + .25px));background-position:0 0,100% 0;background-repeat:no-repeat;background-image:var(--radius-start),var(--radius-end);display:block;position:absolute;bottom:0}.\32 xl\:tabs-lifted>.tab.tab-active:not([disabled]):first-child:before{background-image:var(--radius-end);background-position:100% 0}.\32 xl\:tabs-lifted>.tab.tab-active:not([disabled]):last-child:before,[dir=rtl] .tabs-lifted>.tab.tab-active:not([disabled]):first-child:before{background-image:var(--radius-start);background-position:0 0}[dir=rtl] .tabs-lifted>.tab.tab-active:not([disabled]):last-child:before{background-image:var(--radius-end);background-position:100% 0}.\32 xl\:tabs-lifted>.tab-active:not([disabled])+.tabs-lifted .tab-active:not([disabled]){&:before{background-image:var(--radius-end);background-position:100% 0}}.\32 xl\:tabs-lifted{&:has(.tab-content[class^=rounded-]) .tab:first-child:not(.tab-active),&:has(.tab-content[class*=\ rounded-]) .tab:first-child:not(.tab-active){border-bottom-color:#0000}}.\32 xl\:tabs-xl :where(.tab){font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--size:calc(var(--size-field,.25rem)*14);--tab-p:1.5rem}.\32 xl\:tabs-lg :where(.tab){font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-field,.25rem)*11.5);--tab-p:1.25rem}.\32 xl\:tabs-md :where(.tab){font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-field,.25rem)*9.5);--tab-p:1rem}.\32 xl\:tabs-sm :where(.tab){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-field,.25rem)*7.5);--tab-p:.75rem}.\32 xl\:tabs-xs :where(.tab){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-field,.25rem)*6);--tab-p:.5rem}}}