.LP-Input:has( .LP-Input__Field:disabled){ background-color: red; } .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; } &:disabled{ background-color: transparent; border-bottom: 1px dashed $-secondary-color; cursor: not-allowed; &:active{ margin-bottom: $-margin-bottom; border-radius: 0; } ~.LP-Input__Message{ visibility: hidden; } } } .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; } } }