@import 'vars.css';
@import 'toastify.css';

    /*@import url('dev.css');*/

    html {
        --inspector-bg: var(--paper-grey-300);
        --inspector-pre-bg: var(--paper-grey-100);
        --inspector-color: var(--paper-grey-800);
        --inspector-instance-height: 200px;
        --inspector-handle-bg: var(--paper-blue-700);
        --inspector-handle-width: 30px;
    }

    [disabled] {
        pointer-events: none;
        cursor: default;
    }

    [refresh-on-view] {
        /*opacity: 0;*/
    }

    /*
        nonrelevant must always be hidden
    */
    [nonrelevant] {
        display: none;
    }

    [relevant] {
        display: block;
    }

    fx-control[required] label:after {
        content: "*";
        display: inline;
        color: red;
    }

    .fore-error {
        height: 2rem;
        background: darkred;
        width: 100%;
        display: block !important;
        color: white;
    }

    .fore-error::before {
        content: 'right-click to inspect';
        display: flex;
        flex-align: center;
    }

    fx-alert {
        color: darkred;
        font-size: 0.9rem;
        display: none;
    }

    [valid] fx-alert{
        display: none;
    }

    .visited[invalid] fx-alert {
        display: block;
    }

    /*
     * Native-constraint alert visibility: show fx-alert only after the user has
     * interacted with the field (:user-invalid fires after first dirty interaction).
     * Complements .visited[invalid] above, which covers Fore-driven (XPath) invalidity.
     */
    fx-control:has(input.widget:user-invalid) fx-alert {
        display: block;
    }

    /*
     * Fallback for browsers without :user-invalid support.
     * :placeholder-shown is false when a value is present, approximating "user typed".
     */
    @supports not selector(input:user-invalid) {
        fx-control[invalid]:has(input.widget:not(:placeholder-shown)) fx-alert {
            display: block;
        }
    }

    /* case not displayed by default - if you want e.g. apply transitions you have to overwrite this rule with display='inline' or similar */
    fx-case {
        display: none;
    }
    fx-case.selected-case{
        display:block;
    }
    fx-case.deselected-case{
        display:none;
    }

    fx-output[readonly] img {
        background: inherit;
    }

    /*
     * Default visual treatment for readonly controls (own or inherited via
     * <fx-bind readonly="...">). Individual apps can override.
     */
    fx-control[readonly] .widget,
    fx-control[readonly] input,
    fx-control[readonly] textarea,
    fx-control[readonly] select {
        background: var(--paper-grey-200);
        color: var(--paper-grey-600);
        cursor: not-allowed;
    }

    /*
     * The native `readonly` attribute is a no-op on checkboxes/radios per the HTML
     * spec - only `disabled` blocks them, but that would also mute their styling
     * and remove them from focus order. Fore already rejects the resulting
     * value-changed on the model side (see fx-control#setValue), but without this
     * the box still visibly toggles and snaps back, reading as "still clickable".
     * Blocking pointer interaction avoids that flicker entirely.
     */
    fx-control[readonly] input[type="checkbox"],
    fx-control[readonly] input[type="radio"] {
        pointer-events: none;
    }

    /*
     * Clicking a <label for="..."> forwards a native activation to its checkbox/
     * radio that bypasses the input's own `pointer-events: none` entirely - the
     * browser toggles the control directly, it's not a hit-test on the input. The
     * label itself must be blocked too, or the box still visibly flips on click.
     */
    fx-control[readonly]:has(input[type="checkbox"]) label,
    fx-control[readonly]:has(input[type="radio"]) label {
        pointer-events: none;
        cursor: not-allowed;
    }

    fx-trigger[readonly] .widget,
    fx-trigger[readonly] button {
        cursor: not-allowed;
        opacity: 0.6;
    }

    .error {
        background: var(--paper-red-500);
        display: flex;
    }

    fx-control, fx-trigger, .fx-checkbox {
        white-space: nowrap;
        /* position: relative; */
    }

    /* ### FX-DIALOG STYLES ### */
    /* ### FX-DIALOG STYLES ### */
    /* ### FX-DIALOG STYLES ### */
    fx-dialog {
        display: none;
        opacity: 0;
        width: 100vw;
        height: 100vh;
        transition: opacity 1s linear;
        z-index: -1;
        transition: none;
    }

    fx-dialog.show {
        display: block;
        min-height: 200px;
        border-radius: 0.5rem;
        opacity: 1;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10;
        transition: opacity 0.4s linear;
        position: fixed;
        top: 0;
        left: 0;
    }

    fx-dialog.show .dialog-content {
        padding: 1rem;
        width: fit-content;
        height: fit-content;
        border: thin solid;
        border-radius: 0.3rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        background: white;

    }

    fx-dialog a.close-dialog {
        position: absolute;
        right: 0.4rem;
        top: 0.2rem;
        color: var(--paper-grey-900);
        text-decoration: none;
        font-size: 1.2rem;
    }

    fx-dialog .action {
        width: 100%;
        text-align: center;
        display: block;
    }

    fx-group, fx-switch, fx-repeat, fx-dialog {
        /*display: block;*/
        position: relative;
    }

    /* ### NATIVE <dialog> STYLES (preferred over fx-dialog, which is deprecated) ### */
    /* ### NATIVE <dialog> STYLES (preferred over fx-dialog, which is deprecated) ### */
    /* ### NATIVE <dialog> STYLES (preferred over fx-dialog, which is deprecated) ### */
    dialog {
        border: thin solid;
        border-radius: 0.5rem;
        padding: 0;
        position: relative;
    }

    dialog::backdrop {
        background: rgba(0, 0, 0, 0.5);
    }

    dialog .dialog-content {
        padding: 1rem;
    }

    dialog .close-dialog {
        position: absolute;
        right: 0.4rem;
        top: 0.2rem;
        color: var(--paper-grey-900);
        text-decoration: none;
        font-size: 1.2rem;
    }

    dialog .action {
        width: 100%;
        text-align: center;
        display: block;
    }

    fx-hint {
        display: none;
    }

    fx-model,
    fx-instance,
    fx-action,
    fx-setvalue {
        display: none;
    }

    fx-trigger a[disabled] {
        color: lightgrey;
    }

    fx-trigger img[disabled] {
        filter: blur(2px);
    }

    fx-repeatitem {
        position: relative;
        opacity: 1;
    }

    .hidden {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s 2s, opacity 2s linear;
    }

    .isEmpty.visited .widget {
        background: lightpink;
    }

    .loaded {
        animation: fadein 0.3s forwards;
    }

    /* avoid flicker from nested lazily loaded elements */
    .loaded .loaded {
        animation: none;
        opacity: 1;
    }

    .logtree details {
        padding: 0.1rem 1rem;
        margin: 0;
    }
    noscript{
        display: block;
        width: 100%;
        padding: 1rem;
        background: darkorange;
        color:white;
        position: absolute;
        top:0;
        left:0;
    }

    .submit-validation-failed .isEmpty .widget {
        background: lightpink;
    }

    .vertical label {
        display: block;
    }

    /* for on-demand elements */
    [role=group][on-demand=true] {
            display: none;
    }
    .trash {
        display: inline-block;
        position: absolute;
        right:0;
        top:0;
        z-index: 10;
        font-size: 0.8rem;
    }
    .trash svg{
        width: 1rem;
        height: 1rem;
        color:#666666;
    }
    .trash svg:hover{
        color:black;

    }

    /* fx-action-log styles */

    fx-fore.action-log{
        /*background: var(--paper-orange-500);*/
    }
    .action-log .action-log-debug {
        display: block !important;
        min-height: 3rem;
        background: var(--paper-orange-500);
    }
    .action-log fx-model{
        display: block;
        min-height: 1rem;
    }
    .action-log fx-model::before{
        content:'model';
    }

    .action-log fx-instance,
    .action-log fx-bind,
    .action-log fx-submission,
    .action-log fx-function
    {
        display: block;
        min-height: 2rem;
        background: var(--paper-orange-500);
    }

    .action-log fx-bind::before{
        content:'bind :: ' attr(ref);
    }
    .action-log fx-instance::before{
        content:'instance :: ' attr(id);
    }
    .action-log fx-submission::before{
        content:'submission ::' attr(id);
    }

    .action-log .action-log-debug::before{
        content: attr(data-name);
    }
    .action-log .action-log-debug .targetd{
        cursor: pointer;
    }


    /* ### toastify customizations #### */

    .toastify.on.warning{
        background: var(--paper-orange-500);
    }

	/*
	 * For on-demand stuff, if it has no value initially,hide it
	 */
	[on-demand] {
		display: none !important;
	}