@eviljs/reactx/input-v2/input-theme.css

Awesome React UI Widgets

.Input-cc0a {
    display: flex;
    align-items: center;
    gap: var(--input-gutter, var(--std-gutter4));
    border:
        var(--input-border-size, 2px)
        var(--input-border-style, solid)
        var(--input-border-color, hsl(0deg 0% var(--std-fg-l) / var(--input-border-opacity, .07)))
    ;
    border-radius: var(--input-radius, var(--std-radius1));
    padding: var(--input-padding, var(--std-gutter2));
    transition: all var(--std-duration3);
}
.Input-cc0a:hover:not(:focus-within) {
    border-color: var(--input-border-color--hover, hsl(0deg 0% var(--std-fg-l) / var(--input-border-opacity--hover, .15)));
}
.Input-cc0a:focus-within {
    color: var(--input-accent, var(--std-color-primary-accent));
    border-color: var(--input-border-accent, currentColor);
}

.input-2d2b {
    flex-grow: 1;
    font-size: var(--input-text-size, var(--std-text-body2-size));
    font-weight: var(--input-text-weight,  var(--std-text-weight1));
    color: inherit;
    background-color: transparent;
}
.input-2d2b::placeholder {
    font-weight: var(--input-placeholder-text-weight, var(--std-text-weight));
    opacity: var(--input-placeholder-opacity, 1);
}
.input-2d2b:focus {
    outline: none;
}

/* SecretInput ****************************************************************/

.button-2bdf {
    --button-padding: 0;
    color: var(--std-color-fg2);
}
.button-2bdf:focus,
.button-2bdf:active {
    outline: unset;
}

/* InputLabel *****************************************************************/

.InputLabel-5738 {
    display: inline-block;
}

.label-b082 {
    display: block;
    margin-bottom: var(--std-gutter1);
}
.InputLabel-5738:focus-within .label-b082 {
    color: var(--input-accent, var(--std-color-primary-accent));
}