@itwin/itwinui-css 1.0.0-dev.8 → 1.0.0

package/css/utils.css

@@ -2,682 +2,4 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-[data-iui-icon-size=s]{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-s);
-  height:var(--iui-size-s);
-}
-
-[data-iui-icon-size=m]{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-m);
-  height:var(--iui-size-m);
-}
-
-[data-iui-icon-size=l]{
-  display:flex;
-  flex-shrink:0;
-  width:calc(1.5 * var(--iui-size-m));
-  height:calc(1.5 * var(--iui-size-m));
-}
-
-[data-iui-icon-size=xl]{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-xl);
-  height:var(--iui-size-xl);
-}
-
-[data-iui-icon-size="2xl"]{
-  display:flex;
-  flex-shrink:0;
-  width:calc(3 * var(--iui-size-m));
-  height:calc(3 * var(--iui-size-m));
-}
-
-[data-iui-icon-size="3xl"]{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-2xl);
-  height:var(--iui-size-2xl);
-}
-
-[data-iui-icon-color=default]{
-  fill:var(--iui-color-foreground-4);
-}
-@media (forced-colors: active){
-  [data-iui-icon-color=default]{
-    fill:CanvasText;
-  }
-}
-
-[data-iui-icon-color=informational]{
-  fill:var(--iui-color-foreground-primary);
-}
-
-[data-iui-icon-color=positive]{
-  fill:var(--iui-color-foreground-positive);
-}
-
-[data-iui-icon-color=warning]{
-  fill:var(--iui-color-foreground-warning);
-}
-
-[data-iui-icon-color=negative]{
-  fill:var(--iui-color-foreground-negative);
-}
-
-.iui-input-container{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:grid;
-  grid-template:"label label" "inputs inputs"/auto 1fr;
-  cursor:default;
-}
-.iui-input-container.iui-inline-icon > .iui-input{
-  padding-right:var(--iui-component-height);
-}
-.iui-input-container.iui-inline-icon > .iui-input:last-child{
-  padding-right:var(--iui-size-s);
-}
-.iui-input-container.iui-with-message{
-  grid-template:"label label" "inputs inputs" "icon message"/auto 1fr;
-}
-.iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
-  margin-top:var(--iui-size-2xs);
-}
-.iui-input-container .iui-input,
-.iui-input-container .iui-input-with-icon,
-.iui-input-container .iui-input-group{
-  grid-area:inputs;
-}
-.iui-input-container .iui-input-group .iui-toggle-switch-wrapper{
-  padding:calc(var(--iui-size-s) * 0.5) 0;
-}
-label.iui-input-container{
-  cursor:pointer;
-}
-label.iui-input-container.iui-disabled{
-  cursor:not-allowed;
-}
-
-.iui-input-container.iui-disabled label{
-  cursor:not-allowed;
-}
-.iui-input-container .iui-checkbox-wrapper,
-.iui-input-container .iui-radio-wrapper{
-  min-height:var(--iui-size-l);
-}
-.iui-input-container.iui-inline-label{
-  grid-template:"label inputs icon"/auto 1fr auto;
-}
-.iui-input-container.iui-inline-label.iui-with-message{
-  grid-template:"label inputs inputs" ". icon message"/auto auto 1fr;
-}
-.iui-input-container.iui-inline-label > .iui-input-group{
-  display:flex;
-  gap:var(--iui-size-m);
-}
-.iui-input-container.iui-inline-label > .iui-input-group:not(:last-child){
-  margin-right:var(--iui-size-m);
-}
-.iui-input-container > .iui-label{
-  font-weight:var(--iui-font-weight-semibold);
-  margin-bottom:var(--iui-size-2xs);
-  grid-area:label;
-  align-self:center;
-}
-.iui-input-container > .iui-label.iui-required::after{
-  content:"*";
-  margin-left:var(--iui-size-2xs);
-  color:var(--iui-color-foreground-negative);
-}
-.iui-input-container .iui-input-icon{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-m);
-  height:var(--iui-size-m);
-  fill:var(--iui-color-foreground-4);
-  grid-area:icon;
-  align-self:center;
-}
-@media (forced-colors: active){
-  .iui-input-container .iui-input-icon{
-    fill:CanvasText;
-  }
-}
-.iui-input-container .iui-input-icon:not(:last-child){
-  margin-right:var(--iui-size-2xs);
-}
-.iui-input-container .iui-message{
-  font-size:var(--iui-font-size-0);
-  grid-area:message;
-  margin-top:var(--iui-size-2xs);
-  color:var(--iui-color-foreground-4);
-}
-.iui-input-container .iui-message a{
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-}
-.iui-input-container.iui-inline-icon > .iui-input-icon{
-  grid-area:inputs;
-  justify-self:end;
-  margin:0 calc(var(--iui-size-xs) + 1px) 0 0;
-  position:relative;
-}
-.iui-input-container.iui-inline-icon > .iui-input-icon svg{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-m);
-  height:var(--iui-size-m);
-}
-.iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
-  height:100%;
-  width:-webkit-fit-content;
-  width:-moz-fit-content;
-  width:fit-content;
-  margin-right:0;
-  border-top-left-radius:0;
-  border-bottom-left-radius:0;
-  border-top-right-radius:inherit;
-  border-bottom-right-radius:inherit;
-}
-.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
-  align-items:center;
-  height:calc(100% - 4px);
-  margin-right:1px;
-  padding-inline:calc(var(--iui-size-xs) + 1px);
-  cursor:pointer;
-  box-sizing:content-box;
-  background-position:center;
-  transition:background var(--iui-duration-2) ease-out;
-}
-.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:hover{
-  background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
-}
-.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
-  background-color:var(--iui-color-background-2);
-  background-size:100%;
-  transition:background var(--iui-duration-0);
-}
-.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
-  fill:var(--iui-color-foreground-2);
-  transition:transform var(--iui-duration-1) ease-out;
-}
-.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
-  transform:rotate(180deg);
-}
-.iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled{
-  cursor:not-allowed;
-}
-.iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
-  fill:var(--iui-color-foreground-5);
-}
-.iui-input-container.iui-inline-label > .iui-label{
-  margin:0 var(--iui-size-m) 0 0;
-}
-.iui-input-container.iui-inline-label > .iui-label.iui-required{
-  margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
-}
-.iui-input-container.iui-positive::-moz-selection, .iui-input-container.iui-positive *::-moz-selection{
-  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
-}
-.iui-input-container.iui-positive::selection,
-.iui-input-container.iui-positive *::selection{
-  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
-}
-.iui-input-container.iui-positive .iui-input-icon{
-  fill:var(--iui-color-foreground-positive);
-}
-.iui-input-container.iui-positive .iui-message{
-  color:var(--iui-color-foreground-positive);
-}
-.iui-input-container.iui-positive .iui-message a{
-  text-decoration:underline;
-  color:var(--iui-color-foreground-positive);
-}
-.iui-input-container.iui-positive .iui-message a:hover{
-  text-decoration:none;
-  color:var(--iui-color-foreground-positive-hover);
-}
-.iui-input-container.iui-positive .iui-input{
-  padding-bottom:calc(var(--iui-size-2xs) - 1px);
-  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-positive);
-}
-.iui-input-container.iui-positive .iui-input[data-iui-size=small]{
-  padding-bottom:0;
-}
-.iui-input-container.iui-positive .iui-input[data-iui-size=large]{
-  padding-bottom:calc(var(--iui-size-xs) - 1px);
-}
-.iui-input-container.iui-positive .iui-input:focus{
-  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-positive);
-  outline:2px solid var(--iui-color-foreground-positive);
-  outline-offset:-2px;
-}
-.iui-input-container.iui-positive .iui-input-with-icon{
-  --_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-positive);
-  --_focus-color:var(--iui-color-foreground-positive);
-}
-.iui-input-container.iui-positive .iui-select-button{
-  border-bottom:transparent;
-}
-.iui-input-container.iui-positive .iui-select-button::after{
-  content:"";
-  width:100%;
-  position:absolute;
-  bottom:0;
-  left:0;
-  height:var(--iui-size-3xs);
-  background-color:var(--iui-color-foreground-positive);
-}
-.iui-input-container.iui-negative::-moz-selection, .iui-input-container.iui-negative *::-moz-selection{
-  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
-}
-.iui-input-container.iui-negative::selection,
-.iui-input-container.iui-negative *::selection{
-  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
-}
-.iui-input-container.iui-negative .iui-input-icon{
-  fill:var(--iui-color-foreground-negative);
-}
-.iui-input-container.iui-negative .iui-message{
-  color:var(--iui-color-foreground-negative);
-}
-.iui-input-container.iui-negative .iui-message a{
-  text-decoration:underline;
-  color:var(--iui-color-foreground-negative);
-}
-.iui-input-container.iui-negative .iui-message a:hover{
-  text-decoration:none;
-  color:var(--iui-color-foreground-negative-hover);
-}
-.iui-input-container.iui-negative .iui-input{
-  padding-bottom:calc(var(--iui-size-2xs) - 1px);
-  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-negative);
-}
-.iui-input-container.iui-negative .iui-input[data-iui-size=small]{
-  padding-bottom:0;
-}
-.iui-input-container.iui-negative .iui-input[data-iui-size=large]{
-  padding-bottom:calc(var(--iui-size-xs) - 1px);
-}
-.iui-input-container.iui-negative .iui-input:focus{
-  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-negative);
-  outline:2px solid var(--iui-color-foreground-negative);
-  outline-offset:-2px;
-}
-.iui-input-container.iui-negative .iui-input-with-icon{
-  --_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-negative);
-  --_focus-color:var(--iui-color-foreground-negative);
-}
-.iui-input-container.iui-negative .iui-select-button{
-  border-bottom:transparent;
-}
-.iui-input-container.iui-negative .iui-select-button::after{
-  content:"";
-  width:100%;
-  position:absolute;
-  bottom:0;
-  left:0;
-  height:var(--iui-size-3xs);
-  background-color:var(--iui-color-foreground-negative);
-}
-.iui-input-container.iui-warning::-moz-selection, .iui-input-container.iui-warning *::-moz-selection{
-  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
-}
-.iui-input-container.iui-warning::selection,
-.iui-input-container.iui-warning *::selection{
-  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
-}
-.iui-input-container.iui-warning .iui-input-icon{
-  fill:var(--iui-color-foreground-warning);
-}
-.iui-input-container.iui-warning .iui-message{
-  color:var(--iui-color-foreground-warning);
-}
-.iui-input-container.iui-warning .iui-message a{
-  text-decoration:underline;
-  color:var(--iui-color-foreground-warning);
-}
-.iui-input-container.iui-warning .iui-message a:hover{
-  text-decoration:none;
-  color:var(--iui-color-foreground-warning-hover);
-}
-.iui-input-container.iui-warning .iui-input{
-  padding-bottom:calc(var(--iui-size-2xs) - 1px);
-  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-warning);
-}
-.iui-input-container.iui-warning .iui-input[data-iui-size=small]{
-  padding-bottom:0;
-}
-.iui-input-container.iui-warning .iui-input[data-iui-size=large]{
-  padding-bottom:calc(var(--iui-size-xs) - 1px);
-}
-.iui-input-container.iui-warning .iui-input:focus{
-  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-warning);
-  outline:2px solid var(--iui-color-foreground-warning);
-  outline-offset:-2px;
-}
-.iui-input-container.iui-warning .iui-input-with-icon{
-  --_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-warning);
-  --_focus-color:var(--iui-color-foreground-warning);
-}
-.iui-input-container.iui-warning .iui-select-button{
-  border-bottom:transparent;
-}
-.iui-input-container.iui-warning .iui-select-button::after{
-  content:"";
-  width:100%;
-  position:absolute;
-  bottom:0;
-  left:0;
-  height:var(--iui-size-3xs);
-  background-color:var(--iui-color-foreground-warning);
-}
-
-.iui-input-label{
-  font-weight:var(--iui-font-weight-semibold);
-  margin-bottom:var(--iui-size-2xs);
-  cursor:default;
-  display:block;
-}
-.iui-input-label.iui-required::after{
-  content:"*";
-  margin-left:var(--iui-size-2xs);
-  color:var(--iui-color-foreground-negative);
-}
-label.iui-input-label{
-  cursor:pointer;
-}
-label.iui-input-label.iui-disabled{
-  cursor:not-allowed;
-}
-
-.iui-input-label.iui-inline{
-  margin:0 var(--iui-size-m) 0 0;
-  display:inline-flex;
-  align-items:center;
-}
-.iui-input-label.iui-inline.iui-required{
-  margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
-}
-
-.iui-notification-primary{
-  position:relative;
-}
-.iui-notification-primary::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-primary);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-primary::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-primary.iui-urgent::before{
-    -webkit-animation:pulse-primary 2s infinite;
-            animation:pulse-primary 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-primary{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-primary{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-}
-
-.iui-notification-positive{
-  position:relative;
-}
-.iui-notification-positive::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-positive);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-positive::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-positive.iui-urgent::before{
-    -webkit-animation:pulse-positive 2s infinite;
-            animation:pulse-positive 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-positive{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-positive{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-}
-
-.iui-notification-warning{
-  position:relative;
-}
-.iui-notification-warning::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-warning);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-warning::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-warning.iui-urgent::before{
-    -webkit-animation:pulse-warning 2s infinite;
-            animation:pulse-warning 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-warning{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-warning{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-}
-
-.iui-notification-negative{
-  position:relative;
-}
-.iui-notification-negative::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-negative);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-negative::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-negative.iui-urgent::before{
-    -webkit-animation:pulse-negative 2s infinite;
-            animation:pulse-negative 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-negative{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-negative{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-}
-
-.iui-notification-accessory{
-  position:relative;
-}
-.iui-notification-accessory::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-accessory);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-accessory::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-accessory.iui-urgent::before{
-    -webkit-animation:pulse-accessory 2s infinite;
-            animation:pulse-accessory 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-accessory{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-accessory{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-}
-.iui-popover.tippy-box{
-  all:revert;
-}
-.iui-popover.tippy-box[data-reference-hidden]{
-  visibility:hidden;
-  pointer-events:none;
-}
-.iui-popover .tippy-content{
-  all:revert;
-}
-
-.iui-visually-hidden{
-  -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;
-}
+[data-iui-icon-color=default]{fill:var(--iui-color-icon-muted)}@media (forced-colors:active){[data-iui-icon-color=default]{fill:CanvasText}}[data-iui-icon-color=informational]{fill:var(--iui-color-icon-informational)}[data-iui-icon-color=positive]{fill:var(--iui-color-icon-positive)}[data-iui-icon-color=warning]{fill:var(--iui-color-icon-warning)}[data-iui-icon-color=negative]{fill:var(--iui-color-icon-negative)}.iui-input-container{vertical-align:baseline;cursor:default;border:none;grid-template:"label label""inputs inputs"/auto 1fr;margin:0;padding:0;display:grid}.iui-input-container.iui-inline-icon>.iui-input{padding-right:var(--iui-component-height)}.iui-input-container.iui-inline-icon>.iui-input:last-child{padding-right:var(--iui-size-s)}.iui-input-container.iui-with-message{grid-template:"label label""inputs inputs""icon message"/auto 1fr}.iui-input-container.iui-with-message:not(.iui-inline-icon)>.iui-input-icon{margin-top:var(--iui-size-2xs)}.iui-input-container .iui-input,.iui-input-container .iui-input-with-icon,.iui-input-container .iui-input-group{grid-area:inputs}.iui-input-container .iui-input-group .iui-toggle-switch-wrapper{padding:calc(var(--iui-size-s)*.5)0}label.iui-input-container{cursor:pointer}label.iui-input-container.iui-disabled,.iui-input-container.iui-disabled label{cursor:not-allowed}.iui-input-container .iui-checkbox-wrapper,.iui-input-container .iui-radio-wrapper{min-height:var(--iui-size-l)}.iui-input-container.iui-inline-label{grid-template:"label inputs icon"/auto 1fr auto}.iui-input-container.iui-inline-label.iui-with-message{grid-template:"label inputs inputs"".icon message"/auto auto 1fr}.iui-input-container.iui-inline-label>.iui-input-group{gap:var(--iui-size-m);display:flex}.iui-input-container.iui-inline-label>.iui-input-group:not(:last-child){margin-right:var(--iui-size-m)}.iui-input-container>.iui-label{font-weight:var(--iui-font-weight-semibold);margin-bottom:var(--iui-size-2xs);color:var(--_iui-input-label-color);grid-area:label;align-self:center}.iui-input-container>.iui-label.iui-required:after{content:"*";margin-left:var(--iui-size-2xs);color:var(--iui-color-text-negative)}.iui-input-container>.iui-label.iui-disabled,.iui-input-container.iui-disabled{--_iui-input-label-color:var(--iui-color-text-disabled)}.iui-input-container .iui-input-icon{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon-muted);flex-shrink:0;grid-area:icon;align-self:center;display:flex}@media (forced-colors:active){.iui-input-container .iui-input-icon{fill:CanvasText}}.iui-input-container .iui-input-icon:not(:last-child){margin-right:var(--iui-size-2xs)}.iui-input-container .iui-message{font-size:var(--iui-font-size-0);margin-top:var(--iui-size-2xs);color:var(--iui-color-text-muted);grid-area:message}.iui-input-container .iui-message a{-webkit-user-select:none;user-select:none}.iui-input-container.iui-inline-icon>.iui-input-icon{margin:0 calc(var(--iui-size-xs) + 1px)0 0;grid-area:inputs;justify-self:end;position:relative}.iui-input-container.iui-inline-icon>.iui-input-icon svg{width:var(--iui-size-m);height:var(--iui-size-m);flex-shrink:0;display:flex}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-button{height:100%;width:-moz-fit-content;width:fit-content;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:inherit;border-bottom-right-radius:inherit;margin-right:0}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-actionable{height:calc(100% - 4px);border-radius:var(--iui-border-radius-1);padding-inline:calc(var(--iui-size-xs) + 1px);cursor:pointer;box-sizing:content-box;transition:background var(--iui-duration-2)ease-out;background-position:50%;align-items:center;margin-right:2px}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-actionable:hover{background:var(--iui-color-background)radial-gradient(circle,transparent 1%,var(--iui-color-background)1%)center/15000%}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-actionable:active{background-color:var(--iui-color-background-backdrop);transition:background var(--iui-duration-0);background-size:100%}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-actionable svg{fill:var(--iui-color-icon);transition:transform var(--iui-duration-1)ease-out}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-actionable.iui-open svg{transform:rotate(180deg)}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-disabled{cursor:not-allowed}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-disabled svg{fill:var(--iui-color-icon-disabled)}.iui-input-container.iui-inline-label>.iui-label{margin:0 var(--iui-size-m)0 0}.iui-input-container.iui-inline-label>.iui-label.iui-required{margin-right:calc(var(--iui-size-2xs)*1.5 - 1px)}.iui-input-container.iui-positive::selection,.iui-input-container.iui-positive ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-input-container.iui-positive .iui-input-icon{fill:var(--iui-color-icon-positive)}.iui-input-container.iui-positive .iui-message{color:var(--iui-color-text-positive)}.iui-input-container.iui-positive .iui-message a{color:var(--iui-color-text-positive);text-decoration:underline}.iui-input-container.iui-positive .iui-message a:hover{color:var(--iui-color-text-positive-hover);text-decoration:none}.iui-input-container.iui-positive .iui-input{padding-bottom:calc(var(--iui-size-2xs) - 1px);border-bottom:var(--iui-size-3xs)solid var(--iui-color-border-positive)}.iui-input-container.iui-positive .iui-input[data-iui-size=small]{padding-bottom:0}.iui-input-container.iui-positive .iui-input[data-iui-size=large]{padding-bottom:calc(var(--iui-size-xs) - 1px)}.iui-input-container.iui-positive .iui-input:focus{border-bottom:var(--iui-size-3xs)solid var(--iui-color-border-positive);outline:2px solid var(--iui-color-text-positive);outline-offset:-2px}.iui-input-container.iui-positive .iui-input-with-icon{--_iui-input-with-icon-hover-border-color:var(--iui-color-border-positive);--_focus-color:var(--iui-color-text-positive)}.iui-input-container.iui-positive .iui-select-button{border-bottom:#0000}.iui-input-container.iui-positive .iui-select-button:after{content:"";width:100%;height:var(--iui-size-3xs);background-color:var(--iui-color-border-positive);position:absolute;bottom:0;left:0}.iui-input-container.iui-warning::selection,.iui-input-container.iui-warning ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-input-container.iui-warning .iui-input-icon{fill:var(--iui-color-icon-warning)}.iui-input-container.iui-warning .iui-message{color:var(--iui-color-text-warning)}.iui-input-container.iui-warning .iui-message a{color:var(--iui-color-text-warning);text-decoration:underline}.iui-input-container.iui-warning .iui-message a:hover{color:var(--iui-color-text-warning-hover);text-decoration:none}.iui-input-container.iui-warning .iui-input{padding-bottom:calc(var(--iui-size-2xs) - 1px);border-bottom:var(--iui-size-3xs)solid var(--iui-color-border-warning)}.iui-input-container.iui-warning .iui-input[data-iui-size=small]{padding-bottom:0}.iui-input-container.iui-warning .iui-input[data-iui-size=large]{padding-bottom:calc(var(--iui-size-xs) - 1px)}.iui-input-container.iui-warning .iui-input:focus{border-bottom:var(--iui-size-3xs)solid var(--iui-color-border-warning);outline:2px solid var(--iui-color-text-warning);outline-offset:-2px}.iui-input-container.iui-warning .iui-input-with-icon{--_iui-input-with-icon-hover-border-color:var(--iui-color-border-warning);--_focus-color:var(--iui-color-text-warning)}.iui-input-container.iui-warning .iui-select-button{border-bottom:#0000}.iui-input-container.iui-warning .iui-select-button:after{content:"";width:100%;height:var(--iui-size-3xs);background-color:var(--iui-color-border-warning);position:absolute;bottom:0;left:0}.iui-input-container.iui-negative::selection,.iui-input-container.iui-negative ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-input-container.iui-negative .iui-input-icon{fill:var(--iui-color-icon-negative)}.iui-input-container.iui-negative .iui-message{color:var(--iui-color-text-negative)}.iui-input-container.iui-negative .iui-message a{color:var(--iui-color-text-negative);text-decoration:underline}.iui-input-container.iui-negative .iui-message a:hover{color:var(--iui-color-text-negative-hover);text-decoration:none}.iui-input-container.iui-negative .iui-input{padding-bottom:calc(var(--iui-size-2xs) - 1px);border-bottom:var(--iui-size-3xs)solid var(--iui-color-border-negative)}.iui-input-container.iui-negative .iui-input[data-iui-size=small]{padding-bottom:0}.iui-input-container.iui-negative .iui-input[data-iui-size=large]{padding-bottom:calc(var(--iui-size-xs) - 1px)}.iui-input-container.iui-negative .iui-input:focus{border-bottom:var(--iui-size-3xs)solid var(--iui-color-border-negative);outline:2px solid var(--iui-color-text-negative);outline-offset:-2px}.iui-input-container.iui-negative .iui-input-with-icon{--_iui-input-with-icon-hover-border-color:var(--iui-color-border-negative);--_focus-color:var(--iui-color-text-negative)}.iui-input-container.iui-negative .iui-select-button{border-bottom:#0000}.iui-input-container.iui-negative .iui-select-button:after{content:"";width:100%;height:var(--iui-size-3xs);background-color:var(--iui-color-border-negative);position:absolute;bottom:0;left:0}.iui-input-label{font-weight:var(--iui-font-weight-semibold);margin-bottom:var(--iui-size-2xs);color:var(--_iui-input-label-color);cursor:default;display:block}.iui-input-label.iui-required:after{content:"*";margin-left:var(--iui-size-2xs);color:var(--iui-color-text-negative)}.iui-input-label.iui-disabled,.iui-input-container.iui-disabled{--_iui-input-label-color:var(--iui-color-text-disabled)}label.iui-input-label{cursor:pointer}label.iui-input-label.iui-disabled{cursor:not-allowed}.iui-input-label.iui-inline{margin:0 var(--iui-size-m)0 0;align-items:center;display:inline-flex}.iui-input-label.iui-inline.iui-required{margin-right:calc(var(--iui-size-2xs)*1.5 - 1px)}.iui-notification-marker{--_iui-notification-marker-color:var(--iui-color-icon-informational);position:relative}.iui-notification-marker:before{content:"";width:var(--iui-size-xs);height:var(--iui-size-xs);background-color:var(--_iui-notification-marker-color);border-radius:100%;position:absolute;top:0;right:0;transform:translate(50%,-50%)}@media (prefers-reduced-motion:no-preference){.iui-notification-marker:before{transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out}}.iui-notification-marker>*{-webkit-mask:radial-gradient(ellipse calc(.5*(var(--iui-size-xs) + 2*var(--iui-size-3xs)))calc(.5*(var(--iui-size-xs) + 2*var(--iui-size-3xs)))at 100% 0%,transparent 95%,#000 100%);mask:radial-gradient(ellipse calc(.5*(var(--iui-size-xs) + 2*var(--iui-size-3xs)))calc(.5*(var(--iui-size-xs) + 2*var(--iui-size-3xs)))at 100% 0%,transparent 95%,#000 100%)}@media (prefers-reduced-motion:no-preference){.iui-notification-marker:where([data-iui-urgent=true]):before{animation:2s infinite pulse}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_iui-notification-marker-color)}70%{box-shadow:0 0 0 7px #0000}to{box-shadow:0 0 #0000}}}.iui-notification-marker[data-iui-variant=positive]{--_iui-notification-marker-color:var(--iui-color-icon-positive)}.iui-notification-marker[data-iui-variant=warning]{--_iui-notification-marker-color:var(--iui-color-icon-warning)}.iui-notification-marker[data-iui-variant=negative]{--_iui-notification-marker-color:var(--iui-color-icon-negative)}.iui-notification-marker[data-iui-variant=white]{--_iui-notification-marker-color:var(--iui-color-white)}.iui-popover.tippy-box{all:revert}.iui-popover.tippy-box[data-reference-hidden]{visibility:hidden;pointer-events:none}.iui-popover .tippy-content{all:revert}.iui-visually-hidden{clip-path:inset(50%);white-space:nowrap;height:1px;width:1px;border-width:0;margin:-1px;padding:0;position:absolute;overflow:hidden}