.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: 18px;
    }
    .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;
        }
    }
}

@media(max-width: $-viewport-small){
    .LP-Input{
        .LP-Input__Label{
            font-family: $-primary-sans-serif-font;
            font-size: 2.5vw;
        }
    }
}

@media(max-width: $-viewport-extra-small){
    .LP-Input{
        .LP-Input__Label{
            font-family: $-primary-sans-serif-font;
            font-size: 18px;
        }
    }
}