@import '../../less/grid';

.bank-account {
    .text-input {
        &.routing-number,
        &.account-number {
            >div {
                &:after {
                    content: '';
                    position: absolute;
                    background-repeat: no-repeat;
                    background-size: 100%;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 12px;
                }
            }
        }

        &.routing-number {
            >div {
                &:after {
                    width: 11px;
                    height: 14px;
                    background-image: url('./img/routing.svg');
                }
            }

            &.has-error {
                >div {
                    &:after {
                        background-image: url('./img/routing-error.svg');
                    }
                }
            }
        }

        &.account-number {
            >div {
                &:after {
                    width: 13px;
                    height: 14px;
                    background-image: url('./img/account.svg');
                }
            }

            &.has-error {
                >div {
                    &:after {
                        background-image: url('./img/account-error.svg');
                    }
                }
            }
        }
    }
}
