.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; } .LP-Input__Message{ font-family: $-primary-sans-serif-font; font-style: italic; font-size: 13px; padding: 3px; position: relative; top: -$-margin-bottom; } &--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; } } }