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 $-secondary-color;
        padding: 8px;
        margin-bottom: $-margin-bottom;

        &:focus, &:active{
            margin-bottom: $-margin-bottom - 1px;
            border-bottom: 2px solid $-primary-accent-color;
            background-color: $-secondary-background-color;
            border-radius: 3px 3px 0 0;
        }
    }

    .LP-Input__Label{
        font-family: $-primary-sans-serif-font;
		font-size: 16px;
    }

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

        &:before{
            content: '* ';
        }
    }

    &--error{
        .LP-Input__Field{
            margin-bottom: 25px;
            border-bottom: 2px solid $-primary-accent-color;
            margin-bottom: $-margin-bottom - 1px;
        }

        .LP-Input__Message{
            color: $-primary-accent-color;
        }
	}
	
	&--disabled{
		.LP-Input__Field, .LP-Input__Field:disabled{
			background-color: transparent;
			border-bottom: 1px dashed $-secondary-color;
			cursor: not-allowed;
			
			label + &{
				color: red;
			}

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

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

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