Backport of PR wintercms/winter#1374

Author: damsfx

formwidgets/enhancedrelation/assets/css/enhancedrelation.css

@@ -1,70 +1,67 @@
-/*
- * This is a sample StyleSheet file used by EnhancedRelation
- *
- * You can delete this file if you want
- */
-.field-checkboxlist .checkboxlist-controls > div:nth-child(even) {
+div[data-control="relation"] .field-checkboxlist .checkboxlist-controls>div:nth-child(even) {
     margin-left: auto;
     margin-right: 0;
 }
 
-.checkboxlist-item {
-    --background-padding : 10px;
-
+div[data-control="relation"] .checkboxlist-item {
+    --background-padding: 10px;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: start;
     flex-wrap: wrap;
     margin-bottom: 10px;
     margin-top: 15px;
+}
 
-    & ~ & {
-        margin-top: 0;
-    }
-
-    a i {
-        display: block;
-        transition: transform 0.25s ease-in-out;
-    }
-
-    &:has(.checkboxlist-item).open {
-        background: linear-gradient(90deg, rgba(0, 0, 0, 0) calc(var(--background-padding) - 1px), rgba(0, 0, 0, 0.25) var(--background-padding), rgba(0, 0, 0, 0) calc(var(--background-padding) + 1px));
-
-        > a i {
-            transform: rotate(90deg);
-        }
-    }
-
-    & & {
-        --background-padding: 20px;
+div[data-control="relation"] .checkboxlist-item .checkboxlist-item-toggle .icon-chevron-right {
+    display: block;
+    transition: transform 0.15s ease-in-out;
+}
 
-        margin-left: 10px;
-        padding-left: 10px;
-    }
+div[data-control="relation"] .checkboxlist-item:has(.checkboxlist-item).open {
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0) calc(var(--background-padding) - 1px), rgba(0, 0, 0, 0.25) var(--background-padding), rgba(0, 0, 0, 0) calc(var(--background-padding) + 1px));
+}
 
+div[data-control="relation"] .checkboxlist-item:has(.checkboxlist-item).open>.checkboxlist-item-toggle .icon-chevron-right {
+    transform: rotate(90deg);
+}
 
-    & .custom-checkbox {
-        flex-grow: 1;
-        margin-top: 0;
-        margin-bottom: 0;
-    }
+div[data-control="relation"] .checkboxlist-item .custom-checkbox {
+    flex-grow: 1;
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
-.checkboxlist-item-expand-collapse {
+div[data-control="relation"] .checkboxlist-item-toggle {
     margin: 0 calc(1rem + 15px) 0 1rem;
 }
 
-.checkboxlist-children {
+div[data-control="relation"] .checkboxlist-item-toggle .icon-chevron-right {
+    pointer-events: none;
+}
+
+div[data-control="relation"] .checkboxlist-children {
     width: 100%;
     display: grid;
     grid-template-rows: 0fr;
-    transition: grid-template-rows 0.5s ease-in-out;
+    transition: grid-template-rows 0.2s ease-in-out;
+}
+
+div[data-control="relation"] .checkboxlist-children.open {
+    grid-template-rows: 1fr;
+}
+
+div[data-control="relation"] .checkboxlist-children>div {
+    overflow: hidden;
+}
+
+div[data-control="relation"] .checkboxlist-item .checkboxlist-item {
+    --background-padding: 20px;
+    margin-left: 10px;
+    padding-left: 10px;
+}
 
-    &.open {
-        grid-template-rows: 1fr;
-    }
-    & > div {
-        overflow: hidden;
-    }
+div[data-control="relation"] .checkboxlist-item~.checkboxlist-item {
+    margin-top: 0;
 }