winduum 0.2.0-beta.1 → 0.2.0-beta.10

package/src/ui/badge/default.css

@@ -1,5 +1,5 @@
 .ui-badge {
-  --color-current: var(--color-light);
+  --color-current: var(--color-accent-current);
   --ui-badge-width: max-content;
   --ui-badge-height: 1.5rem;
   --ui-badge-py: 0;

package/src/ui/badge/index.css

@@ -5,4 +5,3 @@
 @import "muted.css";
 @import "square.css";
 @import "circle.css";
-@import "group.css";

package/src/ui/btn/bordered.css

@@ -1,6 +1,6 @@
 .ui-btn:where(.bordered) {
-  --ui-btn-border-width: 2px;
-  --ui-btn-border-opacity: calc(var(--tw-border-opacity, 1) * 100%);
+  --ui-btn-border-width: 1px;
+  --ui-btn-border-opacity: calc(var(--tw-border-opacity, 0.3) * 100%);
 
   border: var(--ui-btn-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-btn-border-opacity), transparent);
   padding-left: calc(var(--ui-btn-px) - var(--ui-btn-border-width));

package/src/ui/btn/default.css

@@ -1,5 +1,5 @@
 .ui-btn {
-  --color-current: var(--color-light);
+  --color-current: var(--color-accent-current);
   --ui-btn-width: max-content;
   --ui-btn-height: 2.25rem;
   --ui-btn-gap: 0.375rem;
@@ -7,7 +7,7 @@
   --ui-btn-px: 0.75rem;
   --ui-btn-border-radius: var(--rounded);
   --ui-btn-font-size: 0.875rem;
-  --ui-btn-font-weight: var(--font-semibold);
+  --ui-btn-font-weight: var(--font-medium);
   --ui-btn-letter-spacing: 0;
   --ui-btn-bg: color-mix(in sRGB, var(--color-accent) var(--ui-btn-bg-opacity), var(--ui-btn-bg-mix));
   --ui-btn-bg-mix: transparent;
@@ -15,19 +15,16 @@
   --ui-btn-color: color-mix(in sRGB, var(--color-current) var(--ui-btn-color-opacity), transparent);
   --ui-btn-color-opacity: calc(var(--tw-text-opacity, 1) * 100%);
   --ui-btn-outline-width: 2px;
-  --ui-btn-outline-offset: 2px;
-  --ui-btn-outline-opacity: 50%;
-  --ui-btn-hover-mix: black;
-  --ui-btn-hover-opacity: 80%;
   --ui-btn-hover-color: var(--color-current);
-  --ui-btn-active-mix: black;
-  --ui-btn-active-opacity: 90%;
+  --ui-btn-hover-bg-mix: black;
+  --ui-btn-hover-bg-opacity: 80%;
   --ui-btn-active-color: var(--color-current);
-  --ui-btn-focus-mix: transparent;
-  --ui-btn-focus-opacity: 50%;
+  --ui-btn-active-bg-mix: black;
+  --ui-btn-active-bg-opacity: 90%;
+  --ui-btn-focus-outline-color-mix: transparent;
+  --ui-btn-focus-outline-color-opacity: 50%;
+  --ui-btn-focus-outline-offset: 2px;
   --ui-btn-disabled-opacity: 70%;
-  --ui-btn-loading-width: 1rem;
-  --ui-btn-loading-border-width: 2px;
 
   max-width: var(--ui-btn-width);
   width: var(--ui-btn-width);
@@ -53,18 +50,31 @@
     var(--transition-background),
     var(--transition-color),
     outline-color var(--transition-duration),
-    outline-offset var(--transition-duration);
+    outline-offset 100ms cubic-bezier(0.4, 0, 0.2, 1);
   gap: var(--ui-btn-gap);
   outline: var(--ui-btn-outline-width) solid transparent;
   outline-offset: 0;
 
+  &:where([class*="accent-base"]) {
+    --ui-btn-hover-bg-mix: var(--color-base-mix);
+  }
+
+  &:where([class*="accent-body"]) {
+    --ui-btn-hover-bg-mix: var(--color-body-mix);
+  }
+
+  & :where(svg) {
+    font-size: calc(var(--ui-btn-font-size) + 0.125rem);
+  }
+
   &:where(.bordered, .muted, .ghosted) {
-    --ui-btn-hover-mix: transparent;
-    --ui-btn-hover-opacity: 10%;
-    --ui-btn-active-mix: transparent;
-    --ui-btn-active-opacity: 20%;
-    --color-current: var(--color-accent);
+    --ui-btn-hover-bg-mix: transparent;
+    --ui-btn-hover-bg-opacity: 10%;
+    --ui-btn-active-bg-mix: transparent;
+    --ui-btn-active-bg-opacity: 20%;
+    --ui-btn-focus-outline-offset: -2px;
     --ui-btn-bg-opacity: 0%;
+    --color-current: var(--color-accent);
   }
 
   &:is([href], button, [role="button"]) {
@@ -77,20 +87,20 @@
       &:hover {
         @media (hover: hover) and (pointer: fine) {
           --ui-btn-color: var(--ui-btn-hover-color);
-          --ui-btn-bg-mix: var(--ui-btn-hover-mix);
-          --ui-btn-bg-opacity: var(--ui-btn-hover-opacity);
+          --ui-btn-bg-mix: var(--ui-btn-hover-bg-mix);
+          --ui-btn-bg-opacity: var(--ui-btn-hover-bg-opacity);
         }
       }
 
       &:focus {
-        outline-color: color-mix(in sRGB, var(--color-accent) var(--ui-btn-focus-opacity), var(--ui-btn-focus-mix));
-        outline-offset: var(--ui-btn-outline-offset);
+        outline-color: color-mix(in sRGB, var(--color-accent) var(--ui-btn-focus-outline-color-opacity), var(--ui-btn-focus-outline-color-mix));
+        outline-offset: var(--ui-btn-focus-outline-offset);
       }
 
       &:is(:active, .active) {
         --ui-btn-color: var(--ui-btn-active-color);
-        --ui-btn-bg-mix: var(--ui-btn-active-mix);
-        --ui-btn-bg-opacity: var(--ui-btn-active-opacity);
+        --ui-btn-bg-mix: var(--ui-btn-active-bg-mix);
+        --ui-btn-bg-opacity: var(--ui-btn-active-bg-opacity);
       }
     }
   }

package/src/ui/btn/gradient-bordered-rgb.css

@@ -0,0 +1,13 @@
+:is(.ui-btn.gradient-bordered) {
+  --color-current-rgb: var(--color-base-rgb);
+
+  &::before {
+    background-color: rgb(var(--color-body-rgb) / calc(100% - var(--ui-btn-bg-opacity)));
+  }
+
+  &:where(.hover-fill) {
+    &::before {
+      background-color: rgb(var(--color-body-rgb) / var(--ui-btn-bg-opacity));
+    }
+  }
+}

package/src/ui/btn/gradient-bordered.css

@@ -1,9 +1,10 @@
 :is(.ui-btn.gradient-bordered) {
   --ui-btn-border-width: 2px;
-  --ui-btn-hover-mix: transparent;
-  --ui-btn-hover-opacity: 10%;
-  --ui-btn-active-mix: transparent;
-  --ui-btn-active-opacity: 20%;
+  --ui-btn-hover-bg-mix: transparent;
+  --ui-btn-hover-bg-opacity: 10%;
+  --ui-btn-active-bg-mix: transparent;
+  --ui-btn-active-bg-opacity: 20%;
+  --ui-btn-focus-outline-offset: 0;
   --ui-btn-bg-opacity: 0%;
   --color-current: var(--color-base);
 

package/src/ui/btn/hover-fill.css

@@ -1,8 +1,8 @@
 .ui-btn:where(.hover-fill) {
-  --ui-btn-hover-mix: black;
-  --ui-btn-hover-opacity: 100%;
-  --ui-btn-active-mix: black;
-  --ui-btn-active-opacity: 90%;
+  --ui-btn-hover-bg-mix: black;
+  --ui-btn-hover-bg-opacity: 100%;
+  --ui-btn-active-bg-mix: black;
+  --ui-btn-active-bg-opacity: 90%;
   --ui-btn-hover-color: var(--color-light);
   --ui-btn-active-color: var(--color-light);
 }

package/src/ui/btn/index.css

@@ -7,9 +7,7 @@
 @import "hover-fill.css";
 @import "gradient.css";
 @import "gradient-bordered.css";
-@import "ghosted.css";
 @import "muted.css";
 @import "raised.css";
 @import "square.css";
 @import "circle.css";
-@import "group.css";

package/src/ui/btn/loading.css

@@ -1,4 +1,7 @@
 .ui-btn:is(.loading) {
+  --ui-btn-loading-width: 1rem;
+  --ui-btn-loading-border-width: 2px;
+
   pointer-events: none;
   color: transparent;
 

package/src/ui/btn/muted.css

@@ -1,4 +1,4 @@
 .ui-btn:where(.muted) {
-  --ui-btn-hover-opacity: 30%;
+  --ui-btn-hover-bg-opacity: 30%;
   --ui-btn-bg-opacity: 10%;
 }

package/src/ui/btn/raised.css

@@ -1,6 +1,6 @@
 .ui-btn:where(.raised) {
   --ui-btn-border-width: 2px;
-  --ui-btn-border-opacity: calc(var(--tw-border-opacity, 0.5) * 100%);
+  --ui-btn-border-opacity: calc(var(--tw-border-opacity, 0.85) * 100%);
 
   border: var(--ui-btn-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-btn-border-opacity), var(--color-current));
   padding-left: calc(var(--ui-btn-px) - var(--ui-btn-border-width));

package/src/ui/check-rgb.css

@@ -0,0 +1,31 @@
+.ui-check {
+  --ui-check-bg: var(--color-body-rgb);
+  --ui-check-border-color: var(--color-current-rgb);
+  --ui-check-checked-bg: var(--color-accent-rgb);
+
+  & :where(input) {
+    background-color: rgb(var(--ui-check-bg) / var(--ui-check-bg-opacity));
+    border: var(--ui-check-border-width) solid rgb(var(--ui-check-border-color) / var(--ui-check-border-opacity));
+
+    &:not(:disabled) {
+      &:focus {
+        outline-color: rgb(var(--ui-check-checked-bg) / var(--ui-check-outline-opacity));
+      }
+    }
+
+    &:disabled {
+      --ui-check-bg: var(--color-current-rgb);
+    }
+
+    &:checked {
+      background-color: rgb(var(--ui-check-checked-bg));
+    }
+  }
+
+  &.invalid, .validated & :where(input):invalid {
+    --color-current-rgb: var(--color-error-rgb);
+    --ui-check-bg: var(--color-error-rgb);
+    --ui-check-border-color: var(--color-error-rgb);
+    --ui-check-checked-bg: var(--color-error-rgb);
+  }
+}

package/src/ui/control/default-rgb.css

@@ -6,6 +6,12 @@
 
     &:focus {
       --ui-control-border-color: var(--color-accent-rgb);
+
+      outline-color: rgb(var(--color-accent-rgb) / var(--ui-control-outline-opacity));
+    }
+
+    &:disabled {
+      background-color: rgb(var(--color-base-rgb) / var(--ui-control-disabled-opacity));
     }
   }
 
@@ -13,6 +19,6 @@
     --ui-control-border-color: var(--color-error-rgb);
     --color-accent-rgb: var(--color-error-rgb);
 
-    background-color: rgb(var(--color-error-rgb) / var(--ui-control-error-opacity));
+    background-color: rgb(var(--color-error-rgb) / var(--ui-control-invalid-bg-opacity));
   }
 }

package/src/ui/control/default.css

@@ -18,11 +18,11 @@
   --ui-control-border-mix: transparent;
   --ui-control-border-opacity: 15%;
   --ui-control-border-radius: var(--rounded);
-  --ui-control-outline-width: 2px;
+  --ui-control-outline-width: 3px;
   --ui-control-outline-offset: 0;
   --ui-control-outline-opacity: 20%;
   --ui-control-disabled-opacity: 5%;
-  --ui-control-error-opacity: 10%;
+  --ui-control-invalid-bg-opacity: 10%;
 
   display: grid;
   grid-template-areas: "input";
@@ -89,6 +89,6 @@
     --ui-control-color: var(--color-error);
     --color-accent: var(--color-error);
 
-    background-color: color-mix(in sRGB, var(--color-error) var(--ui-control-error-opacity), var(--ui-control-bg));
+    background-color: color-mix(in sRGB, var(--color-error) var(--ui-control-invalid-bg-opacity), var(--ui-control-bg));
   }
 }

package/src/ui/control/index.css

@@ -3,4 +3,3 @@
 @import "icon.css";
 @import "floating.css";
 @import "floating-focus.css";
-@import "group.css";

package/src/ui/control/select.css

@@ -1,8 +1,11 @@
 .ui-control:has(select) {
   --ui-control-icon-select-font-size: 1.5rem;
-  --ui-control-icon-count-r: 2;
   --ui-control-pr: var(--ui-control-icon-offset-r);
 
+  &:has(.icon-r) {
+    --ui-control-icon-count-r: 2;
+  }
+
   & :where([class^="icon-"]) {
     margin-right: calc(var(--ui-control-icon-font-size) + var(--ui-control-icon-gap));
   }
@@ -18,8 +21,6 @@
     right: var(--ui-control-icon-inset-x);
     top: calc(var(--ui-control-height) / 2);
     margin-top: calc(var(--ui-control-icon-select-font-size) / 2 * -1);
-    will-change: transform;
-    transition: transform 200ms;
     mask: var(--icon-angle-down);
     pointer-events: none;
     grid-area: input;

package/src/ui/group.css

@@ -0,0 +1,34 @@
+.ui-group {
+  display: flex;
+  flex-wrap: wrap;
+
+  &:has(.ui-control) {
+    :where(.ui-btn) {
+      --ui-btn-border-width: 1px;
+      --ui-btn-border-opacity: 15%;
+      --ui-btn-height: auto;
+
+      min-width: 3rem;
+    }
+  }
+
+  :where(.ui-btn) {
+    --ui-btn-focus-outline-offset: 0;
+  }
+
+  & > * {
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+
+      &, & :where(input, select) {
+        border-left: 0;
+      }
+    }
+
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}

package/src/ui/index.css

@@ -1,10 +1,11 @@
 @import "badge.css";
 @import "btn/index.css";
 @import "check.css";
+@import "control.css";
+@import "group.css";
 @import "heading.css";
 @import "image.css";
 @import "info.css";
-@import "input.css";
 @import "label.css";
 @import "link.css";
 @import "notice.css";

package/src/ui/link/default.css

@@ -1,13 +1,16 @@
 .ui-link {
+  --color-accent: var(--color-current);
   --ui-link-font-size: 0.875rem;
-  --ui-link-font-weight: var(--font-semibold);
+  --ui-link-font-weight: var(--font-medium);
+  --ui-link-letter-spacing: 0;
   --ui-link-hover-color: var(--color-accent);
-  --ui-link-hover-opacity: 1;
-  --ui-link-active-opacity: 0.8;
+  --ui-link-hover-opacity: 0.75;
+  --ui-link-active-opacity: 0.75;
   --ui-link-gap: 0.5rem;
 
   font-size: var(--ui-link-font-size);
   font-weight: var(--ui-link-font-weight);
+  letter-spacing: var(--ui-link-letter-spacing);
   transition: var(--transition-opacity), var(--transition-color);
   display: inline-flex;
   align-items: center;
@@ -22,12 +25,12 @@
       }
     }
 
-    &:active {
-      opacity: var(--ui-link-active-opacity);
-    }
-
     &:focus-visible {
       color: var(--ui-link-hover-color);
     }
+
+    &:active {
+      opacity: var(--ui-link-active-opacity);
+    }
   }
 }

package/src/ui/link/underlined.css

@@ -1,4 +1,5 @@
-.ui-link:where(.underlined) {
+.ui-link:where([class*="underlined"]) {
+  --ui-link-hover-opacity: 1;
   --ui-link-underline-color: currentColor;
   --ui-link-underline-width: 1px;
   --ui-link-underline-opacity: 0;
@@ -8,6 +9,8 @@
     --ui-link-underline-opacity: 1;
     --ui-link-underline-transform: none;
     --ui-link-underline-color: var(--color-accent);
+    --ui-link-hover-opacity: 0.75;
+    --ui-link-active-opacity: 0.75;
   }
 
   &::after, & span::after {

package/src/ui/notice-rgb.css

@@ -0,0 +1,6 @@
+.ui-notice {
+  --ui-notice-bg: var(--color-accent-rgb);
+
+  background-color: rgb(var(--ui-notice-bg) / 10%);
+  outline: var(--ui-notice-outline-width) solid rgb(var(--ui-notice-bg) / var(--ui-notice-outline-opacity));
+}

package/src/ui/progress/default-rgb.css

@@ -0,0 +1,3 @@
+.ui-progress {
+  --ui-progress-bg: rgb(var(--color-accent-rgb) / var(--ui-progress-bg-opacity));
+}

package/src/ui/switch-rgb.css

@@ -0,0 +1,11 @@
+.ui-switch {
+  & :where(input) {
+    &:focus {
+      outline-color: rgb(var(--color-current-rgb) / var(--ui-switch-outline-opacity));
+    }
+
+    &:checked {
+      --color-current-rgb: var(--color-accent-rgb);
+    }
+  }
+}

package/src/ui/text-rgb.css

@@ -0,0 +1,13 @@
+.ui-text {
+  & :where(table) {
+    & :where(thead) {
+      border-bottom: 1px solid rgb(var(--color-current-rgb) / 7.5%);
+    }
+
+    & :where(tbody tr) {
+      &:nth-of-type(even) {
+        background-color: rgb(var(--color-current-rgb) / 5%);
+      }
+    }
+  }
+}

package/src/ui/text.css

@@ -117,12 +117,12 @@
 
     & :where(thead) {
       font-weight: var(--ui-text-weight-bold);
-      border-bottom: 1px solid color-mix(in sRGB, var(--color-current) 0.75%, transparent);
+      border-bottom: 1px solid color-mix(in sRGB, var(--color-current) 7.5%, transparent);
     }
 
     & :where(tbody tr) {
       &:nth-of-type(even) {
-        background-color: color-mix(in sRGB, var(--color-current) 0.5%, transparent);
+        background-color: color-mix(in sRGB, var(--color-current) 5%, transparent);
       }
     }
   }

package/utils/tailwind.cjs

@@ -8,9 +8,10 @@ var lodash = require('lodash');
 
 const defaultConfig = {
     colors: [
-        'light', 'dark', 'primary', 'secondary',
+        'light', 'dark', 'primary',
         'warning', 'error', 'info', 'success', 'accent', 'current',
-        'base', 'body', 'body-primary', 'body-secondary', 'body-tertiary'
+        'base', 'base-primary', 'base-secondary', 'base-tertiary',
+        'body', 'body-primary', 'body-secondary', 'body-tertiary'
     ],
     fontFamily: ['primary', 'secondary'],
     fontWeight: ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'],
@@ -58,12 +59,20 @@ const getTailwindColors = (twColors) => {
 
 const tailwindColors = (colors = []) => {
     colors.forEach(name => {
-        colors[name] = ({ opacityValue }) => {
+        colors[name + '-rgb'] = ({ opacityValue }) => {
             if (opacityValue === undefined) {
                 return `rgb(var(--color-${name}-rgb))`
             }
             return `rgb(var(--color-${name}-rgb) / ${opacityValue})`
         };
+
+        colors[name] = ({ opacityValue }) => {
+            if (opacityValue === undefined) {
+                return `var(--color-${name})`
+            }
+
+            return `color-mix(in sRGB, var(--color-${name}) calc(${opacityValue} * 100%), transparent)`
+        };
     });
 
     return colors
@@ -78,12 +87,14 @@ const tailwindColorsAccent = (colors = []) => {
 
             result[`.accent-${color[0]}`] = {
                 '--color-accent-rgb': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
-                '--color-accent': `rgb(${rgb[0]} ${rgb[1]} ${rgb[2]})`
+                '--color-accent': `rgb(${rgb[0]} ${rgb[1]} ${rgb[2]})`,
+                '--color-accent-current': `var(--color-${color}-current, var(--color-light))`
             };
         } else {
             result[`.accent-${color}`] = {
                 '--color-accent-rgb': `var(--color-${color}-rgb)`,
-                '--color-accent': `var(--color-${color})`
+                '--color-accent': `var(--color-${color})`,
+                '--color-accent-current': `var(--color-${color}-current, var(--color-light))`
             };
         }
     });

package/utils/tailwind.js

@@ -4,9 +4,10 @@ import lodash from 'lodash'
 
 export const defaultConfig = {
     colors: [
-        'light', 'dark', 'primary', 'secondary',
+        'light', 'dark', 'primary',
         'warning', 'error', 'info', 'success', 'accent', 'current',
-        'base', 'body', 'body-primary', 'body-secondary', 'body-tertiary'
+        'base', 'base-primary', 'base-secondary', 'base-tertiary',
+        'body', 'body-primary', 'body-secondary', 'body-tertiary'
     ],
     fontFamily: ['primary', 'secondary'],
     fontWeight: ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'],
@@ -54,12 +55,20 @@ export const getTailwindColors = (twColors) => {
 
 export const tailwindColors = (colors = []) => {
     colors.forEach(name => {
-        colors[name] = ({ opacityValue }) => {
+        colors[name + '-rgb'] = ({ opacityValue }) => {
             if (opacityValue === undefined) {
                 return `rgb(var(--color-${name}-rgb))`
             }
             return `rgb(var(--color-${name}-rgb) / ${opacityValue})`
         }
+
+        colors[name] = ({ opacityValue }) => {
+            if (opacityValue === undefined) {
+                return `var(--color-${name})`
+            }
+
+            return `color-mix(in sRGB, var(--color-${name}) calc(${opacityValue} * 100%), transparent)`
+        }
     })
 
     return colors
@@ -74,12 +83,14 @@ export const tailwindColorsAccent = (colors = []) => {
 
             result[`.accent-${color[0]}`] = {
                 '--color-accent-rgb': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
-                '--color-accent': `rgb(${rgb[0]} ${rgb[1]} ${rgb[2]})`
+                '--color-accent': `rgb(${rgb[0]} ${rgb[1]} ${rgb[2]})`,
+                '--color-accent-current': `var(--color-${color}-current, var(--color-light))`
             }
         } else {
             result[`.accent-${color}`] = {
                 '--color-accent-rgb': `var(--color-${color}-rgb)`,
-                '--color-accent': `var(--color-${color})`
+                '--color-accent': `var(--color-${color})`,
+                '--color-accent-current': `var(--color-${color}-current, var(--color-light))`
             }
         }
     })

package/src/ui/badge/group.css

@@ -1,16 +0,0 @@
-.ui-badge-group {
-  display: flex;
-
-  & :where(.ui-badge) {
-    &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-left: 0;
-    }
-
-    &:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-}

package/src/ui/btn/ghosted.css

@@ -1,4 +0,0 @@
-.ui-btn:where(.ghosted) {
-  --ui-btn-outline-width: 2px;
-  --ui-btn-outline-offset: -2px;
-}

package/src/ui/btn/group.css

@@ -1,18 +0,0 @@
-.ui-btn-group {
-  display: flex;
-
-  & :where(.ui-btn) {
-    --ui-btn-outline-offset: 0;
-
-    &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-left: 0;
-    }
-
-    &:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-}

package/src/ui/control/group.css

@@ -1,22 +0,0 @@
-.ui-control-group {
-  display: flex;
-  flex-wrap: wrap;
-
-  & :where(.ui-btn) {
-    --ui-btn-border-width: 1px;
-    --ui-btn-height: 3rem;
-  }
-
-  & > * {
-    &:not(:first-child) {
-      border-left: 0;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-
-    &:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-}