> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Global Styles

To edit the styling for all Velt components, you can use the following global CSS variables. This is recommended over editing the CSS for each tool individually.

```scss theme={null}
// default state
--velt-tool-padding: 6px;
--velt-tool-icon-size: 1.5rem;
--velt-tool-icon-color: var(--velt-neutral-4);
--velt-tool-border-radius: 50px;
--velt-tool-border-color: transparent;
--velt-tool-border: 2px solid var(--velt-tool-border-color);
--velt-tool-bg-color: transparent;

// default focus state
--velt-tool-focus-icon-size: var(--velt-tool-icon-size);
--velt-tool-focus-icon-color: var(--velt-tool-icon-color);
--velt-tool-focus-border-radius: var(--velt-tool-border-radius);
--velt-tool-focus-border-color: var(--velt-neutral-7);
--velt-tool-focus-border: 2px solid var(--velt-tool-focus-border-color);
--velt-tool-focus-bg-color: var(--velt-tool-bg-color);

// default hover state
--velt-tool-hover-icon-size: var(--velt-tool-icon-size);
--velt-tool-hover-icon-color: var(--velt-neutral-3);
--velt-tool-hover-border-radius: var(--velt-tool-border-radius);
--velt-tool-hover-border-color: var(--velt-neutral-7);
--velt-tool-hover-border: 2px solid var(--velt-tool-hover-border-color);
--velt-tool-hover-bg-color: var(--velt-neutral-7);

// active state
--velt-tool-active-icon-size: var(--velt-tool-icon-size);
--velt-tool-active-icon-color: var(--velt-neutral-9);
--velt-tool-active-border-radius: var(--velt-tool-border-radius);
--velt-tool-active-border-color: var(--velt-purple);
--velt-tool-active-border: 2px solid var(--velt-tool-active-border-color);
--velt-tool-active-bg-color: var(--velt-purple);

// active focus state
--velt-tool-active-focus-icon-size: var(--velt-tool-icon-size);
--velt-tool-active-focus-icon-color: var(--velt-tool-icon-color);
--velt-tool-active-focus-border-radius: var(--velt-tool-border-radius);
--velt-tool-active-focus-border-color: rgba(255, 255, 255, 0.24);
--velt-tool-active-focus-border: 2px solid
    var(--velt-tool-active-focus-border-color);
--velt-tool-active-focus-bg-color: var(--velt-purple);

// active hover state
--velt-tool-active-hover-icon-size: var(--velt-tool-icon-size);
--velt-tool-active-hover-icon-color: var(--velt-tool-icon-color);
--velt-tool-active-hover-border-radius: var(--velt-tool-border-radius);
--velt-tool-active-hover-border-color: #433fa7;
--velt-tool-active-hover-border: 2px solid
    var(--velt-tool-active-hover-border-color);
--velt-tool-active-hover-bg-color: #433fa7;
```

```scss Styles.css theme={null}
// default state
--velt-tool-padding: 6px;
--velt-tool-icon-size: 1.5rem;
--velt-tool-icon-color: var(--velt-neutral-4);
--velt-tool-border-radius: 50px;
--velt-tool-border-color: transparent;
--velt-tool-border: 2px solid var(--velt-tool-border-color);
--velt-tool-bg-color: transparent;

// default focus state
--velt-tool-focus-icon-size: var(--velt-tool-icon-size);
--velt-tool-focus-icon-color: var(--velt-tool-icon-color);
--velt-tool-focus-border-radius: var(--velt-tool-border-radius);
--velt-tool-focus-border-color: var(--velt-neutral-7);
--velt-tool-focus-border: 2px solid var(--velt-tool-focus-border-color);
--velt-tool-focus-bg-color: var(--velt-tool-bg-color);

// default hover state
--velt-tool-hover-icon-size: var(--velt-tool-icon-size);
--velt-tool-hover-icon-color: var(--velt-neutral-3);
--velt-tool-hover-border-radius: var(--velt-tool-border-radius);
--velt-tool-hover-border-color: var(--velt-neutral-7);
--velt-tool-hover-border: 2px solid var(--velt-tool-hover-border-color);
--velt-tool-hover-bg-color: var(--velt-neutral-7);

// active state
--velt-tool-active-icon-size: var(--velt-tool-icon-size);
--velt-tool-active-icon-color: var(--velt-neutral-9);
--velt-tool-active-border-radius: var(--velt-tool-border-radius);
--velt-tool-active-border-color: var(--velt-purple);
--velt-tool-active-border: 2px solid var(--velt-tool-active-border-color);
--velt-tool-active-bg-color: var(--velt-purple);

// active focus state
--velt-tool-active-focus-icon-size: var(--velt-tool-icon-size);
--velt-tool-active-focus-icon-color: var(--velt-tool-icon-color);
--velt-tool-active-focus-border-radius: var(--velt-tool-border-radius);
--velt-tool-active-focus-border-color: rgba(255, 255, 255, 0.24);
--velt-tool-active-focus-border: 2px solid
    var(--velt-tool-active-focus-border-color);
--velt-tool-active-focus-bg-color: var(--velt-purple);

// active hover state
--velt-tool-active-hover-icon-size: var(--velt-tool-icon-size);
--velt-tool-active-hover-icon-color: var(--velt-tool-icon-color);
--velt-tool-active-hover-border-radius: var(--velt-tool-border-radius);
--velt-tool-active-hover-border-color: #433fa7;
--velt-tool-active-hover-border: 2px solid
    var(--velt-tool-active-hover-border-color);
--velt-tool-active-hover-bg-color: #433fa7;
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.