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;

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

        &:focus, &:active, &:invalid{
            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;
        }
    }
}