@import './utilities'; .formInputWrap { .inputInner { @apply flex items-center relative; .icon { @apply absolute flex justify-center items-center; content: ""; left: 1.6rem; margin-right: 1.6rem; svg path { fill: currentColor; } } .icon + input { padding-left: 4.8rem; } input { @apply block w-full transition-all duration-200 bg-white; border-radius: .8rem; padding: 1.6rem; border: 1px solid var(--border-line); &:hover, &:focus, &:active { outline: none; border: 1px solid var(--primary); @apply shadow-md; } &::placeholder { @apply text-label; } } &.preserve { @apply flex-row-reverse; .icon { left: unset; right: 1.6rem; margin-left: 1.6rem; margin-right: 0; svg path { fill: var(--text-label); } } .icon + input { padding-left: 1.6rem; padding-right: 4.8rem; } } &.success { .icon { svg path { fill: var(--primary); } } } &.error { .icon { svg path { fill: var(--negative); } } input { border-color: var(--negative) !important; } } } .errorMessage { @apply caption; color: var(--negative); margin-top: 0.4rem; } &.custom { @apply shape-common; input { border: none; background: var(--background-gray); &:hover, &:focus, &:active { @apply shadow-md; border: none; } } } &.bgTransparent { input { background: rgb(227, 242, 233, 0.3); color: var(--white); &::placeholder { color: var(--white); } } } }