superdesk-ui-framework 2.4.21 → 3.0.0-rc12

package/app/styles/form-elements/_checkbox.scss

@@ -3,16 +3,13 @@
 
 // Custom checkox & Radio buttons 
 
-:root {
-    --color-checkbox-border: rgba(0,0,0,0.2);
-    --color-checkbox-border-hover: rgba(0,0,0,0.4);
-}
 
 $checkBoxBorderColor: var(--color-checkbox-border);
 $checkBoxBorderColorHover: var(--color-checkbox-border-hover);
-$checkButtonTextColor-darkUI: rgba(255,255,255,0.65);
-$checkButtonTextColor: #5a5a5a;
-$checkButtonBorderColor: rgba(140,140,140,0.5);
+$checkButtonTextColor: var(--color-text-light);
+$checkButtonBorderColor: var(--sd-colour-line--light);
+$checkButtonBorderColorHover: var(--sd-colour-line--strong);
+$checkButtonBorderRadius: $border-radius__base--small;
 
 
 @mixin check-base {
@@ -24,12 +21,12 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
     border: 2px solid $checkBoxBorderColor;
     vertical-align: middle;
     font-family: $baseFontFamily;
-    @include transition(all, 0.2s, ease-out);
+    transition: all 0.2s ease-out;
 }
 
 .sd-checkbox {
     @include check-base;
-    @include border-radius(2px);
+    border-radius: $border-radius__base--x-small;
     &::after {
         font-family: 'sd_icons';
         content:'\e61d';
@@ -53,38 +50,38 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
         cursor: pointer;
     }
     &.checked, &[checked="checked"] {
-        border-color: $sd-blue;
-        background: $sd-blue;
+        border-color: $sd-colour-interactive;
+        background: $sd-colour-interactive;
         &::after {
-            @include opacity(100);
+            opacity: 1;
             transform: scale(1, 1);
         }
         &:hover {
-            border-color: darken($sd-blue, 10%);
-            background-color: darken($sd-blue, 10%);
+            border-color: var(--sd-colour-interactive--hover);
+            background-color: var(--sd-colour-interactive--hover);
         }
     }
     // Modifier for .sd-checkbox to create a radio button
     &--radio {
-        @include border-radius(50%);
+        border-radius: $border-radius__base--full;
         &::after {
             height: 0.8rem;
             width: 0.8rem;
-            @include border-radius(50%);
+            border-radius: $border-radius__base--full;
             content:' ';
             position: absolute;
-            background-color: $sd-blue;
+            background-color: $sd-colour-interactive;
             top: 0.2rem;
-            left: 0.2rem;
-            @include opacity(0);
-            @include transition(all, 0.1s, ease-in);
+            inset-inline-start: 0.2rem;
+            opacity: 0;
+            transition: all 0.1s ease-in;
             transform: scale(0.25, 0.25);
         }
         &.checked, &[checked="checked"] {
-            border-color: $sd-blue;
+            border-color: $sd-colour-interactive;
             background: transparent;
             &::after {
-                @include opacity(100);
+                opacity: 1;
                 transform: scale(1, 1);
             }
             &:hover {
@@ -99,7 +96,7 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
         line-height: 1;
         color: $checkButtonTextColor;
         border: 1px solid $checkButtonBorderColor;
-        @include border-radius(2px);
+        border-radius: $checkButtonBorderRadius;
         @include transition(all, 0.2s, ease-out);
         display: inline-flex;
         align-items: center;
@@ -124,7 +121,7 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
             color: currentColor;
         }
         i + label {
-            margin-left: 8px;
+            margin-inline-start: 8px;
         }
 
         &::after {
@@ -132,21 +129,21 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
             display: none;
         }
         &:hover {
-            color: darken($checkButtonTextColor, 30%);
-            border-color: scale-color($checkButtonBorderColor, $alpha: 90%);
-            @include box-shadow(0, 1px, 4px, 0, rgba(0,0,0,0.20));
+            color: var(--color-text);
+            border-color: $checkButtonBorderColorHover;
+            box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.2);
         }
         &.checked, &[checked="checked"] {
-            background-color: darken($sd-blue, 11%);
-            border-color: darken($sd-blue, 11%);
-            border-top-color: darken($sd-blue, 30%);
-            @include box-shadow(0, 2px, 0, 0, rgba(0,0,0,0.20), true);
+            background-color: var(--sd-colour-interactive--active);
+            border-color: var(--sd-colour-interactive--active);
+            border-top-color: var(--sd-colour-interactive--darken-20);
+            box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
             color: $white;
             &:hover {
                 color: $white;
-                border-color: darken($sd-blue, 25%);
-                background-color: darken($sd-blue, 14%);
-                @include box-shadow(0, 2px, 0, 0, rgba(0,0,0,0.20), true);
+                border-color: var(--sd-colour-interactive--hover);
+                background-color: var(--sd-colour-interactive--active);
+                box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
             }
             label {
                 color: $white;
@@ -174,23 +171,19 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
     vertical-align: middle;
 }
 
-.sd-check__wrapper + .sd-check__wrapper {
-    @include sd-margin('0-5', 'left');
-}
-.sd-check__wrapper:first-child, .sd-check__wrapper:only-of-type {
-    margin-left: 0;
-}
+
 
 .sd-check__wrapper {
-    margin-left: 0.8rem;
     display: inline-block;
     .sd-checkbox + label {
         display: inline-block;
         vertical-align: middle;
-        margin: 0 0 0 0.6rem;
-
+        margin: 0;
+        margin-inline-start: 0.6rem;
         i {
-            margin: 0 0.4rem 0 0.8rem;
+            margin: 0;
+            margin-inline-end: 0.4rem;
+            margin-inline-start: 0.8rem;
         }
     }
     .sd-label--disabled { 
@@ -199,11 +192,13 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
 }
 
 .sd-check__group {
-    padding: 0.6rem 0 1.2rem;
+    padding: 0;
+    display: flex;
+    gap: $sd-base-increment;
     &--grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
-        grid-gap: 0.6rem;
+        grid-gap: $sd-base-increment;
         .sd-check__wrapper {
             display: block;
             .sd-checkbox.sd-checkbox--button-style {
@@ -212,6 +207,17 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
                 justify-content: center;
             }
         }
+        .sd-check-button__text-label-inner {
+            white-space: normal;
+        }
+    }
+}
+.sd-check-button__group--grid {
+    .sd-check-button--native {
+        .sd-check-button__text-label-inner {
+            white-space: normal;
+            text-align: center;
+        }
     }
 }
 
@@ -222,7 +228,7 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
 
 .sd-check-new {
     @include check-base;
-    @include border-radius(2px);
+    border-radius: $border-radius__base--x-small;
     &::after {
         font-family: 'sd_icons';
         content:'\e61d';
@@ -235,10 +241,10 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
         -moz-osx-font-smoothing: grayscale;
         color: #fff;
         position: absolute;
-        top: 0;
-        left: 0;
-        @include opacity(0);
-        @include transition(all, 0.2s, ease-in);
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        opacity: 0;
+        transition: all 0.2s ease-in;
         transform: scale(0.25, 0.25);
     }
     &:hover {
@@ -246,15 +252,15 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
         cursor: pointer;
     }
     &.checked, &[checked="checked"] {
-        border-color: $sd-blue;
-        background: $sd-blue;
+        border-color: $sd-colour-interactive;
+        background: $sd-colour-interactive;
         &::after {
-            @include opacity(100);
+            opacity: 1;
             transform: scale(1, 1);
         }
         &:hover {
-            border-color: darken($sd-blue, 10%);
-            background-color: darken($sd-blue, 10%);
+            border-color: var(--sd-colour-interactive--hover);
+            background-color: var(--sd-colour-interactive--hover);
         }
     }
     &--disabled, &[disabled="disabled"] {
@@ -270,7 +276,7 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
 }
 .sd-radio-new {
     @include check-base;
-    @include border-radius(50%);
+    border-radius: $border-radius__base--full;
     &:hover {
         border-color: $checkBoxBorderColorHover;
         cursor: pointer;
@@ -278,21 +284,21 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
     &::after {
         height: 0.8rem;
         width: 0.8rem;
-        @include border-radius(50%);
+        border-radius: $border-radius__base--full;
         content:' ';
         position: absolute;
-        background-color: $sd-blue;
-        top: 0.2rem;
-        left: 0.2rem;
-        @include opacity(0);
-        @include transition(all, 0.1s, ease-in);
+        background-color: $sd-colour-interactive;
+        inset-block-start: 0.2rem;
+        inset-inline-start: 0.2rem;
+        opacity: 0;
+        transition: all 0.1s ease-in;
         transform: scale(0.25, 0.25);
     }
     &.checked, &[checked="checked"] {
-        border-color: $sd-blue;
+        border-color: $sd-colour-interactive;
         background: transparent;
         &::after {
-            @include opacity(100);
+            opacity: 1;
             transform: scale(1, 1);
         }
         &:hover {
@@ -316,51 +322,53 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
     @include sd-padding('1-5', 'x');
     line-height: 1;
     border: 1px solid $checkButtonBorderColor;
-    @include border-radius(2px);
-    @include transition(all, 0.2s, ease-in-out);
-    display: inline-flex;
+    border-radius: $checkButtonBorderRadius;
+    transition: all 0.2s ease-in-out;
+    display: flex;
     align-items: center;
     justify-content: center;
     height: $sd-base-increment * 4;
-    color: inherit;
-    @include text-overflow;
+    color: var(--color-text);
     cursor: pointer;
     .sd-check-button__text-label {
+        display: flex;
         margin:0;
         text-align: center;
         cursor: pointer;
-        padding: 2px 0;
-        @include text-overflow;
+        padding: 0;
+        padding-block-start: 2px;
+        padding-block-end: 2px;
         opacity: 0.8;
-        @include transition(opacity, 0.2s, ease-in-out);
+        transition: opacity 0.2s ease-in-out;
     }
     [class^="icon-"], [class*=" icon-"] {
         color: currentColor;
     }
     i + .sd-check-button__text-label {
-        @include sd-margin('1', 'left')
+        margin-inline-start: $sd-base-increment;
     }
     &:hover {
-        border-color: scale-color($checkButtonBorderColor, $alpha: 90%);
-        @include box-shadow(0, 1px, 4px, 0, rgba(0,0,0,0.20));
         .sd-check-button__text-label {
             opacity: 1;
+            border-color: $checkButtonBorderColorHover;
+            box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.16);
+            color: var(--color-text);
         }
     }
     &.checked, &[checked="checked"] {
-        background-color: darken($sd-blue, 11%);
-        border-color: darken($sd-blue, 11%);
-        border-top-color: darken($sd-blue, 30%);
-        @include box-shadow(0, 2px, 0, 0, rgba(0,0,0,0.20), true);
+        background-color: var(--sd-colour-interactive--active);
+        border-color: var(--sd-colour-interactive--active);
+        border-top-color: var(--sd-colour-interactive--darken-20);
+        box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
         color: $white;
         .sd-check-button__text-label {
             opacity: 1;
         }
         &:hover {
             color: $white;
-            border-color: darken($sd-blue, 25%);
-            background-color: darken($sd-blue, 14%);
-            @include box-shadow(0, 2px, 0, 0, rgba(0,0,0,0.20), true);
+            border-color: var(--sd-colour-interactive--active);
+            background-color: var(--sd-colour-interactive--hover);
+            box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
         }
     }
     .sd-label--disabled { 
@@ -369,126 +377,43 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
     }
 }
 
-.sd-check-button__group {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
 
 .sd-check-button__group {
     display: flex;
     flex-direction: row;
     align-items: center;
+    gap: $sd-base-increment * 1;
     flex: 0;
-    .sd-check-button {
-        margin: 0;
-    }
-    &--left {
-        margin-right: auto;
-        .sd-check-button {
-            @include sd-margin('1', 'right');
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-        &.sd-check-button__group--compact {
-            .sd-check-button {
-                @include sd-margin('0-5', 'right');
-                &:last-child {
-                    margin-right: 0;
-                }
-            }
-        }
-        &.sd-check-button__group--padded {
-            @include sd-margin('1-5', 'left');
-        }
+    &--left, &--start {
+        margin-inline-end: auto;
     }
-    &--right {
-        margin-left: auto;
-        .sd-check-button {
-            @include sd-margin('1', 'left');
-            &:first-child {
-                margin-left: 0;
-            }
-        }
-        &.sd-check-button__group--compact {
-            .sd-check-button {
-                @include sd-margin('0-5', 'left');
-                &:first-child {
-                    margin-right: 0;
-                }
-            }
-        }
-        &.sd-check-button__group--padded {
-            @include sd-margin('1-5', 'right');
-        }
+    &--right, &--end {
+        margin-inline-start: auto;
     }
     &--center {
-        margin-left: auto;
-        margin-right: auto;
-        .sd-check-button  {
-            @include sd-margin('0-5', 'x');
-            &:first-child {
-                margin-left: 0;
-            }
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-        &.sd-check-button__group--compact {
-            .sd-check-button  {
-                margin: 0 0.2rem;
-                &:first-child {
-                    margin-left: 0;
-                }
-                &:last-child {
-                    margin-right: 0;
-                }
-            }
-        }
+        margin-inline-start: auto;
+        margin-inline-end: auto;
     }
     &--inline {
-        margin-left: 0;
-        margin-right: 0;
-        .sd-check-button  {
-            @include sd-margin('0-5', 'x');
-            &:first-child {
-                margin-left: 0;
-            }
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-        &.sd-check-button__group--compact {
-            .sd-check-button  {
-                margin: 0 0.2rem;
-                &:first-child {
-                    margin-left: 0;
-                }
-                &:last-child {
-                    margin-right: 0;
-                }
-            }
-        }
-        &.sd-check-button__group--padded {
-            @include sd-margin('1-5', 'x');
-        }
+        margin-inline-start: 0;
+        margin-inline-end: 0;
     }
     &--grid {
         flex: 1 1 0;
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
         grid-gap: $sd-base-increment;
-        .sd-check-button {
-            margin: 0;
-        }
+        align-self: stretch;
         &.sd-check-button__group--compact {
             grid-gap: $sd-base-increment / 2;
         }
     }
     &.sd-check-button__group--padded {
-        @include sd-margin('1-5', 'x');
+        margin-inline-start: $sd-base-increment * 1.5;
+        margin-inline-end: $sd-base-increment * 1.5;
+    }
+    &.sd-check-button__group--compact {
+        gap: $sd-base-increment * 0.5;
     }
 }
 
@@ -504,7 +429,7 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
     }
     .sd-check-new + label,
     .sd-radio-new + label {
-        @include sd-margin('1', 'left');
+        margin-inline-start: $sd-base-increment;
     }
     .sd-check-new + label:empty,
     .sd-radio-new + label:empty {
@@ -513,17 +438,17 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
     .sd-label--disabled { 
         opacity: 0.40;
     }
-    &[label-position="left"] {
+    &[label-position="left"], &[label-position="start"] {
         label {
-            @include sd-margin('1', 'right');
-            margin-left: 0;
+            margin-inline-end: $sd-base-increment;
+            margin-inline-start: 0;
             &:empty {
                 margin: 0 !important;
             }
         }
         .sd-check-new__input {
-            left: auto;
-            right: 0;
+            inset-inline-start: auto;
+            inset-inline-end: 0;
         }
         .sd-check-new, .sd-radio-new {
             order: 2;
@@ -539,8 +464,8 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
     input:checked {
         & ~ .sd-check-new,
         & ~ .sd-radio-new  {
-            border-color: #5ea9c8;
-            background: #5ea9c8;
+            border-color: $sd-colour-interactive;
+            background: $sd-colour-interactive;
             &::after {
                 opacity: 1;
                 transform: scale(1, 1);
@@ -550,14 +475,14 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
             background: transparent;
         }
         & ~ label {
-            color: #5ea9c8;
+            color: $sd-colour-interactive;
         }
     }
 
     input:focus {
         & ~ .sd-check-new,
         & ~ .sd-radio-new  {
-            box-shadow: 0 0 0 3px rgba(94, 169, 200, 0.35);
+            box-shadow: 0 0 0 3px $sd-colour--focus-shadow;
         }
     }
 
@@ -579,8 +504,8 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
     }
 
     .sd-check-new__input {
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         width: 16px;
         cursor: inherit;
         height: 16px;
@@ -601,18 +526,11 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
     display: flex;
     flex-direction: row;
     align-items: center;
-    .sd-check-new__wrapper {
-        @include sd-margin('3', 'right');
-    }
+    gap: $sd-base-increment * 3;
     &--vertical {
+        gap: $sd-base-increment * 2;
         flex-direction: column;
         align-items: flex-start;
-        .sd-check-new__wrapper {
-            @include sd-margin('2', 'bottom');
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
     }
 }
 
@@ -625,27 +543,26 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
         background: transparent;
         overflow: visible;
         .sd-check-button__text-label {
-            padding-left: 1.2rem;
-            padding-right: 1.2rem;
+            padding-inline-start: 1.2rem;
+            padding-inline-end: 1.2rem;
             line-height: 1;
             border: 1px solid rgba(140, 140, 140, 0.5);
-            border-radius: 2px;
+            border-radius: $checkButtonBorderRadius;
             transition: all 0.2s ease-in-out;
-            display: inline-flex;
+            display: flex;
             align-items: center;
             justify-content: center;
             height: 3.2rem;
             color: inherit;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
             cursor: pointer;
             width: 100%;
+            white-space: nowrap;
             .sd-check-button__text-label-inner {
                 user-select: none;
+                display: inline-block;
             }
             i + .sd-check-button__text-label-inner {
-                margin-left: 8px;
+                margin-inline-start: $sd-base-increment;
             }
         }
     }
@@ -653,8 +570,8 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
 
     .sd-check-button__input {
         position: absolute;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         opacity: 0;
         pointer-events: none;
         height:100%;
@@ -670,9 +587,9 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
         & ~ label {
             opacity: 1;
             color: $white;
-            background-color: #3d8fb1;
-            border-color: #3d8fb1;
-            border-top-color: #245569;
+            background-color: var(--sd-colour-interactive--active);
+            border-color: var(--sd-colour-interactive--active);
+            border-top-color: var(--sd-colour-interactive--darken-20);
             box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.2);
         }
     }
@@ -685,11 +602,11 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
     }
     &:focus-within {
         .sd-check-button__text-label {
-            box-shadow: 0 0 0 3px rgba(94, 169, 200, 0.40);
+            box-shadow: 0 0 0 3px $sd-colour--focus-shadow;
         }
         .sd-check-button__input:checked {
             & ~ label {
-                box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(94, 169, 200, 0.40);
+                box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.2), 0 0 0 3px $sd-colour--focus-shadow;
             }
         }
         
@@ -700,36 +617,54 @@ $checkButtonBorderColor: rgba(140,140,140,0.5);
 // END NEW CHECKBOX & RADIO
 // ============================================================================
 
-[class^="--dark-ui"],
-[class*="--dark-ui"],
-.dark-ui {
-    --color-checkbox-border: rgba(255, 255, 255, 0.2);
-    --color-checkbox-border-hover: rgba(255, 255, 255, 0.4);
-    .sd-checkbox {
-        border-color: rgba(255, 255, 255, 0.4);
-        &:hover {
-            border-color: rgba(255, 255, 255, 0.6);
-        }
-        &.checked, &[checked="checked"] {
-            border-color: $sd-blue;
-            &:hover {
-                border-color: darken($sd-blue, 10%);
-                background-color: darken($sd-blue, 10%);
-            }
-        }
+
+
+// TOGGLE BUTTON
+// use of this will be discontinued. It is here just to support older components in
+// Superdeks untill they are refactored
+
+
+.toggle-button {
+    @include sd-padding('1-5', 'x');
+    line-height: 1;
+    border: 1px solid $checkButtonBorderColor;
+    border-radius: $checkButtonBorderRadius;
+    transition: all 0.2s ease-in-out;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    height: $sd-base-increment * 4;
+    color: var(--color-text);
+    @include text-overflow;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 1.2rem;
+    background: transparent;
+    transition: all 0.2s ease-out;
+    [class^="icon-"],
+    [class*=" icon-"],
+    .toggle-button__icon {
+        color: currentColor;
     }
-    .sd-checkbox--button-style {
-        color: $checkButtonTextColor-darkUI;
+    &:hover {
+        border-color: $checkButtonBorderColorHover;
+        box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.16);
+        color: var(--color-text);
+        text-decoration: none !important;
+    }
+    &.toggle-button--active {
+        background-color: var(--sd-colour-interactive--active);
+        border-color: var(--sd-colour-interactive--active);
+        border-top-color: var(--sd-colour-interactive--darken-20);
+        box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
+        color: $white;
         &:hover {
-            color: scale-color($checkButtonTextColor-darkUI, $alpha: 100%);
-        }
-        &.checked, &[checked="checked"] {
-            border-color: darken($sd-blue, 10%);
-            border-top-color: darken($sd-blue, 20%);
-            @include box-shadow(0, 2px, 0, 0, rgba(0,0,0,0.20), true);
-            &:hover {
-                border-color: darken($sd-blue, 25%);
-            }
+            color: $white;
+            border-color: var(--sd-colour-interactive--active);
+            background-color: var(--sd-colour-interactive--hover);
+            box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
         }
     }
 }
+