@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-500);
    --inspector-handle-width: 30px;
}

[unresolved] {
    display: none;
}

[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;
}

/* 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-output[readonly] img {
    background: inherit;
}

.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;
}

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;
}

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;
}

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