39 lines
724 B
CSS
39 lines
724 B
CSS
|
@layer base {
|
||
|
|
.toggleGroup {
|
||
|
|
display: inline-flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: var(--spacing-1);
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
width: fit-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggleGroup[data-orientation="horizontal"] {
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggleGroup[data-orientation="vertical"] {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: stretch;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggleGroup[data-type="single"] {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggleGroup[data-type="multiple"] {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggleGroup:has(.toggle-size-sm) {
|
||
|
|
gap: var(--spacing-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggleGroup:has(.toggle-size-md) {
|
||
|
|
gap: var(--spacing-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggleGroup:has(.toggle-size-lg) {
|
||
|
|
gap: var(--spacing-3);
|
||
|
|
}
|
||
|
|
}
|