template/src/main/css/snippets/forms.css

:root {
    /* Colors taken from https://isabelcastillo.com/error-info-messages-css */
    --fwd-invalid-color: #d8000c;
    --fwd-valid-color: #4f8a10;

    --pico-form-element-invalid-border-color: var(--fwd-invalid-color) !important;
    --pico-form-element-valid-border-color: var(--fwd-valid-color) !important;
}


/* Status card */
.status-card {
    font-weight: bold;
    position: relative;
}

.status-card output {
    display: block;
    margin-right: var(--pico-block-spacing-horizontal);
}

.status-card .close {
    position: absolute;
    right: var(--pico-block-spacing-horizontal);
    top: calc(50% - .5rem);

    width: 1rem;
    height: 1rem;

    background-image: var(--pico-icon-close);
    background-position: center;
    background-size: auto 1rem;
    background-repeat: no-repeat;

    opacity: .5;
    transition: opacity var(--pico-transition);
}

.status-card .close:is([aria-current], :hover, :active, :focus) {
    opacity: 1
}

.status-card.error {
    /* Colors taken from https://isabelcastillo.com/error-info-messages-css */
    background-color: #ffbaba;
    color: var(--fwd-invalid-color);
}

.status-card.info {
    /* Colors taken from https://isabelcastillo.com/error-info-messages-css */
    background-color: #bde5f8;
    color: #00529b;
}

.status-card.success {
    /* Colors taken from https://isabelcastillo.com/error-info-messages-css */
    background-color: #dff2bf;
    color: var(--fwd-valid-color);
}

.status-card.warning {
    /* Colors taken from https://isabelcastillo.com/error-info-messages-css */
    background-color: #feefb3;
    color: #9f6000;
}


/* Input validation */
label.invalid,
*[data-label-for].invalid,
input.invalid,
*[data-hint-for].invalid {
    color: var(--fwd-invalid-color) !important;
}

input.invalid {
    border-color: var(--fwd-invalid-color) !important;
}

label.valid,
*[data-label-for].valid,
input.valid,
*[data-hint-for].valid {
    color: var(--fwd-valid-color) !important;
}

input.valid {
    border-color: var(--fwd-valid-color) !important;
}


/* Enable hint-like styling on any element */
.input-hint {
    display: block;

    margin-top: calc(var(--pico-spacing) * -.75);
}


/* Custom components */
.inline-button {
    display: inline-block;
    width: unset;
    margin: 0;
    padding: 0.3em;
}