@import "../../colors"; @import "../../frameless"; $base-bg: $ui-light-gray; $pass-bg: lighten($ui-aqua, 35%); .input { transition: all .5s ease; margin: .75rem 0; border: 1px solid $active-gray; border-radius: 5px; background-color: $base-bg; padding: 0 1rem; height: 3rem; color: $type-gray; font-size: .875rem; &:focus { transition: all .5s ease; outline: none; border: 1px solid $ui-blue; } &.fail { border: 1px solid $ui-orange; } &.pass { border: 1px solid $active-dark-gray; background-color: $pass-bg; } label { font-weight: 500; } }