> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velt.dev/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;
```

<RequestExample>
  ```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;
  ```
</RequestExample>