Update cloud dialog SCSS to newer syntax

Author: camdecoster

src/css/_cloud_dialog.scss

@@ -1,83 +1,87 @@
-.plotly-cloud-dialog {
-    font-family: 'Open Sans', verdana, arial, sans-serif; // Because not all contexts have this specified.
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1001;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    background-color: rgba(0, 0, 0, 0.4);
-
-    .plotly-cloud-dialog-box {
-        box-sizing: border-box;
-        min-width: 300px;
-        max-width: 420px;
-        padding: 20px 24px;
-
-        background-color: $color-bg-light;
-        border: 1px solid $color-bg-darker;
-        border-radius: 4px;
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
-
-        font-size: 13px;
-        color: #2a3f5f;
-    }
+@use "vars";
 
-    .plotly-cloud-dialog-title {
-        font-size: 16px;
-        font-weight: bold;
-        margin-bottom: 12px;
-    }
+@mixin styles {
+    .plotly-cloud-dialog {
+        font-family: 'Open Sans', verdana, arial, sans-serif; // Because not all contexts have this specified.
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1001;
 
-    .plotly-cloud-dialog-message {
-        line-height: 1.5;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-    }
-
-    .plotly-cloud-dialog-buttons {
         display: flex;
-        justify-content: flex-end;
-        margin-top: 20px;
-    }
+        align-items: center;
+        justify-content: center;
 
-    .plotly-cloud-dialog-btn {
-        font-family: inherit;
-        font-size: 13px;
-        padding: 7px 16px;
-        margin-left: 8px;
+        background-color: rgba(0, 0, 0, 0.4);
 
-        border-radius: 3px;
-        border: 1px solid transparent;
-        cursor: pointer;
+        .plotly-cloud-dialog-box {
+            box-sizing: border-box;
+            min-width: 300px;
+            max-width: 420px;
+            padding: 20px 24px;
 
-        &:focus-visible {
-            outline: 2px solid $color-brand-primary;
-            outline-offset: 1px;
+            background-color: vars.$color-bg-light;
+            border: 1px solid vars.$color-bg-darker;
+            border-radius: 4px;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+
+            font-size: 13px;
+            color: #2a3f5f;
         }
-    }
 
-    .plotly-cloud-dialog-btn--cancel {
-        background-color: $color-bg-light;
-        border-color: $color-bg-darker;
-        color: $color-muted-text;
+        .plotly-cloud-dialog-title {
+            font-size: 16px;
+            font-weight: bold;
+            margin-bottom: 12px;
+        }
 
-        &:hover {
-            background-color: $color-bg-base;
+        .plotly-cloud-dialog-message {
+            line-height: 1.5;
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+        }
+
+        .plotly-cloud-dialog-buttons {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 20px;
+        }
+
+        .plotly-cloud-dialog-btn {
+            font-family: inherit;
+            font-size: 13px;
+            padding: 7px 16px;
+            margin-left: 8px;
+
+            border-radius: 3px;
+            border: 1px solid transparent;
+            cursor: pointer;
+
+            &:focus-visible {
+                outline: 2px solid vars.$color-brand-primary;
+                outline-offset: 1px;
+            }
+        }
+
+        .plotly-cloud-dialog-btn--cancel {
+            background-color: vars.$color-bg-light;
+            border-color: vars.$color-bg-darker;
+            color: vars.$color-muted-text;
+
+            &:hover {
+                background-color: vars.$color-bg-base;
+            }
         }
-    }
 
-    .plotly-cloud-dialog-btn--confirm {
-        background-color: $color-brand-primary;
-        color: $color-bg-light;
+        .plotly-cloud-dialog-btn--confirm {
+            background-color: vars.$color-brand-primary;
+            color: vars.$color-bg-light;
 
-        &:hover {
-            background-color: $color-brand-accent;
+            &:hover {
+                background-color: vars.$color-brand-accent;
+            }
         }
     }
 }