fieldset {
    @include card;
    margin-bottom: 1em;
    padding: 12px;

    legend {
        border-bottom: 0 none;
        color: #696969;
        float: left;
        font-weight: bold;

        ~ * {
            clear: left;
        }
    }

    fieldset {
        box-shadow: none;
        padding: 0;
    }
}

fieldset.rows ol {
    $label-width: 12rem;
    $gap-width: 1rem;

    padding: 0;

    li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        & > * {
            margin: 0 $gap-width 0 0;
        }

        label,
        .label {
            font-weight: bold;

            &:first-child {
                flex-basis: $label-width;
                flex-shrink: 0;
                flex-grow: 0;
                text-align: right;
            }

            &.error {
                order: -1;
                width: 100%;
                padding-left: $label-width + $gap-width;
            }
        }

        div.hint {
            width: 100%;
            margin-top: .25rem;
            padding-left: $label-width + $gap-width;
        }
    }
}