diff --git a/packages/webawesome/src/styles/native.css b/packages/webawesome/src/styles/native.css
index bea5ed1fc..06bf684d8 100644
--- a/packages/webawesome/src/styles/native.css
+++ b/packages/webawesome/src/styles/native.css
@@ -462,7 +462,7 @@
&::after {
content: '';
background-color: var(--wa-color-text-quiet);
- mask: url('data:image/svg+xml;utf8,')
+ mask: url('data:image/svg+xml;utf8,')
center no-repeat;
width: 1rem;
height: 1rem;
@@ -874,7 +874,6 @@
input[type='radio'] {
appearance: none;
- position: relative;
flex: 0 0 auto;
align-items: center;
justify-content: center;
@@ -922,21 +921,18 @@
&:checked::after,
&:indeterminate::after {
- position: absolute;
-
- width: round(calc(100% - var(--wa-form-control-border-width) * 2), 1px);
- height: round(calc(100% - var(--wa-form-control-border-width) * 2), 1px);
-
content: '';
- background-color: currentColor;
-
+ width: var(--wa-form-control-toggle-size);
+ height: var(--wa-form-control-toggle-size);
scale: var(--checked-icon-scale);
+
+ background-color: currentColor;
}
&:checked::after {
- mask: url('data:image/svg+xml;utf8,')
- center no-repeat;
+ mask: url('data:image/svg+xml;utf8,')
+ center / 1em 1em no-repeat;
}
&:indeterminate::after {
@@ -964,7 +960,8 @@
content: '';
aspect-ratio: 1;
- width: round(calc(100% * var(--checked-icon-scale)), 1px);
+ width: 100%;
+ scale: var(--checked-icon-scale);
background-color: currentColor;
border-radius: 50%;
@@ -1065,9 +1062,7 @@
/* Select */
select {
- --icon-caret: url('data:image/svg+xml;utf8,');
-
- --icon-caret: url('data:image/svg+xml;utf8,');
+ --icon-caret: url('data:image/svg+xml;utf8,');
appearance: none;
@@ -1080,6 +1075,7 @@
background-repeat: no-repeat;
background-position: center right var(--wa-form-control-padding-inline);
background-blend-mode: hue, difference;
+ background-size: 1rem 1rem;
cursor: pointer;
}