| <style> |
| #group-button { |
| --hover-bg-color: var(--cr-hover-background-color); |
| border: none; |
| border-radius: 0; |
| color: var(--cros-text-color-secondary); |
| font-size: 12px; |
| margin: 0; |
| margin-inline: var(--tab-button-margin); |
| min-width: unset; |
| padding: var(--text-group-button-padding); |
| width: max-content; |
| } |
| |
| #group-button:hover { |
| box-shadow: none; |
| } |
| |
| #group-button:active { |
| box-shadow: none; |
| } |
| |
| #group-button.text-group-active { |
| --cr-icon-button-fill-color: var(--cros-icon-color-prominent); |
| color: var(--cros-text-color-prominent); |
| } |
| </style> |
| |
| <cr-button |
| id="group-button" |
| class$="[[calculateClassName(active)]]" |
| on-click="handleClick" |
| custom-tab-index="[[customTabIndex]]"> |
| [[toUpperCase(name)]] |
| </cr-button> |
