/*===== 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);
}

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

/***** Global variables *****/
:root {
    --fx-button-background-color: white;
    --fx-button-background-image: none;
    --fx-button-background-radius: var(--fx-button-border-radius);
    /* Next 3 necessary? (probably never used) */
    --fx-button-background-position: none;
    --fx-button-background-repeat: none;
    --fx-button-background-size: none;

    --fx-button-border-style: solid;
    --fx-button-border-color: #c0c0c0;
    --fx-button-border-radius: 5px;
    --fx-button-border-width: 1px;

    --fx-textfield-background-color: white;
    --fx-textfield-background-radius: 0;
    --fx-textfield-border-style: solid;
    --fx-textfield-border-color: var(--fx-button-border-color);
    --fx-textfield-border-width: 1px;
    --fx-textfield-border-radius: var(--fx-button-border-radius);

    --fx-textarea-background-color: var(--fx-textfield-border-style);
    --fx-textarea-border-style: var(--fx-textfield-border-style);
    --fx-textarea-border-color: var(--fx-textfield-border-color);
    --fx-textarea-border-width: var(--fx-textfield-border-width);
    --fx-textarea-border-radius: var(--fx-textfield-border-radius);

    --fx-button-border-color-focus: var(--fx-border-color-focus);

    --fx-togglebutton-background-color-selected: lightgray;
    --fx-togglebutton-border-color-selected: darkgray;
    --fx-togglebutton-background-color-hover: var(--fx-togglebutton-background-color-selected);
    --fx-togglebutton-border-color-hover: var(--fx-togglebutton-border-color-selected);

    --fx-theme-color: #0095cb;
    --fx-placholder-color: #888;
    --fx-progress-indicator-color: var(--fx-theme-color);
    --fx-hyperlink-text-fill: var(--fx-theme-color);
    --fx-checkbox-background-color: var(--fx-theme-color);
    --fx-checkbox-border-color: var(--fx-text-fill);
    --fx-radiobutton-background-color: var(--fx-theme-color);
    --fx-radiobutton-border-color: var(--fx-text-fill);
}

::placeholder {
    color: var(--fx-placholder-color);
}

/* Without this rule, the context menu is wrongly shifted up by the browser the first time it is displayed */
fx-scene > * {
    overflow: hidden;
}

/* Applying text color to svg path as well by default */
fx-label, fx-button, fx-togglebutton {
    --fx-svg-path-fill: var(--fx-text-fill);
}

fx-button, fx-togglebutton {
    --fx-border-style: var(--fx-button-border-style);
    --fx-border-color: var(--fx-button-border-color);
    --fx-border-radius: var(--fx-button-border-radius);
    --fx-border-width: var(--fx-button-border-width);
    --fx-background-color: var(--fx-button-background-color);
    --fx-background-radius: var(--fx-button-background-radius);
    --fx-background-image: var(--fx-button-background-image);
    --fx-background-position: var(--fx-button-background-position);
    --fx-background-repeat: var(--fx-button-background-repeat);
    --fx-background-size: var(--fx-button-background-size);
}

fx-button:focus-within, fx-togglebutton:focus-within {
    --fx-button-border-color: var(--fx-button-border-color-focus);
}

fx-togglebutton:hover {
    --fx-button-background-color: var(--fx-togglebutton-background-color-hover);
    --fx-button-border-color: var(--fx-togglebutton-border-color-hover);
}

fx-togglebutton.pseudo-selected {
    --fx-button-background-color: var(--fx-togglebutton-background-color-selected);
    --fx-button-border-color: var(--fx-togglebutton-border-color-selected);
}


fx-hyperlink {
    --fx-text-fill: var(--fx-hyperlink-text-fill);
}

fx-hyperlink fx-text:hover {
    text-decoration: underline;
}

/* Removing borders, outlines and background for input elements (to not interfere with the text field below) */
input {
    border: none;
    outline: none;
    background-color: transparent;
    margin: 0;
    padding: 0;
}

/* Removing spinner buttons on number inputs. Reasons: 1) Not in JavaFX 2) Make the text field narrower which can cause
 unwanted clip on the number, ex: on FireFox when app code call setPrefWith(80) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
/* and for FireFox: */
input[type="number"] {
    -moz-appearance: textfield;
}


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

fx-textfield:focus-within {
    --fx-textfield-border-color: var(--fx-border-color-focus);
}

textarea {
    padding: 8px;
    box-sizing: border-box;
    outline: none;
    background-color: var(--fx-textarea-background-color);
    border-style: var(--fx-textarea-border-style);
    border-color: var(--fx-textarea-border-color);
    border-width: var(--fx-textarea-border-width);
    border-radius: var(--fx-textarea-border-radius);
}

textarea:focus {
    --fx-textarea-border-color: var(--fx-border-color-focus);
}

fx-titledpane textarea {
    --fx-textarea-border-radius: 0 0 5px 5px;
}

/* Cross for the tab close button */
.tab-close-button {
    --fx-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23444' stroke-width='2' stroke-linejoin='round' viewBox=\'0 0 16 16\'%3E%3Cpath d=\'M 4,4 L 12,12 Z M 4,12 L 12,4 Z\'/%3E%3C/svg%3E");
}

fx-menuitemcontainer {
    --fx-background-color-focus: var(--fx-focus-color);
    --fx-text-fill-focus: white;
}

/* Ellipsis management for wrapped text inside a label with restricted height */

fx-label.ellipsis {
    overflow: hidden;
}

fx-label.ellipsis fx-text {
    /*text-overflow: ellipsis;*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* -webkit-line-clamp will be set in JS by HtmlTextPeer */
}

fx-progressindicator .spinner .segment {
    background-color: var(--fx-progress-indicator-color);
}

fx-checkbox .box .mark {
    --fx-border-style: solid;
    --fx-border-color: var(--fx-checkbox-border-color);
    --fx-border-width: 1px;
    --fx-border-radius: 3px;
}

fx-checkbox.pseudo-selected .box .mark {
    --fx-background-radius: 3px;
    --fx-background-color: var(--fx-checkbox-background-color);
}

fx-radiobutton .radio .dot {
    --fx-border-style: solid;
    --fx-border-color: var(--fx-radiobutton-border-color);
    --fx-border-width: 1px;
    --fx-border-radius: 50%;
}

fx-radiobutton.pseudo-selected .radio .dot {
    --fx-background-radius: 50%;
    --fx-background-color: var(--fx-radiobutton-background-color);
}