> For the complete documentation index, see [llms.txt](https://docs.frends.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.frends.com/api-portal/general/customizing-your-api-portal/custom-css.md).

# Custom CSS

Instructions and specific values to use or override.

Frends API Portal utilises shadowroot in its UI, requiring some small changes in how to override the styling with Custom CSS injection.

This article contains the instructions on how to target specific fields, as well as some of the variables and values that can be overridden. For your specific use-case, refer to the browser's developer tools to inspect the field you want to modify.

## How to write your CSS <a href="#how-to-write-your-css" id="how-to-write-your-css"></a>

Each component exposes a set of CSS custom properties. Set them on the component you want to change:

```css
frends-button {
  --frends-button--background-color: #0b7285;
  --frends-button--border-radius: 4px;
}
```

To change every component at once, set the theme colors instead:

```css
body {
  --frends-accent-color: #0b7285;
}
```

To change only some instances, add an attribute to the selector:

```css
frends-text[tag="h1"]        { --frends-text--color: #0b7285; }
frends-button[type="submit"] { --frends-button--background-color: #0b7285; }
```

## If a change has no effect <a href="#if-a-change-has-no-effect" id="if-a-change-has-no-effect"></a>

The portal already sets some of these properties itself, and those values win over a rule on `body`. Two things to try, in order:

1. Move the rule onto the component itself — `frends-button { … }` rather than `body { … }`.
2. Add `!important`:

```css
frends-button { --frends-button--background-color: #0b7285 !important; }
```

The components keep their internal markup private, so ordinary CSS rules, such as `frends-button button { … }`, may not reach inside them. Content you can see inside a component, such as an icon or a logo, can be styled directly:&#x20;

```css
frends-button svg { 
    fill: #0b7285;
}
```

## Theme colors <a href="#theme-colors" id="theme-colors"></a>

Seven colors the whole portal is built from. Changing one updates every component that uses it. For the main background, button and accent colors, prefer the color settings on the same Look and Feel page — these properties cover everything else.

<table data-search="false"><thead><tr><th>Property</th><th>Default</th><th>What it affects</th></tr></thead><tbody><tr><td><code>--frends-primary-color</code></td><td><code>#58696C</code></td><td>Main neutral color — borders, icons and muted text.</td></tr><tr><td><code>--frends-secondary-color</code></td><td><code>#6C6C6C</code></td><td>Secondary neutral color — disabled states and subtle surfaces.</td></tr><tr><td><code>--frends-accent-color</code></td><td><code>#6717FF</code></td><td>Accent color — selected items and focus outlines.</td></tr><tr><td><code>--frends-text-color-primary</code></td><td><code>#000000</code></td><td>Default text color.</td></tr><tr><td><code>--frends-text-color-inverse</code></td><td><code>#FFFFFF</code></td><td>Text color on dark or filled backgrounds.</td></tr><tr><td><code>--frends-success-color</code></td><td><code>#00DE80</code></td><td>Success color.</td></tr><tr><td><code>--frends-warning-color</code></td><td><code>#B20909</code></td><td>Error and warning color.</td></tr></tbody></table>

Each color also has lighter shades, used for hover states, backgrounds and borders. They are derived from the base color automatically, so you only need to set them if you want an exact value:

<table data-search="false"><thead><tr><th>Property</th><th>Approximate default</th></tr></thead><tbody><tr><td><code>--frends-primary-color-2</code></td><td><code>#B3CBCB</code></td></tr><tr><td><code>--frends-primary-color-3</code></td><td><code>#D2E5E4</code></td></tr><tr><td><code>--frends-primary-color-4</code></td><td><code>#EDF5F4</code></td></tr><tr><td><code>--frends-primary-color-5</code></td><td><code>#F6FAF9</code></td></tr><tr><td><code>--frends-secondary-color-2</code></td><td><code>#CBCBCB</code></td></tr><tr><td><code>--frends-secondary-color-3</code></td><td><code>#E5E5E5</code></td></tr><tr><td><code>--frends-secondary-color-4</code></td><td><code>#F5F5F5</code></td></tr><tr><td><code>--frends-secondary-color-5</code></td><td><code>#FAFAFA</code></td></tr><tr><td><code>--frends-accent-color-2</code></td><td><code>#AA8DFA</code></td></tr><tr><td><code>--frends-accent-color-3</code></td><td><code>#D9CCFD</code></td></tr><tr><td><code>--frends-accent-color-4</code></td><td><code>#F5F2FE</code></td></tr><tr><td><code>--frends-success-color-2</code></td><td><code>#049372</code></td></tr><tr><td><code>--frends-warning-color-2</code></td><td><code>#AD1C3B</code></td></tr></tbody></table>

In the tables below, a default marked *(approx.)* is one of these derived shades — the exact value follows from the base color.

## Elements

### Button <a href="#button" id="button"></a>

Selector: `frends-button`

<table data-search="false"><thead><tr><th>Property</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>--frends-button--font-size</code></td><td><code>1.125rem</code></td><td>The font size of the button.</td></tr><tr><td><code>--frends-button--line-height</code></td><td><code>1.3125rem</code></td><td>The line height of the button.</td></tr><tr><td><code>--frends-button--color</code></td><td><code>#000000</code></td><td>The text color of the button.</td></tr><tr><td><code>--frends-button--background-color</code></td><td><code>#D2E5E4</code> <em>(approx.)</em></td><td>The background color of the button.</td></tr><tr><td><code>--frends-button--height</code></td><td><code>2.5rem</code></td><td>The height of the button.</td></tr><tr><td><code>--frends-button--width</code></td><td><code>fit-content</code></td><td>The width of the button.</td></tr><tr><td><code>--frends-button--gap</code></td><td><code>0.625rem</code></td><td>The gap between elements inside the button.</td></tr><tr><td><code>--frends-button--margin</code></td><td><code>0</code></td><td>The margin around the button.</td></tr><tr><td><code>--frends-button--padding</code></td><td><code>0 1.5625rem 0 1.5625rem</code></td><td>The padding inside the button.</td></tr><tr><td><code>--frends-button--border</code></td><td><code>0</code></td><td>The border of the button.</td></tr><tr><td><code>--frends-button--border-radius</code></td><td><code>0.9375rem</code></td><td>The border radius of the button.</td></tr><tr><td><code>--frends-button--outline</code></td><td><code>0</code></td><td>The outline of the button.</td></tr><tr><td><code>--frends-button--outline-offset</code></td><td><code>0</code></td><td>The outline offset of the button.</td></tr><tr><td><code>--frends-button--svg--fill</code></td><td><code>#000000</code></td><td>The fill of icons inside the button.</td></tr><tr><td><code>--frends-button--svg--stroke</code></td><td><code>transparent</code></td><td>The stroke of icons inside the button.</td></tr><tr><td><code>--frends-button--hover--background-color</code></td><td><code>#B3CBCB</code> <em>(approx.)</em></td><td>The background color of the button on hover/focus.</td></tr><tr><td><code>--frends-button--hover--svg--fill</code></td><td><code>#000000</code></td><td>The fill of icons inside the button when the button is hovered.</td></tr><tr><td><code>--frends-button--hover--svg--stroke</code></td><td><code>transparent</code></td><td>The stroke of icons inside the button when the button is hovered.</td></tr><tr><td><code>--frends-button--active--border-radius</code></td><td><code>1.5625rem</code></td><td>The border radius of the button when active.</td></tr><tr><td><code>--frends-button--bordered--color</code></td><td><code>#000000</code></td><td>The text color of the bordered button.</td></tr><tr><td><code>--frends-button--bordered--background-color</code></td><td><code>#FFFFFF</code></td><td>The background color of the bordered button.</td></tr><tr><td><code>--frends-button--bordered--outline</code></td><td><code>0.125rem solid #D2E5E4</code> <em>(approx.)</em></td><td>The outline of the bordered button.</td></tr><tr><td><code>--frends-button--bordered--outline-offset</code></td><td><code>-0.125rem</code></td><td>The outline offset of the bordered button.</td></tr><tr><td><code>--frends-button--bordered--hover--background-color</code></td><td><code>#D2E5E4</code> <em>(approx.)</em></td><td>The background color of the bordered button on hover/focus.</td></tr><tr><td><code>--frends-button--disabled--color</code></td><td><code>#CBCBCB</code> <em>(approx.)</em></td><td>The text color of the disabled button.</td></tr><tr><td><code>--frends-button--disabled--background-color</code></td><td><code>#EDF5F4</code> <em>(approx.)</em></td><td>The background color of the disabled button.</td></tr><tr><td><code>--frends-button--disabled--outline</code></td><td><code>none</code></td><td>The outline of the disabled button.</td></tr><tr><td><code>--frends-button--disabled--svg--fill</code></td><td><code>#B3CBCB</code> <em>(approx.)</em></td><td>The fill of icons inside the button when the button is disabled.</td></tr><tr><td><code>--frends-button--disabled--svg--stroke</code></td><td><code>transparent</code></td><td>The stroke of icons inside the button when the button is disabled.</td></tr></tbody></table>

### Checkbox <a href="#checkbox" id="checkbox"></a>

Selector: `frends-checkbox`

<table data-search="false"><thead><tr><th>Property</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>--frends-checkbox--width</code></td><td><code>fit-content</code></td><td>The width of the container.</td></tr><tr><td><code>--frends-checkbox--height</code></td><td><code>auto</code></td><td>The height of the container.</td></tr><tr><td><code>--frends-checkbox--margin</code></td><td><code>0</code></td><td>The margin around the container.</td></tr><tr><td><code>--frends-checkbox--padding</code></td><td><code>0</code></td><td>The padding inside the container.</td></tr><tr><td><code>--frends-checkbox--display</code></td><td><code>flex</code></td><td>The display property of the container.</td></tr><tr><td><code>--frends-checkbox--align-items</code></td><td><code>center</code></td><td>The align-items property of the container.</td></tr><tr><td><code>--frends-checkbox--grid-template-columns</code></td><td><code>none</code></td><td>The grid-template-columns property of the container.</td></tr><tr><td><code>--frends-checkbox--gap</code></td><td><code>0.938rem</code></td><td>The gap between checkbox and label text.</td></tr><tr><td><code>--frends-checkbox--input--width</code></td><td><code>1.35rem</code></td><td>The width of the checkbox input.</td></tr><tr><td><code>--frends-checkbox--input--height</code></td><td><code>1.35rem</code></td><td>The height of the checkbox input.</td></tr><tr><td><code>--frends-checkbox--input--before--width</code></td><td><code>1rem</code></td><td>The width of the checkbox box.</td></tr><tr><td><code>--frends-checkbox--input--before--height</code></td><td><code>1rem</code></td><td>The height of the checkbox box.</td></tr><tr><td><code>--frends-checkbox--input--before--background-color</code></td><td><code>#FFFFFF</code></td><td>The background color of the checkbox box.</td></tr><tr><td><code>--frends-checkbox--input--before--border</code></td><td><code>0.188rem solid #CBCBCB</code> <em>(approx.)</em></td><td>The border of the checkbox box.</td></tr><tr><td><code>--frends-checkbox--input--before--border-radius</code></td><td><code>0.25rem</code></td><td>The border radius of the checkbox box.</td></tr><tr><td><code>--frends-checkbox--input--after--width</code></td><td><code>1.35rem</code></td><td>The width of the check mark.</td></tr><tr><td><code>--frends-checkbox--input--after--height</code></td><td><code>1.35rem</code></td><td>The height of the check mark.</td></tr><tr><td><code>--frends-checkbox--input--after--background-color</code></td><td><code>#58696C</code></td><td>The background color of the check mark.</td></tr><tr><td><code>--frends-checkbox--invalid--input--before--border-color</code></td><td><code>#B20909</code></td><td>The border color of the checkbox when in an invalid state.</td></tr><tr><td><code>--frends-checkbox--focus--input--outline</code></td><td><code>0.125rem solid #000000</code></td><td>The outline of the checkbox when focused.</td></tr><tr><td><code>--frends-checkbox--focus--input--outline-offset</code></td><td><code>0.125rem</code></td><td>The outline offset of the checkbox when focused.</td></tr><tr><td><code>--frends-checkbox--disabled--input--before--background-color</code></td><td><code>#F5F5F5</code> <em>(approx.)</em></td><td>The background color of the checkbox box when disabled.</td></tr><tr><td><code>--frends-checkbox--disabled--input--after--background-color</code></td><td><code>#CBCBCB</code> <em>(approx.)</em></td><td>The background color of the check mark when disabled.</td></tr><tr><td><code>--frends-checkbox--input-radio--before--border-radius</code></td><td><code>50%</code></td><td>The border radius of the radio button circle.</td></tr><tr><td><code>--frends-checkbox--input-radio--before--clippath</code></td><td><code>circle(50%)</code></td><td>Shape of the dot inside a selected radio button.</td></tr><tr><td><code>--frends-checkbox--input-radio--checked--after--top</code></td><td><code>calc(50% - 0.313rem)</code></td><td>Vertical position of the dot inside a selected radio button.</td></tr><tr><td><code>--frends-checkbox--input-radio--checked--after--left</code></td><td><code>calc(50% - 0.313rem)</code></td><td>Horizontal position of the dot inside a selected radio button.</td></tr><tr><td><code>--frends-checkbox--input-radio--checked--after--width</code></td><td><code>0.625rem</code></td><td>Width of the dot inside a selected radio button.</td></tr><tr><td><code>--frends-checkbox--input-radio--checked--after--height</code></td><td><code>0.625rem</code></td><td>Height of the dot inside a selected radio button.</td></tr><tr><td><code>--frends-checkbox--label--font-family</code></td><td><code>'Gilroy'</code></td><td>Font family for label.</td></tr><tr><td><code>--frends-checkbox--label--font-size</code></td><td><code>1rem</code></td><td>The font size of the label text.</td></tr><tr><td><code>--frends-checkbox--label--line-height</code></td><td><code>1.188rem</code></td><td>The line height of the label text.</td></tr><tr><td><code>--frends-checkbox--label--color</code></td><td><code>#000000</code></td><td>The text color of the label text.</td></tr><tr><td><code>--frends-checkbox--error-text--font-family</code></td><td><code>'Gilroy-Medium'</code></td><td>Font family for error.</td></tr><tr><td><code>--frends-checkbox--error-text--gap</code></td><td><code>0.25rem</code></td><td>The gap above the error text.</td></tr><tr><td><code>--frends-checkbox--error-text--font-size</code></td><td><code>0.75rem</code></td><td>The font size of the error text.</td></tr><tr><td><code>--frends-checkbox--error-text--color</code></td><td><code>#B20909</code></td><td>The color of the error text.</td></tr></tbody></table>

### Color picker

Selector: `frends-color-picker`

<table data-search="false"><thead><tr><th>Property</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>--frends-color-picker--width</code></td><td><code>fit-content</code></td><td>Width of the container.</td></tr><tr><td><code>--frends-color-picker--height</code></td><td><code>auto</code></td><td>Height of the container.</td></tr><tr><td><code>--frends-color-picker--margin</code></td><td><code>0</code></td><td>Outer margin of the container.</td></tr><tr><td><code>--frends-color-picker--padding</code></td><td><code>0</code></td><td>Inner padding of the container.</td></tr><tr><td><code>--frends-color-picker--label--font-family</code></td><td><code>'Gilroy-Medium'</code></td><td>Font family for label.</td></tr><tr><td><code>--frends-color-picker--label--font-size</code></td><td><code>1.125rem</code></td><td>Font size of the label.</td></tr><tr><td><code>--frends-color-picker--label--line-height</code></td><td><code>1.188rem</code></td><td>Line height of the label.</td></tr><tr><td><code>--frends-color-picker--label--color</code></td><td><code>#000000</code></td><td>Color of the label.</td></tr><tr><td><code>--frends-color-picker--input--width</code></td><td><code>4.938rem</code></td><td>Width of the input.</td></tr><tr><td><code>--frends-color-picker--input--height</code></td><td><code>2.5rem</code></td><td>Height of the input.</td></tr><tr><td><code>--frends-color-picker--input--padding</code></td><td><code>0.40rem 1.188rem 0 0</code></td><td>Padding of the input.</td></tr><tr><td><code>--frends-color-picker--input--margin</code></td><td><code>0</code></td><td>Margin of the input.</td></tr><tr><td><code>--frends-color-picker--color-watch--border-radius</code></td><td><code>1.25rem</code></td><td>Border radius of the color watch.</td></tr><tr><td><code>--frends-color-picker--color-watch--border</code></td><td><code>0.125rem solid #CBCBCB</code> <em>(approx.)</em></td><td>Border of the color watch.</td></tr><tr><td><code>--frends-color-picker--focus--color-watch--box-shadow</code></td><td><code>0 0 0.25rem 0 #B3CBCB</code> <em>(approx.)</em></td><td>Box shadow of the focused color watch.</td></tr><tr><td><code>--frends-color-picker--value-text--font-size</code></td><td><code>1.125rem</code></td><td>Font size of the value text.</td></tr><tr><td><code>--frends-color-picker--value-text--line-height</code></td><td><code>1.313rem</code></td><td>Line height of the value text.</td></tr><tr><td><code>--frends-color-picker--value-text--color</code></td><td><code>#000000</code></td><td>Color of the value text.</td></tr></tbody></table>

### Dropdown <a href="#dropdown" id="dropdown"></a>

Selector: `frends-dropdown`

A few properties for category headings and the option list carry a `dropdown-menu` prefix. Use the names exactly as listed below.

<table data-search="false"><thead><tr><th>Property</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>--frends-dropdown--width</code></td><td><code>100%</code></td><td>The width of the dropdown container.</td></tr><tr><td><code>--frends-dropdown--height</code></td><td><code>auto</code></td><td>The height of the dropdown container.</td></tr><tr><td><code>--frends-dropdown--margin</code></td><td><code>0</code></td><td>The margin around the dropdown container.</td></tr><tr><td><code>--frends-dropdown--padding</code></td><td><code>0</code></td><td>The padding inside the dropdown container.</td></tr><tr><td><code>--frends-dropdown--gap</code></td><td><code>0.40rem</code></td><td>The gap inside the dropdown container.</td></tr><tr><td><code>--frends-dropdown--label--font-family</code></td><td><code>'Gilroy-Medium'</code></td><td>Font family for label.</td></tr><tr><td><code>--frends-dropdown--label--font-size</code></td><td><code>1.125rem</code></td><td>The font size of the dropdown label.</td></tr><tr><td><code>--frends-dropdown--label--line-height</code></td><td><code>1.188rem</code></td><td>The line height of the dropdown label.</td></tr><tr><td><code>--frends-dropdown--label--color</code></td><td><code>#000000</code></td><td>The text color of the dropdown label.</td></tr><tr><td><code>--frends-dropdown--toggle--position</code></td><td><em>not set</em></td><td>The position of the dropdown toggle button; no.</td></tr><tr><td><code>--frends-dropdown--toggle--right</code></td><td><em>not set</em></td><td>The right coordinate of the dropdown toggle button; no.</td></tr><tr><td><code>--frends-dropdown--toggle--width</code></td><td><em>not set</em></td><td>The width of the dropdown toggle; no.</td></tr><tr><td><code>--frends-dropdown--toggle--font-size</code></td><td><code>1rem</code></td><td>The font size of the dropdown toggle button.</td></tr><tr><td><code>--frends-dropdown--toggle--line-height</code></td><td><code>1.1875rem</code></td><td>The line height of the dropdown toggle button.</td></tr><tr><td><code>--frends-dropdown--toggle--gap</code></td><td><code>0.625rem</code></td><td>The gap between elements inside the toggle.</td></tr><tr><td><code>--frends-dropdown--toggle--margin</code></td><td><code>0</code></td><td>The margin of the dropdown toggle.</td></tr><tr><td><code>--frends-dropdown--toggle--padding</code></td><td><code>0.375rem 0.625rem 0.375rem 1rem</code></td><td>The padding of the dropdown toggle.</td></tr><tr><td><code>--frends-dropdown--toggle--background-color</code></td><td><code>#FFFFFF</code></td><td>The background color of the dropdown toggle.</td></tr><tr><td><code>--frends-dropdown--toggle--border</code></td><td><code>2px solid #CBCBCB</code> <em>(approx.)</em></td><td>The border of the dropdown toggle.</td></tr><tr><td><code>--frends-dropdown--toggle--border-radius</code></td><td><code>1.25rem</code></td><td>The border radius of the dropdown toggle.</td></tr><tr><td><code>--frends-dropdown--toggle--outline</code></td><td><code>0</code></td><td>The outline of the dropdown toggle.</td></tr><tr><td><code>--frends-dropdown--multi-value-container--gap</code></td><td><code>0.313rem</code></td><td>The gap between multiple values within the dropdown.</td></tr><tr><td><code>--frends-dropdown--multi-value--padding</code></td><td><code>0.188rem 0.625rem 0.188rem 1rem</code></td><td>The padding for each multi-value chip within the dropdown.</td></tr><tr><td><code>--frends-dropdown--multi-value--border-radius</code></td><td><code>1.25rem</code></td><td>The border radius for each multi-value chip within the dropdown.</td></tr><tr><td><code>--frends-dropdown--multi-value--color</code></td><td><code>#6717FF</code></td><td>The text color for each multi-value chip.</td></tr><tr><td><code>--frends-dropdown--multi-value--background-color</code></td><td><code>#F5F2FE</code> <em>(approx.)</em></td><td>The background color for each multi-value chip.</td></tr><tr><td><code>--frends-dropdown--multi-value-container--input--focus--width</code></td><td><code>0.313rem</code></td><td>The width of the input field when focused in a multi-value dropdown.</td></tr><tr><td><code>--frends-dropdown--multi-value-container--input--left-margin</code></td><td><code>0.25rem</code></td><td>The left margin of the input field in a multi-value dropdown.</td></tr><tr><td><code>--frends-dropdown--multi-value-container--input--has-value--width</code></td><td><code>max(25%, 200px)</code></td><td>The minimum width of the input field when it has value(s) in a multi-value dropdown.</td></tr><tr><td><code>--frends-dropdown--toggle--svg--min-width</code></td><td><code>1.5rem</code></td><td>The minimum width of the icon in the toggle.</td></tr><tr><td><code>--frends-dropdown--toggle--svg--fill</code></td><td><code>#000000</code></td><td>The fill color of the icon in the toggle.</td></tr><tr><td><code>--frends-dropdown--invalid--border-color</code></td><td><code>#B20909</code></td><td>The border color of the dropdown toggle when invalid.</td></tr><tr><td><code>--frends-dropdown--disabled--border-color</code></td><td><code>#FAFAFA</code> <em>(approx.)</em></td><td>The border color of the dropdown toggle when disabled.</td></tr><tr><td><code>--frends-dropdown--disabled--background-color</code></td><td><code>#FAFAFA</code> <em>(approx.)</em></td><td>The background color of the dropdown toggle when disabled.</td></tr><tr><td><code>--frends-dropdown--toggle--is-multi-value--padding</code></td><td><code>0.188rem 0.625rem 0.188rem 0.313rem</code></td><td>The padding of the dropdown toggle when multi-value chips are present.</td></tr><tr><td><code>--frends-dropdown--list--z-index</code></td><td><code>1000</code></td><td>The z-index of the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--width</code></td><td><code>100%</code></td><td>The width of the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--max-height</code></td><td><code>18.75rem</code></td><td>The max height of the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--margin</code></td><td><code>0</code></td><td>The margin of the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--padding</code></td><td><code>0.5rem 0</code></td><td>The padding inside the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--background-color</code></td><td><code>#FFFFFF</code></td><td>The background color of the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--border</code></td><td><code>0.0625rem solid #B3CBCB</code> <em>(approx.)</em></td><td>The border of the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--border-radius</code></td><td><code>0.375rem</code></td><td>The border radius of the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--box-shadow</code></td><td><code>0rem 0.5rem 0.5rem 0rem rgba(0,0,0,0.1)</code></td><td>The box shadow of the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--outline</code></td><td><code>0</code></td><td>The outline of the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--item--font-size</code></td><td><code>0.875rem</code></td><td>The font size of each item in the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--item--color</code></td><td><code>#000000</code></td><td>The text color of each item in the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--item--padding</code></td><td><code>0.375rem 3rem 0.375rem 1rem</code></td><td>The padding of each item in the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--item--outline</code></td><td><code>0</code></td><td>The outline of each item in the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--item--selected--color</code></td><td><code>#6717FF</code></td><td>The text color of a selected item in the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--item--selected--svg--fill</code></td><td><code>#6717FF</code></td><td>Color of the tick icon on the selected option.</td></tr><tr><td><code>--frends-dropdown--list--item--current--background-color</code></td><td><code>#F5F5F5</code> <em>(approx.)</em></td><td>The background color of a current item in the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--item--no-options--color</code></td><td><code>#B3CBCB</code> <em>(approx.)</em></td><td>Text color of the "no options" message.</td></tr><tr><td><code>--frends-dropdown-menu--list--category--width</code></td><td><code>fit-content</code></td><td>The width of the category container in the dropdown list.</td></tr><tr><td><code>--frends-dropdown-menu--list--category--margin</code></td><td><code>0</code></td><td>The margin of the category container in the dropdown list.</td></tr><tr><td><code>--frends-dropdown-menu--list--category--padding</code></td><td><code>0</code></td><td>The padding of the category container in the dropdown list.</td></tr><tr><td><code>--frends-dropdown-menu--list--category--gap</code></td><td><code>0</code></td><td>The gap in the category container in the dropdown list.</td></tr><tr><td><code>--frends-dropdown-menu--list--category-name--font-size</code></td><td><code>0.75rem</code></td><td>The font size of the category name in the dropdown list.</td></tr><tr><td><code>--frends-dropdown-menu--list--category-name--line-height</code></td><td><code>0.875rem</code></td><td>The line height of the category name in the dropdown list.</td></tr><tr><td><code>--frends-dropdown-menu--list--category-name--letter-spacing</code></td><td><code>0.12rem</code></td><td>The letter spacing of the category name in the dropdown list.</td></tr><tr><td><code>--frends-dropdown-menu--list--category-name--color</code></td><td><code>#58696C</code></td><td>The color of the category name in the dropdown list.</td></tr><tr><td><code>--frends-dropdown--list--category-name--padding</code></td><td><code>0.375rem 3rem 0.375rem 1rem</code></td><td>The padding of the category name in the dropdown list.</td></tr><tr><td><code>--frends-dropdown--toggle--hover--box-shadow</code></td><td><code>0</code></td><td>The box shadow applied to the toggle when hovered.</td></tr><tr><td><code>--frends-dropdown--toggle--focus--box-shadow</code></td><td><code>0 0 0.25rem 0 #B3CBCB</code> <em>(approx.)</em></td><td>The box shadow applied to the toggle when focused.</td></tr><tr><td><code>--frends-dropdown--error-text--font-size</code></td><td><code>0.75rem</code></td><td>The font size of the error text.</td></tr><tr><td><code>--frends-dropdown--error-text--color</code></td><td><code>#B20909</code></td><td>The color of the error text.</td></tr></tbody></table>

### Dropdown button <a href="#dropdown-button" id="dropdown-button"></a>

Selector: `frends-dropdown-button`

<table data-search="false"><thead><tr><th>Property</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>--frends-dropdown-button--font-family</code></td><td><code>'Gilroy-Medium'</code></td><td>Font family of the dropdown button and its menu.</td></tr><tr><td><code>--frends-dropdown-button--toggle--font-size</code></td><td><code>1.125rem</code></td><td>Font size of the toggle button.</td></tr><tr><td><code>--frends-dropdown-button--toggle--line-height</code></td><td><code>1.3125rem</code></td><td>Line height of the toggle button.</td></tr><tr><td><code>--frends-dropdown-button--toggle--color</code></td><td><code>#000000</code></td><td>Text color of the toggle button.</td></tr><tr><td><code>--frends-dropdown-button--toggle--height</code></td><td><code>2.5rem</code></td><td>Height of the toggle button.</td></tr><tr><td><code>--frends-dropdown-button--toggle--width</code></td><td><code>fit-content</code></td><td>Width of the toggle button.</td></tr><tr><td><code>--frends-dropdown-button--toggle--margin</code></td><td><code>0</code></td><td>Margin around the toggle button.</td></tr><tr><td><code>--frends-dropdown-button--toggle--padding</code></td><td><code>0 0.938rem 0 1.5625rem</code></td><td>Padding inside the toggle button.</td></tr><tr><td><code>--frends-dropdown-button--toggle--gap</code></td><td><code>0.625rem</code></td><td>Gap between elements in the toggle button.</td></tr><tr><td><code>--frends-dropdown-button--toggle--background-color</code></td><td><code>#FFFFFF</code></td><td>Background color of the toggle button.</td></tr><tr><td><code>--frends-dropdown-button--toggle--border</code></td><td><code>0</code></td><td>Border of the toggle button.</td></tr><tr><td><code>--frends-dropdown-button--toggle--border-radius</code></td><td><code>0.9375rem</code></td><td>Border radius of the toggle button.</td></tr><tr><td><code>--frends-dropdown-button--toggle--outline</code></td><td><code>0.125rem solid #D2E5E4</code> <em>(approx.)</em></td><td>Outline of the toggle button.</td></tr><tr><td><code>--frends-dropdown-button--toggle--outline-offset</code></td><td><code>-0.125rem</code></td><td>Outline offset of the toggle button.</td></tr><tr><td><code>--frends-dropdown-button--toggle--icon-color</code></td><td><code>#000000</code></td><td>Color of the icon in the toggle button.</td></tr><tr><td><code>--frends-dropdown-button--toggle--hover-background-color</code></td><td><code>#D2E5E4</code> <em>(approx.)</em></td><td>Background color of the toggle button on hover.</td></tr><tr><td><code>--frends-dropdown-button--toggle--active-border-radius</code></td><td><code>1.5625rem</code></td><td>Border radius of the toggle button when active.</td></tr><tr><td><code>--frends-dropdown-button--toggle--disabled-color</code></td><td><code>#B3CBCB</code> <em>(approx.)</em></td><td>Text color of the toggle button when disabled.</td></tr><tr><td><code>--frends-dropdown-button--toggle--disabled-background-color</code></td><td><code>#EDF5F4</code> <em>(approx.)</em></td><td>Background color of the toggle button when disabled.</td></tr><tr><td><code>--frends-dropdown-button--toggle--disabled-outline</code></td><td><code>none</code></td><td>Outline of the toggle button when disabled.</td></tr><tr><td><code>--frends-dropdown-button--toggle--disabled-border-radius</code></td><td><code>0.9375rem</code></td><td>Border radius of the toggle button when disabled.</td></tr><tr><td><code>--frends-dropdown-button--menu--padding</code></td><td><code>0.5rem 0</code></td><td>Padding inside the dropdown menu.</td></tr><tr><td><code>--frends-dropdown-button--menu--background-color</code></td><td><code>#FFFFFF</code></td><td>Background color of the dropdown menu.</td></tr><tr><td><code>--frends-dropdown-button--menu--border</code></td><td><code>0.0625rem solid #B3CBCB</code> <em>(approx.)</em></td><td>Border of the dropdown menu.</td></tr><tr><td><code>--frends-dropdown-button--menu--border-radius</code></td><td><code>0.375rem</code></td><td>Border radius of the dropdown menu.</td></tr><tr><td><code>--frends-dropdown-button--menu--box-shadow</code></td><td><code>0rem 0.5rem 0.5rem 0rem rgba(0,0,0,0.1)</code></td><td>Box shadow of the dropdown menu.</td></tr><tr><td><code>--frends-dropdown-button--menu--outline</code></td><td><code>0</code></td><td>Outline of the dropdown menu.</td></tr><tr><td><code>--frends-dropdown-button--menu--offset</code></td><td><code>0.25rem</code></td><td>Offset of the dropdown menu from the toggle button.</td></tr><tr><td><code>--frends-dropdown-button--menu-item--font-size</code></td><td><code>0.875rem</code></td><td>Font size of the menu items.</td></tr><tr><td><code>--frends-dropdown-button--menu-item--padding</code></td><td><code>0.375rem 3rem 0.375rem 1rem</code></td><td>Padding inside the menu items.</td></tr><tr><td><code>--frends-dropdown-button--menu-item--outline</code></td><td><code>0</code></td><td>Outline of the menu items.</td></tr><tr><td><code>--frends-dropdown-button--menu-item--hover-background-color</code></td><td><code>#F5F5F5</code> <em>(approx.)</em></td><td>Background color of menu items on hover.</td></tr><tr><td><code>--frends-dropdown-button--menu-item--disabled-color</code></td><td><code>#B3CBCB</code> <em>(approx.)</em></td><td>Color of disabled menu items.</td></tr><tr><td><code>--frends-dropdown-button--menu--divider--margin</code></td><td><code>0.313rem 0 0 0</code></td><td>Margin of menu item divider.</td></tr><tr><td><code>--frends-dropdown-button--menu--divider--background-color</code></td><td><code>#EDF5F4</code> <em>(approx.)</em></td><td>Background color of menu divider.</td></tr></tbody></table>

### Dropdown menu <a href="#dropdown-menu" id="dropdown-menu"></a>

Selector: `frends-dropdown-menu`

<table data-search="false"><thead><tr><th>Property</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>--frends-dropdown-menu--min-width</code></td><td><code>fit-content</code></td><td>The min width of the dropdown menu.</td></tr><tr><td><code>--frends-dropdown-menu--width</code></td><td><code>fit-content</code></td><td>The width of the dropdown menu.</td></tr><tr><td><code>--frends-dropdown-menu--height</code></td><td><code>auto</code></td><td>The height of the dropdown menu.</td></tr><tr><td><code>--frends-dropdown-menu--margin</code></td><td><code>0</code></td><td>The margin around the dropdown menu.</td></tr><tr><td><code>--frends-dropdown-menu--padding</code></td><td><code>0</code></td><td>The padding inside the dropdown menu.</td></tr><tr><td><code>--frends-dropdown-menu--toggle--gap</code></td><td><code>1.5rem</code></td><td>The gap between elements in the toggle button.</td></tr><tr><td><code>--frends-dropdown-menu--toggle--margin</code></td><td><code>0</code></td><td>The margin around the toggle button.</td></tr><tr><td><code>--frends-dropdown-menu--toggle--padding</code></td><td><code>0.375rem 0.6875rem 0.3125rem 0.813rem</code></td><td>The padding inside the toggle button.</td></tr><tr><td><code>--frends-dropdown-menu--toggle--background-color</code></td><td><code>transparent</code></td><td>The background color of the toggle button.</td></tr><tr><td><code>--frends-dropdown-menu--toggle--border</code></td><td><code>0</code></td><td>The border of the toggle button.</td></tr><tr><td><code>--frends-dropdown-menu--toggle--border-radius</code></td><td><code>0.375rem</code></td><td>The border radius of the toggle button.</td></tr><tr><td><code>--frends-dropdown-menu--toggle--outline</code></td><td><code>0</code></td><td>The outline of the toggle button.</td></tr><tr><td><code>--frends-dropdown-menu--toggle--svg--min-width</code></td><td><code>1.5rem</code></td><td>The minimum width of the icon in the toggle button.</td></tr><tr><td><code>--frends-dropdown-menu--list--z-index</code></td><td><code>2000</code></td><td>The z-index of the dropdown list.</td></tr><tr><td><code>--frends-dropdown-menu--list--margin</code></td><td><code>0</code></td><td>The margin around the dropdown list.</td></tr><tr><td><code>--frends-dropdown-menu--list--padding</code></td><td><code>0.5rem 0</code></td><td>The padding inside the dropdown list.</td></tr><tr><td><code>--frends-dropdown-menu--list--background-color</code></td><td><code>#FFFFFF</code></td><td>The background color of the dropdown list.</td></tr><tr><td><code>--frends-dropdown-menu--list--border</code></td><td><code>0.0625rem solid #B3CBCB</code> <em>(approx.)</em></td><td>The border of the dropdown list.</td></tr><tr><td><code>--frends-dropdown-menu--list--border-radius</code></td><td><code>0.375rem</code></td><td>The border radius of the dropdown list.</td></tr><tr><td><code>--frends-dropdown-menu--list--box-shadow</code></td><td><code>0rem 0.5rem 0.5rem 0rem rgba(0,0,0,0.1)</code></td><td>The box shadow of the dropdown list.</td></tr><tr><td><code>--frends-dropdown-menu--list--outline</code></td><td><code>0</code></td><td>The outline of the dropdown list.</td></tr><tr><td><code>--frends-dropdown-menu--list--category-title--font-size</code></td><td><code>0.75rem</code></td><td>The font size of category titles.</td></tr><tr><td><code>--frends-dropdown-menu--list--category-title--line-height</code></td><td><code>0.875rem</code></td><td>The line height of category titles.</td></tr><tr><td><code>--frends-dropdown-menu--list--category-title--letter-spacing</code></td><td><code>0.12rem</code></td><td>The letter spacing of category titles.</td></tr><tr><td><code>--frends-dropdown-menu--list--category-title--color</code></td><td><code>#58696C</code></td><td>The color of category titles.</td></tr><tr><td><code>--frends-dropdown-menu--list--item--font-size</code></td><td><code>0.875rem</code></td><td>The font size of list items.</td></tr><tr><td><code>--frends-dropdown-menu--list--item--line-height</code></td><td><code>1rem</code></td><td>The line height of list items.</td></tr><tr><td><code>--frends-dropdown-menu--list--item--padding</code></td><td><code>0.375rem 3rem 0.375rem 1rem</code></td><td>The padding of list items.</td></tr><tr><td><code>--frends-dropdown-menu--list--item--outline</code></td><td><code>0</code></td><td>The outline of list items.</td></tr><tr><td><code>--frends-dropdown-menu--list--item--selected--color</code></td><td><code>#6717FF</code></td><td>The color of selected list items.</td></tr><tr><td><code>--frends-dropdown-menu--list--item--current--background-color</code></td><td><code>#F5F5F5</code> <em>(approx.)</em></td><td>The background color of the current list item.</td></tr><tr><td><code>--frends-dropdown-menu--list--item--divider--margin</code></td><td><code>0.313rem 0 0 0</code></td><td>The margin of the divider.</td></tr><tr><td><code>--frends-dropdown-menu--list--item--divider--background-color</code></td><td><code>#EDF5F4</code> <em>(approx.)</em></td><td>The background color of the divider.</td></tr><tr><td><code>--frends-dropdown-menu--toggle--focus--box-shadow</code></td><td><code>0 0 0.25rem 0 #B3CBCB</code> <em>(approx.)</em></td><td>The box shadow of the toggle button when focused.</td></tr></tbody></table>

### Menu bar

Selector: `frends-menu-bar`

<table data-search="false"><thead><tr><th>Property</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>--frends-menu-bar--margin</code></td><td><code>0</code></td><td>The margin around the navigation bar.</td></tr><tr><td><code>--frends-menu-bar--padding</code></td><td><code>0</code></td><td>The padding inside the navigation bar.</td></tr><tr><td><code>--frends-menu-bar--gap</code></td><td><code>0.5rem</code></td><td>The gap between child elements inside the navigation bar.</td></tr><tr><td><code>--frends-menu-bar--border-bottom</code></td><td><code>1px solid #D2E5E4</code> <em>(approx.)</em></td><td>The bottom border of the navigation bar.</td></tr><tr><td><code>--frends-menu-bar--logo-links-container--margin</code></td><td><code>0</code></td><td>The margin around the logo and links container.</td></tr><tr><td><code>--frends-menu-bar--logo-links-container--margin-right</code></td><td><code>auto</code></td><td>The right margin of the logo and links container.</td></tr><tr><td><code>--frends-menu-bar--logo-links-container--padding</code></td><td><code>0.938rem 0</code></td><td>The padding inside the logo and links container.</td></tr><tr><td><code>--frends-menu-bar--logo-links-container--gap</code></td><td><code>0.5rem</code></td><td>The gap between logo and links in the container.</td></tr><tr><td><code>--frends-menu-bar--logo-links-container--link-list--margin</code></td><td><code>0 0 0 1rem</code></td><td>The margin around the links list in the logo links container.</td></tr><tr><td><code>--frends-menu-bar--logo-links-container--link-list--padding</code></td><td><code>0</code></td><td>The padding inside the links list in the logo links container.</td></tr><tr><td><code>--frends-menu-bar--logo-links-container--link-list--gap</code></td><td><code>0.5rem</code></td><td>The gap between links in the links list.</td></tr><tr><td><code>--frends-menu-bar--menu-container-padding</code></td><td><code>0 0 0 1.5rem</code></td><td>The padding of menu container.</td></tr></tbody></table>

### Menu link <a href="#menu-link" id="menu-link"></a>

Selector: `frends-menu-link`

<table data-search="false"><thead><tr><th>Property</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>--frends-menu-link--icon--color</code></td><td><code>#58696C</code></td><td>Color of the icon.</td></tr><tr><td><code>--frends-menu-link--font-size</code></td><td><code>1rem</code></td><td>Font size of the link.</td></tr><tr><td><code>--frends-menu-link--line-height</code></td><td><code>1.188rem</code></td><td>Line height of the link.</td></tr><tr><td><code>--frends-menu-link--color</code></td><td><code>#000000</code></td><td>Text color of the link.</td></tr><tr><td><code>--frends-menu-link--background-color</code></td><td><code>transparent</code></td><td>Background color of the link.</td></tr><tr><td><code>--frends-menu-link--height</code></td><td><code>2.25rem</code></td><td>Height of the link.</td></tr><tr><td><code>--frends-menu-link--width</code></td><td><code>fit-content</code></td><td>Width of the link.</td></tr><tr><td><code>--frends-menu-link--gap</code></td><td><code>0.5rem</code></td><td>Gap between elements inside the link.</td></tr><tr><td><code>--frends-menu-link--margin</code></td><td><code>0</code></td><td>Margin around the link.</td></tr><tr><td><code>--frends-menu-link--padding</code></td><td><code>0 0.563rem 0 0.563rem</code></td><td>Padding inside the link.</td></tr><tr><td><code>--frends-menu-link--border</code></td><td><code>0</code></td><td>Border of the link.</td></tr><tr><td><code>--frends-menu-link--border-radius</code></td><td><code>0.438rem</code></td><td>Border radius of the link.</td></tr><tr><td><code>--frends-menu-link--outline</code></td><td><code>0</code></td><td>Outline of the link.</td></tr><tr><td><code>--frends-menu-link--outline-offset</code></td><td><code>0</code></td><td>Outline offset of the link.</td></tr><tr><td><code>--frends-menu-link--hover--background-color</code></td><td><code>rgba(88, 105, 108, 0.05)</code></td><td>Background color on hover/focus.</td></tr><tr><td><code>--frends-menu-link--selected--icon--color</code></td><td><code>#000000</code></td><td>Icon color when selected.</td></tr><tr><td><code>--frends-menu-link--selected--color</code></td><td><code>#000000</code></td><td>Text color when selected.</td></tr><tr><td><code>--frends-menu-link--selected--background-color</code></td><td><code>rgba(179, 203, 203, 0.3)</code> <em>(approx.)</em></td><td>Background color when selected.</td></tr><tr><td><code>--frends-menu-link--selected--hover--background-color</code></td><td><code>rgba(179, 203, 203, 0.4)</code> <em>(approx.)</em></td><td>Background color when selected and hovered/focused.</td></tr></tbody></table>

### Modal <a href="#modal" id="modal"></a>

Selector: `frends-modal`

| Property                                     | Default                                                        | Description                                  |
| -------------------------------------------- | -------------------------------------------------------------- | -------------------------------------------- |
| `--frends-modal--padding`                    | `2rem`                                                         | The padding inside the dialog.               |
| `--frends-modal--border`                     | `0`                                                            | The border of the dialog.                    |
| `--frends-modal--border-radius`              | `1.563rem`                                                     | The border radius of the dialog.             |
| `--frends-modal--box-shadow`                 | `0px 0.5rem 1.875rem 0px rgba(210, 229, 228, 0.5)` *(approx.)* | The box shadow of the dialog.                |
| `--frends-modal--backdrop--background-color` | `rgba(88, 105, 108, 0.5)`                                      | The background color of the dialog backdrop. |
| `--frends-modal--close-button--svg--color`   | `#000000`                                                      | Color of the close icon.                     |

### Radio group <a href="#radio-group" id="radio-group"></a>

Selector: `frends-radio-group`

The radio buttons themselves are checkboxes in radio mode, so use the [Checkbox](https://file+.vscode-resource.vscode-cdn.net/c%3A/Users/sairomi/Downloads/CSS-VARIABLES-API-PORTAL.md#checkbox) properties to style them — in particular the `--frends-checkbox--input-radio--*` ones. The group heading uses the [Text](https://file+.vscode-resource.vscode-cdn.net/c%3A/Users/sairomi/Downloads/CSS-VARIABLES-API-PORTAL.md#text) properties.

| Property                        | Default       | Description                                   |
| ------------------------------- | ------------- | --------------------------------------------- |
| `--frends-radio-group--width`   | `fit-content` | The width of the radio group container.       |
| `--frends-radio-group--height`  | `auto`        | The height of the radio group container.      |
| `--frends-radio-group--margin`  | `0`           | The margin around the radio group container.  |
| `--frends-radio-group--padding` | `0`           | The padding inside the radio group container. |

### Table

Selector: `frends-table`

<table data-search="false"><thead><tr><th>Property</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>--frends-table--container--height</code></td><td><code>auto</code></td><td>The height of the container.</td></tr><tr><td><code>--frends-table--container--width</code></td><td><code>auto</code></td><td>The width of the container.</td></tr><tr><td><code>--frends-table--container--margin</code></td><td><code>0</code></td><td>The margin around the container.</td></tr><tr><td><code>--frends-table--container--padding</code></td><td><code>0</code></td><td>The padding inside the container.</td></tr><tr><td><code>--frends-table--container--border</code></td><td><code>0</code></td><td>The border of the container.</td></tr><tr><td><code>--frends-table--container--border-radius</code></td><td><code>0.938rem</code></td><td>The border radius of the container.</td></tr><tr><td><code>--frends-table--container--overflow-x</code></td><td><code>initial</code></td><td>The horizontal overflow behavior of the container.</td></tr><tr><td><code>--frends-table--container--overflow-y</code></td><td><code>initial</code></td><td>The vertical overflow behavior of the container.</td></tr><tr><td><code>--frends-table--border-collapse</code></td><td><code>separate</code></td><td>The border collapse behavior of the table.</td></tr><tr><td><code>--frends-table--border-spacing</code></td><td><code>0</code></td><td>The border spacing of the table.</td></tr><tr><td><code>--frends-table--width</code></td><td><code>100%</code></td><td>The width of the table.</td></tr><tr><td><code>--frends-table--background-color</code></td><td><code>transparent</code></td><td>The background color of the table.</td></tr><tr><td><code>--frends-table--border</code></td><td><code>1px solid #CBCBCB</code> <em>(approx.)</em></td><td>The border of the table.</td></tr><tr><td><code>--frends-table--border-radius</code></td><td><code>0.938rem</code></td><td>The border radius of the table.</td></tr><tr><td><code>--frends-table--overflow-x</code></td><td><code>initial</code></td><td>The horizontal overflow behavior of the table.</td></tr><tr><td><code>--frends-table--overflow-y</code></td><td><code>initial</code></td><td>The vertical overflow behavior of the table.</td></tr><tr><td><code>--frends-table--header--padding</code></td><td><code>1rem 0.688rem</code></td><td>The padding of the header cells.</td></tr><tr><td><code>--frends-table--header--text-align</code></td><td><code>left</code></td><td>The text alignment of the header cells.</td></tr><tr><td><code>--frends-table--header--font-family</code></td><td><code>'Gilroy-Medium', sans-serif</code></td><td>The font family of the header cells.</td></tr><tr><td><code>--frends-table--header--font-size</code></td><td><code>1.125rem</code></td><td>The font size of the header cells.</td></tr><tr><td><code>--frends-table--header--line-height</code></td><td><code>1.313rem</code></td><td>The line height of the header cells.</td></tr><tr><td><code>--frends-table--header--color</code></td><td><code>#000000</code></td><td>The text color of the header cells.</td></tr><tr><td><code>--frends-table--header--background-color</code></td><td><code>#FAFAFA</code> <em>(approx.)</em></td><td>The background color of the header cells.</td></tr><tr><td><code>--frends-table--header--border-bottom</code></td><td><code>1px solid #CBCBCB</code> <em>(approx.)</em></td><td>The bottom border of the header cells.</td></tr><tr><td><code>--frends-table--header--first-child--border-top-left-radius</code></td><td><code>0.938rem</code></td><td>The top-left border radius of the first header cell.</td></tr><tr><td><code>--frends-table--header--last-child--border-top-right-radius</code></td><td><code>0.938rem</code></td><td>The top-right border radius of the last header cell.</td></tr><tr><td><code>--frends-table--body--last-row--border-bottom</code></td><td><code>none</code></td><td>The bottom border of the last row cells.</td></tr><tr><td><code>--frends-table--body--last-row--first-child--border-bottom-left-radius</code></td><td><code>0.938rem</code></td><td>The bottom-left border radius of the first cell in the last row.</td></tr><tr><td><code>--frends-table--body--last-row--last-child--border-bottom-right-radius</code></td><td><code>0.938rem</code></td><td>The bottom-right border radius of the last cell in the last row.</td></tr><tr><td><code>--frends-table--body--padding</code></td><td><code>0.625rem 0.688rem</code></td><td>The padding of the body cells.</td></tr><tr><td><code>--frends-table--body--text-align</code></td><td><code>left</code></td><td>The text alignment of the body cells.</td></tr><tr><td><code>--frends-table--body--font-family</code></td><td><code>'Gilroy', sans-serif</code></td><td>The font family of the body cells.</td></tr><tr><td><code>--frends-table--body--font-size</code></td><td><code>1rem</code></td><td>The font size of the body cells.</td></tr><tr><td><code>--frends-table--body--line-height</code></td><td><code>1.188rem</code></td><td>The line height of the body cells.</td></tr><tr><td><code>--frends-table--body--border-bottom</code></td><td><code>1px solid #CBCBCB</code> <em>(approx.)</em></td><td>The bottom border of the body cells.</td></tr></tbody></table>

### Tag <a href="#tag" id="tag"></a>

Selector: `frends-tag`

<table data-search="false"><thead><tr><th>Property</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>--frends-tag--font-family</code></td><td><code>'Gilroy-Medium'</code></td><td>Font family for label.</td></tr><tr><td><code>--frends-tag--font-size</code></td><td><code>1rem</code></td><td>Font size of the tag.</td></tr><tr><td><code>--frends-tag--line-height</code></td><td><code>1.188rem</code></td><td>Line height of the tag.</td></tr><tr><td><code>--frends-tag--color</code></td><td><code>#6717FF</code></td><td>Text color of the tag.</td></tr><tr><td><code>--frends-tag--background-color</code></td><td><code>#F5F2FE</code> <em>(approx.)</em></td><td>Background color of the tag.</td></tr><tr><td><code>--frends-tag--height</code></td><td><code>auto</code></td><td>Height of the tag.</td></tr><tr><td><code>--frends-tag--width</code></td><td><code>fit-content</code></td><td>Width of the tag.</td></tr><tr><td><code>--frends-tag--gap</code></td><td><code>0.625rem</code></td><td>Gap inside the tag.</td></tr><tr><td><code>--frends-tag--margin</code></td><td><code>0</code></td><td>Margin around the tag.</td></tr><tr><td><code>--frends-tag--padding</code></td><td><code>0.4rem 1rem</code></td><td>Padding inside the tag.</td></tr><tr><td><code>--frends-tag--border</code></td><td><code>0</code></td><td>Border of the tag.</td></tr><tr><td><code>--frends-tag--border-radius</code></td><td><code>1.25rem</code></td><td>Border radius of the tag.</td></tr><tr><td><code>--frends-tag--outline</code></td><td><code>0</code></td><td>Outline of the tag.</td></tr><tr><td><code>--frends-tag--outline-offset</code></td><td><code>0</code></td><td>Outline offset of the tag.</td></tr></tbody></table>

### Text <a href="#text" id="text"></a>

Selector: `frends-text`

<table data-search="false"><thead><tr><th>Property</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>--frends-text--margin</code></td><td><code>0</code></td><td>The margin around the text element.</td></tr><tr><td><code>--frends-text--padding</code></td><td><code>0</code></td><td>The padding inside the text element.</td></tr><tr><td><code>--frends-text--border</code></td><td><code>0</code></td><td>The border of the text element.</td></tr><tr><td><code>--frends-text--outline</code></td><td><code>0</code></td><td>The outline of the text element.</td></tr><tr><td><code>--frends-text--line-height</code></td><td><code>initial</code></td><td>The line height of the text.</td></tr><tr><td><code>--frends-text--letter-spacing</code></td><td><code>initial</code></td><td>The letter spacing of the text.</td></tr><tr><td><code>--frends-text--background-color</code></td><td><code>transparent</code></td><td>The background color of the text element.</td></tr><tr><td><code>--frends-text--font-weight</code></td><td><code>normal</code></td><td>The font weight of the text.</td></tr><tr><td><code>--frends-text--text-align</code></td><td><code>left</code></td><td>The text alignment.</td></tr><tr><td><code>--frends-text--text-transform</code></td><td><code>none</code></td><td>The text transform property.</td></tr><tr><td><code>--frends-text--text-decoration</code></td><td><code>none</code></td><td>The text decoration property.</td></tr><tr><td><code>--frends-text--font-style</code></td><td><code>normal</code></td><td>The font style of the text.</td></tr><tr><td><code>--frends-text--word-spacing</code></td><td><code>normal</code></td><td>The word spacing of the text.</td></tr><tr><td><code>--frends-text--white-space</code></td><td><code>normal</code></td><td>The white space handling of the text.</td></tr><tr><td><code>--frends-text--text-overflow</code></td><td><code>clip</code></td><td>The text overflow handling.</td></tr><tr><td><code>--frends-text--max-width</code></td><td><code>none</code></td><td>The maximum width of the text element.</td></tr><tr><td><code>--frends-text--text-shadow</code></td><td><code>none</code></td><td>The text shadow of the text.</td></tr><tr><td><code>--frends-text--opacity</code></td><td><code>1</code></td><td>The opacity of the text element.</td></tr><tr><td><code>--frends-text--transition</code></td><td><code>none</code></td><td>The transition property for the text element.</td></tr><tr><td><code>--frends-text--font-family</code></td><td>inherited from the page</td><td>The font family of the text.</td></tr><tr><td><code>--frends-text--font-size</code></td><td>inherited from the page</td><td>The font size of the text.</td></tr><tr><td><code>--frends-text--color</code></td><td>inherited from the page</td><td>The color of the text.</td></tr></tbody></table>

### Text input

Selector: `frends-text-input`

<table data-search="false"><thead><tr><th>Property</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>--frends-text-input--container--width</code></td><td><code>auto</code></td><td>Width of the input container.</td></tr><tr><td><code>--frends-text-input--container--height</code></td><td><code>auto</code></td><td>Height of the input container.</td></tr><tr><td><code>--frends-text-input--container--margin</code></td><td><code>0</code></td><td>Margin around the input container.</td></tr><tr><td><code>--frends-text-input--container--padding</code></td><td><code>0</code></td><td>Padding inside the input container.</td></tr><tr><td><code>--frends-text-input--gap</code></td><td><code>0.40rem</code></td><td>Gap between label and the input field, and before error text.</td></tr><tr><td><code>--frends-text-input--label--font-family</code></td><td><code>'Gilroy-Medium'</code></td><td>Font family for label.</td></tr><tr><td><code>--frends-text-input--label--font-size</code></td><td><code>1.125rem</code></td><td>Font size for label.</td></tr><tr><td><code>--frends-text-input--label--line-height</code></td><td><code>1.188rem</code></td><td>Line height for label.</td></tr><tr><td><code>--frends-text-input--label--color</code></td><td><code>#000000</code></td><td>Text color for label.</td></tr><tr><td><code>--frends-text-input--padding</code></td><td><code>0.563rem 0.625rem 0.5rem 1rem</code></td><td>Padding inside the the input field.</td></tr><tr><td><code>--frends-text-input--background-color</code></td><td><code>#FFFFFF</code></td><td>Background color of the input field.</td></tr><tr><td><code>--frends-text-input--border</code></td><td><code>2px solid #CBCBCB</code> <em>(approx.)</em></td><td>Border of the input field.</td></tr><tr><td><code>--frends-text-input--border-radius</code></td><td><code>1.25rem</code></td><td>Border radius of the input field.</td></tr><tr><td><code>--frends-text-input--font-size</code></td><td><code>1rem</code></td><td>Font size for input and textarea.</td></tr><tr><td><code>--frends-text-input--line-height</code></td><td><code>1.188rem</code></td><td>Line height for input and textarea.</td></tr><tr><td><code>--frends-text-input--color</code></td><td><code>#000000</code></td><td>Text color for input and textarea.</td></tr><tr><td><code>--frends-text-input--placeholder--color</code></td><td><code>#58696C</code></td><td>Color of the input field placeholder.</td></tr><tr><td><code>--frends-text-input--disabled--color</code></td><td><code>#6C6C6C</code></td><td>Text color when disabled.</td></tr><tr><td><code>--frends-text-input--focus--box-shadow</code></td><td><code>0 0 0.25rem 0 #B3CBCB</code> <em>(approx.)</em></td><td>Box shadow on focus.</td></tr><tr><td><code>--frends-text-input--invalid--border-color</code></td><td><code>#B20909</code></td><td>Border color when invalid.</td></tr><tr><td><code>--frends-text-input--read-only--border-color</code></td><td><code>transparent</code></td><td>Border color when readonly.</td></tr><tr><td><code>--frends-text-input--disabled--background-color</code></td><td><code>#FAFAFA</code> <em>(approx.)</em></td><td>Background color when disabled.</td></tr><tr><td><code>--frends-text-input--error-text--font-size</code></td><td><code>0.75rem</code></td><td>Font size of error text.</td></tr><tr><td><code>--frends-text-input--error-text--color</code></td><td><code>#B20909</code></td><td>Color of error text.</td></tr><tr><td><code>--frends-text-input--error-text--font-family</code></td><td><code>'Gilroy-Medium'</code></td><td>Font family for error text.</td></tr></tbody></table>

### Toggle <a href="#toggle" id="toggle"></a>

Selector: `frends-toggle`

<table data-search="false"><thead><tr><th>Property</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>--frends-toggle--container--font-family</code></td><td><code>'Gilroy-Medium'</code></td><td>Font family the container.</td></tr><tr><td><code>--frends-toggle--container--display</code></td><td><code>flex</code></td><td>Display property of the container.</td></tr><tr><td><code>--frends-toggle--container--flex-direction</code></td><td><code>row</code></td><td>Flex direction of the container.</td></tr><tr><td><code>--frends-toggle--container--align-items</code></td><td><code>center</code></td><td>Align items property of the container.</td></tr><tr><td><code>--frends-toggle--container--justify-content</code></td><td><code>center</code></td><td>Justify content property of the container.</td></tr><tr><td><code>--frends-toggle--container--width</code></td><td><code>fit-content</code></td><td>The width of the container.</td></tr><tr><td><code>--frends-toggle--container--height</code></td><td><code>auto</code></td><td>The height of the container.</td></tr><tr><td><code>--frends-toggle--container--margin</code></td><td><code>0</code></td><td>The margin around the container.</td></tr><tr><td><code>--frends-toggle--container--padding</code></td><td><code>0</code></td><td>The padding inside the container.</td></tr><tr><td><code>--frends-toggle--container--gap</code></td><td><code>0.875rem</code></td><td>The gap between elements in the container.</td></tr><tr><td><code>--frends-toggle--label--font-family</code></td><td><code>'Gilroy-Medium'</code> (follows <code>--frends-toggle--container--font-family</code>)</td><td>Font family the container.</td></tr><tr><td><code>--frends-toggle--label--font-size</code></td><td><code>1.125rem</code></td><td>Font size of the label.</td></tr><tr><td><code>--frends-toggle--label--line-height</code></td><td><code>1.188rem</code></td><td>Line height of the label.</td></tr><tr><td><code>--frends-toggle--label--color</code></td><td><code>#000000</code></td><td>Color of the label.</td></tr><tr><td><code>--frends-toggle--width</code></td><td><code>3.438rem</code></td><td>The width of the toggle.</td></tr><tr><td><code>--frends-toggle--height</code></td><td><code>1.875rem</code></td><td>The height of the toggle.</td></tr><tr><td><code>--frends-toggle--on-background-color</code></td><td><code>#00DE80</code></td><td>The background color when toggle is on.</td></tr><tr><td><code>--frends-toggle--on--color</code></td><td><code>#00DE80</code></td><td>The color when toggle is on.</td></tr><tr><td><code>--frends-toggle--toggle-button--translateX</code></td><td><code>1.563rem</code></td><td>The X translation of the button when toggled.</td></tr><tr><td><code>--frends-toggle--toggle-button--focus--outline</code></td><td><code>0.125rem solid #000000</code></td><td>The outline of the button when focused.</td></tr><tr><td><code>--frends-toggle--toggle-button--off--background--color</code></td><td><code>#F6FAF9</code> <em>(approx.)</em></td><td>The background color of the button when off.</td></tr><tr><td><code>--frends-toggle--toggle-button--border-radius</code></td><td><code>1.875rem</code></td><td>The border radius of the toggle button.</td></tr><tr><td><code>--frends-toggle--toggle-button--border</code></td><td><code>0.125rem solid #B3CBCB</code> <em>(approx.)</em></td><td>The border of the toggle button.</td></tr><tr><td><code>--frends-toggle--toggle-button--height</code></td><td><code>1.5rem</code></td><td>The height of the toggle button.</td></tr><tr><td><code>--frends-toggle--toggle-button--width</code></td><td><code>1.5rem</code></td><td>The width of the toggle button.</td></tr><tr><td><code>--frends-toggle--toggle-button--margin-left</code></td><td><code>0.125rem</code></td><td>The left margin of the toggle button.</td></tr><tr><td><code>--frends-toggle--toggle-button--margin-bottom</code></td><td><code>0.0635rem</code></td><td>The bottom margin of the toggle button.</td></tr><tr><td><code>--frends-toggle--toggle-button--background-color</code></td><td><code>#FFFFFF</code></td><td>The background color of the toggle button.</td></tr><tr><td><code>--frends-toggle--toggle-button--box-shadow</code></td><td><code>0 0 0.188rem 0 rgba(0, 0, 0, 0.25)</code></td><td>The box shadow of the toggle button.</td></tr><tr><td><code>--frends-toggle--text--font-size</code></td><td><code>0.563rem</code></td><td>The font size of the toggle text.</td></tr><tr><td><code>--frends-toggle--text--margin</code></td><td><code>0.375rem</code></td><td>The margin for the toggle text.</td></tr><tr><td><code>--frends-toggle--text--on--color</code></td><td><code>#FFFFFF</code></td><td>The color of the "on" text.</td></tr><tr><td><code>--frends-toggle--text-off--color</code></td><td><code>#B3CBCB</code> <em>(approx.)</em></td><td>The color of the "off" text.</td></tr></tbody></table>

### Tooltip <a href="#tooltip" id="tooltip"></a>

Selector: `frends-tooltip`

<table data-search="false"><thead><tr><th>Property</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>--frends-tooltip--background-color</code></td><td><code>#58696C</code></td><td>Background color of the tooltip.</td></tr><tr><td><code>--frends-tooltip--toggle-text--font-family</code></td><td><code>'Gilroy-Medium', sans-serif</code></td><td>Font family for the toggle text.</td></tr><tr><td><code>--frends-tooltip--toggle-text--font-size</code></td><td><code>1rem</code></td><td>Font size of the toggle text.</td></tr><tr><td><code>--frends-tooltip--toggle-text--color</code></td><td><code>#000000</code></td><td>Color of the toggle text.</td></tr><tr><td><code>--frends-tooltip--icon-color</code></td><td><code>#58696C</code></td><td>Color of the icon in the toggle button.</td></tr><tr><td><code>--frends-tooltip--max-width</code></td><td><code>48.438rem</code></td><td>Maximum width of the tooltip.</td></tr><tr><td><code>--frends-tooltip--padding</code></td><td><code>0.375rem 0.9375rem 0.375rem 0.9375rem</code></td><td>Padding inside the tooltip.</td></tr><tr><td><code>--frends-tooltip--border</code></td><td><code>0</code></td><td>Border of the tooltip.</td></tr><tr><td><code>--frends-tooltip--border-radius</code></td><td><code>0.938rem</code></td><td>Border radius of the tooltip.</td></tr><tr><td><code>--frends-tooltip--line-height</code></td><td><code>1.188rem</code></td><td>Line height of the tooltip text.</td></tr><tr><td><code>--frends-tooltip--font-size</code></td><td><code>0.875rem</code></td><td>Font size of the tooltip text.</td></tr><tr><td><code>--frends-tooltip--text-color</code></td><td><code>#FFFFFF</code></td><td>Text color of the tooltip.</td></tr></tbody></table>

### Scrollbars <a href="#scrollbars" id="scrollbars"></a>

Scrollbars inside the components — the dropdown option list, for example — are styled with these properties.

| Property                             | Default               | Description                       |
| ------------------------------------ | --------------------- | --------------------------------- |
| `--scrollbar-thumb-width`            | `0.375rem`            | Width of a vertical scrollbar.    |
| `--scrollbar-thumb-height`           | `0.375rem`            | Height of a horizontal scrollbar. |
| `--scrollbar-thumb-background`       | `#B3CBCB` *(approx.)* | Scrollbar color.                  |
| `--scrollbar-thumb-background-hover` | `#58696C`             | Scrollbar color on hover.         |
| `--scrollbar-thumb-border-radius`    | `1.875rem`            | Scrollbar corner rounding.        |

These names have no `frends` prefix, and the portal uses them for its page scrollbars too, so changing them affects both.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.frends.com/api-portal/general/customizing-your-api-portal/custom-css.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.