remix-nlux/packages/css/themes/src/common/components/Composer.css

Remix IDE NLUX integration. Remix IDE is the leading IDE for building and deploying smart contracts on Ethereum. NLUX is a JavaScript and React library for building conversational AI experiences.

.nlux-comp-composer {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    justify-content: center;
    background-color: transparent;
    gap: var(--nlux-prmBx--gap);

    > textarea {
        font-family: var(--nlux-prmInp--ftFm), sans-serif;
        font-size: var(--nlux-prmInp--ftSz);
        font-weight: 400;

        line-height: 1;
        flex: 1;
        box-sizing: border-box;
        height: 100%;
        max-height: var(--nlux-prmInp-mxhg); /* Set maximum height the textarea can expand to */
        padding: var(--nlux-chtr--pdng);
        resize: none;
        cursor: pointer;
        color: var(--nlux-prmInp--txtClr);

        border-width: var(--nlux-prmInp--brdrWd);

        border-style: solid;
        border-color: var(--nlux-prmInp--brdClr);
        border-radius: var(--nlux-prmInp--brdrRd);
        outline: none;

        background-color: var(--nlux-prmInp--bgClr);
        field-sizing: content;

        &:focus {
            outline: var(--nlux-prmInp-fcs-otln--clr) solid var(--nlux-prmInp-fcs-otln--wd);
        }

        &:disabled,
        &:disabled:hover {
            cursor: auto;
            color: var(--nlux-prmInp-dslb--txtClr);
            border-color: var(--nlux-prmInp-dslb--brdClr);
            background-color: var(--nlux-prmInp-dslb--bgClr);
        }

        &:focus,
        &:hover {
            color: var(--nlux-prmInp-actv--txtClr);
            border-color: var(--nlux-prmInp-actv--brdClr);
            background-color: var(--nlux-prmInp-actv--bgClr);
        }

        &::placeholder {
            color: var(--nlux-prmInp-plcHldr--txtClr);
        }
    }

    > button {
        display: flex;
        align-items: center;

        justify-content: center;
        width: var(--nlux-sbmBt--wd);
        cursor: pointer;
        color: var(--nlux-sbmBt--txtClr);
        border-width: var(--nlux-sbmBt--brdrWd);
        border-style: solid;
        border-color: var(--nlux-sbmBt--brdClr);
        border-radius: var(--nlux-sbmBt--brdrRd);
        background-color: var(--nlux-sbmBt--bgClr);

        &:focus,
        &:hover {
            color: var(--nlux-sbmBt-actv--txtClr);
            border-color: var(--nlux-sbmBt-actv--brdClr);
            background-color: var(--nlux-sbmBt-actv--bgClr);
        }

        &:focus {
            outline: var(--nlux-sbmBt-fcs-otln--clr) solid var(--nlux-sbmBt-fcs-otln--wd);
        }

        > .nlux-comp-sendIcon {
            width: 100%;
            max-width: 24px;

            > .nlux-comp-sendIcon-container {
                display: inline-block;
                width: 100%;
                background-color: currentColor;
                background-repeat: no-repeat;
                background-size: contain;
                mask: var(--nlux-send-icon);
                aspect-ratio: 1;
            }
        }

        > .nlux-comp-cancelIcon {
            width: 100%;
            max-width: 24px;

            > .nlux-comp-cancelIcon-container {
                display: inline-block;
                width: 100%;
                background-color: currentColor;
                background-repeat: no-repeat;
                background-size: contain;
                mask: var(--nlux-cancel-icon);
                aspect-ratio: 1;
            }
        }

        > .nlux-comp-messageLoader {
            display: none;
        }
    }

    > button:disabled {
        cursor: not-allowed;
        color: var(--nlux-sbmBt-dslb--txtClr);
        border-color: var(--nlux-sbmBt-dslb--brdClr);
        background-color: var(--nlux-sbmBt-dslb--bgClr);
    }
}

.nlux-comp-composer.nlux-composer--typing {
    button > .nlux-comp-sendIcon {
        display: inline-block;
    }

    button > .nlux-comp-messageLoader {
        display: none;
    }
}

.nlux-comp-composer.nlux-composer--submitting,
.nlux-comp-composer.nlux-composer--waiting {
    button > .nlux-comp-sendIcon {
        display: none;
    }

    button > .nlux-comp-messageLoader {
        display: inline-block;
    }
}