/* Generic nx control - updated to use nx-theme.css variables */
/* Using  to override Blazor CSS isolation scoped styles */

.nx-input {
    background-color: var(--nx-tertiary-bg) ;
    color: var(--nx-primary-fg) ;
    position: relative ;
    min-width: 150px ;
    border-radius: var(--nx-border-radius) ;
    display: inline-flex ;
    flex-direction: column ;
    page-break-inside: avoid ;
    padding-right: 3px ;
    padding-left: 3px ;
    box-sizing: border-box ;
    border-style: solid ;
    border-width: var(--nx-border-width) ;
    border-color: var(--nx-border-color) ;
    margin: var(--nx-margin) ;
    width: 200px ; /* default width */
    font-family: var(--nx-font) ;
}

    .nx-input:focus-within {
        border-color: var(--nx-highlight-bg) ;
    }

    .nx-input.readonly {
        background-color: inherit ;
        color: var(--nx-muted-fg);
    }

    /* scoped / namespaced child classes for safety */
    .nx-input .nx-input-content {
        display: flex ;
        align-items: center ;
        gap: var(--nx-space-small) ;
        min-width: 0 ;
    }

    .nx-input input {
        display: block ;
        padding: var(--nx-space-small) ;
        margin: 0px ;
        font-size: inherit ;
        font-family: inherit ;
        background-color: transparent ;
        color: inherit ;
        resize: none ;
        outline: 0 ;
        height: 100% ;
        border-style: none ;
        min-height: 25px ;
        flex: 1 1 auto ;
        min-width: 0 ;
        width: 100% ;
        box-sizing: border-box ;
    }

    /* Textarea: auto-resize, one-line minimum */
    .nx-input textarea {
        display: block ;
        padding: var(--nx-space-small) ;
        margin: 0px ;
        font-size: inherit ;
        font-family: inherit ;
        background-color: transparent ;
        color: inherit ;
        resize: none ;
        outline: 0 ;
        border-style: none ;
        min-height: 25px ;
        height: auto ;
        flex: 1 1 auto ;
        min-width: 0 ;
        width: 100% ;
        box-sizing: border-box ;
        overflow: hidden ;
        transition: height 120ms ease ;
    }

    .nx-input label {
        display: block;
        font-size: small;
        flex: 1;
        padding: 0.2rem;
        color: var(--nx-primary-fg);
        text-align: left;
    }

    .nx-input input::placeholder,
    .nx-input textarea::placeholder {
        opacity: 0.5 ;
        font-style: italic ;
        color: var(--nx-muted-fg) ;
    }

    .nx-input.required {
        border-left-style: solid ;
        border-left-width: 3px ;
        border-left-color: var(--nx-negative-fg) ;
    }
/*
    .nx-input .nx-input-dropdown {
        position: absolute ;
        top: 100% ;
        left: 0 ;
        right: 0 ;
        max-height: 200px ;
        overflow-y: auto ;
        background-color: var(--nx-tertiary-bg) ;
        border-radius: var(--nx-border-radius) ;
        z-index: 1000 ;
        box-shadow: var(--nx-box-shadow) ;
        padding: var(--nx-space-small) ;
        border: var(--nx-border-width) solid var(--nx-border-color) ;
    }

        .nx-input .nx-input-dropdown li {
            padding: var(--nx-space-small) var(--nx-space) ;
            cursor: pointer ;
            list-style: none ;
       
        }

        .nx-input .nx-input-dropdown .highlighted {
            background-color: var(--nx-highlight-bg) ;
            font-weight: bold ;
        }

        .nx-input .nx-input-dropdown li:hover {
            background-color: var(--nx-highlight-bg) ;
           
        }

        .nx-input .nx-input-dropdown .nx-item-main {
        }

        .nx-input .nx-input-dropdown .nx-item-caption {
            font-size: 0.8rem ;
            font-style: italic ;
            padding-left: var(--nx-space-small) ;
            padding-right: var(--nx-space-small) ;
            font-weight: normal ;
            opacity: 0.7 ;
            color: var(--nx-muted-fg) ;
        }
*/