| manza-light | manza-dark | |||||
|---|---|---|---|---|---|---|
| variant | rest | hover (forced) | open (forced) | rest | hover (forced) | open (forced) |
default | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
| manza-light | manza-dark | |||||
|---|---|---|---|---|---|---|
| variant | rest | hover (forced) | open (forced) | rest | hover (forced) | open (forced) |
style:ghost | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-ghost [--btn-border:transparent] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-ghost [--btn-border:transparent] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-ghost [--btn-border:transparent] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-ghost [--btn-border:transparent] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-ghost [--btn-border:transparent] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-ghost [--btn-border:transparent] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] text-(--btn-fg) |
style:link | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-link [--btn-border:transparent] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-link [--btn-border:transparent] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-link [--btn-border:transparent] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-link [--btn-border:transparent] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-link [--btn-border:transparent] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-link [--btn-border:transparent] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] [--btn-bg:color-mix(in_oklab,var(--color-base-content)_var(--hover-tint),transparent)] |
style:outline | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-outline [--btn-bg:var(--color-base-100)] [--btn-border:color-mix(in_oklab,var(--color-base-content)_20%,transparent)] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-outline [--btn-border:color-mix(in_oklab,var(--color-base-content)_20%,transparent)] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-outline [--btn-border:color-mix(in_oklab,var(--color-base-content)_20%,transparent)] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-outline [--btn-bg:var(--color-base-100)] [--btn-border:color-mix(in_oklab,var(--color-base-content)_20%,transparent)] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-outline [--btn-border:color-mix(in_oklab,var(--color-base-content)_20%,transparent)] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-outline [--btn-border:color-mix(in_oklab,var(--color-base-content)_20%,transparent)] hover:[--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--color-base-100),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
style:dash | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-dash hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-dash hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-dash hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-dash hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-dash hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-dash hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
style:soft | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-soft hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-soft hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-soft hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-soft hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-soft hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-soft hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
| manza-light | manza-dark | |||||
|---|---|---|---|---|---|---|
| variant | rest | hover (forced) | open (forced) | rest | hover (forced) | open (forced) |
size:xs | btn font-medium [--hover-tint:8%] btn-xs [--fontsize:var(--text-xs)] [&_svg[data-icon]]:size-[calc(var(--size-field)*3)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-xs [--fontsize:var(--text-xs)] [&_svg[data-icon]]:size-[calc(var(--size-field)*3)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-xs [--fontsize:var(--text-xs)] [&_svg[data-icon]]:size-[calc(var(--size-field)*3)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-xs [--fontsize:var(--text-xs)] [&_svg[data-icon]]:size-[calc(var(--size-field)*3)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-xs [--fontsize:var(--text-xs)] [&_svg[data-icon]]:size-[calc(var(--size-field)*3)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-xs [--fontsize:var(--text-xs)] [&_svg[data-icon]]:size-[calc(var(--size-field)*3)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
size:sm | btn font-medium [--hover-tint:8%] btn-sm [--fontsize:var(--text-sm)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-sm [--fontsize:var(--text-sm)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-sm [--fontsize:var(--text-sm)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-sm [--fontsize:var(--text-sm)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-sm [--fontsize:var(--text-sm)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-sm [--fontsize:var(--text-sm)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
size:md | btn font-medium [--hover-tint:8%] btn-md [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-md [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-md [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-md [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-md [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-md [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
size:lg | btn font-medium [--hover-tint:8%] btn-lg [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*6)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-lg [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*6)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-lg [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*6)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-lg [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*6)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-lg [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*6)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-lg [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*6)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
size:xl | btn font-medium [--hover-tint:8%] btn-xl [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*7)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-xl [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*7)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-xl [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*7)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-xl [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*7)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-xl [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*7)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] btn-xl [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*7)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
| manza-light | manza-dark | |||||
|---|---|---|---|---|---|---|
| variant | rest | hover (forced) | open (forced) | rest | hover (forced) | open (forced) |
shape:circle | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-circle hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-circle hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-circle hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-circle hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-circle hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-circle hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
shape:square | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-square hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-square hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-square hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-square hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-square hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-square hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
| manza-light | manza-dark | |||||
|---|---|---|---|---|---|---|
| variant | rest | hover (forced) | open (forced) | rest | hover (forced) | open (forced) |
color:neutral | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-neutral hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-neutral hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-neutral hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-neutral hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-neutral hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-neutral hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
color:primary | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-primary hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-primary hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-primary hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-primary hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-primary hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-primary hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
color:secondary | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-secondary hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-secondary hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-secondary hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-secondary hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-secondary hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-secondary hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
color:accent | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-accent hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-accent hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-accent hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-accent hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-accent hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-accent hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
color:info | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-info hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-info hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-info hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-info hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-info hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-info hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
color:success | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-success hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-success hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-success hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-success hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-success hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-success hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
color:warning | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-warning hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-warning hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-warning hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-warning hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-warning hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-warning hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
color:error | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-error hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-error hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-error hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-error hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-error hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-error hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
| manza-light | manza-dark | |||||
|---|---|---|---|---|---|---|
| variant | rest | hover (forced) | open (forced) | rest | hover (forced) | open (forced) |
layout:inline | btn font-medium [--hover-tint:8%] [--size:auto] [--btn-p:0] [--border:0] [--fontsize:inherit] align-baseline [&_svg[data-icon]]:size-[1em] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--hover-tint:8%] [--size:auto] [--btn-p:0] [--border:0] [--fontsize:inherit] align-baseline [&_svg[data-icon]]:size-[1em] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] [--size:auto] [--btn-p:0] [--border:0] [--fontsize:inherit] align-baseline [&_svg[data-icon]]:size-[1em] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] [--size:auto] [--btn-p:0] [--border:0] [--fontsize:inherit] align-baseline [&_svg[data-icon]]:size-[1em] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--hover-tint:8%] [--size:auto] [--btn-p:0] [--border:0] [--fontsize:inherit] align-baseline [&_svg[data-icon]]:size-[1em] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--hover-tint:8%] [--size:auto] [--btn-p:0] [--border:0] [--fontsize:inherit] align-baseline [&_svg[data-icon]]:size-[1em] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
layout:row | btn [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] [--size:auto] [--btn-p:calc(var(--spacing)*4)] min-h-12 py-3 w-full justify-start text-start font-normal hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] [--size:auto] [--btn-p:calc(var(--spacing)*4)] min-h-12 py-3 w-full justify-start text-start font-normal hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] [--size:auto] [--btn-p:calc(var(--spacing)*4)] min-h-12 py-3 w-full justify-start text-start font-normal hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] [--size:auto] [--btn-p:calc(var(--spacing)*4)] min-h-12 py-3 w-full justify-start text-start font-normal hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] [--size:auto] [--btn-p:calc(var(--spacing)*4)] min-h-12 py-3 w-full justify-start text-start font-normal hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] [--size:auto] [--btn-p:calc(var(--spacing)*4)] min-h-12 py-3 w-full justify-start text-start font-normal hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
layout:field | btn [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] justify-between normal-case font-normal [--btn-p:calc(var(--spacing)*3)] not-hover:[--btn-bg:var(--color-base-100)] [--btn-border:color-mix(in_oklab,var(--color-base-content)_20%,transparent)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] justify-between normal-case font-normal [--btn-p:calc(var(--spacing)*3)] [--btn-border:color-mix(in_oklab,var(--color-base-content)_20%,transparent)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] justify-between normal-case font-normal [--btn-p:calc(var(--spacing)*3)] [--btn-border:color-mix(in_oklab,var(--color-base-content)_20%,transparent)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] justify-between normal-case font-normal [--btn-p:calc(var(--spacing)*3)] not-hover:[--btn-bg:var(--color-base-100)] [--btn-border:color-mix(in_oklab,var(--color-base-content)_20%,transparent)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] justify-between normal-case font-normal [--btn-p:calc(var(--spacing)*3)] [--btn-border:color-mix(in_oklab,var(--color-base-content)_20%,transparent)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] justify-between normal-case font-normal [--btn-p:calc(var(--spacing)*3)] [--btn-border:color-mix(in_oklab,var(--color-base-content)_20%,transparent)] hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
| manza-light | manza-dark | |||||
|---|---|---|---|---|---|---|
| variant | rest | hover (forced) | open (forced) | rest | hover (forced) | open (forced) |
flag:active | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-active hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-active hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-active hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-active hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-active hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-active hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
flag:disabled | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-disabled hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-disabled hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-disabled hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-disabled hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-disabled hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-disabled hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
flag:wide | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-wide hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-wide hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-wide hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-wide hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-wide hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-wide hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
flag:block | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-block hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-block hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-block hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-block hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-block hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] btn-block hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |
flag:flush | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] rounded-none hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] rounded-none hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] rounded-none hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] rounded-none hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] rounded-none hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) | btn font-medium [--fontsize:var(--text-base)] [&_svg[data-icon]]:size-[calc(var(--size-field)*4.5)] [--hover-tint:8%] rounded-none hover:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:[--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] hover:text-(--btn-fg) [.dropdown:not(details):not(.dropdown-close):not(.dropdown-hover:not(:hover):has(>[tabindex]:first-child:focus:not(:focus-visible))):is(:focus-within,.dropdown-open,.dropdown-hover:hover)>&,details.dropdown[open]>&,&:has(~[popover]:popover-open)]:text-(--btn-fg) [--btn-bg:color-mix(in_oklab,var(--btn-color,var(--color-base-200)),var(--color-base-content)_var(--hover-tint))] text-(--btn-fg) |