:root {
    --app-radius: 9px;
    --app-radius-sm: 9px;
    --app-radius-md: 9px;
    --app-radius-lg: 9px;
    --app-radius-pill: 9px;
    --bs-border-radius: 9px;
    --bs-border-radius-sm: 9px;
    --bs-border-radius-lg: 9px;
    --bs-border-radius-xl: 9px;
    --bs-border-radius-xxl: 9px;
    --bs-border-radius-pill: 9px;
}

button,
.btn,
.card,
.alert,
.badge,
.toast,
.dropdown-menu,
.dropdown-item,
.modal-content,
.modal-header,
.modal-footer,
.list-group,
.list-group-item,
.form-control,
.form-select,
.input-group-text,
.nav-pills .nav-link,
.nav-tabs .nav-link,
[role="button"],
[class*="button"],
[class*="Button"],
[class*="card"],
[class*="Card"],
[class*="section"],
[class*="Section"],
[class*="panel"],
[class*="Panel"],
[class*="surface"],
[class*="Surface"],
[class*="tile"],
[class*="Tile"],
[class*="tab"],
[class*="Tab"],
[class*="chip"],
[class*="Chip"],
[class*="pill"],
[class*="Pill"],
[class*="badge"],
[class*="Badge"],
[class*="highlight"],
[class*="Highlight"],
[class*="option"],
[class*="Option"] {
    border-radius: var(--app-radius);
}

html body button[class][class],
html body a[class][class],
html body [role="button"][class][class],
html body [class*="button"][class],
html body [class*="Button"][class],
html body [class*="action"][class],
html body [class*="Action"][class],
html body [class*="cta"][class],
html body [class*="Cta"][class],
html body [class*="card"][class],
html body [class*="Card"][class],
html body [class*="section"][class],
html body [class*="Section"][class],
html body [class*="panel"][class],
html body [class*="Panel"][class],
html body [class*="surface"][class],
html body [class*="Surface"][class],
html body [class*="tile"][class],
html body [class*="Tile"][class],
html body [class*="tab"][class],
html body [class*="Tab"][class],
html body [class*="chip"][class],
html body [class*="Chip"][class],
html body [class*="pill"][class],
html body [class*="Pill"][class],
html body [class*="badge"][class],
html body [class*="Badge"][class],
html body [class*="highlight"][class],
html body [class*="Highlight"][class],
html body [class*="filter"][class],
html body [class*="Filter"][class],
html body [class*="option"][class],
html body [class*="Option"][class],
html body [class*="selector"][class],
html body [class*="Selector"][class] {
    border-radius: var(--app-radius);
}

.btn.active,
.btn.show,
.nav-link.active,
[role="button"].active,
[aria-current],
[aria-pressed="true"],
[aria-selected="true"],
[class*="button"].active,
[class*="Button"].active,
[class*="tab"].active,
[class*="Tab"].active,
[class*="chip"].active,
[class*="Chip"].active,
[class*="pill"].active,
[class*="Pill"].active,
[class*="highlight"].active,
[class*="Highlight"].active,
[class*="selected"],
[class*="Selected"],
[class*="active"],
[class*="Active"] {
    border-radius: var(--app-radius);
}

html body [class*="button"][class].active,
html body [class*="Button"][class].active,
html body [class*="action"][class].active,
html body [class*="Action"][class].active,
html body [class*="tab"][class].active,
html body [class*="Tab"][class].active,
html body [class*="chip"][class].active,
html body [class*="Chip"][class].active,
html body [class*="pill"][class].active,
html body [class*="Pill"][class].active,
html body [class*="highlight"][class].active,
html body [class*="Highlight"][class].active,
html body [class*="filter"][class].active,
html body [class*="Filter"][class].active,
html body [class*="selected"][class],
html body [class*="Selected"][class],
html body [aria-current][class],
html body [aria-pressed="true"][class],
html body [aria-selected="true"][class] {
    border-radius: var(--app-radius);
}