@itwin/itwinui-css 0.43.0 → 0.45.0

package/css/time-picker.css

@@ -39,16 +39,13 @@
     .iui-time > ol > li{
       padding:6px 16px;
       border-radius:3px; }
-      .iui-time > ol > li:focus{
-        outline:0;
-        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-        box-shadow:var(--iui-focus-box-shadow); }
-      .iui-time > ol > li:focus:not(:focus-visible){
-        box-shadow:none; }
       .iui-time > ol > li:focus-visible{
-        outline:0;
-        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-        box-shadow:var(--iui-focus-box-shadow); }
+        outline:1px solid var(--iui-color-foreground-primary);
+        outline-offset:-1px; }
+      @supports not selector(*:focus-visible){
+        .iui-time > ol > li:focus{
+          outline:1px solid var(--iui-color-foreground-primary);
+          outline-offset:-1px; } }
       .iui-time > ol > li:hover{
         cursor:pointer;
         color:#008BE1;
@@ -62,6 +59,13 @@
         color:#FFF;
         background-color:var(--iui-color-background-primary);
         color:var(--iui-color-foreground-accessory); }
+        .iui-time > ol > li.iui-selected:focus-visible{
+          outline:1px solid var(--iui-color-foreground-accessory);
+          outline-offset:-3px; }
+        @supports not selector(*:focus-visible){
+          .iui-time > ol > li.iui-selected:focus{
+            outline:1px solid var(--iui-color-foreground-accessory);
+            outline-offset:-3px; } }
 
 .iui-period{
   padding:11px 8px;
@@ -82,16 +86,13 @@
     .iui-period > ol > li{
       padding:6px 16px;
       border-radius:3px; }
-      .iui-period > ol > li:focus{
-        outline:0;
-        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-        box-shadow:var(--iui-focus-box-shadow); }
-      .iui-period > ol > li:focus:not(:focus-visible){
-        box-shadow:none; }
       .iui-period > ol > li:focus-visible{
-        outline:0;
-        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-        box-shadow:var(--iui-focus-box-shadow); }
+        outline:1px solid var(--iui-color-foreground-primary);
+        outline-offset:-1px; }
+      @supports not selector(*:focus-visible){
+        .iui-period > ol > li:focus{
+          outline:1px solid var(--iui-color-foreground-primary);
+          outline-offset:-1px; } }
       .iui-period > ol > li:hover{
         cursor:pointer;
         color:#008BE1;
@@ -105,3 +106,10 @@
         color:#FFF;
         background-color:var(--iui-color-background-primary);
         color:var(--iui-color-foreground-accessory); }
+        .iui-period > ol > li.iui-selected:focus-visible{
+          outline:1px solid var(--iui-color-foreground-accessory);
+          outline-offset:-3px; }
+        @supports not selector(*:focus-visible){
+          .iui-period > ol > li.iui-selected:focus{
+            outline:1px solid var(--iui-color-foreground-accessory);
+            outline-offset:-3px; } }

package/css/toast-notification.css

@@ -111,16 +111,6 @@
             user-select:none;
     text-decoration:underline;
     white-space:nowrap; }
-    .iui-toast > .iui-anchor:focus{
-      outline:0;
-      box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-box-shadow); }
-    .iui-toast > .iui-anchor:focus:not(:focus-visible){
-      box-shadow:none; }
-    .iui-toast > .iui-anchor:focus-visible{
-      outline:0;
-      box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-box-shadow); }
     .iui-toast > .iui-anchor:hover{
       text-decoration:none; }
   .iui-toast > .iui-button{
@@ -162,19 +152,10 @@
       .iui-toast.iui-positive > .iui-anchor:hover{
         color:#3c7613;
         color:var(--iui-color-foreground-positive-overlay); }
-    .iui-toast.iui-positive > .iui-anchor:focus,
-    .iui-toast.iui-positive > .iui-button:focus{
-      outline:0;
-      box-shadow:rgba(83, 162, 26, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-positive-box-shadow); }
-    .iui-toast.iui-positive > .iui-anchor:focus:not(:focus-visible),
-    .iui-toast.iui-positive > .iui-button:focus:not(:focus-visible){
-      box-shadow:none; }
-    .iui-toast.iui-positive > .iui-anchor:focus-visible,
-    .iui-toast.iui-positive > .iui-button:focus-visible{
-      outline:0;
-      box-shadow:rgba(83, 162, 26, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-positive-box-shadow); }
+    .iui-toast.iui-positive > .iui-anchor{
+      outline-color:var(--iui-color-foreground-positive); }
+    .iui-toast.iui-positive > .iui-button{
+      outline-color:var(--iui-color-foreground-positive); }
   .iui-toast.iui-negative{
     border-color:#D30A0A;
     border-color:var(--iui-color-foreground-negative); }
@@ -193,19 +174,10 @@
       .iui-toast.iui-negative > .iui-anchor:hover{
         color:#a20808;
         color:var(--iui-color-foreground-negative-overlay); }
-    .iui-toast.iui-negative > .iui-anchor:focus,
-    .iui-toast.iui-negative > .iui-button:focus{
-      outline:0;
-      box-shadow:rgba(211, 10, 10, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-negative-box-shadow); }
-    .iui-toast.iui-negative > .iui-anchor:focus:not(:focus-visible),
-    .iui-toast.iui-negative > .iui-button:focus:not(:focus-visible){
-      box-shadow:none; }
-    .iui-toast.iui-negative > .iui-anchor:focus-visible,
-    .iui-toast.iui-negative > .iui-button:focus-visible{
-      outline:0;
-      box-shadow:rgba(211, 10, 10, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-negative-box-shadow); }
+    .iui-toast.iui-negative > .iui-anchor{
+      outline-color:var(--iui-color-foreground-negative); }
+    .iui-toast.iui-negative > .iui-button{
+      outline-color:var(--iui-color-foreground-negative); }
   .iui-toast.iui-warning{
     border-color:#F18B12;
     border-color:var(--iui-color-foreground-warning); }
@@ -224,16 +196,7 @@
       .iui-toast.iui-warning > .iui-anchor:hover{
         color:#c4700c;
         color:var(--iui-color-foreground-warning-overlay); }
-    .iui-toast.iui-warning > .iui-anchor:focus,
-    .iui-toast.iui-warning > .iui-button:focus{
-      outline:0;
-      box-shadow:rgba(241, 139, 18, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-warning-box-shadow); }
-    .iui-toast.iui-warning > .iui-anchor:focus:not(:focus-visible),
-    .iui-toast.iui-warning > .iui-button:focus:not(:focus-visible){
-      box-shadow:none; }
-    .iui-toast.iui-warning > .iui-anchor:focus-visible,
-    .iui-toast.iui-warning > .iui-button:focus-visible{
-      outline:0;
-      box-shadow:rgba(241, 139, 18, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-warning-box-shadow); }
+    .iui-toast.iui-warning > .iui-anchor{
+      outline-color:var(--iui-color-foreground-warning); }
+    .iui-toast.iui-warning > .iui-button{
+      outline-color:var(--iui-color-foreground-warning); }

package/css/toggle-switch.css

@@ -90,10 +90,10 @@
         background-color:var(--iui-color-foreground-accessory);
         opacity:var(--iui-opacity-2);
         right:2px; }
-    .iui-toggle-switch > input:checked:hover:not(:disabled) ~ .iui-toggle, .iui-toggle-switch > input:checked:focus ~ .iui-toggle{
+    .iui-toggle-switch > input:checked:hover:not(:disabled) ~ .iui-toggle{
       border-color:#008BE1;
       border-color:var(--iui-color-background-primary); }
-      .iui-toggle-switch > input:checked:hover:not(:disabled) ~ .iui-toggle > .iui-handle, .iui-toggle-switch > input:checked:focus ~ .iui-toggle > .iui-handle{
+      .iui-toggle-switch > input:checked:hover:not(:disabled) ~ .iui-toggle > .iui-handle{
         opacity:1;
         opacity:var(--iui-opacity-1); }
     .iui-toggle-switch > input:disabled ~ .iui-toggle{
@@ -119,8 +119,11 @@
       opacity:0.2;
       opacity:var(--iui-opacity-5); }
     .iui-toggle-switch > input:enabled:focus ~ .iui-toggle{
-      box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-box-shadow); }
+      outline:1px solid #008BE1;
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:1px; }
+    .iui-toggle-switch > input:enabled:focus:not(:focus-visible) ~ .iui-toggle{
+      outline:none; }
   .iui-toggle-switch.iui-disabled{
     cursor:not-allowed; }
   .iui-toggle-switch > .iui-label{

package/css/tree.css

@@ -72,13 +72,13 @@
       font-size:12px;
       color:rgba(0, 0, 0, 0.4);
       color:var(--iui-text-color-muted); }
-  .iui-tree-node:focus{
-    outline:thin solid rgba(0, 139, 225, 0.4);
-    outline-offset:-1px;
-    outline:thin solid rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
+  .iui-tree-node:focus-visible{
+    outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:-1px; }
-  .iui-tree-node:focus:not(:focus-visible){
-    outline-offset:-2px; }
+  @supports not selector(*:focus-visible){
+    .iui-tree-node:focus{
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:-1px; } }
   .iui-tree-node:hover{
     background-color:rgba(0, 139, 225, 0.1);
     background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
@@ -93,9 +93,13 @@
     background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
     outline:thin solid var(--iui-color-foreground-primary);
     outline-offset:-1px; }
-    .iui-tree-node.iui-active:focus{
-      outline-width:2px;
+    .iui-tree-node.iui-active:focus-visible{
+      outline:2px solid var(--iui-color-foreground-primary);
       outline-offset:-2px; }
+    @supports not selector(*:focus-visible){
+      .iui-tree-node.iui-active:focus{
+        outline:2px solid var(--iui-color-foreground-primary);
+        outline-offset:-2px; } }
   .iui-tree-node.iui-disabled{
     cursor:not-allowed;
     outline:none;

package/css/wizard.css

@@ -136,11 +136,11 @@
   .iui-wizard-step.iui-clickable:focus{
     outline:0; }
     .iui-wizard-step.iui-clickable:focus .iui-wizard-circle{
-      outline:0;
-      box-shadow:rgba(83, 162, 26, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-positive-box-shadow); }
+      outline:2px solid #53A21A;
+      outline:2px solid var(--iui-color-foreground-positive);
+      outline-offset:-1px; }
   .iui-wizard-step.iui-clickable:focus:not(:focus-visible) .iui-wizard-circle{
-    box-shadow:none; }
+    outline:none; }
   .iui-wizard-step:first-of-type .iui-wizard-track-content::before,
   .iui-wizard-step:last-of-type .iui-wizard-track-content::after{
     background-color:transparent; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.43.0",
+  "version": "0.45.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -49,7 +49,7 @@
     "createComponent": "node ./scripts/createComponent.js",
     "postcss-processing": "postcss lib/css -d lib/css --no-map && yarn print \"Finished post-processing CSS.\"",
     "clean": "rimraf ./lib ./backstop/results/bitmaps_test",
-    "lint": "stylelint \"src/**/*.scss\" \"backstop/tests/*.html\"",
+    "lint": "stylelint \"src/**/*.scss\"",
     "lint:copyright": "node scripts/copyrightLinter.js",
     "approve": "backstop --config=./backstop/backstop.js approve",
     "test": "yarn build && yarn test:ci",
@@ -60,8 +60,8 @@
   },
   "devDependencies": {
     "audit-ci": "^4.0.0",
-    "autoprefixer": "^10.2.4",
-    "backstopjs": "~5.1.0",
+    "autoprefixer": "^10.4.1",
+    "backstopjs": "~6.0.4",
     "chokidar-cli": "^2.1.0",
     "concurrently": "^6.0.0",
     "cpx": "^1.5.0",
@@ -69,13 +69,13 @@
     "husky": "=4",
     "lint-staged": "^11.2.6",
     "node-sass": "^5.0.0",
-    "postcss": "^8.2.15",
+    "postcss": "^8.4.5",
     "postcss-cli": "^8.3.1",
-    "postcss-discard-comments": "^4.0.2",
+    "postcss-discard-comments": "^5.0.1",
     "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
-    "stylelint": "^13.10.0",
-    "stylelint-config-sass-guidelines": "^8.0.0"
+    "stylelint": "^14.2.0",
+    "stylelint-config-sass-guidelines": "^9.0.1"
   },
   "resolutions": {
     "braces": "^2.3.1",
@@ -85,6 +85,7 @@
     "glob-parent": "^5.1.2",
     "jpeg-js": "^0.4.3",
     "set-value": "^4.1.0",
-    "ansi-regex": "^5.0.1"
+    "ansi-regex": "^5.0.1",
+    "node-fetch": "^2.6.7"
   }
 }

package/scss/alert/alert.scss

@@ -87,6 +87,7 @@
   }
 
   #{$rootSelector}-link {
+    border-radius: $iui-border-radius;
     @include themed {
       color: t(iui-color-foreground-#{$statusColor});
     }
@@ -96,10 +97,11 @@
         color: t(iui-color-foreground-#{$statusColor}-overlay);
       }
     }
+
+    @include iui-focus($color: var(--iui-color-foreground-#{$statusColor}), $offset: 2px);
   }
 
-  #{$rootSelector}-link,
   > .iui-button {
-    @include iui-focus(if($statusColor == primary, iui-focus-box-shadow, iui-focus-#{$statusColor}-box-shadow));
+    outline-color: var(--iui-color-foreground-#{$statusColor});
   }
 }

package/scss/button/borderless.scss

@@ -6,19 +6,20 @@
 @import './button-icon';
 
 @mixin iui-button-borderless {
-  @include iui-button-borderless-base;
-  @include iui-button-size(medium, borderless);
-
-  &:focus {
-    @include iui-button-borderless-hover-focus;
+  border-color: transparent;
+  background-color: transparent;
 
-    &:where(:not(:focus-visible)) {
-      @include iui-button-borderless-base;
-    }
+  > .iui-button-icon:only-child {
+    margin-left: $iui-component-offset;
+    margin-right: $iui-component-offset;
   }
+  @include iui-button-size(medium, borderless);
 
   &:hover {
-    @include iui-button-borderless-hover-focus;
+    @include themed {
+      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
+      border-color: transparent;
+    }
   }
 
   &.iui-active {
@@ -45,20 +46,3 @@
     }
   }
 }
-
-@mixin iui-button-borderless-hover-focus {
-  @include themed {
-    background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-    border-color: transparent;
-  }
-}
-
-@mixin iui-button-borderless-base {
-  border-color: transparent;
-  background-color: transparent;
-
-  > .iui-button-icon:only-child {
-    margin-left: $iui-component-offset;
-    margin-right: $iui-component-offset;
-  }
-}

package/scss/button/button-group.scss

@@ -84,8 +84,8 @@
     }
 
     // Use negative margin to make adjacent borders overlap
-    &:not(:last-child) {
-      margin-right: -1px;
+    + * {
+      margin-left: -1px;
     }
 
     // Add slight border between disabled items

package/scss/button/cta.scss

@@ -6,19 +6,20 @@
 @import './disabled';
 
 @mixin iui-button-cta {
-  @include iui-button-cta-base;
-
-  &:focus {
-    @include iui-button-cta-hover-focus;
-
-    &:where(:not(:focus-visible)) {
-      @include iui-button-cta-base;
-    }
+  @include themed {
+    background-color: t(iui-color-background-positive);
+    border-color: t(iui-color-background-positive);
+    color: t(iui-color-foreground-accessory);
   }
+  @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px, $thickness: 1px);
 
   &:hover,
   &:active {
-    @include iui-button-cta-hover-focus;
+    @include themed {
+      background-color: t(iui-color-background-positive-overlay);
+      border-color: t(iui-color-background-positive-overlay);
+      color: t(iui-color-foreground-accessory);
+    }
   }
 
   &[disabled],
@@ -26,19 +27,3 @@
     @include iui-button-disabled;
   }
 }
-
-@mixin iui-button-cta-hover-focus {
-  @include themed {
-    background-color: t(iui-color-background-positive-overlay);
-    border-color: t(iui-color-background-positive-overlay);
-    color: t(iui-color-foreground-accessory);
-  }
-}
-
-@mixin iui-button-cta-base {
-  @include themed {
-    background-color: t(iui-color-background-positive);
-    border-color: t(iui-color-background-positive);
-    color: t(iui-color-foreground-accessory);
-  }
-}

package/scss/button/default.scss

@@ -7,19 +7,21 @@
 @import './disabled';
 
 @mixin iui-button-default {
-  @include iui-button-default-base;
-
-  &:focus {
-    @include iui-button-default-hover-focus;
-
-    &:where(:not(:focus-visible)) {
-      @include iui-button-default-base;
-    }
+  @include themed {
+    background-color: t(iui-color-background-1);
+    border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
   }
+  @include iui-focus($offset: -2px, $thickness: 2px);
 
   &:hover,
   &:active {
-    @include iui-button-default-hover-focus;
+    @include themed {
+      background-color: t(iui-color-background-1-overlay);
+      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
+      color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
+    }
+    @include iui-notification-marker-hover;
   }
 
   &.iui-dropdown {
@@ -35,15 +37,20 @@
     }
   }
 
-  &.iui-active {
+  &.iui-active:enabled {
+    position: relative;
     @include themed {
-      background: linear-gradient(
-        rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
-        rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))
-      ),
-        linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
       color: t(iui-color-foreground-primary);
     }
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
+      }
+    }
   }
 
   &[disabled],
@@ -51,20 +58,3 @@
     @include iui-button-disabled;
   }
 }
-
-@mixin iui-button-default-hover-focus {
-  @include themed {
-    background-color: t(iui-color-background-1-overlay);
-    border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
-    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
-  }
-  @include iui-notification-marker-hover;
-}
-
-@mixin iui-button-default-base {
-  @include themed {
-    background-color: t(iui-color-background-1);
-    border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-  }
-}

package/scss/button/high-visibility.scss

@@ -6,19 +6,20 @@
 @import './button-icon';
 
 @mixin iui-button-high-visibility {
-  @include iui-button-high-visibility-base;
-
-  &:focus {
-    @include iui-button-high-visibility-hover-focus;
-
-    &:where(:not(:focus-visible)) {
-      @include iui-button-high-visibility-base;
-    }
+  @include themed {
+    background-color: t(iui-color-background-primary);
+    border-color: t(iui-color-background-primary);
+    color: t(iui-color-foreground-accessory);
   }
+  @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px, $thickness: 1px);
 
   &:hover,
   &:active {
-    @include iui-button-high-visibility-hover-focus;
+    @include themed {
+      background-color: t(iui-color-background-primary-overlay);
+      border-color: t(iui-color-background-primary-overlay);
+      color: t(iui-color-foreground-accessory);
+    }
   }
 
   &[disabled],
@@ -26,19 +27,3 @@
     @include iui-button-disabled;
   }
 }
-
-@mixin iui-button-high-visibility-hover-focus {
-  @include themed {
-    background-color: t(iui-color-background-primary-overlay);
-    border-color: t(iui-color-background-primary-overlay);
-    color: t(iui-color-foreground-accessory);
-  }
-}
-
-@mixin iui-button-high-visibility-base {
-  @include themed {
-    background-color: t(iui-color-background-primary);
-    border-color: t(iui-color-background-primary);
-    color: t(iui-color-foreground-accessory);
-  }
-}

package/scss/carousel/carousel.scss

@@ -0,0 +1,119 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import '../style/index';
+@import '../text/index';
+@import '../button/button';
+
+@mixin iui-carousel {
+  overflow: hidden;
+  @include iui-focus($offset: 4px);
+  border-radius: $iui-border-radius;
+}
+
+@mixin iui-carousel-slider {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform $iui-speed-slow ease-in-out;
+  }
+
+  &-item {
+    width: 100%;
+    flex-shrink: 0;
+    box-sizing: border-box;
+  }
+}
+
+@mixin iui-carousel-navigation {
+  display: flex;
+  align-items: center;
+  height: $iui-baseline * 3;
+  box-sizing: border-box;
+  @include themed {
+    border-top: $iui-xxs solid t(iui-color-background-4);
+  }
+
+  &-dots,
+  &-left,
+  &-right {
+    display: flex;
+    align-items: center;
+    flex: 1;
+
+    button[data-pressed='true'] {
+      outline-offset: -1px;
+      @include themed {
+        outline: 1px solid t(iui-color-foreground-primary);
+      }
+    }
+  }
+
+  &-dots {
+    @include iui-reset;
+    @include iui-focus;
+    border-radius: $iui-border-radius;
+    white-space: nowrap;
+    overflow: hidden;
+    justify-content: center;
+    list-style: none;
+  }
+
+  &-dot {
+    @include iui-button-size($size: small);
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+
+    &:hover::after {
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
+      }
+    }
+
+    &.iui-invisible {
+      display: none;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      width: $iui-icons-small;
+      height: $iui-icons-small;
+      border-radius: 50%;
+      transition: background-color $iui-speed-fast ease;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: background-color $iui-speed-fast $iui-speed-fast ease, transform $iui-speed ease;
+      }
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+      }
+    }
+
+    &.iui-first::after {
+      transform: scale(0.5);
+    }
+
+    &.iui-second::after {
+      transform: scale(0.75);
+    }
+
+    &.iui-invisible::after {
+      transform: scale(0);
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-body-rgb), 0);
+      }
+    }
+
+    &.iui-active::after {
+      @include themed {
+        background-color: t(iui-color-foreground-primary);
+      }
+    }
+  }
+
+  &-right {
+    justify-content: flex-end;
+  }
+}