/*@media (prefers-color-scheme: light) {*/
/*    :root {*/
/*        --array-input-bg: white;*/
/*        --array-input-text: black;*/
/*        --array-input-hover: black;*/
/*        --array-input-text-hover: white;*/
/*        --bullchat-theme: #fdd600;*/
/*        !*--array-input*!*/
/*    }*/
/*}*/

/*@media (prefers-color-scheme: dark) {*/
/*    :root {*/
/*        --array-input-bg: black;*/
/*        --array-input-text: white;*/
/*        --array-input-hover: white;*/
/*        --array-input-text-hover: black;*/


/*        --bullchat-theme: #fdd600;*/
/*        !*--array-input*!*/
/*    }*/
/*}*/

/*@media (prefers-color-scheme: light) {*/
:root {
    --array-input-bg: var(--background-alt);
    --array-input-text: var(--text-main);
    /*--array-input-hover: var(--focus);*/
    --array-input-hover: #00ff877d;

    --array-input-text-hover: var(--text-bright);
    --array-input-button: var(--focus);
    --array-input-button-x: rgba(255, 0, 0, 0.42);
    --bullchat-theme: #fdd600;
    /*--array-input*/
}


/*}*/
.array-input button[name='down'],
.array-input button[name='up'] {

    border: 1px solid #0000ff;
    /*${width}*/
    padding: 0px;
    background: var(--array-input-button);
    color: white;
    margin: 2px;
    border-radius: 3px;
}

.array-input {
    background: var(--border);

}

.array-input:hover {
    /*animation: up-bump 0.4s ease;*/
    border: solid #959595 1px;
    border-radius: 2px;

    /*padding-top: 2px;*/
}

.array-input button[name='delete'] {

    border: 1px solid #ff0000;
    /*${width}*/
    padding: 0px;
    background: rgba(255, 0, 0, 0.42);
    color: white;
    margin: 2px;
    border-radius: 3px;
}



.array-input input {
    background: linear-gradient(
            var(--array-input-bg), var(--array-input-bg) 50%, var(--array-input-hover) 50%, var(--array-input-hover)
    );
    color: var(--array-input-text);
    flex-grow: 2;
    margin: 1px;
    padding: 0px 8px;
    /*margin-left: 4px;*/

    /*linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 33.334%, rgba(255,255,255,1) 33.334%, rgba(255,255,255,1) 66.6667%, rgba(0,0,0,1) 66.6667%, rgba(0,0,0,1) 100%);*/
    background-size: 100% 200%;
    transition: all 0.2s ease;

}

.array-input .black-up {
    background-position: 100% -100%;
    color: var(--array-input-text-hover);

    /*animation: bg-up 0.2s ease;*/
}


.array-input .black-down {
    background-position: 100% 100%;
    color: var(--array-input-text-hover);

    /*animation: bg-up 0.2s ease;*/
}


.array-input:hover input.off-up {
    background-position: 100% 200%;
    /*animation: bg-up 0.2s ease;*/
    color: var(--array-input-text);
    /*border: black 1px;*/
    /*padding-top: 2px;*/
}


.array-input:hover input.off-down {
    background-position: 100% 0%;
    /*animation: bg-up 0.2s ease;*/
    color: var(--array-input-text);
    /*border: black 1px;*/
    /*padding-top: 2px;*/
}


.array-input:hover input {
    background-position: 100% 100%;
    /*animation: bg-up 0.2s ease;*/
    color: var(--array-input-text-hover);
    /*border: black 1px;*/
    /*padding-top: 2px;*/
}


/*.array-input button {*/
/*    border: black 1px;*/
/*    border-radius: 2px;*/
/*    !*padding-top: 2px;*!*/
/*}*/


/*https://css-tricks.com/pop-hovers/*/

@keyframes bg-up {
    0% {
        background-position: 100% 0%;
        color: var(--array-input-text);
        /*padding-top: 1px;*/
    }
    /*50% { padding-top: 2px; }*/
    100% {
        color: var(--array-input-text-hover);
        background-position: 100% 100%;
    }
}


@keyframes bg-down {
    0% {
        background-position: 100% 0%;
        color: var(--array-input-text);
        /*padding-top: 1px;*/
    }
    /*50% { padding-top: 2px; }*/
    100% {
        color: var(--array-input-text-hover);
        background-position: 100% -100%;
    }
}

@keyframes bg-out-up {
    0% {
        color: var(--array-input-text-hover);
        background-position: 100% 100%;
        /*padding-top: 1px;*/
    }
    /*50% { padding-top: 2px; }*/
    100% {
        color: var(--array-input-text);
        background-position: 100% 200%;
    }
}


@keyframes bg-out-down {
    0% {
        color: var(--array-input-text-hover);
        background-position: 100% 100%;
        /*padding-top: 1px;*/
    }
    100% {
        color: var(--array-input-text);
        background-position: 100% 0%;
    }
}


@keyframes down-bump {
    0% {
        padding-top: 2em;
    }
    50% {
        padding-top: 2.5em;
    }
    100% {
        padding-top: 2em;
    }
}