flyonui/components/button.css

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

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.btn{cursor:pointer;text-align:center;vertical-align:middle;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;gap:.5rem;text-decoration-line:none;display:inline-flex;@media (prefers-reduced-motion:reduce){transition-property:none}padding-inline:var(--btn-p);color:var(--btn-fg);height:var(--size);outline-color:color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,var(--color-base-100));background-color:var(--btn-bg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--btn-noise);border:var(--border)solid var(--btn-border);box-shadow:0 .5px 0 .5px oklch(100% 0 0/calc(var(--depth)*8%))inset,var(--btn-shadow);--size:calc(var(--size-field,.25rem)*9.5);--btn-bg:var(--btn-color,var(--color-neutral));--btn-fg:var(--color-neutral-content);--btn-p:1rem;--btn-border:color-mix(in oklab,var(--btn-bg),#000 calc(var(--depth)*5%));--btn-shadow:0px 1px 3px 0px color-mix(in oklab,var(--color-base-300)40%,#0000),0px 1px 2px -1px color-mix(in oklab,var(--color-base-300)40%,#0000);--btn-noise:var(--fx-noise);border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));transition-property:color,background-color,border-color,box-shadow;transition-duration:.25s;transition-timing-function:cubic-bezier(0,0,.96,1.03)@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))90%,#000)}}&:active:hover:not(.btn-active),&:active:focus:not(.btn-active){--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;transition-duration:.3s;transition-timing-function:ease-out}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral)),#000 10%);outline-width:2px;outline-style:solid}&:is(:disabled,[disabled],.btn-disabled){pointer-events:none;opacity:.5;--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&:is(input[type=checkbox],input[type=radio]){appearance:none;&:after{content:attr(aria-label)}&:checked{background:var(--color-primary);color:var(--color-primary-content);outline-color:var(--color-primary);--btn-shadow:0 0 0 0 oklch(0% 0 0/0),0 0 0 0 oklch(0% 0 0/0);isolation:isolate}}}.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))90%,#000);isolation:isolate}.btn-primary{--btn-color:var(--color-primary);--btn-fg:var(--color-primary-content)}.btn-secondary{--btn-color:var(--color-secondary);--btn-fg:var(--color-secondary-content)}.btn-accent{--btn-color:var(--color-accent);--btn-fg:var(--color-accent-content)}.btn-neutral{--btn-color:var(--color-neutral);--btn-fg:var(--color-neutral-content)}.btn-info{--btn-color:var(--color-info);--btn-fg:var(--color-info-content)}.btn-success{--btn-color:var(--color-success);--btn-fg:var(--color-success-content)}.btn-warning{--btn-color:var(--color-warning);--btn-fg:var(--color-warning-content)}.btn-error{--btn-color:var(--color-error);--btn-fg:var(--color-error-content)}.btn-soft{--btn-shadow:"";color:var(--btn-color,var(--color-neutral));--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,var(--color-base-100));--btn-noise:none;border-width:0;&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}}}.btn-soft.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}.btn-outline{--btn-shadow:"";--btn-bg:"";color:var(--btn-color,var(--color-neutral));--btn-border:var(--btn-color,var(--color-neutral));--btn-noise:none;outline-color:var(--btn-color,var(--color-neutral));@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000);outline-width:1px}}.btn-outline.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}.btn-text{--btn-shadow:"";color:var(--btn-color,var(--color-neutral));--btn-bg:"";--btn-border:"";--btn-noise:none;outline-color:var(--btn-color,var(--color-neutral));border-width:0;@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}.btn-text.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}.btn-gradient{--btn-shadow:0px 1px 3px 0px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 1px 2px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);--btn-border:var(--btn-color,var(--color-neutral));--dark-shade:color-mix(in oklab,var(--btn-color,var(--color-neutral))80%,black);background-color:#0000;background-size:200%;background-image:linear-gradient(102deg,var(--btn-color,var(--color-neutral))0%,var(--dark-shade)51%,var(--btn-color,var(--color-neutral))100%);border-width:2px;transition-property:background-position,box-shadow;transition-duration:.4s;transition-timing-function:ease-in-out;@media (hover:hover){&:hover{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}}&:focus-visible{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}}.btn-gradient.btn-active{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}.btn-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--btn-p:.5rem;--size:calc(var(--size-field,.25rem)*6)}.btn-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--btn-p:.75rem;--size:calc(var(--size-field,.25rem)*7.5)}.btn-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--btn-p:1rem;--size:calc(var(--size-field,.25rem)*9.5)}.btn-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--btn-p:1.25rem;--size:calc(var(--size-field,.25rem)*11.5)}.btn-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--btn-p:1.5rem;--size:calc(var(--size-field,.25rem)*14)}.btn-square{width:var(--size);height:var(--size);padding-inline:0}.btn-circle{width:var(--size);height:var(--size);border-radius:3.40282e38px;padding-inline:0}.btn-wide{width:100%;max-width:16rem}.btn-block{width:100%}@media (width>=640px){.sm\:btn{cursor:pointer;text-align:center;vertical-align:middle;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;gap:.5rem;text-decoration-line:none;display:inline-flex;@media (prefers-reduced-motion:reduce){transition-property:none}padding-inline:var(--btn-p);color:var(--btn-fg);height:var(--size);outline-color:color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,var(--color-base-100));background-color:var(--btn-bg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--btn-noise);border:var(--border)solid var(--btn-border);box-shadow:0 .5px 0 .5px oklch(100% 0 0/calc(var(--depth)*8%))inset,var(--btn-shadow);--size:calc(var(--size-field,.25rem)*9.5);--btn-bg:var(--btn-color,var(--color-neutral));--btn-fg:var(--color-neutral-content);--btn-p:1rem;--btn-border:color-mix(in oklab,var(--btn-bg),#000 calc(var(--depth)*5%));--btn-shadow:0px 1px 3px 0px color-mix(in oklab,var(--color-base-300)40%,#0000),0px 1px 2px -1px color-mix(in oklab,var(--color-base-300)40%,#0000);--btn-noise:var(--fx-noise);border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));transition-property:color,background-color,border-color,box-shadow;transition-duration:.25s;transition-timing-function:cubic-bezier(0,0,.96,1.03)@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))90%,#000)}}&:active:hover:not(.btn-active),&:active:focus:not(.btn-active){--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;transition-duration:.3s;transition-timing-function:ease-out}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral)),#000 10%);outline-width:2px;outline-style:solid}&:is(:disabled,[disabled],.btn-disabled){pointer-events:none;opacity:.5;--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&:is(input[type=checkbox],input[type=radio]){appearance:none;&:after{content:attr(aria-label)}&:checked{background:var(--color-primary);color:var(--color-primary-content);outline-color:var(--color-primary);--btn-shadow:0 0 0 0 oklch(0% 0 0/0),0 0 0 0 oklch(0% 0 0/0);isolation:isolate}}}.sm\:btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))90%,#000);isolation:isolate}.sm\:btn-primary{--btn-color:var(--color-primary);--btn-fg:var(--color-primary-content)}.sm\:btn-secondary{--btn-color:var(--color-secondary);--btn-fg:var(--color-secondary-content)}.sm\:btn-accent{--btn-color:var(--color-accent);--btn-fg:var(--color-accent-content)}.sm\:btn-neutral{--btn-color:var(--color-neutral);--btn-fg:var(--color-neutral-content)}.sm\:btn-info{--btn-color:var(--color-info);--btn-fg:var(--color-info-content)}.sm\:btn-success{--btn-color:var(--color-success);--btn-fg:var(--color-success-content)}.sm\:btn-warning{--btn-color:var(--color-warning);--btn-fg:var(--color-warning-content)}.sm\:btn-error{--btn-color:var(--color-error);--btn-fg:var(--color-error-content)}.sm\:btn-soft{--btn-shadow:"";color:var(--btn-color,var(--color-neutral));--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,var(--color-base-100));--btn-noise:none;border-width:0;&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}}}.sm\:btn-soft.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}.sm\:btn-outline{--btn-shadow:"";--btn-bg:"";color:var(--btn-color,var(--color-neutral));--btn-border:var(--btn-color,var(--color-neutral));--btn-noise:none;outline-color:var(--btn-color,var(--color-neutral));@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000);outline-width:1px}}.sm\:btn-outline.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}.sm\:btn-text{--btn-shadow:"";color:var(--btn-color,var(--color-neutral));--btn-bg:"";--btn-border:"";--btn-noise:none;outline-color:var(--btn-color,var(--color-neutral));border-width:0;@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}.sm\:btn-text.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}.sm\:btn-gradient{--btn-shadow:0px 1px 3px 0px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 1px 2px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);--btn-border:var(--btn-color,var(--color-neutral));--dark-shade:color-mix(in oklab,var(--btn-color,var(--color-neutral))80%,black);background-color:#0000;background-size:200%;background-image:linear-gradient(102deg,var(--btn-color,var(--color-neutral))0%,var(--dark-shade)51%,var(--btn-color,var(--color-neutral))100%);border-width:2px;transition-property:background-position,box-shadow;transition-duration:.4s;transition-timing-function:ease-in-out;@media (hover:hover){&:hover{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}}&:focus-visible{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}}.sm\:btn-gradient.btn-active{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}.sm\:btn-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--btn-p:.5rem;--size:calc(var(--size-field,.25rem)*6)}.sm\:btn-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--btn-p:.75rem;--size:calc(var(--size-field,.25rem)*7.5)}.sm\:btn-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--btn-p:1rem;--size:calc(var(--size-field,.25rem)*9.5)}.sm\:btn-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--btn-p:1.25rem;--size:calc(var(--size-field,.25rem)*11.5)}.sm\:btn-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--btn-p:1.5rem;--size:calc(var(--size-field,.25rem)*14)}.sm\:btn-square{width:var(--size);height:var(--size);padding-inline:0}.sm\:btn-circle{width:var(--size);height:var(--size);border-radius:3.40282e38px;padding-inline:0}.sm\:btn-wide{width:100%;max-width:16rem}.sm\:btn-block{width:100%}}@media (width>=768px){.md\:btn{cursor:pointer;text-align:center;vertical-align:middle;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;gap:.5rem;text-decoration-line:none;display:inline-flex;@media (prefers-reduced-motion:reduce){transition-property:none}padding-inline:var(--btn-p);color:var(--btn-fg);height:var(--size);outline-color:color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,var(--color-base-100));background-color:var(--btn-bg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--btn-noise);border:var(--border)solid var(--btn-border);box-shadow:0 .5px 0 .5px oklch(100% 0 0/calc(var(--depth)*8%))inset,var(--btn-shadow);--size:calc(var(--size-field,.25rem)*9.5);--btn-bg:var(--btn-color,var(--color-neutral));--btn-fg:var(--color-neutral-content);--btn-p:1rem;--btn-border:color-mix(in oklab,var(--btn-bg),#000 calc(var(--depth)*5%));--btn-shadow:0px 1px 3px 0px color-mix(in oklab,var(--color-base-300)40%,#0000),0px 1px 2px -1px color-mix(in oklab,var(--color-base-300)40%,#0000);--btn-noise:var(--fx-noise);border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));transition-property:color,background-color,border-color,box-shadow;transition-duration:.25s;transition-timing-function:cubic-bezier(0,0,.96,1.03)@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))90%,#000)}}&:active:hover:not(.btn-active),&:active:focus:not(.btn-active){--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;transition-duration:.3s;transition-timing-function:ease-out}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral)),#000 10%);outline-width:2px;outline-style:solid}&:is(:disabled,[disabled],.btn-disabled){pointer-events:none;opacity:.5;--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&:is(input[type=checkbox],input[type=radio]){appearance:none;&:after{content:attr(aria-label)}&:checked{background:var(--color-primary);color:var(--color-primary-content);outline-color:var(--color-primary);--btn-shadow:0 0 0 0 oklch(0% 0 0/0),0 0 0 0 oklch(0% 0 0/0);isolation:isolate}}}.md\:btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))90%,#000);isolation:isolate}.md\:btn-primary{--btn-color:var(--color-primary);--btn-fg:var(--color-primary-content)}.md\:btn-secondary{--btn-color:var(--color-secondary);--btn-fg:var(--color-secondary-content)}.md\:btn-accent{--btn-color:var(--color-accent);--btn-fg:var(--color-accent-content)}.md\:btn-neutral{--btn-color:var(--color-neutral);--btn-fg:var(--color-neutral-content)}.md\:btn-info{--btn-color:var(--color-info);--btn-fg:var(--color-info-content)}.md\:btn-success{--btn-color:var(--color-success);--btn-fg:var(--color-success-content)}.md\:btn-warning{--btn-color:var(--color-warning);--btn-fg:var(--color-warning-content)}.md\:btn-error{--btn-color:var(--color-error);--btn-fg:var(--color-error-content)}.md\:btn-soft{--btn-shadow:"";color:var(--btn-color,var(--color-neutral));--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,var(--color-base-100));--btn-noise:none;border-width:0;&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}}}.md\:btn-soft.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}.md\:btn-outline{--btn-shadow:"";--btn-bg:"";color:var(--btn-color,var(--color-neutral));--btn-border:var(--btn-color,var(--color-neutral));--btn-noise:none;outline-color:var(--btn-color,var(--color-neutral));@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000);outline-width:1px}}.md\:btn-outline.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}.md\:btn-text{--btn-shadow:"";color:var(--btn-color,var(--color-neutral));--btn-bg:"";--btn-border:"";--btn-noise:none;outline-color:var(--btn-color,var(--color-neutral));border-width:0;@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}.md\:btn-text.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}.md\:btn-gradient{--btn-shadow:0px 1px 3px 0px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 1px 2px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);--btn-border:var(--btn-color,var(--color-neutral));--dark-shade:color-mix(in oklab,var(--btn-color,var(--color-neutral))80%,black);background-color:#0000;background-size:200%;background-image:linear-gradient(102deg,var(--btn-color,var(--color-neutral))0%,var(--dark-shade)51%,var(--btn-color,var(--color-neutral))100%);border-width:2px;transition-property:background-position,box-shadow;transition-duration:.4s;transition-timing-function:ease-in-out;@media (hover:hover){&:hover{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}}&:focus-visible{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}}.md\:btn-gradient.btn-active{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}.md\:btn-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--btn-p:.5rem;--size:calc(var(--size-field,.25rem)*6)}.md\:btn-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--btn-p:.75rem;--size:calc(var(--size-field,.25rem)*7.5)}.md\:btn-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--btn-p:1rem;--size:calc(var(--size-field,.25rem)*9.5)}.md\:btn-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--btn-p:1.25rem;--size:calc(var(--size-field,.25rem)*11.5)}.md\:btn-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--btn-p:1.5rem;--size:calc(var(--size-field,.25rem)*14)}.md\:btn-square{width:var(--size);height:var(--size);padding-inline:0}.md\:btn-circle{width:var(--size);height:var(--size);border-radius:3.40282e38px;padding-inline:0}.md\:btn-wide{width:100%;max-width:16rem}.md\:btn-block{width:100%}}@media (width>=1024px){.lg\:btn{cursor:pointer;text-align:center;vertical-align:middle;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;gap:.5rem;text-decoration-line:none;display:inline-flex;@media (prefers-reduced-motion:reduce){transition-property:none}padding-inline:var(--btn-p);color:var(--btn-fg);height:var(--size);outline-color:color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,var(--color-base-100));background-color:var(--btn-bg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--btn-noise);border:var(--border)solid var(--btn-border);box-shadow:0 .5px 0 .5px oklch(100% 0 0/calc(var(--depth)*8%))inset,var(--btn-shadow);--size:calc(var(--size-field,.25rem)*9.5);--btn-bg:var(--btn-color,var(--color-neutral));--btn-fg:var(--color-neutral-content);--btn-p:1rem;--btn-border:color-mix(in oklab,var(--btn-bg),#000 calc(var(--depth)*5%));--btn-shadow:0px 1px 3px 0px color-mix(in oklab,var(--color-base-300)40%,#0000),0px 1px 2px -1px color-mix(in oklab,var(--color-base-300)40%,#0000);--btn-noise:var(--fx-noise);border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));transition-property:color,background-color,border-color,box-shadow;transition-duration:.25s;transition-timing-function:cubic-bezier(0,0,.96,1.03)@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))90%,#000)}}&:active:hover:not(.btn-active),&:active:focus:not(.btn-active){--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;transition-duration:.3s;transition-timing-function:ease-out}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral)),#000 10%);outline-width:2px;outline-style:solid}&:is(:disabled,[disabled],.btn-disabled){pointer-events:none;opacity:.5;--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&:is(input[type=checkbox],input[type=radio]){appearance:none;&:after{content:attr(aria-label)}&:checked{background:var(--color-primary);color:var(--color-primary-content);outline-color:var(--color-primary);--btn-shadow:0 0 0 0 oklch(0% 0 0/0),0 0 0 0 oklch(0% 0 0/0);isolation:isolate}}}.lg\:btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))90%,#000);isolation:isolate}.lg\:btn-primary{--btn-color:var(--color-primary);--btn-fg:var(--color-primary-content)}.lg\:btn-secondary{--btn-color:var(--color-secondary);--btn-fg:var(--color-secondary-content)}.lg\:btn-accent{--btn-color:var(--color-accent);--btn-fg:var(--color-accent-content)}.lg\:btn-neutral{--btn-color:var(--color-neutral);--btn-fg:var(--color-neutral-content)}.lg\:btn-info{--btn-color:var(--color-info);--btn-fg:var(--color-info-content)}.lg\:btn-success{--btn-color:var(--color-success);--btn-fg:var(--color-success-content)}.lg\:btn-warning{--btn-color:var(--color-warning);--btn-fg:var(--color-warning-content)}.lg\:btn-error{--btn-color:var(--color-error);--btn-fg:var(--color-error-content)}.lg\:btn-soft{--btn-shadow:"";color:var(--btn-color,var(--color-neutral));--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,var(--color-base-100));--btn-noise:none;border-width:0;&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}}}.lg\:btn-soft.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}.lg\:btn-outline{--btn-shadow:"";--btn-bg:"";color:var(--btn-color,var(--color-neutral));--btn-border:var(--btn-color,var(--color-neutral));--btn-noise:none;outline-color:var(--btn-color,var(--color-neutral));@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000);outline-width:1px}}.lg\:btn-outline.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}.lg\:btn-text{--btn-shadow:"";color:var(--btn-color,var(--color-neutral));--btn-bg:"";--btn-border:"";--btn-noise:none;outline-color:var(--btn-color,var(--color-neutral));border-width:0;@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}.lg\:btn-text.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}.lg\:btn-gradient{--btn-shadow:0px 1px 3px 0px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 1px 2px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);--btn-border:var(--btn-color,var(--color-neutral));--dark-shade:color-mix(in oklab,var(--btn-color,var(--color-neutral))80%,black);background-color:#0000;background-size:200%;background-image:linear-gradient(102deg,var(--btn-color,var(--color-neutral))0%,var(--dark-shade)51%,var(--btn-color,var(--color-neutral))100%);border-width:2px;transition-property:background-position,box-shadow;transition-duration:.4s;transition-timing-function:ease-in-out;@media (hover:hover){&:hover{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}}&:focus-visible{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}}.lg\:btn-gradient.btn-active{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}.lg\:btn-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--btn-p:.5rem;--size:calc(var(--size-field,.25rem)*6)}.lg\:btn-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--btn-p:.75rem;--size:calc(var(--size-field,.25rem)*7.5)}.lg\:btn-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--btn-p:1rem;--size:calc(var(--size-field,.25rem)*9.5)}.lg\:btn-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--btn-p:1.25rem;--size:calc(var(--size-field,.25rem)*11.5)}.lg\:btn-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--btn-p:1.5rem;--size:calc(var(--size-field,.25rem)*14)}.lg\:btn-square{width:var(--size);height:var(--size);padding-inline:0}.lg\:btn-circle{width:var(--size);height:var(--size);border-radius:3.40282e38px;padding-inline:0}.lg\:btn-wide{width:100%;max-width:16rem}.lg\:btn-block{width:100%}}@media (width>=1280px){.xl\:btn{cursor:pointer;text-align:center;vertical-align:middle;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;gap:.5rem;text-decoration-line:none;display:inline-flex;@media (prefers-reduced-motion:reduce){transition-property:none}padding-inline:var(--btn-p);color:var(--btn-fg);height:var(--size);outline-color:color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,var(--color-base-100));background-color:var(--btn-bg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--btn-noise);border:var(--border)solid var(--btn-border);box-shadow:0 .5px 0 .5px oklch(100% 0 0/calc(var(--depth)*8%))inset,var(--btn-shadow);--size:calc(var(--size-field,.25rem)*9.5);--btn-bg:var(--btn-color,var(--color-neutral));--btn-fg:var(--color-neutral-content);--btn-p:1rem;--btn-border:color-mix(in oklab,var(--btn-bg),#000 calc(var(--depth)*5%));--btn-shadow:0px 1px 3px 0px color-mix(in oklab,var(--color-base-300)40%,#0000),0px 1px 2px -1px color-mix(in oklab,var(--color-base-300)40%,#0000);--btn-noise:var(--fx-noise);border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));transition-property:color,background-color,border-color,box-shadow;transition-duration:.25s;transition-timing-function:cubic-bezier(0,0,.96,1.03)@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))90%,#000)}}&:active:hover:not(.btn-active),&:active:focus:not(.btn-active){--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;transition-duration:.3s;transition-timing-function:ease-out}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral)),#000 10%);outline-width:2px;outline-style:solid}&:is(:disabled,[disabled],.btn-disabled){pointer-events:none;opacity:.5;--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&:is(input[type=checkbox],input[type=radio]){appearance:none;&:after{content:attr(aria-label)}&:checked{background:var(--color-primary);color:var(--color-primary-content);outline-color:var(--color-primary);--btn-shadow:0 0 0 0 oklch(0% 0 0/0),0 0 0 0 oklch(0% 0 0/0);isolation:isolate}}}.xl\:btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))90%,#000);isolation:isolate}.xl\:btn-primary{--btn-color:var(--color-primary);--btn-fg:var(--color-primary-content)}.xl\:btn-secondary{--btn-color:var(--color-secondary);--btn-fg:var(--color-secondary-content)}.xl\:btn-accent{--btn-color:var(--color-accent);--btn-fg:var(--color-accent-content)}.xl\:btn-neutral{--btn-color:var(--color-neutral);--btn-fg:var(--color-neutral-content)}.xl\:btn-info{--btn-color:var(--color-info);--btn-fg:var(--color-info-content)}.xl\:btn-success{--btn-color:var(--color-success);--btn-fg:var(--color-success-content)}.xl\:btn-warning{--btn-color:var(--color-warning);--btn-fg:var(--color-warning-content)}.xl\:btn-error{--btn-color:var(--color-error);--btn-fg:var(--color-error-content)}.xl\:btn-soft{--btn-shadow:"";color:var(--btn-color,var(--color-neutral));--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,var(--color-base-100));--btn-noise:none;border-width:0;&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}}}.xl\:btn-soft.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}.xl\:btn-outline{--btn-shadow:"";--btn-bg:"";color:var(--btn-color,var(--color-neutral));--btn-border:var(--btn-color,var(--color-neutral));--btn-noise:none;outline-color:var(--btn-color,var(--color-neutral));@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000);outline-width:1px}}.xl\:btn-outline.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}.xl\:btn-text{--btn-shadow:"";color:var(--btn-color,var(--color-neutral));--btn-bg:"";--btn-border:"";--btn-noise:none;outline-color:var(--btn-color,var(--color-neutral));border-width:0;@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}.xl\:btn-text.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}.xl\:btn-gradient{--btn-shadow:0px 1px 3px 0px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 1px 2px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);--btn-border:var(--btn-color,var(--color-neutral));--dark-shade:color-mix(in oklab,var(--btn-color,var(--color-neutral))80%,black);background-color:#0000;background-size:200%;background-image:linear-gradient(102deg,var(--btn-color,var(--color-neutral))0%,var(--dark-shade)51%,var(--btn-color,var(--color-neutral))100%);border-width:2px;transition-property:background-position,box-shadow;transition-duration:.4s;transition-timing-function:ease-in-out;@media (hover:hover){&:hover{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}}&:focus-visible{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}}.xl\:btn-gradient.btn-active{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}.xl\:btn-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--btn-p:.5rem;--size:calc(var(--size-field,.25rem)*6)}.xl\:btn-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--btn-p:.75rem;--size:calc(var(--size-field,.25rem)*7.5)}.xl\:btn-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--btn-p:1rem;--size:calc(var(--size-field,.25rem)*9.5)}.xl\:btn-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--btn-p:1.25rem;--size:calc(var(--size-field,.25rem)*11.5)}.xl\:btn-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--btn-p:1.5rem;--size:calc(var(--size-field,.25rem)*14)}.xl\:btn-square{width:var(--size);height:var(--size);padding-inline:0}.xl\:btn-circle{width:var(--size);height:var(--size);border-radius:3.40282e38px;padding-inline:0}.xl\:btn-wide{width:100%;max-width:16rem}.xl\:btn-block{width:100%}}@media (width>=1536px){.\32 xl\:btn{cursor:pointer;text-align:center;vertical-align:middle;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;gap:.5rem;text-decoration-line:none;display:inline-flex;@media (prefers-reduced-motion:reduce){transition-property:none}padding-inline:var(--btn-p);color:var(--btn-fg);height:var(--size);outline-color:color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,var(--color-base-100));background-color:var(--btn-bg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--btn-noise);border:var(--border)solid var(--btn-border);box-shadow:0 .5px 0 .5px oklch(100% 0 0/calc(var(--depth)*8%))inset,var(--btn-shadow);--size:calc(var(--size-field,.25rem)*9.5);--btn-bg:var(--btn-color,var(--color-neutral));--btn-fg:var(--color-neutral-content);--btn-p:1rem;--btn-border:color-mix(in oklab,var(--btn-bg),#000 calc(var(--depth)*5%));--btn-shadow:0px 1px 3px 0px color-mix(in oklab,var(--color-base-300)40%,#0000),0px 1px 2px -1px color-mix(in oklab,var(--color-base-300)40%,#0000);--btn-noise:var(--fx-noise);border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));transition-property:color,background-color,border-color,box-shadow;transition-duration:.25s;transition-timing-function:cubic-bezier(0,0,.96,1.03)@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))90%,#000)}}&:active:hover:not(.btn-active),&:active:focus:not(.btn-active){--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;transition-duration:.3s;transition-timing-function:ease-out}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral)),#000 10%);outline-width:2px;outline-style:solid}&:is(:disabled,[disabled],.btn-disabled){pointer-events:none;opacity:.5;--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&:is(input[type=checkbox],input[type=radio]){appearance:none;&:after{content:attr(aria-label)}&:checked{background:var(--color-primary);color:var(--color-primary-content);outline-color:var(--color-primary);--btn-shadow:0 0 0 0 oklch(0% 0 0/0),0 0 0 0 oklch(0% 0 0/0);isolation:isolate}}}.\32 xl\:btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))90%,#000);isolation:isolate}.\32 xl\:btn-primary{--btn-color:var(--color-primary);--btn-fg:var(--color-primary-content)}.\32 xl\:btn-secondary{--btn-color:var(--color-secondary);--btn-fg:var(--color-secondary-content)}.\32 xl\:btn-accent{--btn-color:var(--color-accent);--btn-fg:var(--color-accent-content)}.\32 xl\:btn-neutral{--btn-color:var(--color-neutral);--btn-fg:var(--color-neutral-content)}.\32 xl\:btn-info{--btn-color:var(--color-info);--btn-fg:var(--color-info-content)}.\32 xl\:btn-success{--btn-color:var(--color-success);--btn-fg:var(--color-success-content)}.\32 xl\:btn-warning{--btn-color:var(--color-warning);--btn-fg:var(--color-warning-content)}.\32 xl\:btn-error{--btn-color:var(--color-error);--btn-fg:var(--color-error-content)}.\32 xl\:btn-soft{--btn-shadow:"";color:var(--btn-color,var(--color-neutral));--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,var(--color-base-100));--btn-noise:none;border-width:0;&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}}}.\32 xl\:btn-soft.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))20%,var(--color-base-100))}.\32 xl\:btn-outline{--btn-shadow:"";--btn-bg:"";color:var(--btn-color,var(--color-neutral));--btn-border:var(--btn-color,var(--color-neutral));--btn-noise:none;outline-color:var(--btn-color,var(--color-neutral));@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000);outline-width:1px}}.\32 xl\:btn-outline.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}.\32 xl\:btn-text{--btn-shadow:"";color:var(--btn-color,var(--color-neutral));--btn-bg:"";--btn-border:"";--btn-noise:none;outline-color:var(--btn-color,var(--color-neutral));border-width:0;@media (hover:hover){&:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}&:focus-visible{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}}.\32 xl\:btn-text.btn-active{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-neutral))10%,#0000)}.\32 xl\:btn-gradient{--btn-shadow:0px 1px 3px 0px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 1px 2px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);--btn-border:var(--btn-color,var(--color-neutral));--dark-shade:color-mix(in oklab,var(--btn-color,var(--color-neutral))80%,black);background-color:#0000;background-size:200%;background-image:linear-gradient(102deg,var(--btn-color,var(--color-neutral))0%,var(--dark-shade)51%,var(--btn-color,var(--color-neutral))100%);border-width:2px;transition-property:background-position,box-shadow;transition-duration:.4s;transition-timing-function:ease-in-out;@media (hover:hover){&:hover{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}}&:focus-visible{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}}.\32 xl\:btn-gradient.btn-active{--btn-shadow:0px 4px 6px -1px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000),0px 2px 4px -2px color-mix(in oklab,var(--btn-color,var(--color-neutral))30%,#0000);background-position:99%}.\32 xl\:btn-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--btn-p:.5rem;--size:calc(var(--size-field,.25rem)*6)}.\32 xl\:btn-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--btn-p:.75rem;--size:calc(var(--size-field,.25rem)*7.5)}.\32 xl\:btn-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--btn-p:1rem;--size:calc(var(--size-field,.25rem)*9.5)}.\32 xl\:btn-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--btn-p:1.25rem;--size:calc(var(--size-field,.25rem)*11.5)}.\32 xl\:btn-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--btn-p:1.5rem;--size:calc(var(--size-field,.25rem)*14)}.\32 xl\:btn-square{width:var(--size);height:var(--size);padding-inline:0}.\32 xl\:btn-circle{width:var(--size);height:var(--size);border-radius:3.40282e38px;padding-inline:0}.\32 xl\:btn-wide{width:100%;max-width:16rem}.\32 xl\:btn-block{width:100%}}}