html,
body {
  /**
      Disable root scrolling (bouncing effect on touch devices)
    */
  position: fixed;
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  /*
    Disable **browsers** touch (and pen) manipulations support.
    Remarks: This has no relation with the UIElement.ManipulationMode which are handled in managed code.
             It only ensures that uno will always get ALL pointer events instead of being stolen by the browser for its internal gesture detection.
             This will also disable left and right swipe gesture to navigate through browser's history.
    Remarks 2: If applied only on the root of the app, this won't break the scrolling (unlike if applied on all UIElement).
  */
  touch-action: none;
}

.uno-root-element {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.uno-uielement {
  position: absolute;
  display: inline;
  outline: none;
  /*
    Disable pointer events by default to match HitTestVisibilityProperty default value.
  */
  pointer-events: none;
  /*
    Padding & margin are required for measure/arrange to behave well:
    margin & padding are calculated through Xaml elements.
  */
  margin: 0 !important;
  padding: 0;
  line-height: normal;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
  /*
    Force all element to have a transform, to allow correct measure of text and images.
    See WindowManager.ts on measureViewInternal() for more details.
  */
  transform: translate(0, 0);
  /*
    By default, the background of UWP controls is not drawn under the border of the control.
  */
  background-clip: padding-box;
}

  .uno-uielement .noclip {
    /* Used when we need to force the element to be unclipped.
      --> Used by the toolkit for elevation
  */
    clip: auto !important;
  }

svg.uno-uielement {
  /*
    The SVG elements are not intended to be a touch target (they are only a holder collection of child shapes),
    instead it's their child SvgElement that should be the target of the pointer.
    This also ensure that we are HitTestVisible only for shapes that has a fill.
  */
  pointer-events: none;
  stroke-width: 1px; /* default value of Shape.StrokeThickness */
  overflow: visible
}

.uno-frameworkelement.uno-unarranged {
  -ms-opacity: 0;
  opacity: 0;
  position: fixed;
}

.uno-uielement.uno-visibility-collapsed {
  /*
    Note: On wasm when we have an 'hidden' (or 'collapsed') element, its height is used to compute the native 'scrollHeight',
	  driving the SV to flicker when we scroll while at the bottom of the viewport (if those hidden element would have increase the viewport if visible).
	  To avoid that, we move the element way out of the visible bounds of the view.
  */
  visibility: hidden !important;
  top: -100000px !important;
  left: -100000px !important;
}

svg.uno-frameworkelement.uno-unarranged,
iframe.uno-frameworkelement.uno-unarranged,
img.uno-frameworkelement.uno-unarranged,
video.uno-frameworkelement.uno-unarranged,
embed.uno-frameworkelement.uno-unarranged {
  /*
    "Replaced element" (like iFrame, img, video, ... cf. https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element)
    have a default size of 300x150px (as described here https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes)
    > For boxes without an intrinsic aspect ratio:
    >     [../..]
    >     Otherwise, use 300px for the width and/or 150px for the height as needed.

    SVG element that does not have a measurable viewport are also requested to follow the same logic
    https://www.w3.org/TR/SVGMobile12/coords.html#InitialViewport
    >  If the parent document is styled with CSS, then the negotiation process must follow the CSS rules for replaced elements.

    Here we make sure that any unarranged "replaced element" have a fixed with / height to 0,
    so they won't be taken in consideration by scroll viewers (overflow) which are computing their extent in native.

    A common visual effect of this, is that a non virtualized GridView with items smaller than 150px height
    is vertically scrollable when it should not! (There is a Rectangle in their template, which rendered using an SVG element).

    Note: this is required has have set a "transform: translate(0, 0);" on all ".uno-uielement",
          which has a side effect to establish a "containing block" (cf. WindowManager.ts on measureViewInternal()).
  */
  width: 0;
  height: 0;
}

.uno-textblock:not(.selectionEnabled) {
  -webkit-touch-callout: none; /* Safari */
  -webkit-user-select: none; /* iOSSafari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.uno-textblock {
  text-rendering: optimizeLegibility; /* iOS Safari */
  /* Following are required for gradient brush as Foreground on text. Should not affect normal rendering. */
  -ms-background-clip: text !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  /* overflow:hidden is required for text-overflow: ellipsis to work correctly */
  overflow: hidden;
}

/* This fixes the issue for https://github.com/unoplatform/uno/issues/4563, but caused issues for ui tests */
/*.uno-shape {
    width: auto !important;
    height: auto !important;
}*/

[data-use-hand-cursor-interaction="true"] .uno-buttonbase,
[data-use-hand-cursor-interaction="true"] .uno-toggleswitch {
  cursor: pointer;
}

.uno-hyperlinkbutton {
  cursor: pointer;
}

.uno-textboxview {
  outline: none;
  border: none;
  background-color: transparent;
  /* Redundant, but actually fixes rendering bug on Safari for a multiline textbox with fixed height where vertical scrolling breaks weirdly */
  /* https://stackoverflow.com/a/57215893 */
  transform: translate3d(0, 0, 0);
}

.uno-textbox {
    cursor: text;
}

.uno-textboxview:-webkit-autofill,
.uno-textboxview:-webkit-autofill:hover,
.uno-textboxview:-webkit-autofill:focus {
  /* Workaround based on https://stackoverflow.com/a/68240841 */
  transition: background-color 600000s 0s, color 600000s 0s, background-image 600000s 0s, appearance 600000s 0s;
}

.uno-textelement {
  position: relative;
}

.uno-svgelement {
  vector-effect: non-scaling-stroke
}

.uno-htmlimage {
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.uno-scrollcontentpresenter {
  -webkit-overflow-scrolling: touch;
}

  .uno-scrollcontentpresenter > * {
    /* Force hardware acceleration as per https://stackoverflow.com/q/9807620 */
    /* Fixes https://github.com/unoplatform/uno/issues/17640 */
    -webkit-transform: translate3d(0, 0, 0);
  }

  .uno-scrollcontentpresenter.scroll-x-auto {
    overflow-x: auto;
  }

  .uno-scrollcontentpresenter.scroll-y-auto {
    overflow-y: auto;
  }

  .uno-scrollcontentpresenter.scroll-x-disabled {
    overflow-x: hidden;
  }

  .uno-scrollcontentpresenter.scroll-x-hidden {
    overflow-x: auto; /* We must not use "hidden" to allow native scrolling interaction like mouse wheel */
    scrollbar-width: none; /* scrollbar-height has no effect on FF, using scrollbar-width works on all browsers (non standard property) */
  }

    .uno-scrollcontentpresenter.scroll-x-hidden::-webkit-scrollbar {
      height: 0;
    }

  .uno-scrollcontentpresenter.scroll-y-disabled {
    overflow-y: hidden;
  }

  .uno-scrollcontentpresenter.scroll-y-hidden {
    overflow-y: auto; /* We must not use "hidden" to allow native scrolling interaction like mouse wheel */
    scrollbar-width: none;
  }

    .uno-scrollcontentpresenter.scroll-y-hidden::-webkit-scrollbar {
      width: 0;
    }

  .uno-scrollcontentpresenter.scroll-x-visible {
    overflow-x: scroll;
  }

  .uno-scrollcontentpresenter.scroll-y-visible {
    overflow-y: scroll;
  }

#uno-loading {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: var(--light-theme-bg-color, #F3F3F3);
}

@media (prefers-color-scheme: dark) {
  #uno-loading {
    background-color: var(--dark-theme-bg-color, #202020);
  }
}

/* Splash image styling */
.uno-splash {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: min(90%, 620px);
  max-height: min(90%, 300px);
  width: auto;
  height: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 620px 300px;
}

textarea {
  resize: none;
  scrollbar-width: none;
}

textarea::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

input::-ms-reveal,
input::-ms-clear {
  display: none;
}

.selection-highlight::selection,
.selection-highlight *::selection {
  background: var(--selection-background);
  color: var(--selection-color);
}

/* Uno has its own HR indicator: hide default dotnet indicator. */
#dotnet-hotreload-toast {
  visibility: collapse;
}

.uno-nativewebview, .uno-htmlwebviewelement {
  border: 0;
  width: 100%;
  height: 100%;
  user-select: none;
}

#uno-canvas
{
  /*
    Disable pointer events by default to match HitTestVisibilityProperty default value.
  */
  pointer-events: none;
}