.input-with-inline-label {
    display: flex;
    align-items: center;
    flex-direction: row;
    border-radius: var(--shape-m);
    background-color: var(--fnd-input-color);
    border-color: var(--fnd-input-border-color);
}
.input-with-inline-label > .label {
    font-size: 14px;
    font-weight: 400;
    padding: .375rem 0 .375rem .75rem;
    line-height: 2 !important;
    color: var(--fnd-text-secondary-color);
    text-wrap-mode: nowrap;
}
.input-with-inline-label > .label::after {
    content: "|";
    font-weight: 100;
    margin-left: .75rem;
}
.input-with-inline-label > .input-default {
    background-color: transparent;
}

.input-with-label {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    border-radius: var(--shape-m);
    background-color: var(--fnd-input-color);
    border-color: var(--fnd-input-border-color);
}
.input-with-label > .label {
    font-size: 12px;
    font-weight: 400;
    padding: 8px .75rem 0 .75rem;
    color: var(--fnd-text-secondary-color);
}
.input-with-label > .input-default {
    background-color: transparent;
}

.input-double-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: var(--shape-m);
    width: 100%;
    background-color: var(--fnd-input-color);
    border-color: var(--fnd-input-border-color);
    color: var(--fnd-text-color);
}
.input-double-field > :last-child {
    text-align: end;
}
.input-double-field > .input-default {
    background-color: transparent;
}

fieldset:disabled {
    --fnd-text-color: var(--fnd-text-tertiary-color);
    --fnd-text-secondary-color: var(--fnd-text-tertiary-color);
}
fieldset:disabled :where(.input-with-inline-label, .input-with-label, .input-double-field) {
    background-color: color-mix(in lab, transparent 60%, var(--fnd-input-color));
}