@wonderflow/react-components/dist/components/button/button.module.css

UI components from Wonderflow's Wanda design system

@layer components{.Button{-webkit-touch-callout:none;grid-gap:.5rem;align-items:center;appearance:none;background:none;border:0;border-radius:.25rem;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:inherit;font-weight:600;justify-content:center;margin:0;min-inline-size:min-content;overflow:hidden;position:relative;text-decoration:none;transition:all .1s cubic-bezier(.3,.07,.34,1);-webkit-user-select:none;user-select:none;white-space:nowrap}.Button:not([aria-pressed=true],[aria-disabled=true],[aria-busy=true]):active{transform:scale(.98);transform-origin:center}.Button[data-button-dimension=big]{block-size:3rem;font-size:1rem;line-height:0;padding:.75rem 1.5rem}.Button[data-button-dimension=regular]{block-size:2.25rem;font-size:.875rem;line-height:0;padding:.5rem 1rem}.Button[data-button-dimension=small]{grid-gap:.25rem;block-size:1.5rem;font-size:.875rem;line-height:0;padding:.125rem .5rem}.Button[data-button-kind=primary]{background:var(--cta-default);color:var(--cta-foreground)}.Button[data-button-kind=primary]:where([aria-pressed=true]),.Button[data-button-kind=primary]:where([aria-pressed=true]:hover){background:#9e0018;color:#fff}.Button[data-button-kind=primary]:not([aria-pressed=true],[aria-disabled=true],[aria-busy=true]):is(:hover){background:var(--cta-dark)}.Button[data-button-kind=secondary]{-webkit-backdrop-filter:saturate(180%) blur(62px);backdrop-filter:saturate(180%) blur(62px);background-color:var(--global-vibrancy-background);color:var(--global-vibrancy-foreground)}.Button[data-button-kind=secondary]:where([aria-pressed=true]),.Button[data-button-kind=secondary]:where([aria-pressed=true]:hover){background:var(--dimmed-7);color:var(--dimmed-0)}.Button[data-button-kind=secondary]:not([aria-pressed=true],[aria-disabled=true],[aria-busy=true]):is(:hover){background-color:var(--global-vibrancy-background-hard);color:var(--global-vibrancy-foreground)}.Button[data-button-kind=flat]{color:var(--global-vibrancy-foreground)}.Button[data-button-kind=flat]:where([aria-pressed=true]),.Button[data-button-kind=flat]:where([aria-pressed=true]:is(:active,:focus)){background:var(--dimmed-7);color:var(--dimmed-0)}.Button[data-button-kind=flat]:is(:hover,:focus){-webkit-backdrop-filter:saturate(180%) blur(62px);backdrop-filter:saturate(180%) blur(62px);background-color:var(--global-vibrancy-background);color:var(--global-vibrancy-foreground)}.Button[data-button-kind=flat]:not([aria-pressed=true],[aria-disabled=true],[aria-busy=true]):is(:hover){background-color:var(--global-vibrancy-background)}.Button[data-button-fullwidth=true]{inline-size:100%}.Button[data-button-icon-position=right]{flex-direction:row-reverse}.Button[aria-disabled=true],.Button[aria-disabled=true]:is(:hover,:focus,:active){-webkit-backdrop-filter:saturate(180%) blur(62px);backdrop-filter:saturate(180%) blur(62px);background-color:var(--global-disabled-background);color:var(--global-disabled-foreground);cursor:not-allowed;pointer-events:none}.Button[aria-busy=true]{pointer-events:none}.Button[aria-busy=true]>:not(.SpinnerIndicator){visibility:hidden}.SpinnerIndicator{bottom:0;display:grid;left:0;place-content:center;position:absolute;right:0;top:0}.ButtonsGroup{display:inline-flex}.ButtonsGroup>*+*{box-shadow:inset 1px 0 0 hsla(0,0%,40%,.2)}.ButtonsGroup>:not(:first-child,:last-child,:only-of-type){border-radius:0}.ButtonsGroup>:first-child:not(:only-of-type){border-bottom-right-radius:0;border-top-right-radius:0}.ButtonsGroup>:last-child:not(:only-of-type){border-bottom-left-radius:0;border-top-left-radius:0}}