@itwin/itwinui-css 0.63.1 → 0.63.2-dev.1

package/css/tile.css

@@ -2,595 +2,597 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-tile{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  --iui-surface-background-color:var(--iui-color-background-1);
-  --iui-surface-border-radius:0;
-  --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
-  background-color:var(--iui-surface-background-color);
-  border-radius:var(--iui-surface-border-radius);
-  box-shadow:var(--iui-surface-elevation);
-  box-sizing:border-box;
-  color:var(--iui-text-color);
-  display:inline-flex;
-  flex-direction:column;
-  width:288px;
-  -webkit-backface-visibility:hidden;
-          backface-visibility:hidden;
-}
-@media (forced-colors: active){
+@layer itwinui-v1{
   .iui-tile{
-    border:1px solid transparent;
-  }
-}
-.iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
-  -webkit-clip-path:revert;
-          clip-path:revert;
-  overflow:visible;
-  position:static;
-  white-space:normal;
-  height:auto;
-  width:auto;
-  padding:0;
-  margin:0;
-  position:absolute;
-}
-.iui-tile:hover .iui-tile-metadata:not(:last-child), .iui-tile:focus-within .iui-tile-metadata:not(:last-child){
-  width:calc(100% - 32px);
-}
-.iui-tile.iui-new .iui-tile-name,
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    --iui-surface-background-color:var(--iui-color-background-1);
+    --iui-surface-border-radius:0;
+    --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
+    background-color:var(--iui-surface-background-color);
+    border-radius:var(--iui-surface-border-radius);
+    box-shadow:var(--iui-surface-elevation);
+    box-sizing:border-box;
+    color:var(--iui-text-color);
+    display:inline-flex;
+    flex-direction:column;
+    width:288px;
+    -webkit-backface-visibility:hidden;
+            backface-visibility:hidden;
+  }
+  @media (forced-colors: active){
+    .iui-tile{
+      border:1px solid transparent;
+    }
+  }
+  .iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
+    -webkit-clip-path:revert;
+            clip-path:revert;
+    overflow:visible;
+    position:static;
+    white-space:normal;
+    height:auto;
+    width:auto;
+    padding:0;
+    margin:0;
+    position:absolute;
+  }
+  .iui-tile:hover .iui-tile-metadata:not(:last-child), .iui-tile:focus-within .iui-tile-metadata:not(:last-child){
+    width:calc(100% - 32px);
+  }
+  .iui-tile.iui-new .iui-tile-name,
 .iui-tile.iui-new .iui-tile-description{
-  font-weight:600;
-}
-.iui-tile.iui-selected{
-  outline:solid 2px #008ae0;
-  background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
-  outline:solid 2px var(--iui-color-foreground-primary);
-  background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
-}
-.iui-tile.iui-selected:focus-visible{
-  outline:4px solid var(--iui-color-foreground-primary);
-  outline-offset:0;
-}
-@supports not selector(*:focus-visible){
-  .iui-tile.iui-selected:focus{
+    font-weight:600;
+  }
+  .iui-tile.iui-selected{
+    outline:solid 2px #008ae0;
+    background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
+    outline:solid 2px var(--iui-color-foreground-primary);
+    background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
+  }
+  .iui-tile.iui-selected:focus-visible{
     outline:4px solid var(--iui-color-foreground-primary);
     outline-offset:0;
   }
-}
-.iui-tile.iui-actionable{
-  cursor:pointer;
-  transition:box-shadow 0.2s ease-in-out;
-}
-.iui-tile.iui-actionable:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
-  outline-offset:2px;
-}
-@supports not selector(*:focus-visible){
-  .iui-tile.iui-actionable:focus{
+  @supports not selector(*:focus-visible){
+    .iui-tile.iui-selected:focus{
+      outline:4px solid var(--iui-color-foreground-primary);
+      outline-offset:0;
+    }
+  }
+  .iui-tile.iui-actionable{
+    cursor:pointer;
+    transition:box-shadow 0.2s ease-in-out;
+  }
+  .iui-tile.iui-actionable:focus-visible{
     outline:2px solid var(--iui-color-foreground-primary);
     outline-offset:2px;
   }
-}
-.iui-tile.iui-actionable:hover{
-  box-shadow:0 3px 14px rgba(0, 0, 0, 0.25);
-}
-.iui-tile.iui-actionable:hover .iui-tile-thumbnail-picture, .iui-tile.iui-actionable:focus-within .iui-tile-thumbnail-picture, .iui-tile.iui-actionable.iui-selected .iui-tile-thumbnail-picture{
-  transform:translateZ(0) scale(1.1);
-}
-.iui-tile.iui-folder{
-  display:inline-flex;
-  flex-direction:row;
-  flex-wrap:nowrap;
-}
-.iui-tile.iui-folder .iui-tile-thumbnail{
-  height:110px;
-  flex:1;
-  border-bottom:none;
-  border-right:1px solid #c7ccd1;
-  border-right:1px solid var(--iui-color-background-border);
-}
-.iui-tile.iui-folder .iui-tile-content{
-  flex:2;
-}
-.iui-tile.iui-folder .iui-tile-description{
-  height:100%;
-  max-height:44px;
-  margin-bottom:0;
-  -webkit-line-clamp:2;
-}
-.iui-tile.iui-progress{
-  cursor:progress;
-  font-style:italic;
-}
-.iui-tile[aria-disabled=true]{
-  cursor:not-allowed;
-}
-.iui-tile[aria-disabled=true] .iui-tile-name-label{
-  color:var(--iui-text-color-muted);
-}
-.iui-tile[aria-disabled=true] .iui-thumbnail-icon,
+  @supports not selector(*:focus-visible){
+    .iui-tile.iui-actionable:focus{
+      outline:2px solid var(--iui-color-foreground-primary);
+      outline-offset:2px;
+    }
+  }
+  .iui-tile.iui-actionable:hover{
+    box-shadow:0 3px 14px rgba(0, 0, 0, 0.25);
+  }
+  .iui-tile.iui-actionable:hover .iui-tile-thumbnail-picture, .iui-tile.iui-actionable:focus-within .iui-tile-thumbnail-picture, .iui-tile.iui-actionable.iui-selected .iui-tile-thumbnail-picture{
+    transform:translateZ(0) scale(1.1);
+  }
+  .iui-tile.iui-folder{
+    display:inline-flex;
+    flex-direction:row;
+    flex-wrap:nowrap;
+  }
+  .iui-tile.iui-folder .iui-tile-thumbnail{
+    height:110px;
+    flex:1;
+    border-bottom:none;
+    border-right:1px solid #c7ccd1;
+    border-right:1px solid var(--iui-color-background-border);
+  }
+  .iui-tile.iui-folder .iui-tile-content{
+    flex:2;
+  }
+  .iui-tile.iui-folder .iui-tile-description{
+    height:100%;
+    max-height:44px;
+    margin-bottom:0;
+    -webkit-line-clamp:2;
+  }
+  .iui-tile.iui-progress{
+    cursor:progress;
+    font-style:italic;
+  }
+  .iui-tile[aria-disabled=true]{
+    cursor:not-allowed;
+  }
+  .iui-tile[aria-disabled=true] .iui-tile-name-label{
+    color:var(--iui-text-color-muted);
+  }
+  .iui-tile[aria-disabled=true] .iui-thumbnail-icon,
 .iui-tile[aria-disabled=true] .iui-tile-thumbnail-picture{
-  filter:grayscale(100%);
-}
-.iui-tile[aria-disabled=true]:hover .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:focus-within .iui-tile-thumbnail-picture{
-  transform:none;
-}
-.iui-tile[aria-disabled=true] .iui-tile-more-options{
-  display:none;
-}
-.iui-tile.iui-positive::-moz-selection, .iui-tile.iui-positive *::-moz-selection{
-  background-color:rgba(83, 162, 26, 0.2);
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
-}
-.iui-tile.iui-positive::selection,
+    filter:grayscale(100%);
+  }
+  .iui-tile[aria-disabled=true]:hover .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:focus-within .iui-tile-thumbnail-picture{
+    transform:none;
+  }
+  .iui-tile[aria-disabled=true] .iui-tile-more-options{
+    display:none;
+  }
+  .iui-tile.iui-positive::-moz-selection, .iui-tile.iui-positive *::-moz-selection{
+    background-color:rgba(83, 162, 26, 0.2);
+    background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  }
+  .iui-tile.iui-positive::selection,
 .iui-tile.iui-positive *::selection{
-  background-color:rgba(83, 162, 26, 0.2);
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
-}
-.iui-tile.iui-positive .iui-tile-thumbnail{
-  box-shadow:0 4px 0 var(--iui-color-foreground-positive);
-}
-.iui-tile.iui-positive.iui-folder .iui-tile-thumbnail{
-  box-shadow:4px 0 0 var(--iui-color-foreground-positive);
-}
+    background-color:rgba(83, 162, 26, 0.2);
+    background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  }
+  .iui-tile.iui-positive .iui-tile-thumbnail{
+    box-shadow:0 4px 0 var(--iui-color-foreground-positive);
+  }
+  .iui-tile.iui-positive.iui-folder .iui-tile-thumbnail{
+    box-shadow:4px 0 0 var(--iui-color-foreground-positive);
+  }
 
-.iui-tile.iui-positive .iui-tile-name-label{
-  color:var(--iui-color-foreground-positive);
-}
-.iui-tile.iui-positive .iui-tile-status-icon{
-  fill:var(--iui-color-foreground-positive);
-}
-.iui-tile.iui-warning::-moz-selection, .iui-tile.iui-warning *::-moz-selection{
-  background-color:rgba(241, 141, 19, 0.2);
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
-}
-.iui-tile.iui-warning::selection,
+  .iui-tile.iui-positive .iui-tile-name-label{
+    color:var(--iui-color-foreground-positive);
+  }
+  .iui-tile.iui-positive .iui-tile-status-icon{
+    fill:var(--iui-color-foreground-positive);
+  }
+  .iui-tile.iui-warning::-moz-selection, .iui-tile.iui-warning *::-moz-selection{
+    background-color:rgba(241, 141, 19, 0.2);
+    background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  }
+  .iui-tile.iui-warning::selection,
 .iui-tile.iui-warning *::selection{
-  background-color:rgba(241, 141, 19, 0.2);
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
-}
-.iui-tile.iui-warning .iui-tile-thumbnail{
-  box-shadow:0 4px 0 var(--iui-color-foreground-warning);
-}
-.iui-tile.iui-warning.iui-folder .iui-tile-thumbnail{
-  box-shadow:4px 0 0 var(--iui-color-foreground-warning);
-}
+    background-color:rgba(241, 141, 19, 0.2);
+    background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  }
+  .iui-tile.iui-warning .iui-tile-thumbnail{
+    box-shadow:0 4px 0 var(--iui-color-foreground-warning);
+  }
+  .iui-tile.iui-warning.iui-folder .iui-tile-thumbnail{
+    box-shadow:4px 0 0 var(--iui-color-foreground-warning);
+  }
 
-.iui-tile.iui-warning .iui-tile-name-label{
-  color:var(--iui-color-foreground-warning);
-}
-.iui-tile.iui-warning .iui-tile-status-icon{
-  fill:var(--iui-color-foreground-warning);
-}
-.iui-tile.iui-negative::-moz-selection, .iui-tile.iui-negative *::-moz-selection{
-  background-color:rgba(209, 10, 10, 0.2);
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
-}
-.iui-tile.iui-negative::selection,
+  .iui-tile.iui-warning .iui-tile-name-label{
+    color:var(--iui-color-foreground-warning);
+  }
+  .iui-tile.iui-warning .iui-tile-status-icon{
+    fill:var(--iui-color-foreground-warning);
+  }
+  .iui-tile.iui-negative::-moz-selection, .iui-tile.iui-negative *::-moz-selection{
+    background-color:rgba(209, 10, 10, 0.2);
+    background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  }
+  .iui-tile.iui-negative::selection,
 .iui-tile.iui-negative *::selection{
-  background-color:rgba(209, 10, 10, 0.2);
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
-}
-.iui-tile.iui-negative .iui-tile-thumbnail{
-  box-shadow:0 4px 0 var(--iui-color-foreground-negative);
-}
-.iui-tile.iui-negative.iui-folder .iui-tile-thumbnail{
-  box-shadow:4px 0 0 var(--iui-color-foreground-negative);
-}
+    background-color:rgba(209, 10, 10, 0.2);
+    background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  }
+  .iui-tile.iui-negative .iui-tile-thumbnail{
+    box-shadow:0 4px 0 var(--iui-color-foreground-negative);
+  }
+  .iui-tile.iui-negative.iui-folder .iui-tile-thumbnail{
+    box-shadow:4px 0 0 var(--iui-color-foreground-negative);
+  }
 
-.iui-tile.iui-negative .iui-tile-name-label{
-  color:var(--iui-color-foreground-negative);
-}
-.iui-tile.iui-negative .iui-tile-status-icon{
-  fill:var(--iui-color-foreground-negative);
-}
+  .iui-tile.iui-negative .iui-tile-name-label{
+    color:var(--iui-color-foreground-negative);
+  }
+  .iui-tile.iui-negative .iui-tile-status-icon{
+    fill:var(--iui-color-foreground-negative);
+  }
 
-.iui-tile-thumbnail-type-indicator{
-  border-color:transparent;
-  background-color:transparent;
-  padding:0 8px;
-  height:38px;
-  gap:8px;
-  padding:0 2px;
-  height:27px;
-  gap:4px;
-  position:absolute;
-  border-radius:50%;
-  top:6px;
-  left:8px;
-}
-.iui-tile-thumbnail-type-indicator > .iui-button-icon:only-child{
-  margin-left:3px;
-  margin-right:3px;
-}
-.iui-tile-thumbnail-type-indicator:hover{
-  background-color:rgba(0, 0, 0, 0.1);
-  border-color:transparent;
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-  border-color:transparent;
-}
-.iui-tile-thumbnail-type-indicator.iui-active{
-  background-color:rgba(0, 138, 224, 0.1);
-  color:#008ae0;
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-  color:var(--iui-color-foreground-primary);
-  border-color:transparent;
-}
-.iui-tile-thumbnail-type-indicator[disabled], .iui-tile-thumbnail-type-indicator:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-  background-color:transparent;
-  border-color:transparent;
-  background-color:transparent;
-  border-color:transparent;
-}
-.iui-tile-thumbnail-type-indicator[disabled].iui-active, .iui-tile-thumbnail-type-indicator:disabled.iui-active{
-  background-color:rgba(0, 0, 0, 0.05);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
-}
+  .iui-tile-thumbnail-type-indicator{
+    border-color:transparent;
+    background-color:transparent;
+    padding:0 8px;
+    height:38px;
+    gap:8px;
+    padding:0 2px;
+    height:27px;
+    gap:4px;
+    position:absolute;
+    border-radius:50%;
+    top:6px;
+    left:8px;
+  }
+  .iui-tile-thumbnail-type-indicator > .iui-button-icon:only-child{
+    margin-left:3px;
+    margin-right:3px;
+  }
+  .iui-tile-thumbnail-type-indicator:hover{
+    background-color:rgba(0, 0, 0, 0.1);
+    border-color:transparent;
+    background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+    border-color:transparent;
+  }
+  .iui-tile-thumbnail-type-indicator.iui-active{
+    background-color:rgba(0, 138, 224, 0.1);
+    color:#008ae0;
+    background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+    color:var(--iui-color-foreground-primary);
+    border-color:transparent;
+  }
+  .iui-tile-thumbnail-type-indicator[disabled], .iui-tile-thumbnail-type-indicator:disabled{
+    cursor:not-allowed;
+    background:#edeff2;
+    border-color:#edeff2;
+    color:rgba(0, 0, 0, 0.2);
+    background:var(--iui-color-background-disabled);
+    border-color:var(--iui-color-background-disabled);
+    color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+    background-color:transparent;
+    border-color:transparent;
+    background-color:transparent;
+    border-color:transparent;
+  }
+  .iui-tile-thumbnail-type-indicator[disabled].iui-active, .iui-tile-thumbnail-type-indicator:disabled.iui-active{
+    background-color:rgba(0, 0, 0, 0.05);
+    background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
+  }
 
-.iui-tile-thumbnail-quick-action{
-  border-color:transparent;
-  background-color:transparent;
-  padding:0 8px;
-  height:38px;
-  gap:8px;
-  padding:0 2px;
-  height:27px;
-  gap:4px;
-  position:absolute;
-  border-radius:50%;
-  top:6px;
-  right:8px;
-}
-.iui-tile-thumbnail-quick-action > .iui-button-icon:only-child{
-  margin-left:3px;
-  margin-right:3px;
-}
-.iui-tile-thumbnail-quick-action:hover{
-  background-color:rgba(0, 0, 0, 0.1);
-  border-color:transparent;
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-  border-color:transparent;
-}
-.iui-tile-thumbnail-quick-action.iui-active{
-  background-color:rgba(0, 138, 224, 0.1);
-  color:#008ae0;
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-  color:var(--iui-color-foreground-primary);
-  border-color:transparent;
-}
-.iui-tile-thumbnail-quick-action[disabled], .iui-tile-thumbnail-quick-action:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-  background-color:transparent;
-  border-color:transparent;
-  background-color:transparent;
-  border-color:transparent;
-}
-.iui-tile-thumbnail-quick-action[disabled].iui-active, .iui-tile-thumbnail-quick-action:disabled.iui-active{
-  background-color:rgba(0, 0, 0, 0.05);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
-}
+  .iui-tile-thumbnail-quick-action{
+    border-color:transparent;
+    background-color:transparent;
+    padding:0 8px;
+    height:38px;
+    gap:8px;
+    padding:0 2px;
+    height:27px;
+    gap:4px;
+    position:absolute;
+    border-radius:50%;
+    top:6px;
+    right:8px;
+  }
+  .iui-tile-thumbnail-quick-action > .iui-button-icon:only-child{
+    margin-left:3px;
+    margin-right:3px;
+  }
+  .iui-tile-thumbnail-quick-action:hover{
+    background-color:rgba(0, 0, 0, 0.1);
+    border-color:transparent;
+    background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+    border-color:transparent;
+  }
+  .iui-tile-thumbnail-quick-action.iui-active{
+    background-color:rgba(0, 138, 224, 0.1);
+    color:#008ae0;
+    background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+    color:var(--iui-color-foreground-primary);
+    border-color:transparent;
+  }
+  .iui-tile-thumbnail-quick-action[disabled], .iui-tile-thumbnail-quick-action:disabled{
+    cursor:not-allowed;
+    background:#edeff2;
+    border-color:#edeff2;
+    color:rgba(0, 0, 0, 0.2);
+    background:var(--iui-color-background-disabled);
+    border-color:var(--iui-color-background-disabled);
+    color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+    background-color:transparent;
+    border-color:transparent;
+    background-color:transparent;
+    border-color:transparent;
+  }
+  .iui-tile-thumbnail-quick-action[disabled].iui-active, .iui-tile-thumbnail-quick-action:disabled.iui-active{
+    background-color:rgba(0, 0, 0, 0.05);
+    background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
+  }
 
-.iui-tile-thumbnail-badge-container{
-  position:absolute;
-  bottom:6px;
-  width:calc(100% - 2 * 12px);
-  height:auto;
-  right:12px;
-  display:flex;
-  justify-content:flex-end;
-  overflow:hidden;
-}
-.iui-tile-thumbnail-badge-container > .iui-badge:not(:last-child){
-  margin-right:4px;
-}
+  .iui-tile-thumbnail-badge-container{
+    position:absolute;
+    bottom:6px;
+    width:calc(100% - 2 * 12px);
+    height:auto;
+    right:12px;
+    display:flex;
+    justify-content:flex-end;
+    overflow:hidden;
+  }
+  .iui-tile-thumbnail-badge-container > .iui-badge:not(:last-child){
+    margin-right:4px;
+  }
 
-.iui-tile-buttons{
-  display:flex;
-  flex-shrink:0;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  white-space:nowrap;
-}
-.iui-tile-buttons > .iui-button{
-  font-size:14px;
-  flex:1;
-  height:auto;
-  padding:11px 12px;
-  overflow:hidden;
-  white-space:nowrap;
-  text-overflow:ellipsis;
-  text-align:center;
-  margin:0;
-  border:initial;
-  border-radius:0;
-}
-.iui-tile-buttons > .iui-button, .iui-tile-buttons > .iui-button:hover{
-  border-top:1px solid #c7ccd1;
-  border-color:#c7ccd1;
-  border-top:1px solid var(--iui-color-background-border);
-  border-color:var(--iui-color-background-border);
-}
-.iui-tile-buttons > button:not(:last-child){
-  border-right:1px solid #c7ccd1;
-  border-right:1px solid var(--iui-color-background-border);
-}
+  .iui-tile-buttons{
+    display:flex;
+    flex-shrink:0;
+    -webkit-user-select:none;
+       -moz-user-select:none;
+        -ms-user-select:none;
+            user-select:none;
+    white-space:nowrap;
+  }
+  .iui-tile-buttons > .iui-button{
+    font-size:14px;
+    flex:1;
+    height:auto;
+    padding:11px 12px;
+    overflow:hidden;
+    white-space:nowrap;
+    text-overflow:ellipsis;
+    text-align:center;
+    margin:0;
+    border:initial;
+    border-radius:0;
+  }
+  .iui-tile-buttons > .iui-button, .iui-tile-buttons > .iui-button:hover{
+    border-top:1px solid #c7ccd1;
+    border-color:#c7ccd1;
+    border-top:1px solid var(--iui-color-background-border);
+    border-color:var(--iui-color-background-border);
+  }
+  .iui-tile-buttons > button:not(:last-child){
+    border-right:1px solid #c7ccd1;
+    border-right:1px solid var(--iui-color-background-border);
+  }
 
-.iui-tile-thumbnail{
-  width:100%;
-  height:154px;
-  flex-shrink:0;
-  overflow:hidden;
-  position:relative;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  background-color:#f2f2f2;
-  border-bottom:1px solid #c7ccd1;
-  background-color:var(--iui-color-background-1-overlay);
-  border-bottom:1px solid var(--iui-color-background-border);
-}
-.iui-tile-thumbnail .iui-thumbnail-icon{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:64px;
-  height:64px;
-}
-@media (forced-colors: active){
+  .iui-tile-thumbnail{
+    width:100%;
+    height:154px;
+    flex-shrink:0;
+    overflow:hidden;
+    position:relative;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    background-color:#f2f2f2;
+    border-bottom:1px solid #c7ccd1;
+    background-color:var(--iui-color-background-1-overlay);
+    border-bottom:1px solid var(--iui-color-background-border);
+  }
   .iui-tile-thumbnail .iui-thumbnail-icon{
-    fill:CanvasText;
-  }
-}
-.iui-tile-thumbnail .iui-thumbnail-icon.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-tile-thumbnail .iui-thumbnail-icon.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-tile-thumbnail .iui-thumbnail-icon.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-tile-thumbnail .iui-thumbnail-icon.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
+    fill:rgba(0, 0, 0, 0.4);
+    fill:var(--iui-icons-color);
+    display:inline-flex;
+    width:64px;
+    height:64px;
+  }
+  @media (forced-colors: active){
+    .iui-tile-thumbnail .iui-thumbnail-icon{
+      fill:CanvasText;
+    }
+  }
+  .iui-tile-thumbnail .iui-thumbnail-icon.iui-informational{
+    fill:#008ae0;
+    fill:var(--iui-icons-color-primary);
+  }
+  .iui-tile-thumbnail .iui-thumbnail-icon.iui-positive{
+    fill:#53a21a;
+    fill:var(--iui-icons-color-positive);
+  }
+  .iui-tile-thumbnail .iui-thumbnail-icon.iui-warning{
+    fill:#f18d13;
+    fill:var(--iui-icons-color-warning);
+  }
+  .iui-tile-thumbnail .iui-thumbnail-icon.iui-negative{
+    fill:#d10a0a;
+    fill:var(--iui-icons-color-negative);
+  }
 
-.iui-tile-thumbnail-picture{
-  width:100%;
-  height:100%;
-  position:absolute;
-  top:0;
-  left:0;
-}
-@media (prefers-reduced-motion: no-preference){
   .iui-tile-thumbnail-picture{
-    transition:transform 0.4s ease;
+    width:100%;
+    height:100%;
+    position:absolute;
+    top:0;
+    left:0;
+  }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-tile-thumbnail-picture{
+      transition:transform 0.4s ease;
+    }
+  }
+  div.iui-tile-thumbnail-picture{
+    background-position:center;
+    background-size:cover;
   }
-}
-div.iui-tile-thumbnail-picture{
-  background-position:center;
-  background-size:cover;
-}
 
-.iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
-  z-index:1;
-  cursor:pointer;
-  fill:rgba(255, 255, 255, 0.6);
-  filter:drop-shadow(0 2px 1px rgba(0, 1, 5, 0.2));
-  fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-3));
-  filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
-}
-@media (prefers-reduced-motion: no-preference){
   .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
-    transition:fill 0.2s ease;
-  }
-}
-.iui-tile-thumbnail-picture ~ .iui-thumbnail-icon:hover{
-  fill:rgba(255, 255, 255, 0.8);
-  fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-2));
-}
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
-  background-color:rgba(0, 0, 0, 0.4);
-  background-color:rgba(0, 0, 0, var(--iui-opacity-4));
-}
-@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
+    z-index:1;
+    cursor:pointer;
+    fill:rgba(255, 255, 255, 0.6);
+    filter:drop-shadow(0 2px 1px rgba(0, 1, 5, 0.2));
+    fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-3));
+    filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
+  }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
+      transition:fill 0.2s ease;
+    }
+  }
+  .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon:hover{
+    fill:rgba(255, 255, 255, 0.8);
+    fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-2));
+  }
   .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
 .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
-    background-color:rgba(0, 0, 0, var(--iui-opacity-5));
-    -webkit-backdrop-filter:blur(5px);
-            backdrop-filter:blur(5px);
+    background-color:rgba(0, 0, 0, 0.4);
+    background-color:rgba(0, 0, 0, var(--iui-opacity-4));
   }
-}
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator > .iui-button-icon,
+  @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
+    .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
+.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
+      background-color:rgba(0, 0, 0, var(--iui-opacity-5));
+      -webkit-backdrop-filter:blur(5px);
+              backdrop-filter:blur(5px);
+    }
+  }
+  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator > .iui-button-icon,
 .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action > .iui-button-icon{
-  fill:white;
-  filter:drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
-  fill:var(--iui-color-foreground-accessory);
-  filter:drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5)));
-}
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:active,
+    fill:white;
+    filter:drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
+    fill:var(--iui-color-foreground-accessory);
+    filter:drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5)));
+  }
+  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:active,
 .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover,
 .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled,
 .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled:hover,
 .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:active{
-  background-color:rgba(0, 0, 0, 0.4);
-  background-color:rgba(0, 0, 0, var(--iui-opacity-4));
-}
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator:hover .iui-button-icon, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled .iui-button-icon, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled:hover .iui-button-icon, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:active .iui-button-icon,
+    background-color:rgba(0, 0, 0, 0.4);
+    background-color:rgba(0, 0, 0, var(--iui-opacity-4));
+  }
+  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator:hover .iui-button-icon, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled .iui-button-icon, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled:hover .iui-button-icon, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:active .iui-button-icon,
 .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover .iui-button-icon,
 .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled .iui-button-icon,
 .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled:hover .iui-button-icon,
 .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:active .iui-button-icon{
-  fill:white;
-  fill:var(--iui-color-foreground-accessory);
-}
+    fill:white;
+    fill:var(--iui-color-foreground-accessory);
+  }
 
-.iui-tile-content{
-  padding:11px 12px;
-  position:relative;
-  display:flex;
-  flex-direction:column;
-  flex-grow:2;
-  min-width:0;
-}
-.iui-tile-content .iui-tile-name{
-  display:flex;
-  flex-shrink:0;
-  align-items:center;
-  font-size:16px;
-  -webkit-user-select:all;
-     -moz-user-select:all;
-          user-select:all;
-  margin-bottom:5.5px;
-  color:rgba(0, 0, 0, 0.8);
-  color:var(--iui-text-color);
-}
-.iui-tile-content .iui-tile-status-icon{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:16px;
-  height:16px;
-  margin-right:8px;
-  flex-shrink:0;
-}
-@media (forced-colors: active){
+  .iui-tile-content{
+    padding:11px 12px;
+    position:relative;
+    display:flex;
+    flex-direction:column;
+    flex-grow:2;
+    min-width:0;
+  }
+  .iui-tile-content .iui-tile-name{
+    display:flex;
+    flex-shrink:0;
+    align-items:center;
+    font-size:16px;
+    -webkit-user-select:all;
+       -moz-user-select:all;
+            user-select:all;
+    margin-bottom:5.5px;
+    color:rgba(0, 0, 0, 0.8);
+    color:var(--iui-text-color);
+  }
   .iui-tile-content .iui-tile-status-icon{
-    fill:CanvasText;
-  }
-}
-.iui-tile-content .iui-tile-status-icon.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-tile-content .iui-tile-status-icon.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-tile-content .iui-tile-status-icon.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-tile-content .iui-tile-status-icon.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
-.iui-tile-content .iui-tile-name-label{
-  overflow:hidden;
-  white-space:nowrap;
-  text-overflow:ellipsis;
-}
-.iui-tile-content .iui-tile-description{
-  margin-bottom:11px;
-  font-size:14px;
-  height:100%;
-  max-height:66px;
-  overflow:hidden;
-  white-space:nowrap;
-  text-overflow:ellipsis;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
-}
-@supports (-webkit-line-clamp: 1){
+    fill:rgba(0, 0, 0, 0.4);
+    fill:var(--iui-icons-color);
+    display:inline-flex;
+    width:16px;
+    height:16px;
+    margin-right:8px;
+    flex-shrink:0;
+  }
+  @media (forced-colors: active){
+    .iui-tile-content .iui-tile-status-icon{
+      fill:CanvasText;
+    }
+  }
+  .iui-tile-content .iui-tile-status-icon.iui-informational{
+    fill:#008ae0;
+    fill:var(--iui-icons-color-primary);
+  }
+  .iui-tile-content .iui-tile-status-icon.iui-positive{
+    fill:#53a21a;
+    fill:var(--iui-icons-color-positive);
+  }
+  .iui-tile-content .iui-tile-status-icon.iui-warning{
+    fill:#f18d13;
+    fill:var(--iui-icons-color-warning);
+  }
+  .iui-tile-content .iui-tile-status-icon.iui-negative{
+    fill:#d10a0a;
+    fill:var(--iui-icons-color-negative);
+  }
+  .iui-tile-content .iui-tile-name-label{
+    overflow:hidden;
+    white-space:nowrap;
+    text-overflow:ellipsis;
+  }
   .iui-tile-content .iui-tile-description{
-    white-space:unset;
-    display:-webkit-box;
-    -webkit-line-clamp:3;
-    -webkit-box-orient:vertical;
-  }
-}
-.iui-tile-content .iui-tile-metadata{
-  font-size:12px;
-  flex-shrink:0;
-  overflow:hidden;
-  text-overflow:ellipsis;
-  height:22px;
-  width:100%;
-  display:flex;
-  align-items:center;
-  margin-top:auto;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
-}
-.iui-tile-content .iui-tile-metadata > svg,
-.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:16px;
-  height:16px;
-  margin-right:8px;
-  flex-shrink:0;
-}
-@media (forced-colors: active){
+    margin-bottom:11px;
+    font-size:14px;
+    height:100%;
+    max-height:66px;
+    overflow:hidden;
+    white-space:nowrap;
+    text-overflow:ellipsis;
+    color:rgba(0, 0, 0, 0.4);
+    color:var(--iui-text-color-muted);
+  }
+  @supports (-webkit-line-clamp: 1){
+    .iui-tile-content .iui-tile-description{
+      white-space:unset;
+      display:-webkit-box;
+      -webkit-line-clamp:3;
+      -webkit-box-orient:vertical;
+    }
+  }
+  .iui-tile-content .iui-tile-metadata{
+    font-size:12px;
+    flex-shrink:0;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    height:22px;
+    width:100%;
+    display:flex;
+    align-items:center;
+    margin-top:auto;
+    color:rgba(0, 0, 0, 0.4);
+    color:var(--iui-text-color-muted);
+  }
   .iui-tile-content .iui-tile-metadata > svg,
 .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
-    fill:CanvasText;
+    fill:rgba(0, 0, 0, 0.4);
+    fill:var(--iui-icons-color);
+    display:inline-flex;
+    width:16px;
+    height:16px;
+    margin-right:8px;
+    flex-shrink:0;
   }
-}
-.iui-tile-content .iui-tile-metadata > svg.iui-informational,
+  @media (forced-colors: active){
+    .iui-tile-content .iui-tile-metadata > svg,
+.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
+      fill:CanvasText;
+    }
+  }
+  .iui-tile-content .iui-tile-metadata > svg.iui-informational,
 .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-tile-content .iui-tile-metadata > svg.iui-positive,
+    fill:#008ae0;
+    fill:var(--iui-icons-color-primary);
+  }
+  .iui-tile-content .iui-tile-metadata > svg.iui-positive,
 .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-tile-content .iui-tile-metadata > svg.iui-warning,
+    fill:#53a21a;
+    fill:var(--iui-icons-color-positive);
+  }
+  .iui-tile-content .iui-tile-metadata > svg.iui-warning,
 .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-tile-content .iui-tile-metadata > svg.iui-negative,
+    fill:#f18d13;
+    fill:var(--iui-icons-color-warning);
+  }
+  .iui-tile-content .iui-tile-metadata > svg.iui-negative,
 .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
-.iui-tile-content .iui-tile-metadata > *{
-  white-space:nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
-}
+    fill:#d10a0a;
+    fill:var(--iui-icons-color-negative);
+  }
+  .iui-tile-content .iui-tile-metadata > *{
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+  }
 
-.iui-tile-more-options{
-  position:absolute;
-  bottom:5.5px;
-  right:8px;
-}
-.iui-tile-more-options:not(.iui-visible){
-  -webkit-clip-path:inset(50%);
-          clip-path:inset(50%);
-  overflow:hidden;
-  position:absolute;
-  white-space:nowrap;
-  height:1px;
-  width:1px;
-  padding:0;
-  margin:-1px;
-  border-width:0;
+  .iui-tile-more-options{
+    position:absolute;
+    bottom:5.5px;
+    right:8px;
+  }
+  .iui-tile-more-options:not(.iui-visible){
+    -webkit-clip-path:inset(50%);
+            clip-path:inset(50%);
+    overflow:hidden;
+    position:absolute;
+    white-space:nowrap;
+    height:1px;
+    width:1px;
+    padding:0;
+    margin:-1px;
+    border-width:0;
+  }
 }