// Built using Hyperiux Vault: https://vault.hyperiux.com
"use client";
import { useEffect, useRef, useState, type ComponentPropsWithoutRef, type CSSProperties, type PointerEvent } from "react";
import { ArrowRight } from "lucide-react";
const DEFAULT_HREF = "#";
const COMPACT_LAYOUT_BREAKPOINT = 1025;
const ANIMATION_DURATION_MS = 450;
export interface ArrowFillButtonOwnProps {
btnText?: string;
href?: string;
className?: string;
bgColor?: string;
textColor?: string;
fillBgColor?: string;
fillTextColor?: string;
hoverFillBgColor?: string;
hoverFillTextColor?: string;
arrowColor?: string;
hoverArrowColor?: string;
animationDuration?: number;
fillOnHover?: boolean;
}
export type ArrowFillButtonProps = ArrowFillButtonOwnProps & Omit<ComponentPropsWithoutRef<"a">, keyof ArrowFillButtonOwnProps>;
function ArrowFillButton({
btnText = "Hover Me",
href = DEFAULT_HREF,
className = "",
bgColor = "#ff5f00",
textColor = "#ffffff",
fillBgColor = "#ffffff",
fillTextColor = "#ff5f00",
hoverFillBgColor = "#ffffff",
hoverFillTextColor = "#ff5f00",
arrowColor,
hoverArrowColor,
animationDuration = ANIMATION_DURATION_MS / 1000,
fillOnHover = true,
...props
}: ArrowFillButtonProps) {
const [isReady, setIsReady] = useState(false);
const [isCompactLayout, setIsCompactLayout] = useState(false);
const [isPressed, setIsPressed] = useState(false);
const releaseTimeoutRef = useRef<number | null>(null);
const usesUtilityBackground =
className.includes("bg-") ||
className.includes("from-") ||
className.includes("via-") ||
className.includes("to-");
useEffect(() => {
const frame = window.requestAnimationFrame(() => {
setIsReady(true);
});
return () => window.cancelAnimationFrame(frame);
}, []);
useEffect(() => {
const mediaQuery = window.matchMedia(
`(max-width: ${COMPACT_LAYOUT_BREAKPOINT - 1}px)`
);
const syncCompactLayout = (event: MediaQueryList | MediaQueryListEvent) => {
const matches = "matches" in event ? event.matches : ((event as any).currentTarget as MediaQueryList).matches;
setIsCompactLayout(matches);
if (!matches) {
setIsPressed(false);
}
};
syncCompactLayout(mediaQuery);
mediaQuery.addEventListener("change", syncCompactLayout);
return () => {
mediaQuery.removeEventListener("change", syncCompactLayout);
};
}, []);
useEffect(() => {
return () => {
if (releaseTimeoutRef.current) {
window.clearTimeout(releaseTimeoutRef.current);
}
};
}, []);
const clearPressedState = () => {
if (releaseTimeoutRef.current) {
window.clearTimeout(releaseTimeoutRef.current);
}
releaseTimeoutRef.current = window.setTimeout(() => {
setIsPressed(false);
releaseTimeoutRef.current = null;
}, animationDuration * 1000);
};
const handlePointerDown = (event: PointerEvent<HTMLAnchorElement>) => {
props.onPointerDown?.(event);
if (!isCompactLayout || event.pointerType === "mouse") {
return;
}
if (releaseTimeoutRef.current) {
window.clearTimeout(releaseTimeoutRef.current);
releaseTimeoutRef.current = null;
}
setIsPressed(true);
};
const handlePointerUp = (event: PointerEvent<HTMLAnchorElement>) => {
props.onPointerUp?.(event);
if (!isCompactLayout || event.pointerType === "mouse") {
return;
}
clearPressedState();
};
const handlePointerCancel = (event: PointerEvent<HTMLAnchorElement>) => {
props.onPointerCancel?.(event);
if (!isCompactLayout || event.pointerType === "mouse") {
return;
}
clearPressedState();
};
return (
<a
href={href}
{...props}
data-pressed={isPressed ? "true" : "false"}
onPointerDown={handlePointerDown}
onPointerUp={handlePointerUp}
onPointerCancel={handlePointerCancel}
className={`group relative inline-flex h-[4.2vw] w-fit min-w-fit max-w-none cursor-pointer items-center justify-center overflow-hidden rounded-full px-[3vw] pr-[calc(var(--icon-circle)+var(--icon-right)+2vw)] whitespace-nowrap font-medium text-[1.1vw] leading-none [text-rendering:geometricPrecision] [--icon-circle:3.1vw] [--icon-right:0.55vw] [--circle-inset-y:calc((100%-var(--icon-circle))/2)] max-lg:h-[11vw] max-lg:px-[5vw] max-lg:pr-[calc(var(--icon-circle)+var(--icon-right)+4vw)] max-lg:text-[3vw] max-lg:font-normal max-lg:[--icon-circle:8vw] max-lg:[--icon-right:1.5vw] max-md:h-[15vw] max-md:px-[7vw] max-md:pr-[calc(var(--icon-circle)+var(--icon-right)+5vw)] max-md:text-[4.2vw] max-md:[--icon-circle:11vw] max-md:[--icon-right:2vw] ${
usesUtilityBackground ? "" : "bg-(--btn-bg)"
} text-(--btn-text) ${className}`}
style={{
"--btn-bg": bgColor,
"--btn-text": textColor,
"--btn-fill-bg": fillBgColor,
"--btn-fill-text": fillTextColor,
"--btn-fill-bg-hover": hoverFillBgColor,
"--btn-fill-text-hover": hoverFillTextColor,
"--btn-arrow": arrowColor || fillTextColor,
"--btn-arrow-hover": hoverArrowColor || hoverFillTextColor,
"--btn-duration": `${animationDuration}s`,
visibility: isReady ? "visible" : "hidden",
} as CSSProperties & Record<string, string | number>}
>
<span className="relative z-1 pb-px">{btnText}</span>
<div
aria-hidden="true"
className={`pointer-events-none absolute z-2 rounded-full bg-(--btn-fill-bg) inset-[var(--circle-inset-y)_var(--icon-right)_var(--circle-inset-y)_calc(100%-var(--icon-right)-var(--icon-circle))] ${
isReady
? "transition-all duration-450 ease-[cubic-bezier(0.785,0.135,0.15,0.86)] motion-reduce:transition-none group-hover:bg-(--btn-fill-bg-hover) group-hover:inset-0 group-data-[pressed=true]:bg-(--btn-fill-bg-hover) group-data-[pressed=true]:inset-0"
: ""
}`}
/>
<div
aria-hidden="true"
className={`pointer-events-none absolute inset-0 z-2 flex items-center px-[3vw] pr-[calc(var(--icon-circle)+var(--icon-right)+2vw)] text-(--btn-fill-text) [clip-path:inset(var(--circle-inset-y)_var(--icon-right)_var(--circle-inset-y)_calc(100%-var(--icon-right)-var(--icon-circle)))] max-lg:px-[5vw] max-lg:pr-[calc(var(--icon-circle)+var(--icon-right)+4vw)] max-md:px-[7vw] max-md:pr-[calc(var(--icon-circle)+var(--icon-right)+5vw)] ${
isReady
? "transition-all duration-450 ease-[cubic-bezier(0.785,0.135,0.15,0.86)] motion-reduce:transition-none group-hover:text-(--btn-fill-text-hover) group-hover:[clip-path:inset(0_0_0_0)] group-data-[pressed=true]:text-(--btn-fill-text-hover) group-data-[pressed=true]:[clip-path:inset(0_0_0_0)]"
: ""
}`}
>
<span className="relative z-1 pb-px whitespace-nowrap">{btnText}</span>
</div>
<span
className={`pointer-events-none absolute right-[var(--icon-right)] top-1/2 z-3 inline-flex h-[var(--icon-circle)] w-[var(--icon-circle)] shrink-0 -translate-y-1/2 items-center justify-center overflow-hidden rounded-full bg-(--btn-fill-bg) text-(--btn-arrow) ${
isReady
? "transition-colors duration-450 ease-[cubic-bezier(0.785,0.135,0.15,0.86)] motion-reduce:transition-none group-hover:bg-(--btn-fill-bg-hover) group-hover:text-(--btn-arrow-hover) group-data-[pressed=true]:bg-(--btn-fill-bg-hover) group-data-[pressed=true]:text-(--btn-arrow-hover)"
: ""
}`}
style={{
WebkitMaskImage: "-webkit-radial-gradient(white, black)",
maskImage: "radial-gradient(white, black)",
}}
aria-hidden="true"
>
<ArrowRight
className={`absolute left-1/2 top-1/2 size-[1.5vw] max-lg:size-[4vw] max-md:size-[5vw] translate-x-[-170%] -translate-y-1/2 origin-center scale-0 text-current ${
isReady
? "transition-transform duration-450 ease-[cubic-bezier(0.785,0.135,0.15,0.86)] motion-reduce:transition-none group-hover:-translate-x-1/2 group-hover:-translate-y-1/2 group-hover:scale-100 group-data-[pressed=true]:-translate-x-1/2 group-data-[pressed=true]:-translate-y-1/2 group-data-[pressed=true]:scale-100"
: ""
}`}
strokeWidth={1.8}
/>
<ArrowRight
className={`absolute left-1/2 top-1/2 size-[1.5vw] max-lg:size-[4vw] max-md:size-[5vw] -translate-x-1/2 -translate-y-1/2 origin-center text-current ${
isReady
? "transition-transform duration-[450ms] ease-[cubic-bezier(0.785,0.135,0.15,0.86)] motion-reduce:transition-none group-hover:translate-x-[70%] group-hover:-translate-y-1/2 group-hover:scale-0 group-data-[pressed=true]:translate-x-[70%] group-data-[pressed=true]:-translate-y-1/2 group-data-[pressed=true]:scale-0"
: ""
}`}
strokeWidth={1.8}
/>
</span>
</a>
);
}
export default ArrowFillButton;
Arrow Fill Button
Try the interaction, copy the React source files, or download the complete example.
About Arrow Fill Button
Arrow Fill Button is an animated React and Tailwind CSS button by Hyperiux Vault. Try the interaction, copy the React source, or download the example with creator credit.
- Effects and categories
- Hover effects, Animated
- Using this example
- Copy a TSX file or download the original source and standalone demo. Test keyboard focus, motion and contrast in your own project.
Usage, Tailwind and licensing questions
Read the source files
registry/effects/buttons/arrow-fill-button/index.tsx
// Built using Hyperiux Vault: https://vault.hyperiux.com
"use client";
import { useEffect, useRef, useState, type ComponentPropsWithoutRef, type CSSProperties, type PointerEvent } from "react";
import { ArrowRight } from "lucide-react";
const DEFAULT_HREF = "#";
const COMPACT_LAYOUT_BREAKPOINT = 1025;
const ANIMATION_DURATION_MS = 450;
export interface ArrowFillButtonOwnProps {
btnText?: string;
href?: string;
className?: string;
bgColor?: string;
textColor?: string;
fillBgColor?: string;
fillTextColor?: string;
hoverFillBgColor?: string;
hoverFillTextColor?: string;
arrowColor?: string;
hoverArrowColor?: string;
animationDuration?: number;
fillOnHover?: boolean;
}
export type ArrowFillButtonProps = ArrowFillButtonOwnProps & Omit<ComponentPropsWithoutRef<"a">, keyof ArrowFillButtonOwnProps>;
function ArrowFillButton({
btnText = "Hover Me",
href = DEFAULT_HREF,
className = "",
bgColor = "#ff5f00",
textColor = "#ffffff",
fillBgColor = "#ffffff",
fillTextColor = "#ff5f00",
hoverFillBgColor = "#ffffff",
hoverFillTextColor = "#ff5f00",
arrowColor,
hoverArrowColor,
animationDuration = ANIMATION_DURATION_MS / 1000,
fillOnHover = true,
...props
}: ArrowFillButtonProps) {
const [isReady, setIsReady] = useState(false);
const [isCompactLayout, setIsCompactLayout] = useState(false);
const [isPressed, setIsPressed] = useState(false);
const releaseTimeoutRef = useRef<number | null>(null);
const usesUtilityBackground =
className.includes("bg-") ||
className.includes("from-") ||
className.includes("via-") ||
className.includes("to-");
useEffect(() => {
const frame = window.requestAnimationFrame(() => {
setIsReady(true);
});
return () => window.cancelAnimationFrame(frame);
}, []);
useEffect(() => {
const mediaQuery = window.matchMedia(
`(max-width: ${COMPACT_LAYOUT_BREAKPOINT - 1}px)`
);
const syncCompactLayout = (event: MediaQueryList | MediaQueryListEvent) => {
const matches = "matches" in event ? event.matches : ((event as any).currentTarget as MediaQueryList).matches;
setIsCompactLayout(matches);
if (!matches) {
setIsPressed(false);
}
};
syncCompactLayout(mediaQuery);
mediaQuery.addEventListener("change", syncCompactLayout);
return () => {
mediaQuery.removeEventListener("change", syncCompactLayout);
};
}, []);
useEffect(() => {
return () => {
if (releaseTimeoutRef.current) {
window.clearTimeout(releaseTimeoutRef.current);
}
};
}, []);
const clearPressedState = () => {
if (releaseTimeoutRef.current) {
window.clearTimeout(releaseTimeoutRef.current);
}
releaseTimeoutRef.current = window.setTimeout(() => {
setIsPressed(false);
releaseTimeoutRef.current = null;
}, animationDuration * 1000);
};
const handlePointerDown = (event: PointerEvent<HTMLAnchorElement>) => {
props.onPointerDown?.(event);
if (!isCompactLayout || event.pointerType === "mouse") {
return;
}
if (releaseTimeoutRef.current) {
window.clearTimeout(releaseTimeoutRef.current);
releaseTimeoutRef.current = null;
}
setIsPressed(true);
};
const handlePointerUp = (event: PointerEvent<HTMLAnchorElement>) => {
props.onPointerUp?.(event);
if (!isCompactLayout || event.pointerType === "mouse") {
return;
}
clearPressedState();
};
const handlePointerCancel = (event: PointerEvent<HTMLAnchorElement>) => {
props.onPointerCancel?.(event);
if (!isCompactLayout || event.pointerType === "mouse") {
return;
}
clearPressedState();
};
return (
<a
href={href}
{...props}
data-pressed={isPressed ? "true" : "false"}
onPointerDown={handlePointerDown}
onPointerUp={handlePointerUp}
onPointerCancel={handlePointerCancel}
className={`group relative inline-flex h-[4.2vw] w-fit min-w-fit max-w-none cursor-pointer items-center justify-center overflow-hidden rounded-full px-[3vw] pr-[calc(var(--icon-circle)+var(--icon-right)+2vw)] whitespace-nowrap font-medium text-[1.1vw] leading-none [text-rendering:geometricPrecision] [--icon-circle:3.1vw] [--icon-right:0.55vw] [--circle-inset-y:calc((100%-var(--icon-circle))/2)] max-lg:h-[11vw] max-lg:px-[5vw] max-lg:pr-[calc(var(--icon-circle)+var(--icon-right)+4vw)] max-lg:text-[3vw] max-lg:font-normal max-lg:[--icon-circle:8vw] max-lg:[--icon-right:1.5vw] max-md:h-[15vw] max-md:px-[7vw] max-md:pr-[calc(var(--icon-circle)+var(--icon-right)+5vw)] max-md:text-[4.2vw] max-md:[--icon-circle:11vw] max-md:[--icon-right:2vw] ${
usesUtilityBackground ? "" : "bg-(--btn-bg)"
} text-(--btn-text) ${className}`}
style={{
"--btn-bg": bgColor,
"--btn-text": textColor,
"--btn-fill-bg": fillBgColor,
"--btn-fill-text": fillTextColor,
"--btn-fill-bg-hover": hoverFillBgColor,
"--btn-fill-text-hover": hoverFillTextColor,
"--btn-arrow": arrowColor || fillTextColor,
"--btn-arrow-hover": hoverArrowColor || hoverFillTextColor,
"--btn-duration": `${animationDuration}s`,
visibility: isReady ? "visible" : "hidden",
} as CSSProperties & Record<string, string | number>}
>
<span className="relative z-1 pb-px">{btnText}</span>
<div
aria-hidden="true"
className={`pointer-events-none absolute z-2 rounded-full bg-(--btn-fill-bg) inset-[var(--circle-inset-y)_var(--icon-right)_var(--circle-inset-y)_calc(100%-var(--icon-right)-var(--icon-circle))] ${
isReady
? "transition-all duration-450 ease-[cubic-bezier(0.785,0.135,0.15,0.86)] motion-reduce:transition-none group-hover:bg-(--btn-fill-bg-hover) group-hover:inset-0 group-data-[pressed=true]:bg-(--btn-fill-bg-hover) group-data-[pressed=true]:inset-0"
: ""
}`}
/>
<div
aria-hidden="true"
className={`pointer-events-none absolute inset-0 z-2 flex items-center px-[3vw] pr-[calc(var(--icon-circle)+var(--icon-right)+2vw)] text-(--btn-fill-text) [clip-path:inset(var(--circle-inset-y)_var(--icon-right)_var(--circle-inset-y)_calc(100%-var(--icon-right)-var(--icon-circle)))] max-lg:px-[5vw] max-lg:pr-[calc(var(--icon-circle)+var(--icon-right)+4vw)] max-md:px-[7vw] max-md:pr-[calc(var(--icon-circle)+var(--icon-right)+5vw)] ${
isReady
? "transition-all duration-450 ease-[cubic-bezier(0.785,0.135,0.15,0.86)] motion-reduce:transition-none group-hover:text-(--btn-fill-text-hover) group-hover:[clip-path:inset(0_0_0_0)] group-data-[pressed=true]:text-(--btn-fill-text-hover) group-data-[pressed=true]:[clip-path:inset(0_0_0_0)]"
: ""
}`}
>
<span className="relative z-1 pb-px whitespace-nowrap">{btnText}</span>
</div>
<span
className={`pointer-events-none absolute right-[var(--icon-right)] top-1/2 z-3 inline-flex h-[var(--icon-circle)] w-[var(--icon-circle)] shrink-0 -translate-y-1/2 items-center justify-center overflow-hidden rounded-full bg-(--btn-fill-bg) text-(--btn-arrow) ${
isReady
? "transition-colors duration-450 ease-[cubic-bezier(0.785,0.135,0.15,0.86)] motion-reduce:transition-none group-hover:bg-(--btn-fill-bg-hover) group-hover:text-(--btn-arrow-hover) group-data-[pressed=true]:bg-(--btn-fill-bg-hover) group-data-[pressed=true]:text-(--btn-arrow-hover)"
: ""
}`}
style={{
WebkitMaskImage: "-webkit-radial-gradient(white, black)",
maskImage: "radial-gradient(white, black)",
}}
aria-hidden="true"
>
<ArrowRight
className={`absolute left-1/2 top-1/2 size-[1.5vw] max-lg:size-[4vw] max-md:size-[5vw] translate-x-[-170%] -translate-y-1/2 origin-center scale-0 text-current ${
isReady
? "transition-transform duration-450 ease-[cubic-bezier(0.785,0.135,0.15,0.86)] motion-reduce:transition-none group-hover:-translate-x-1/2 group-hover:-translate-y-1/2 group-hover:scale-100 group-data-[pressed=true]:-translate-x-1/2 group-data-[pressed=true]:-translate-y-1/2 group-data-[pressed=true]:scale-100"
: ""
}`}
strokeWidth={1.8}
/>
<ArrowRight
className={`absolute left-1/2 top-1/2 size-[1.5vw] max-lg:size-[4vw] max-md:size-[5vw] -translate-x-1/2 -translate-y-1/2 origin-center text-current ${
isReady
? "transition-transform duration-[450ms] ease-[cubic-bezier(0.785,0.135,0.15,0.86)] motion-reduce:transition-none group-hover:translate-x-[70%] group-hover:-translate-y-1/2 group-hover:scale-0 group-data-[pressed=true]:translate-x-[70%] group-data-[pressed=true]:-translate-y-1/2 group-data-[pressed=true]:scale-0"
: ""
}`}
strokeWidth={1.8}
/>
</span>
</a>
);
}
export default ArrowFillButton;
demo.tsx
export { default as default } from "@/registry/effects/buttons/arrow-fill-button/index";CSS
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
"Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--font-weight-normal: 400;
--font-weight-medium: 500;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
}
}
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring:where(:not(iframe)) {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}
}
@layer utilities {
.pointer-events-none {
pointer-events: none;
}
.visible {
visibility: visible;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.inset-0 {
inset: 0px;
}
.inset-\[var\(--circle-inset-y\)_var\(--icon-right\)_var\(--circle-inset-y\)_calc\(100\%-var\(--icon-right\)-var\(--icon-circle\)\)\] {
inset: var(--circle-inset-y) var(--icon-right) var(--circle-inset-y) calc(100% - var(--icon-right) - var(--icon-circle));
}
.top-1\/2 {
top: calc(1 / 2 * 100%);
}
.right-\[var\(--icon-right\)\] {
right: var(--icon-right);
}
.left-1\/2 {
left: calc(1 / 2 * 100%);
}
.z-1 {
z-index: 1;
}
.z-2 {
z-index: 2;
}
.z-3 {
z-index: 3;
}
.flex {
display: flex;
}
.hidden {
display: none;
}
.inline-flex {
display: inline-flex;
}
.size-\[1\.5vw\] {
width: 1.5vw;
height: 1.5vw;
}
.h-\[4\.2vw\] {
height: 4.2vw;
}
.h-\[var\(--icon-circle\)\] {
height: var(--icon-circle);
}
.w-\[var\(--icon-circle\)\] {
width: var(--icon-circle);
}
.w-fit {
width: fit-content;
}
.max-w-none {
max-width: none;
}
.min-w-fit {
min-width: fit-content;
}
.shrink-0 {
flex-shrink: 0;
}
.origin-center {
transform-origin: center;
}
.-translate-x-1\/2 {
--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-\[-170\%\] {
--tw-translate-x: -170%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.scale-0 {
--tw-scale-x: 0%;
--tw-scale-y: 0%;
--tw-scale-z: 0%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.cursor-pointer {
cursor: pointer;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
.bg-\(--btn-bg\) {
background-color: var(--btn-bg);
}
.bg-\(--btn-fill-bg\) {
background-color: var(--btn-fill-bg);
}
.px-\[3vw\] {
padding-inline: 3vw;
}
.pr-\[calc\(var\(--icon-circle\)\+var\(--icon-right\)\+2vw\)\] {
padding-right: calc(var(--icon-circle) + var(--icon-right) + 2vw);
}
.pb-px {
padding-bottom: 1px;
}
.text-\[1\.1vw\] {
font-size: 1.1vw;
}
.leading-none {
--tw-leading: 1;
line-height: 1;
}
.font-medium {
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
}
.whitespace-nowrap {
white-space: nowrap;
}
.text-\(--btn-arrow\) {
color: var(--btn-arrow);
}
.text-\(--btn-fill-text\) {
color: var(--btn-fill-text);
}
.text-\(--btn-text\) {
color: var(--btn-text);
}
.text-current {
color: currentcolor;
}
.transition-all {
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-colors {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-transform {
transition-property: transform, translate, scale, rotate;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-450 {
--tw-duration: 450ms;
transition-duration: 450ms;
}
.duration-\[450ms\] {
--tw-duration: 450ms;
transition-duration: 450ms;
}
.ease-\[cubic-bezier\(0\.785\,0\.135\,0\.15\,0\.86\)\] {
--tw-ease: cubic-bezier(0.785,0.135,0.15,0.86);
transition-timing-function: cubic-bezier(0.785,0.135,0.15,0.86);
}
.\[--circle-inset-y\:calc\(\(100\%-var\(--icon-circle\)\)\/2\)\] {
--circle-inset-y: calc((100% - var(--icon-circle)) / 2);
}
.\[--icon-circle\:3\.1vw\] {
--icon-circle: 3.1vw;
}
.\[--icon-right\:0\.55vw\] {
--icon-right: 0.55vw;
}
.\[clip-path\:inset\(var\(--circle-inset-y\)_var\(--icon-right\)_var\(--circle-inset-y\)_calc\(100\%-var\(--icon-right\)-var\(--icon-circle\)\)\)\] {
clip-path: inset(var(--circle-inset-y) var(--icon-right) var(--circle-inset-y) calc(100% - var(--icon-right) - var(--icon-circle)));
}
.\[text-rendering\:geometricPrecision\] {
text-rendering: geometricPrecision;
}
@media (hover: hover) {
.group-hover\:inset-0:is(:where(.group):hover *) {
inset: 0px;
}
.group-hover\:-translate-x-1\/2:is(:where(.group):hover *) {
--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.group-hover\:translate-x-\[70\%\]:is(:where(.group):hover *) {
--tw-translate-x: 70%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.group-hover\:-translate-y-1\/2:is(:where(.group):hover *) {
--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.group-hover\:scale-0:is(:where(.group):hover *) {
--tw-scale-x: 0%;
--tw-scale-y: 0%;
--tw-scale-z: 0%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.group-hover\:scale-100:is(:where(.group):hover *) {
--tw-scale-x: 100%;
--tw-scale-y: 100%;
--tw-scale-z: 100%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.group-hover\:bg-\(--btn-fill-bg-hover\):is(:where(.group):hover *) {
background-color: var(--btn-fill-bg-hover);
}
.group-hover\:text-\(--btn-arrow-hover\):is(:where(.group):hover *) {
color: var(--btn-arrow-hover);
}
.group-hover\:text-\(--btn-fill-text-hover\):is(:where(.group):hover *) {
color: var(--btn-fill-text-hover);
}
.group-hover\:\[clip-path\:inset\(0_0_0_0\)\]:is(:where(.group):hover *) {
clip-path: inset(0 0 0 0);
}
}
.group-data-\[pressed\=true\]\:inset-0:is(:where(.group)[data-pressed="true"] *) {
inset: 0px;
}
.group-data-\[pressed\=true\]\:-translate-x-1\/2:is(:where(.group)[data-pressed="true"] *) {
--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.group-data-\[pressed\=true\]\:translate-x-\[70\%\]:is(:where(.group)[data-pressed="true"] *) {
--tw-translate-x: 70%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.group-data-\[pressed\=true\]\:-translate-y-1\/2:is(:where(.group)[data-pressed="true"] *) {
--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.group-data-\[pressed\=true\]\:scale-0:is(:where(.group)[data-pressed="true"] *) {
--tw-scale-x: 0%;
--tw-scale-y: 0%;
--tw-scale-z: 0%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.group-data-\[pressed\=true\]\:scale-100:is(:where(.group)[data-pressed="true"] *) {
--tw-scale-x: 100%;
--tw-scale-y: 100%;
--tw-scale-z: 100%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.group-data-\[pressed\=true\]\:bg-\(--btn-fill-bg-hover\):is(:where(.group)[data-pressed="true"] *) {
background-color: var(--btn-fill-bg-hover);
}
.group-data-\[pressed\=true\]\:text-\(--btn-arrow-hover\):is(:where(.group)[data-pressed="true"] *) {
color: var(--btn-arrow-hover);
}
.group-data-\[pressed\=true\]\:text-\(--btn-fill-text-hover\):is(:where(.group)[data-pressed="true"] *) {
color: var(--btn-fill-text-hover);
}
.group-data-\[pressed\=true\]\:\[clip-path\:inset\(0_0_0_0\)\]:is(:where(.group)[data-pressed="true"] *) {
clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
.motion-reduce\:transition-none {
transition-property: none;
}
}
@media (width < 64rem) {
.max-lg\:size-\[4vw\] {
width: 4vw;
height: 4vw;
}
.max-lg\:h-\[11vw\] {
height: 11vw;
}
.max-lg\:px-\[5vw\] {
padding-inline: 5vw;
}
.max-lg\:pr-\[calc\(var\(--icon-circle\)\+var\(--icon-right\)\+4vw\)\] {
padding-right: calc(var(--icon-circle) + var(--icon-right) + 4vw);
}
.max-lg\:text-\[3vw\] {
font-size: 3vw;
}
.max-lg\:font-normal {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
}
.max-lg\:\[--icon-circle\:8vw\] {
--icon-circle: 8vw;
}
.max-lg\:\[--icon-right\:1\.5vw\] {
--icon-right: 1.5vw;
}
}
@media (width < 48rem) {
.max-md\:size-\[5vw\] {
width: 5vw;
height: 5vw;
}
.max-md\:h-\[15vw\] {
height: 15vw;
}
.max-md\:px-\[7vw\] {
padding-inline: 7vw;
}
.max-md\:pr-\[calc\(var\(--icon-circle\)\+var\(--icon-right\)\+5vw\)\] {
padding-right: calc(var(--icon-circle) + var(--icon-right) + 5vw);
}
.max-md\:text-\[4\.2vw\] {
font-size: 4.2vw;
}
.max-md\:\[--icon-circle\:11vw\] {
--icon-circle: 11vw;
}
.max-md\:\[--icon-right\:2vw\] {
--icon-right: 2vw;
}
}
}
:root {
--background: #fff;
--foreground: #111;
--primary: #171717;
--primary-foreground: #fff;
--secondary: #eee;
--secondary-foreground: #171717;
--muted: #eee;
--muted-foreground: #666;
--accent: #eee;
--accent-foreground: #171717;
--border: #ddd;
--input: #ddd;
--ring: #777;
--destructive: #dc2626;
--destructive-foreground: #fff;
--popover: #fff;
--popover-foreground: #111;
--success: #15803d;
--success-foreground: #fff;
--radius: .625rem;
--hairline: 1px;
}
.dark {
--background: #090909;
--foreground: #fafafa;
--primary: #fafafa;
--primary-foreground: #171717;
--secondary: #262626;
--secondary-foreground: #fafafa;
--muted: #262626;
--muted-foreground: #a3a3a3;
--accent: #262626;
--accent-foreground: #fafafa;
--border: #333;
--input: #333;
--popover: #171717;
--popover-foreground: #fafafa;
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-leading {
syntax: "*";
inherits: false;
}
@property --tw-font-weight {
syntax: "*";
inherits: false;
}
@property --tw-duration {
syntax: "*";
inherits: false;
}
@property --tw-ease {
syntax: "*";
inherits: false;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
--tw-leading: initial;
--tw-font-weight: initial;
--tw-duration: initial;
--tw-ease: initial;
}
}
}