init illogical-impulse

.config/ags/scss/_common.scss

@@ -42,7 +42,7 @@ menu {
     -gtk-outline-radius: 1.159rem;
 
     animation-name: appear;
-    animation-duration: 100ms;
+    animation-duration: 40ms;
     animation-timing-function: ease-out;
     animation-iteration-count: 1;
 }
@@ -81,12 +81,11 @@ tooltip {
 }
 
 .configtoggle-box {
-    padding: 0.205rem;
+    padding: 0.205rem 0.341rem;
     border: 0.136rem solid transparent;
 }
 
 .configtoggle-box:focus {
-    padding: 0.205rem;
     border: 0.136rem solid mix($onSurface, $surface, 40%);
 }
 
@@ -126,4 +125,70 @@ tooltip {
     @include menu_decel;
     min-width: 1.636rem;
     min-height: 0.819rem;
+}
+
+.segment-container {
+    @include full-rounding;
+    border: 0.068rem solid $outline;
+}
+
+.segment-container>*:first-child {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+}
+
+.segment-container>* {
+    border-right: 0.068rem solid $outline;
+    padding: 0.341rem 0.682rem;
+}
+
+.segment-container>*:last-child {
+    border-right: 0rem solid transparent;
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+}
+
+.segment-btn {
+    color: $onSurface;
+}
+
+.segment-btn:focus,
+.segment-btn:hover {
+    background-color: $surfaceVariant;
+    color: $onSurfaceVariant;
+}
+
+.segment-btn-enabled {
+    background-color: $secondaryContainer; 
+    color: $onSecondaryContainer;
+}
+
+.segment-btn-enabled:hover,
+.segment-btn-enabled:focus {
+    background-color: $secondaryContainer; 
+    color: $onSecondaryContainer;
+}
+
+.gap-v-5 {
+    min-height: 0.341rem;
+}
+
+.gap-h-5 {
+    min-width: 0.341rem;
+}
+
+.gap-v-10 {
+    min-height: 0.682rem;
+}
+
+.gap-h-10 {
+    min-width: 0.682rem;
+}
+
+.gap-v-15 {
+    min-height: 1.023rem;
+}
+
+.gap-h-15 {
+    min-width: 1.023rem;
 }