{"version":3,"sources":["file:///Users/jakubfreisler/Projects/vuestorefront/sfui2/packages/sfui/frameworks/sass/components/VsfInput.scss"],"names":[],"mappings":"AAII,kBAAA,iBAAA,CAAA,eAAA,CAAA,mBAAA,CAAA,iBAAA,CAIA,0BAAA,iBAAA,CAAA,mBAAA,CAAA,0GAAA,CAAA,wGAAA,CAAA,qBAAA,CAAA,mBAAA,CAAA,uDAAA,CAAA,kBAAA,CAAA,sDAAA,CAAA,qBAAA,CAAA,6CAAA,CAAA,YAAA,CAAA,kBAAA,CAAA,iEAAA,wFAAA,CAAA,uCAAA,0GAAA,CAAA,wGAAA,CAAA,mBAAA,CAAA,qDAAA,CAAA,mBAAA,CAAA,wCAAA,gCAAA,mBAAA,CAAA,qDAAA,CAAA,CAAA,iCAAA,0GAAA,CAAA,wGAAA,CAAA,mBAAA,CAAA,qDAAA,CAAA,wFAAA,CAAA,mBAAA,CAIA,mBAAA,kBAAA,CAIA,sCAJA,mBAAA,CAAA,6CAIA,CAIA,kBAAA,mBAAA,CAAA,eAAA,CAAA,0CAAA,CAAA,cAAA,CAAA,kBAAA,CAAA,uBAAA,CAAA,kBAAA,CAAA,UAAA,CAIA,2BAAA,YAAA,CAAA,6BAAA,CAIA,kDAAA,mBAAA,CAAA,6CAAA,CAAA,gBAAA,CAAA,gBAAA,CAAA,kBAAA,CAIA,0BAAA,2CAAA,CAAA,eAAA,CAAA,kBAAA,CAIA,oDAJA,mBAAA,CAAA,iBAAA,CAAA,mBAIA,CAAA,0BAAA,6CAAA,CAAA,eAAA,CAAA,iBAAA,CAAA,iCAAA,gBAAA,CAAA,yBAAA,CAKE,mCAAA,mBAAA,CAAA,2CAAA,CAAA,eAAA,CAMA,8CAAA,oBAAA,CAQA,oHAAA,iBAAA,CAAA,mBAAA,CAMA,8CAAA,mBAAA,CAIA,sCAAA,cAAA,CAAA,kBAAA,CAMA,8CAAA,0GAAA,CAAA,wGAAA,CAAA,mBAAA,CAAA,qDAAA,CAAA,wFAAA,CAKF,qBAAA,kBAAA,CAGE,+CAAA,0BAAA,CAAA,wCAAA,qDAAA,mBAAA,CAAA,uDAAA,CAAA,CAAA,sDAAA,0GAAA,CAAA,wGAAA,CAAA,mBAAA,CAAA,uDAAA,CAAA,wFAAA,CAIA,uCAAA,eAAA,CAAA,kBAAA,CAIA,uCAAA,wBAAA,CAAA,kBAAA,CAQA,2HAAA,eAAA,CAMA,+CAAA,0BAAA,CAAA,4DAAA,0GAAA,CAAA,wGAAA,CAAA,mBAAA,CAAA,uDAAA,CAAA,wFAAA,CAAA,wCAAA,qDAAA,mBAAA,CAAA,uDAAA,CAAA,CAAA,sDAAA,0GAAA,CAAA,wGAAA,CAAA,mBAAA,CAAA,uDAAA,CAAA,wFAAA,CAKA,gFAAA,mBAAA,CAAA,6CAAA,CAIA,uCAAA,wBAAA","file":"VsfInput.css","sourcesContent":[".vsf-input {\n$self: &;\n\n  &__label {\n    @apply relative font-medium text-sm;\n  }\n\n  &__input-wrapper {\n    @apply flex items-center ring-1 ring-gray-200 ring-inset rounded-md text-gray-500 rounded-md py-2 px-4 bg-white hover:ring-primary-700 focus-within:caret-primary-700 active:caret-primary-700 active:ring-primary-700 active:ring-2 focus-within:ring-primary-700 focus-within:ring-2;\n  }\n\n  &__prefix {\n    @apply text-gray-500 mr-2;\n  }\n\n  &__suffix {\n    @apply text-gray-500;\n  }\n\n  &__field {\n    @apply appearance-none outline-none w-full text-base text-gray-700;\n  }\n\n  &__bottom-wrapper {\n    @apply flex justify-between;\n  }\n\n  &__help-text, &__character-limit {\n    @apply text-xs text-gray-500 mt-0.5;\n  }\n\n  &__error-message {\n    @apply text-sm text-negative-700 font-medium mt-0.5;\n  }\n\n  &__required-text {\n    @apply mt-1 text-sm font-normal text-gray-500 before:content-['*'];\n  }\n\n  &__character-limit {\n    &--above {\n      @apply text-negative-700 font-medium;\n    }\n  }\n\n  &--size-sm {\n    #{$self}__input-wrapper {\n      @apply py-1.5 px-4;\n    }\n\n    #{$self}__field {\n      @apply text-sm;\n    }\n\n    #{$self}__suffix,  #{$self}__prefix {\n      @apply text-sm;\n    }\n  }\n\n  &--size-lg {\n    #{$self}__input-wrapper {\n      @apply py-3 px-4;\n    }\n\n    #{$self}__field {\n      @apply text-base;\n    }\n  }\n\n  &--invalid {\n    #{$self}__input-wrapper {\n      @apply ring-2 ring-negative-700;\n    }\n  }\n\n  &--disabled {\n    @apply cursor-not-allowed;\n\n    #{$self}__input-wrapper {\n      @apply bg-gray-100/50 hover:ring-gray-200 active:ring-gray-200 active:ring-gray-200 active:ring-1;\n    }\n\n    #{$self}__label {\n      @apply text-gray-500/50 cursor-not-allowed;\n    }\n\n    #{$self}__field {\n      @apply cursor-not-allowed bg-transparent;\n    }\n\n    #{$self}__help-text {\n      @apply text-gray-500/50;\n    }\n\n    #{$self}__prefix, #{$self}__suffix {\n      @apply text-gray-500/50;\n    }\n  }\n\n  &--readonly {\n    #{$self}__input-wrapper {\n      @apply bg-gray-100/50 hover:ring-gray-200 active:ring-gray-200 active:ring-gray-200 active:ring-1 focus-within:ring-gray-200 focus-within:ring-1;\n    }\n\n    #{$self}__prefix,\n    #{$self}__suffix {\n      @apply text-gray-500;\n    }\n\n    #{$self}__field {\n      @apply bg-transparent;\n    }\n  }\n}"]}