lostplaces-frontend/components/01_Atoms/input/_input.scss

.LP-Input {
    $-margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    margin-bottom: -$-margin-bottom;
    padding: 10px 0;

    &--tagging {

        .LP-Button {
            height: 53px;
        }

        .LP-Input__Field {
            min-height: 36px;
            height: max-content;
            font-family: $-primary-sans-serif-font;
            font-size: 1em;
            padding: 0;
            padding-left: 8px;
        }
    }

    .LP-Input__Field {
        border: none;
        border-bottom: 1px solid $-grey;
        padding: 8px 0;
        margin-bottom: $-margin-bottom;
        width: 100%;

        &:focus,
        &:active,
        &:invalid,
        &--active {
            margin-bottom: $-margin-bottom - 1px;
            border-bottom: 2px solid $-wine-red;
            background-color: $-almost-white;
            border-radius: 3px 3px 0 0;
            box-shadow: none;
        }

        &[type=submit] {
            background-color: $-light-brown;
            color: $-grey;
            border: none;
            padding: 8px 14px;
            border-radius: 2px;
            font-weight: bold;
            cursor: pointer;

            &:active {
                background-color: $-wine-red;
                color: $-almost-white;
            }

        }
    }

    .LP-Input__Label {
        font-family: $-primary-sans-serif-font;
        font-size: 16px;
        white-space: wrap;
        overflow: hidden;
    }

    .LP-Input__Message {
        font-family: $-primary-sans-serif-font;
        font-style: italic;
        font-size: 13px;
        padding: 3px;
        position: relative;
        top: -$-margin-bottom;
        overflow: hidden;
    }

    &--error {
        .LP-Input__Field {
            margin-bottom: 25px;
            border-bottom: 2px solid $-wine-red;
            margin-bottom: $-margin-bottom - 1px;
        }

        .LP-Input__Message {
            color: $-wine-red;
        }
    }

    &--disabled {

        .LP-Input__Field,
        .LP-Input__Field:disabled {
            background-color: transparent;
            border-bottom: 1px dashed $-grey;
            cursor: not-allowed;

            label+& {
                color: red;
            }

            &:focus,
            &:active {
                margin-bottom: $-margin-bottom;
                border-radius: 0;
            }

            ~.LP-Input__Message {
                visibility: hidden;
            }
        }

        .LP-Input__Label {
            color: $-grey;
        }
    }
}