/*===== webfx-kit-javafxgraphics-web@main.css from webfx-kit-javafxgraphics-peers-elemental2 =====*/

:root {
    /* Capturing safe area in CSS variables so they can be accessed by WebFX kit */
    --safe-area-inset-top:    env(safe-area-inset-top);
    --safe-area-inset-right:  env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left:   env(safe-area-inset-left);

    /* Text selection mode */
    --text-user-select: text; /* for texts */
    --body-user-select: none; /* for everything else */

    /* CSS variables for backgrounds (in JavaFX Region) */
    --fx-background-color: transparent;
    --fx-background-image: none;
    --fx-background-position: none;
    --fx-background-repeat: none;
    --fx-background-size: none;
    --fx-background-radius: var(--fx-border-radius);

    /* CSS variables for borders (in JavaFX Region) */
    --fx-border-style: none;
    --fx-border-color: transparent;
    --fx-border-width: 0;
    --fx-border-radius: 0;

    /* CSS variables for text fill and svg path fill */
    --fx-text-fill: black;
    --fx-svg-path-fill: var(--fx-text-fill);

    /* CSS variable for focus appearance */
    --fx-focus-color: #0096D6;
    --fx-background-color-focus: unset;
    --fx-border-style-focus: dashed;
    --fx-border-color-focus: var(--fx-focus-color);
    --fx-border-width-focus: 1px;
    --fx-text-fill-focus: unset;

    --fx-kit-line-height: 1; /* Default variable for text line height managed by the webfx kit. App CSS can't override
    it (because it's set at the text element level), but can set --fx-line-height which precedes --fx-kit-line-height */
}

.unset-variables { /* Dummy selector used just to list unset CSS variables that can be overridden by App CSS */
    --fx-line-height: 1;
    --fx-svg-path-stroke: transparent;
}

/* Mocking some basic JavaFX behaviours */

html, body {
    height: 100dvh;
    /* Also disabling overscroll (prevents SpaceFX ship drag to work when coming back to PWA on iOS) */
    overscroll-behavior: none;
}

body {
    overflow: hidden; /* Disabling browser horizontal and vertical scroll bars */
    margin: 0; /* Removing the default margin around the body */
    /* Disabling user selection by default (like in JavaFX) but enabling selection on text (as opposed to JavaFX - see fx-text CSS rule)  */
    -webkit-user-select: var(--body-user-select);
    -moz-user-select: var(--body-user-select);
    -ms-user-select: var(--body-user-select);
    user-select: var(--body-user-select);
    -webkit-touch-callout: none;
}

fx-scene { /* main stage scene or popup scenes */
    width: 100%;
    height: 100%;
    position: absolute;
}

body > fx-scene { /* main stage scene only */
    height: 100dvh;
}

/* Workaround for iOS Safari bug not returning the correct initial window height for PWA with 'black-translucent' status bar (such as SpaceFX PWA) */
body { /* Although we don't want that padding, we apply it initially because this fixes the bug. GwtJ2clPrimaryStagePeer will then erase that padding */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Making disabled nodes semi-transparent */
.disabled {
    opacity: 50%;
}

/* Disabling default focus outline (focus appearance will be set by other rules in this CSS or javafx-controls CSS) */
:focus,
:focus-visible {
    outline: none;
}

fx-background {
    background-color: var(--fx-background-color);
    border-radius: var(--fx-background-radius);
    background-image: var(--fx-background-image);
    background-position: var(--fx-background-position);
    background-repeat: var(--fx-background-repeat);
    background-size: var(--fx-background-size);
}

:focus > fx-background, :focus-visible > fx-background {
    background-color: var(--fx-background-color-focus, var(--fx-background-color));
}

fx-border {
    border-style: var(--fx-border-style);
    border-color: var(--fx-border-color);
    border-width: var(--fx-border-width);
    border-radius: var(--fx-border-radius);
}

:focus > fx-border, :focus-visible > fx-border {
    --fx-border-style: var(--fx-border-style-focus);
    --fx-border-color: var(--fx-border-color-focus);
    --fx-border-width: var(--fx-border-width-focus);
}

fx-children { /* Stopping propagation of background and border CSS variables to children */
    --fx-background-color: transparent;
    --fx-background-radius: var(--fx-border-radius);
    --fx-background-image: none;
    --fx-background-position: none;
    --fx-background-repeat: none;
    --fx-background-size: none;
    --fx-border-style: none;
    --fx-border-color: none;
    --fx-border-radius: 0;
    --fx-border-width: 0;
}

/* The default JavaFX behaviour for Text wrapping is equivalent to HTML "break-word", which is not the default in HTML
   (the default in HTML being "normal"). So we apply "break-word". */
fx-text {
    color: var(--fx-text-fill);
    word-break: break-word;
    overflow-wrap: break-word; /* fallback for better browser support */
    /* Also enabling selection on text (as opposed to JavaFX, but it's expected by most web users) */
    -webkit-user-select: var(--text-user-select);
    -moz-user-select: var(--text-user-select);
    -ms-user-select: var(--text-user-select);
    user-select: var(--text-user-select);

    line-height: var(--fx-line-height, var(--fx-kit-line-height));
}

:focus fx-text, :focus-visible fx-text {
    color: var(--fx-text-fill-focus, var(--fx-text-fill));
}

fx-svgpath svg path:not([stroke]) {
    stroke: var(--fx-svg-path-stroke); /* unset by default */
}

/* Applying the default JavaFX behaviour for SVGPath - Note that CSS fill is prioritized over SVG fill! */
fx-svgpath svg path:not([fill]):not([stroke]) { /* if the application code didn't set neither fill nor stroke */
    fill: var(--fx-svg-path-fill);
}

fx-svgpath svg path:not([fill])[stroke] { /* if the application code set the stroke but not the fill */
    --fx-svg-path-fill: transparent; /* then the fill is transparent */
    fill: var(--fx-svg-path-fill);
}